Add fancy web docs (#725)

* Add initial site

* WIP again

* Replace docs with web docs

* Bring back translations

* Update README.md

* remove images

README.md

@@ -67,14 +67,14 @@ I wanted to. And I **really** don't want to.
 
 - [Quickstart](#quickstart)
 - [Install](#install)
-- [Import](docs/import.md)
-- [Configuration](docs/config.md)
-- [Searching history](docs/search.md)
-- [Cloud history sync](docs/sync.md)
-- [History stats](docs/stats.md)
-- [Running your own server](docs/server.md)
-- [Key binding](docs/key-binding.md)
-- [Shell completions](docs/shell-completions.md)
+- [Import](https://atuin.sh/docs/commands/import)
+- [Configuration](https://atuin.sh/docs/config)
+- [Searching history](https://atuin.sh/docs/commands/search)
+- [Cloud history sync](https://atuin.sh/docs/commands/sync)
+- [History stats](https://atuin.sh/docs/commands/stats)
+- [Self host Atuin server](https://atuin.sh/docs/self-hosting)
+- [Key binding](https://atuin.sh/docs/config/key-binding)
+- [Shell completions](https://atuin.sh/docs/commands/shell-completions)
 
 ## Supported Shells
 

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/authors.yml

@@ -0,0 +1,5 @@
+ellie:
+  name: Ellie Huxtable
+  title: Maintainer of Atuin
+  url: https://github.com/ellie
+  image_url: https://github.com/ellie.png

docs/docs/commands/commands.md

@@ -0,0 +1,5 @@
+---
+title: Commands
+---
+
+- [`atuin import`](/docs/commands/import)

docs/docs/commands/import.md

@@ -1,3 +1,8 @@
+---
+title: Import History
+sidebar_position: 2
+---
+
 # `atuin import`
 
 Atuin can import your history from your "old" history file
@@ -24,4 +29,6 @@ This supports both the simple and extended format
 
 # bash
 
-TODO
+```
+atuin import bash
+```

docs/docs/commands/list.md

@@ -1,8 +1,9 @@
-# Listing history
+---
+title: Listing History
+---
+
+# `atuin history list`
 
-```
-atuin history list
-```
 
 | Arg            | Description                                                                   |
 | -------------- | ----------------------------------------------------------------------------- |

docs/docs/commands/search.md

@@ -1,10 +1,11 @@
+---
+title: Searching History
+---
+
 # `atuin search`
 
-```
-atuin search <query>
-```
 
-Atuin search also supports wildcards, with either the `*` or `%` character. By
+Atuin search supports wildcards, with either the `*` or `%` character. By
 default, a prefix search is performed (ie, all queries are automatically
 appended with a wildcard).
 

docs/docs/commands/server.md

@@ -0,0 +1,14 @@
+---
+title: Server
+---
+
+# `atuin server`
+
+Atuin allows you to run your own sync server, in case you don't want to use the
+one I host :)
+
+There's currently only one subcommand, `atuin server start` which will start the
+Atuin http sync server
+
+See the [self hosting docs](/docs/self-host) for more
+

docs/docs/self-hosting/self-hosting.md

@@ -0,0 +1,41 @@
+---
+title: Self Hosting
+---
+
+While we offer a public sync server, and cannot view your data (as it is encrypted), you may still wish to self host your own Atuin sync server.
+
+The requirements to do so are pretty minimal! You need to be able to run a binary or docker container, and have a PostgreSQL database setup.
+
+## Configuration
+
+The config for the server is kept separate from the config for the client, even
+though they are the same binary. Server config can be found at
+`~/.config/atuin/server.toml`.
+
+It looks something like this:
+
+```toml
+host = "0.0.0.0"
+port = 8888
+open_registration = true
+db_uri="postgres://user:password@hostname/database"
+```
+
+Alternatively, configuration can also be provided with environment variables.
+
+```sh
+ATUIN_HOST="0.0.0.0"
+ATUIN_PORT=8888
+ATUIN_OPEN_REGISTRATION=true
+ATUIN_DB_URI="postgres://user:password@hostname/database"
+```
+
+
+| Parameter           | Description                                                                   |
+| ------------------- | ----------------------------------------------------------------------------- |
+| `host`              | The host to listen on (default: 127.0.0.1)                                    |
+| `port`              | The port to listen on (default: 8888)                                         |
+| `open_registration` | If `true`, accept new user registrations (default: false)                     |
+| `db_uri`            | A valid PostgreSQL URI, for saving history (default: false)                   |
+| `path`              | A path to prepend to all routes of the server (default: false)                |
+

docs/docs/setup/setup.md

@@ -0,0 +1,215 @@
+---
+title: Getting Started
+sidebar_position: 1
+---
+
+Atuin replaces your existing shell history with a SQLite database, and records
+additional context for your commands. Additionally, it provides optional and
+_fully encrypted_ synchronisation of your history between machines, via an Atuin
+server.  
+
+You may use either the server I host, or host your own! Or just don't use sync
+at all. As all history sync is encrypted, I couldn't access your data even if
+I wanted to. And I **really** don't want to.
+
+## Supported Shells
+
+- zsh
+- bash
+- fish
+ 
+## Community
+
+Atuin has a community Discord, available [here](https://discord.gg/Fq8bJSKPHh)! Please do come and say hi 😊
+
+# Quickstart
+  
+This will sign you up for the default sync server, hosted by me. Everything is end-to-end encrypted, so your secrets are safe!
+  
+Read more below for offline-only usage, or for hosting your own server.
+
+```
+bash <(curl https://raw.githubusercontent.com/ellie/atuin/main/install.sh)
+
+atuin register -u <USERNAME> -e <EMAIL> -p <PASSWORD>
+atuin import auto
+atuin sync
+```
+
+Then restart your shell!
+  
+### Opt-in to activity graph
+Alongside the hosted Atuin server, there is also a service which generates activity graphs for your shell history! These are inspired by the GitHub graph.
+  
+For example, here is mine:
+  
+![Activity Graph Example](/img/activity-graph-example.png)
+
+If you wish to get your own, after signing up for the sync server, run this
+  
+```
+curl https://api.atuin.sh/enable -d $(cat ~/.local/share/atuin/session)
+```
+  
+The response includes the URL to your graph. Feel free to share and/or embed this URL, the token is _not_ a secret, and simply prevents user enumeration. 
+  
+## Offline only (no sync)
+  
+```
+bash <(curl https://raw.githubusercontent.com/ellie/atuin/main/install.sh)
+            
+atuin import auto
+```
+
+Then restart your shell!
+
+## Install
+
+### Script (recommended)
+
+The install script will help you through the setup, ensuring your shell is
+properly configured. It will also use one of the below methods, preferring the
+system package manager where possible (pacman, homebrew, etc etc).
+
+```
+# do not run this as root, root will be asked for if required
+bash <(curl https://raw.githubusercontent.com/ellie/atuin/main/install.sh)
+```
+
+And then follow [the shell setup](#shell-plugin)
+
+### With cargo
+
+It's best to use [rustup](https://rustup.rs/) to get setup with a Rust
+toolchain, then you can run:
+
+```
+cargo install atuin
+```
+  
+And then follow [the shell setup](#shell-plugin)
+
+### Homebrew
+
+```
+brew install atuin
+```
+  
+And then follow [the shell setup](#shell-plugin)
+  
+### MacPorts
+
+Atuin is also available in [MacPorts](https://ports.macports.org/port/atuin/)  
+  
+```
+sudo port install atuin
+```
+  
+And then follow [the shell setup](#shell-plugin)
+
+### Nix
+
+This repository is a flake, and can be installed using `nix profile`:
+
+```
+nix profile install "github:ellie/atuin"
+```
+
+Atuin is also available in [nixpkgs](https://github.com/NixOS/nixpkgs):
+
+```
+nix-env -f '<nixpkgs>' -iA atuin
+```
+
+And then follow [the shell setup](#shell-plugin)
+### Pacman
+
+Atuin is available in the Arch Linux [community repository](https://archlinux.org/packages/community/x86_64/atuin/):
+
+```
+pacman -S atuin
+```
+  
+And then follow [the shell setup](#shell-plugin)
+
+### Termux
+
+Atuin is available in the Termux package repository:
+
+```
+pkg install atuin
+```
+  
+And then follow [the shell setup](#shell-plugin)
+
+### From source
+
+```
+git clone https://github.com/ellie/atuin.git
+cd atuin
+cargo install --path .
+```
+  
+And then follow [the shell setup](#shell-plugin)
+
+## Shell plugin
+
+Once the binary is installed, the shell plugin requires installing. If you use
+the install script, this should all be done for you! After installing, remember to restart your shell.
+
+### zsh
+
+```
+echo 'eval "$(atuin init zsh)"' >> ~/.zshrc
+```
+
+#### Zinit
+
+```sh
+zinit load ellie/atuin
+```
+
+#### Antigen  
+  
+```sh  
+antigen bundle ellie/atuin@main
+```
+
+### bash
+
+We need to setup some hooks, so first install bash-preexec:
+
+```
+curl https://raw.githubusercontent.com/rcaloras/bash-preexec/master/bash-preexec.sh -o ~/.bash-preexec.sh
+echo '[[ -f ~/.bash-preexec.sh ]] && source ~/.bash-preexec.sh' >> ~/.bashrc
+```
+
+Then setup Atuin
+
+```
+echo 'eval "$(atuin init bash)"' >> ~/.bashrc
+```
+
+### fish
+
+Add
+
+```
+atuin init fish | source
+```
+
+to your `is-interactive` block in your `~/.config/fish/config.fish` file
+  
+### Fig
+
+Install `atuin` shell plugin in zsh, bash, or fish with [Fig](https://fig.io) in one click. 
+
+<a href="https://fig.io/plugins/other/atuin" target="_blank"><img src="https://fig.io/badges/install-with-fig.svg" /></a>
+
+## ...what's with the name?
+
+Atuin is named after "The Great A'Tuin", a giant turtle from Terry Pratchett's
+Discworld series of books.
+
+[English]: ./README.md
+[简体中文]: ./docs/zh-CN/README.md

docs/docs/tailwind.config.js

@@ -0,0 +1,14 @@
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false, // disable Tailwind's reset
+  },
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "../docs/**/*.mdx"], // my markdown stuff is in ../docs, not /src
+  darkMode: ['class', '[data-theme="dark"]'], // hooks into docusaurus' dark mode settigns
+
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

docs/docusaurus.config.js

@@ -0,0 +1,133 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'Atuin',
+  tagline: 'Magical shell history 🐢✨',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://atuin.sh',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'ellie', // Usually your GitHub org/user name.
+  projectName: 'atuin', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  plugins: [],
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+        },
+        blog: {
+          showReadingTime: true,
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // Replace with your project's social card
+      image: 'img/docusaurus-social-card.jpg',
+      navbar: {
+        title: '🐢 Atuin',
+        items: [
+          {
+            type: 'doc',
+            docId: 'setup/setup',
+            position: 'left',
+            label: 'Docs',
+          },
+          { to: '/blog', label: 'Blog', position: 'left' },
+          {
+            href: 'https://github.com/ellie/atuin',
+            label: 'GitHub',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Docs',
+            items: [
+              {
+                label: 'Setup',
+                to: '/docs/setup',
+              },
+            ],
+          },
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'Discord',
+                href: 'https://discord.gg/Fq8bJSKPHh'
+              }
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'Blog',
+                to: '/blog',
+              },
+              {
+                label: 'GitHub',
+                href: 'https://github.com/ellie/atuin',
+              },
+              {
+                label: 'Twitter',
+                href: 'https://twitter.com/atuinsh'
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Atuin.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;

docs/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.3.1",
+    "@docusaurus/preset-classic": "2.3.1",
+    "@mdx-js/react": "^1.6.22",
+    "autoprefixer": "^10.4.13",
+    "clsx": "^1.2.1",
+    "postcss": "^8.4.21",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tailwindcss": "^3.2.7"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.3.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}

docs/server.md

@@ -1,81 +0,0 @@
-# `atuin server`
-
-Atuin allows you to run your own sync server, in case you don't want to use the
-one I host :)
-
-There's currently only one subcommand, `atuin server start` which will start the
-Atuin http sync server
-
-```
-USAGE:
-    atuin server start [OPTIONS]
-
-FLAGS:
-    -h, --help       Prints help information
-    -V, --version    Prints version information
-
-OPTIONS:
-        --host <host>
-    -p, --port <port>
-```
-
-## Configuration
-
-The config for the server is kept separate from the config for the client, even
-though they are the same binary. Server config can be found at
-`~/.config/atuin/server.toml`.
-
-It looks something like this:
-
-```toml
-host = "0.0.0.0"
-port = 8888
-open_registration = true
-db_uri="postgres://user:password@hostname/database"
-```
-
-Alternatively, configuration can also be provided with environment variables.
-
-```sh
-ATUIN_HOST="0.0.0.0"
-ATUIN_PORT=8888
-ATUIN_OPEN_REGISTRATION=true
-ATUIN_DB_URI="postgres://user:password@hostname/database"
-```
-
-### host
-
-The host address the atuin server should listen on.
-
-Defaults to `127.0.0.1`.
-
-### port
-
-The port the atuin server should listen on.
-
-Defaults to `8888`.
-
-### open_registration
-
-If `true`, atuin will accept new user registrations.
-Set this to `false` after making your own account if you don't want others to be
-able to use your server.
-
-Defaults to `false`.
-
-### db_uri
-
-A valid postgres URI, where the user and history data will be saved to.
-
-### path
-
-A path to prepend to all the routes of the server. Any empty string means that nothing will be prepended.
-
-Defaults to `""`
-
-## Container deployment instructions
-
-You can deploy you own atuin server in a container:
-
-* See [docker](docker.md) for a sample docker configuration.
-* See [k8s](k8s.md) for a sample kubernetes configuration.

docs/sidebars.js

@@ -0,0 +1,33 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

docs/src/components/HomepageFeatures/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: 'History sync',
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    description: (
+      <>
+        <ul>
+          <li>Sync your shell history to all of your machines, wherever they are</li>
+          <li>End-to-end encrypted - nobody can see your data but you</li>
+          <li>Securely backed up - never lose a command again</li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: 'Find it fast',
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    description: (
+      <>
+        <ul>
+          <li>Speedy terminal search UI</li>
+          <li>Configurable search method - fuzzy, prefix, etc</li>
+          <li>Easily search and filter by session, directory, or machine</li>
+          <li>Powerful command line search for integration with other tools</li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: 'All the data',
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    description: (
+      <>
+        <ul>
+          <li>History stored in a SQLite DB, making stats and analysis easy</li>
+          <li>Log exit code, directory, hostname, session, command duration, etc</li>
+          <li>Import old history from a number of shells or history tools</li>
+        </ul>
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className={"padding-horiz--md", styles.whatisfeature}>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className={"container"}>
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

docs/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,17 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.whatisfeature {
+  background-color: var(--ifm-hero-background-color);
+  padding: 2rem;
+}
+

docs/src/css/custom.css

@@ -0,0 +1,35 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+

docs/src/pages/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx('hero', styles.heroBanner)}>
+      <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐢</text></svg>" />
+
+      <div className="container">
+        <h1 className="hero__title">Making your shell <b className={styles.magical}>magical</b></h1>
+        <p className="hero__subtitle">Sync, search and backup shell history with Atuin</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--primary button--lg"
+            to="/docs/setup">
+            Get Started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Magical Shell History`}>
+      <HomepageHeader />
+      <main>
+        <section className={styles.whatis}>
+          <div className="container">
+            <center><h1>What is <b>Atuin</b>?</h1></center>
+
+            <HomepageFeatures />
+          </div>
+        </section>
+      </main>
+    </Layout >
+  );
+}

docs/src/pages/index.module.css

@@ -0,0 +1,50 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroBanner h1 {
+  font-size: 3rem;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.magical{
+  background-image: linear-gradient(90deg, rgb(79, 30, 218) 0%,rgb(104, 100, 218) 33%,rgb(35, 219, 162) 100%);
+  background-clip: text;
+
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent; 
+  -moz-text-fill-color: transparent;
+}
+
+.whatis {
+  padding: 4rem;
+
+}
+
+.whatis h1 {
+  font-size: 2em;
+}
+
+.whatisfeature {
+  background-color: var(--ifm-hero-background-color);
+}

docs/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.