Using docusaurus for docs

.woodpecker.yml

@@ -4,10 +4,20 @@ steps:
         commands:
             - $HOME/.bun/bin/bun install
             - $HOME/.bun/bin/bun astro check
-    build:
+    build-astro:
         image: fish
         commands:
             - $HOME/.bun/bin/bun astro build --outDir /srv/http/cloudyy
         when:
             branch: main
             event: ['push', 'deployment']
+    build-docs:
+        image: fish
+        commands:
+            - cd docs/
+            - $HOME/.bun/bin/bun install
+            - $HOME/.bun/bin/bun run build
+            - cp build/* /srv/http/cloudyy/docs
+        when:
+            branch: main
+            event: ['push', 'deployment']

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](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/docs/Twineo/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Twineo",
+    "position": 1,
+    "link": {
+      "type": "generated-index"
+    }
+  }
+  

docs/docs/Twineo/v0.3.2/Hosting/docker.md

@@ -0,0 +1,29 @@
+---
+title: 'Docker'
+---
+
+Docker makes even easier to host Twineo. You can use a [prebuilt image](https://codeberg.org/CloudyyUw/-/packages/container/twineo/latest) for amd64 and arm64 or [build your own](https://codeberg.org/CloudyyUw/twineo/src/branch/main/Dockerfile).
+
+## Docker CLI:
+
+```bash
+docker run -p 3000:3000 -e INSTANCE_URL='http://localhost:3000' -d codeberg.org/cloudyyuw/twineo:latest
+```
+
+## docker-compose:
+
+```yaml title="docker-compose.yaml"
+version: '3'
+services:
+    twineo:
+        image: codeberg.org/cloudyyuw/twineo:latest
+        restart: always
+        ports:
+            - 3000:3000
+        environment:
+            - INSTANCE_URL="http://localhost:3000"
+```
+
+## Environment variables
+
+See [From Source#Environment Variables](/docs/Twineo/v0.3.2/Hosting/from-source#environment-variables).

docs/docs/Twineo/v0.3.2/Hosting/from-source.md

@@ -0,0 +1,74 @@
+---
+title: 'From Source'
+---
+
+To host from source, you can use the script available in `twineo/src/setup_node.ts` to automate most of the process
+
+## Building the UI
+
+Before using the script, you will need to manually build the UI. Go to `twineo/front` and follow these steps:
+
+### Installing the dependencies
+
+```bash
+# Bun (Recommended):
+bun i
+# NPM:
+npm i
+# Yarn:
+yarn
+# Pnpm:
+pnpm i
+```
+
+### Build
+
+```bash
+bun run build
+# or
+npm run build
+# or
+yarn build
+# or
+pnpm build
+```
+
+## Running the setup script
+
+After you are done building the UI, return back to `twineo/`, install the dependencies and run:
+
+```bash
+bun run build:setup-node
+# or
+npm run build:setup-node
+# or
+yarn build:setup-node
+# or
+pnpm build:setup-node
+```
+
+The script will take care of setting up the folder structure and compile all the code.
+
+## Environment variables
+
+```bash
+# This is required for the embeded clips
+INSTANCE_URL=http://localhost:3000
+
+# If you want custom a custom client id or user agent
+# Is recommended to just use the defaults and not change this unless strictly needed
+#CLIENTID=
+#USERAGENT=
+```
+
+## Starting the server
+
+Since the code was written to work with nodejs, we can't use bun this time.
+
+```
+npm run start
+# or
+yarn start
+# or
+pnpm start
+```

docs/docs/Twineo/v0.3.2/intro.md

@@ -0,0 +1,14 @@
+---
+title: Intro
+sidebar_position: 1
+---
+
+:::info[Note]
+The NodeJS version is currently frozen and will not receive updates.
+::::
+
+This version is based on the TypeScript codebase, is considered stable and will be deprecated after the Rust rewrite is complete.
+
+The API will change drastically between this version and `0.3.3` (Rust), so it is not recommended to use it. The UI, however, will continue with the same base and will receive the necessary changes to continue functioning.
+
+After the rewrite, the TypeScript codebase will only be used for the websocket proxy.

docs/docusaurus.config.js

@@ -0,0 +1,82 @@
+// @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: 'Cloudyy - Docs',
+    //tagline: 'Dinosaurs are cool',
+    favicon: 'img/favicon.ico',
+
+    // Set the production url of your site here
+    url: 'https://cloudyy.exozy.me',
+    // Set the /<baseUrl>/ pathname under which your site is served
+    // For GitHub pages deployment, it is often '/<projectName>/'
+    baseUrl: '/docs/',
+
+    // GitHub pages deployment config.
+    // If you aren't using GitHub pages, you don't need these.
+    //organizationName: 'facebook', // Usually your GitHub org/user name.
+    //projectName: 'docusaurus', // Usually your repo name.
+
+    onBrokenLinks: 'warn',
+    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: 'en',
+        locales: ['en'],
+    },
+
+    presets: [
+        [
+            'classic',
+            /** @type {import('@docusaurus/preset-classic').Options} */
+            ({
+                docs: {
+                    sidebarPath: './sidebars.js',
+                    // Please change this to your repo.
+                    // Remove this to remove the "edit this page" links.
+                },
+                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: 'Docs',
+                logo: {
+                    alt: 'docusaurus logo',
+                    src: 'img/logo.svg',
+                },
+                items: [
+                    // {
+                    //     type: 'docSidebar',
+                    //     sidebarId: 'tutorialSidebar',
+                    //     position: 'left',
+                    //     label: 'Tutorial',
+                    // },
+                ],
+            },
+            prism: {
+                additionalLanguages: ['bash'],
+                theme: prismThemes.github,
+                darkTheme: prismThemes.dracula,
+            },
+        }),
+};
+
+export default config;

docs/package.json

@@ -0,0 +1,44 @@
+{
+  "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": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/types": "3.1.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  }
+}

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

docs/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);
+}