refactor: migrate to docusaurus

2023-11-06 20:50:42 +01:00
80 changed files with 9944 additions and 473 deletions
@@ -130,7 +130,6 @@ dist
 yarn.lock
 package-lock.json
 build
 *.sqlite
 *.sqlite-jurnal
@@ -1,142 +1,20 @@
-# ---> VisualStudioCode
+# Dependencies
-.vscode/*
+/node_modules
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 !.vscode/i18n-ally-custom-framework.yml
 *.code-workspace
-# Local History for Visual Studio Code
+# Production
-.history/
+/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
@@ -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 ./
+COPY package.json pnpm-lock.yaml ./
-RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@7.29.3
+RUN npm config set registry $NPM_REGISTRY_URL && npm i -g pnpm@8
-RUN pnpm i
+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
@@ -1,34 +1,41 @@
-# @lfk/documentation
+# Website
-The documentation for the LfK! 'Läufersystem'.
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 Powered by Vuepress.
-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.
 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
 ## Dev Setup 🛠
 > Local dev setup for previewing changes.
 1. Install Dependencies
   ```bash
   yarn
 ```
-2. Start the server
+$ yarn
   ```bash
   yarn dev
 ```
-## Recommended Editor
+### Local Development
-[Visual Studio Code](https://code.visualstudio.com/)
+```
 $ yarn start
 ```
-### Recommended Extensions
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-* will be automatically recommended via ./vscode/extensions.json
+### 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.
@@ -0,0 +1,3 @@
 module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };
@@ -3,4 +3,4 @@ services:
  httpd:
    build: .
    ports:
-      - 8080:80
+      - 12345:80
@@ -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.
@@ -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.
@@ -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.
@@ -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;
@@ -1,8 +1,7 @@
 {
-  "name": "@odit/lfk-docs",
+  "name": "@lfk/docs",
-  "version": "0.0.1",
+  "version": "1.0.0",
-  "description": "The documentation for the LfK! 'Läufersystem'.",
+  "license": "CC-BY-NC-SA-4.0",
  "main": "index.js",
  "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",
+    "docusaurus": "docusaurus",
-    "build": "vuepress build src",
+    "dev": "docusaurus start",
-    "licenses:export": "license-exporter --markdown"
+    "build": "docusaurus build",
-  },
+    "swizzle": "docusaurus swizzle",
-  "license": "CC-BY-NC-SA-4.0",
+    "deploy": "docusaurus deploy",
-  "devDependencies": {
+    "clear": "docusaurus clear",
-    "@odit/license-exporter": "0.0.12",
+    "serve": "docusaurus serve",
-    "vuepress": "1.9.7"
+    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
-    "vuepress-plugin-flexsearch": "0.3.0",
+    "@docusaurus/core": "3.0.0",
-    "vuepress-theme-default-prefers-color-scheme": "2.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": {
+  "devDependencies": {
-    "node": "18.10.0"
+    "@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"
    ]
  }
 }
@@ -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;
@@ -1,15 +0,0 @@
 <template>
  <p class="demo">
    {{ msg }}
  </p>
 </template>
 <script>
  export default {
    data () {
      return {
        msg: 'Hello this is <Foo-Bar>'
      }
    }
  }
 </script>
@@ -1,3 +0,0 @@
 <template>
  <p class="demo">This is another component</p>
 </template>
@@ -1,15 +0,0 @@
 <template>
  <p class="demo">
    {{ msg }}
  </p>
 </template>
 <script>
  export default {
    data() {
      return {
        msg: 'Hello this is <demo-component>'
      }
    }
  }
 </script>
@@ -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'
  ]
 }
@@ -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.
 }
@@ -1,8 +0,0 @@
 /**
 * Custom Styles here.
 *
 * ref：https://v1.vuepress.vuejs.org/config/#index-styl
 */
 .home .hero img
  max-width 450px!important
@@ -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
@@ -0,0 +1,11 @@
 .features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
 }
 .featureSvg {
  height: 200px;
  width: 200px;
 }
@@ -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);
 }
@@ -1,3 +0,0 @@
 # Admins
 TODO:
@@ -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 ❤️
 ---
@@ -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.
@@ -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)
 :::
@@ -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>
  );
 }
@@ -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;
 }
@@ -0,0 +1,7 @@
 ---
 title: Markdown page example
 ---
 # Markdown page example
 You don't need React to write simple standalone pages.