refactor: migrate to docusaurus

.dockerignore

@@ -130,7 +130,6 @@ dist
 
 yarn.lock
 package-lock.json
-build
 
 *.sqlite
 *.sqlite-jurnal

.gitignore

@@ -1,142 +1,20 @@
-# ---> VisualStudioCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/i18n-ally-custom-framework.yml
-*.code-workspace
+# Dependencies
+/node_modules
 
-# Local History for Visual Studio Code
-.history/
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# ---> Node
-# Logs
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-yarn.lock
-package-lock.json
-build
-
-*.sqlite
-*.sqlite-jurnal
-/docs
-lib
-/oss-attribution
-*.tmp
-pnpm-lock.yaml
-.argo/secret.yaml

Dockerfile

@@ -1,14 +1,14 @@
-FROM registry.odit.services/hub/library/node:18.10.0-alpine3.16 AS build
+FROM registry.odit.services/hub/library/node:21.1.0-alpine3.18 AS build
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org
 WORKDIR /app
 
-COPY package.json *.config.cjs *.config.js ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@7.29.3
-RUN pnpm i
+COPY package.json pnpm-lock.yaml ./
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
+RUN pnpm i --frozen-lockfile
 COPY . ./
 RUN pnpm build
 
 # final image
 FROM registry.odit.services/library/nginx-brotli:3.15.130
-COPY --from=build /app/src/.vuepress/dist /usr/share/nginx/html
+COPY --from=build /app/build /usr/share/nginx/html
 COPY ./nginx.conf /etc/nginx/nginx.conf

README.md

@@ -1,34 +1,41 @@
-# @lfk/documentation
+# Website
 
-The documentation for the LfK! 'Läufersystem'.
-Powered by Vuepress.
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
-The main language for the content is German (since our primary target audience is the Lauf für Kaya! Team at a local German school).
+### Installation
 
-## Quickstart 🐳
-> Use this to run the documentation server via docker.
+```
+$ yarn
+```
 
-1. Clone the repo or copy the docker-compose.yml
-2. Cd into the folder containing the docker-compose.yml
-2. Run docker-compose: `docker-compose up -d`
-3. Visit http://127.0.0.1:8080/ to check if the server is running
+### Local Development
 
-## Dev Setup 🛠
-> Local dev setup for previewing changes.
+```
+$ yarn start
+```
 
-1. Install Dependencies
-   ```bash
-   yarn
-   ```
-2. Start the server
-   ```bash
-   yarn dev
-   ```
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-## Recommended Editor
+### Build
 
-[Visual Studio Code](https://code.visualstudio.com/)
+```
+$ yarn build
+```
 
-### Recommended Extensions
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-* will be automatically recommended via ./vscode/extensions.json
+### 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.

babel.config.js

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

docker-compose.yml

@@ -3,4 +3,4 @@ services:
   httpd:
     build: .
     ports:
-      - 8080:80
+      - 12345:80

docs/beamershow/config.md

@@ -2,11 +2,11 @@
 > Wie man die Beamershow konfiguriert
 
 ## Start
-Wenn du die Beamershow öffnest wirst du als erstes nach dem API Endpunkt gefragt - diese entspricht der URL des Läufersystems (z.B.: `https://dev.lauf-fuer-kaya.de`).<br>
+Wenn du die Beamershow öffnest wirst du als erstes nach dem API Endpunkt gefragt - diese entspricht der URL des Läufersystems (z.B.: `https://dev.lauf-fuer-kaya.de`).<br/>
 Als nächstes musst du noch einen Client Token gefragt, den du von deinem Admin bekommst.
 
 Sobald du den Token eingegeben hast kannst du auf den Button "Konfigurieren" klicken und die Beamershow wird gestartet.
 
 ## Konfiguration ändern
-Tippe `cnf` auf einer beliebigen Seite der Beamershow.<br>
+Tippe `cnf` auf einer beliebigen Seite der Beamershow.<br/>
 Du wirst sofort von der Beamershow abbemeldet und kannst so einen neuen API Endpunkt und Client Token angeben.

docs/scanstations/config.md

@@ -5,7 +5,7 @@
 Wenn du die Scanclient Software öffnest wirst du als erstes nach einem API Endpunkt gefragt.
 Hier musst du die URL deines LfK-Backends eintragen (z.B.: `https://dev.lauf-fuer-kaya.de`).
 
-Als nächstes musst du noch einen Client Token gefragt -> <router-link to="../users/scanstations.html">So kommst du an einen Client token</router-link><br>
+Als nächstes musst du noch einen Client Token gefragt -> <router-link to="../users/scanstations.html">So kommst du an einen Client token</router-link><br/>
 Solltest du dich beim API-Endpunkt vertippt haben kannst du hier auch `rst` eingeben, um diesen nochmal zu setzen.
 
 Sobald du den Token eingegeben hast kannst du auf den Button "Konfigurieren" klicken und der Scanclient wird gestartet.

docs/users/runner_import.md

@@ -50,7 +50,7 @@ Toller; Typ; 2A
 ![Excel Screenshot with Middlename](/images/runner_import_excel_no_middlename.png)
 
 ## Import in eine Organisation
-> Wähle diese Variante, wenn du in einer Organisation automatisch Teams anlegen und die Läufer in diese Importieren willst. <br>
+> Wähle diese Variante, wenn du in einer Organisation automatisch Teams anlegen und die Läufer in diese Importieren willst. <br/>
 > Wähle diese Variante, wenn du Läufer direkt in eine Organisation importieren willst.
 
 Wenn in der Datei bei einer Läufer:in kein Team angegeben ist wird sie direkt in die Organisation importiert.

docusaurus.config.js

@@ -0,0 +1,114 @@
+// @ts-check
+// `@type` JSDoc annotations allow editor autocompletion and type checking
+// (when paired with `@ts-check`).
+// There are various equivalent ways to declare your Docusaurus config.
+// See: https://docusaurus.io/docs/api/docusaurus-config
+
+import {themes as prismThemes} from 'prism-react-renderer';
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'LfK! Docs',
+  tagline: 'LfK! Dokumentation',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://your-docusaurus-site.example.com',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internationalization, 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: 'de',
+    locales: ['de'],
+  },
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: './sidebars.js',
+        },
+        blog: {
+          showReadingTime: true,
+        },
+        theme: {
+          customCss: './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: 'LfK! Docs',
+        logo: {
+          alt: 'LfK! Docs Logo',
+          src: 'img/logo.svg',
+        },
+        items: [
+          {
+            type: 'docSidebar',
+            sidebarId: 'tutorialSidebar',
+            position: 'left',
+            label: 'Docs',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Docs',
+            items: [
+              {
+                label: 'Docs',
+                to: '/docs/admins',
+              },
+            ],
+          },
+          {
+            title: 'Legal',
+            items: [
+              {
+                label: 'Imprint',
+                href: 'https://odit.services/imprint/',
+              },
+              {
+                label: 'Privacy',
+                href: 'https://odit.services/privacy/',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'Code',
+                href: 'https://git.odit.services/lfk/',
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} ODIT.Services`,
+      },
+      prism: {
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
+    }),
+};
+
+export default config;

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "@odit/lfk-docs",
-  "version": "0.0.1",
-  "description": "The documentation for the LfK! 'Läufersystem'.",
-  "main": "index.js",
+  "name": "@lfk/docs",
+  "version": "1.0.0",
+  "license": "CC-BY-NC-SA-4.0",
   "author": {
     "name": "ODIT.Services",
     "email": "info@odit.services",
@@ -25,20 +24,39 @@
     "url": "git@git.odit.services:lfk/docs.git"
   },
   "scripts": {
-    "dev": "vuepress dev src",
-    "build": "vuepress build src",
-    "licenses:export": "license-exporter --markdown"
-  },
-  "license": "CC-BY-NC-SA-4.0",
-  "devDependencies": {
-    "@odit/license-exporter": "0.0.12",
-    "vuepress": "1.9.7"
+    "docusaurus": "docusaurus",
+    "dev": "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": {
-    "vuepress-plugin-flexsearch": "0.3.0",
-    "vuepress-theme-default-prefers-color-scheme": "2.0.0"
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@mdx-js/react": "3.0.0",
+    "clsx": "1.2.1",
+    "prism-react-renderer": "2.1.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
   },
-  "volta": {
-    "node": "18.10.0"
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/types": "3.0.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
   }
 }

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'],
+    },
+  ],
+   */
+};
+
+export default sidebars;

src/.vuepress/components/Foo/Bar.vue

@@ -1,15 +0,0 @@
-<template>
-  <p class="demo">
-    {{ msg }}
-  </p>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        msg: 'Hello this is <Foo-Bar>'
-      }
-    }
-  }
-</script>

src/.vuepress/components/OtherComponent.vue

@@ -1,3 +0,0 @@
-<template>
-  <p class="demo">This is another component</p>
-</template>

src/.vuepress/components/demo-component.vue

@@ -1,15 +0,0 @@
-<template>
-  <p class="demo">
-    {{ msg }}
-  </p>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        msg: 'Hello this is <demo-component>'
-      }
-    }
-  }
-</script>

src/.vuepress/config.js

@@ -1,172 +0,0 @@
-const { description } = require('../../package')
-
-module.exports = {
-  locales: {
-    '/': {
-      lang: 'de-DE',
-      title: 'LfK! Dokumentation',
-      description: 'Dokumentation für das Lauf für Kaya! Läufersystem'
-    },
-    '/en/': {
-      lang: 'en-US',
-      title: 'LfK! Documentation',
-      description: 'The official documentation for the LfK! "Läufersystem"'
-    }
-  },
-  head: [
-    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
-    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
-    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
-  ],
-  theme: 'default-prefers-color-scheme',
-  themeConfig: {
-    repo: '',
-    editLinks: false,
-    docsDir: '',
-    editLinkText: '',
-    lastUpdated: false,
-    locales: {
-      '/': {
-        selectText: 'Sprachen',
-        label: 'Deutsch (German)',
-        nav: [
-          {
-            text: 'Für Nutzer',
-            link: '/users/',
-          },
-          {
-            text: 'Für Admins',
-            link: '/admins/'
-          },
-          {
-            text: 'Über den Selfservice',
-            link: '/selfservice/'
-          },
-          {
-            text: 'Scannerstationen',
-            link: '/scanstations/'
-          },
-          {
-            text: 'Beamershow',
-            link: '/beamershow/'
-          },
-          {
-            text: 'Source Code',
-            link: 'https://git.odit.services/lfk'
-          }
-        ],
-        sidebar: {
-          '/users/': [
-            {
-              title: 'Nutzerdokumentation',
-              collapsable: false,
-              children: [
-                '',
-                'accounts',
-                'organizations',
-                'teams',
-                'runners',
-                'runner_import',
-                'donors',
-                'donations',
-                'cards',
-                'sponsoring_contracts',
-                'tracks',
-                'scans',
-                'scanstations'
-              ]
-            }
-          ],
-          '/admins/': [
-            {
-              title: 'Administrative Dokumentation',
-              collapsable: false,
-              children: [
-                '',
-                'quickstart',
-                'users',
-                'usergroups'
-              ]
-            }
-          ],
-          '/selfservice/': [
-            {
-              title: 'Selfservice Dokumentation',
-              collapsable: false,
-              children: [
-                '',
-                'org_selfservice'
-              ]
-            }
-          ],
-          '/scanstations/': [
-            {
-              title: 'Scannerstation Dokumentation',
-              collapsable: false,
-              children: [
-                '',
-                'install',
-                'config',
-                'config_scanners',
-                'hardware'
-              ]
-            }
-          ],
-          '/beamershow/': [
-            {
-              title: 'Beamershow Dokumentation',
-              collapsable: false,
-              children: [
-                '',
-                'config'
-              ]
-            }
-          ],
-        }
-      },
-      '/en/': {
-        selectText: 'Languages',
-        label: 'English',
-        nav: [
-          {
-            text: 'For Users',
-            link: '/en/users/',
-          },
-          {
-            text: 'For Admins',
-            link: '/en/admins/'
-          },
-          {
-            text: 'Source Code',
-            link: 'https://git.odit.services/lfk'
-          }
-        ],
-        sidebar: {
-          '/en/users/': [
-            {
-              title: 'User documentation',
-              collapsable: false,
-              children: [
-                ''
-              ]
-            }
-          ],
-          '/en/admins/': [
-            {
-              title: 'Admin documentation',
-              collapsable: false,
-              children: [
-                ''
-              ]
-            }
-          ],
-        }
-      }
-    }
-  },
-  plugins: [
-    '@vuepress/plugin-back-to-top',
-    '@vuepress/plugin-medium-zoom',
-    'flexsearch'
-  ]
-}

src/.vuepress/enhanceApp.js

@@ -1,14 +0,0 @@
-/**
- * Client app enhancement file.
- *
- * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
- */
-
-export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  // ...apply enhancements for the site.
-}

src/.vuepress/styles/index.styl

@@ -1,8 +0,0 @@
-/**
- * Custom Styles here.
- *
- * ref：https://v1.vuepress.vuejs.org/config/#index-styl
- */
-
-.home .hero img
-  max-width 450px!important

src/.vuepress/styles/palette.styl

@@ -1,10 +0,0 @@
-/**
- * Custom palette here.
- *
- * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
- */
-
-$accentColor = #3eaf7c
-$textColor = #2c3e50
-$borderColor = #eaecef
-$codeBgColor = #282c34

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/css/custom.css

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+/* 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);
+}

src/en/admins/README.md

@@ -1,3 +0,0 @@
-# Admins
-
-TODO:

src/en/index.md

@@ -1,15 +0,0 @@
----
-home: true
-heroImage: /logo.png
-tagline: The documentation for the LfK! "Läufersystem".
-actionText: Quickstart for users →
-actionLink: ./users/
-# features:
-# - title: Feature 1 Title
-#   details: Feature 1 Description
-# - title: Feature 2 Title
-#   details: Feature 2 Description
-# - title: Feature 3 Title
-#   details: Feature 3 Description
-footer: Made by ODIT.Services with ❤️
----

src/en/users/README.md

@@ -1,11 +0,0 @@
-# Introduction
-
-This part of the documentation describes the interaction with the system for normal users.
-If you're interested in installing, configuring or administrating the system take a look at the <router-link to="../admins">admins section</router-link>.
-
-## FAQ
-> A couple of frequently asked questiones.
-
-### Why can't i see the page XY?
-Users can only see pages if they have the right permissions.
-If you can't view a page that you need to, please contact your administrator.

src/index.md

@@ -1,18 +0,0 @@
----
-home: true
-heroImage: /logo.png
-tagline: Die Dokumentation für das LfK! Läufersystem
-actionText: Schnellstart für Nutzer →
-actionLink: /users/
-# features:
-# - title: Feature 1 Title
-#   details: Feature 1 Description
-# - title: Feature 2 Title
-#   details: Feature 2 Description
-# - title: Feature 3 Title
-#   details: Feature 3 Description
----
-::: slot footer
-Made by [ODIT.Services](https://odit.services/?ref=lfk-docs) with ❤️ <br>
-Developed for [Lauf für Kaya](https://lauf-fuer-kaya.de) | [Imprint](https://lauf-fuer-kaya.de/impressum) | [Privacy](https://lauf-fuer-kaya.de/datenschutz)
-:::

src/pages/index.js

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <HomepageHeader />
+    </Layout>
+  );
+}

src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * 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;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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.