docs: setup docusaurus for documentation (#848)

* docs: setup docusaurus for documentation

* docs: setup tailwind content for docusaurus

* chore: ensure tailwindcss is installed so pages deploy works

* docs: add cname to point to docs

* ci: override format checking for pnpm-lock in gen-docs folder

* docs(gen-docs): readme for docusaurus

* chore(gen-docs): remove unnecessary image files

* docs: remove installation instructions (moved to docs)

* ci: rename docusaurus workflows to a more explicit name

* style(gen-docs): custom color for links

* docs: add more doc pages

* style: gradient menu link bg, proper jellyseerr font & footer bg color

* docs: fix proper link to relative pages

* style: tab-items also now uses the proper jellyseerr colors

* style: use prismTheme shadesOfPurple for codeblock/syntax highlighting

* docs: fix broken links

* docs: fix broken links

* docs: fix broken anchors

* chore(gen-docs): local search bar

* style(gen-docs): tab colors

* docs: reverse-proxy documentation

* style(gen-docs): jellyseerr-like cards

* docs: rename baremetal to build from source

* docs: nixpkg version check component

* docs: conditionally render override package derivation block and admonitions

* docs: users section of the documentation

gen-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*

gen-docs/README.md

@@ -0,0 +1,25 @@
+# Jellyseerr Documentation
+
+Jellyseerr docs is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ pnpm
+```
+
+### Local Development
+
+```
+$ pnpm 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
+
+```
+$ pnpm build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.

gen-docs/babel.config.js

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

gen-docs/docusaurus.config.ts

@@ -0,0 +1,115 @@
+import type * as Preset from '@docusaurus/preset-classic';
+import type { Config } from '@docusaurus/types';
+import { themes as prismThemes } from 'prism-react-renderer';
+
+const config: Config = {
+  title: 'Jellyseerr',
+  tagline: 'One Stop Solution for all your media request needs',
+  favicon: 'img/favicon.ico',
+
+  url: 'https://docs.jellyseerr.dev',
+  baseUrl: '/',
+
+  organizationName: 'Fallenbagel',
+  projectName: 'Jellyseerr',
+  deploymentBranch: 'docs',
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          sidebarPath: './sidebars.ts',
+          routeBasePath: '/',
+          path: '../docs',
+          editUrl:
+            'https://github.com/Fallenbagel/jellyseerr/edit/develop/docs/',
+        },
+        blog: false,
+        pages: false,
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
+  themes: [
+    [
+      '@easyops-cn/docusaurus-search-local',
+      /**  @type {import("@easyops-cn/docusaurus-search-local").PluginOptions}  */
+      {
+        hashed: true,
+        indexBlog: false,
+        docsDir: '../docs',
+        docsRouteBasePath: '/',
+        explicitSearchResultPath: true,
+      },
+    ],
+  ],
+
+  themeConfig: {
+    image: 'img/docusaurus-social-card.jpg',
+    colorMode: {
+      defaultMode: 'dark',
+      disableSwitch: true,
+      respectPrefersColorScheme: false,
+    },
+    navbar: {
+      logo: {
+        alt: 'Jellyseerr',
+        src: 'img/logo.svg',
+      },
+      items: [
+        {
+          href: 'https://github.com/Fallenbagel/jellyseerr',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Documentation',
+              to: '/',
+            },
+          ],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Discord',
+              href: 'https://discord.gg/ckbvBtDJgC',
+            },
+            {
+              label: 'Github Discussions',
+              href: 'https://github.com/fallenbagel/jellyseerr/discussions',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Jellyseerr. Built with Docusaurus.`,
+    },
+    prism: {
+      theme: prismThemes.shadesOfPurple,
+      darkTheme: prismThemes.shadesOfPurple,
+      additionalLanguages: ['bash', 'powershell', 'yaml', 'nix', 'nginx'],
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;

gen-docs/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gen-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",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
+    "@easyops-cn/docusaurus-search-local": "^0.44.2",
+    "@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",
+    "tailwindcss": "^3.4.4"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@docusaurus/tsconfig": "3.4.0",
+    "@docusaurus/types": "3.4.0",
+    "typescript": "~5.2.2"
+  },
+  "resolutions": {
+    "prismjs": "PrismJS/prism"
+  },
+  "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"
+  }
+}

gen-docs/sidebars.ts

@@ -0,0 +1,31 @@
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
+
+/**
+ * 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.
+ */
+const sidebars: SidebarsConfig = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  documentationSidebar: [{ 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;

gen-docs/src/components/JellyseerrVersion/index.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+
+export const JellyseerrVersion = () => {
+  const [version, setVersion] = useState<string | null>('0.0.0');
+
+  useEffect(() => {
+    async function fetchVersion() {
+      try {
+        const response = await fetch(
+          'https://raw.githubusercontent.com/Fallenbagel/jellyseerr/main/package.json'
+        );
+
+        const data = await response.json();
+
+        setVersion(data.version);
+        console.log(data.version);
+      } catch (error) {
+        console.error('Failed to fetch version', error);
+        setVersion('Error fetching version');
+      }
+    }
+    fetchVersion();
+  }, []);
+
+  return version;
+};
+
+export const NixpkgVersion = () => {
+  const [version, setVersion] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const url =
+          'https://raw.githubusercontent.com/NixOS/nixpkgs/nixos-unstable/pkgs/servers/jellyseerr/default.nix';
+        const response = await fetch(url);
+        const data = await response.text();
+
+        const versionRegex = /version\s*=\s*"([^"]+)"/;
+        const match = data.match(versionRegex);
+        if (match && match[1]) {
+          setVersion(match[1]);
+        } else {
+          setError('0.0.0');
+        }
+        setLoading(false);
+      } catch (err) {
+        setError(err.message);
+        setLoading(false);
+      }
+    };
+
+    fetchVersion();
+  }, []);
+
+  if (loading) {
+    return 'Loading...';
+  }
+
+  if (error) {
+    return { error };
+  }
+
+  return version;
+};

gen-docs/src/css/custom.css

@@ -0,0 +1,106 @@
+/**
+ * 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-scheme: dark;
+  --ifm-background-color: #151d2c;
+  --ifm-navbar-background-color: #151d2c;
+  --ifm-color-content: #fff;
+  --ifm-color-content-secondary: #888f9b;
+  --ifm-color-primary: var(--ifm-color-content);
+  --ifm-hover-overlay: #374151;
+  --ifm-menu-color-background-active: #793ae8;
+  --ifm-color-primary-dark: #1f2b7f;
+  --ifm-color-primary-darker: #16206b;
+  --ifm-color-primary-darkest: #0d1456;
+  --ifm-color-primary-light: #9066e3;
+  --ifm-color-primary-lighter: #a37ff0;
+  --ifm-color-primary-lightest: #b8a3f9;
+  --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-scheme: dark;
+  --ifm-background-color: #151d2c !important;
+  --ifm-navbar-background-color: #151d2c;
+  --ifm-color-content: #fff;
+  --ifm-color-content-secondary: #888f9b;
+  --ifm-color-primary: var(--ifm-color-content);
+  --ifm-hover-overlay: #374151;
+  /* --ifm-menu-color-background-active: #793ae8; */
+  /* --ifm-menu-color-background-active: linear-gradient(
+    90deg,
+    #793ae8 0%,
+    #ff8c00 100%
+  ); */
+  --ifm-color-primary-dark: #1f2b7f;
+  --ifm-color-primary-darker: #16206b;
+  --ifm-color-primary-darkest: #0d1456;
+  --ifm-color-primary-light: #9066e3;
+  --ifm-color-primary-lighter: #a37ff0;
+  --ifm-color-primary-lightest: #b8a3f9;
+  --ifm-code-font-size: 95%;
+  --search-local-modal-background: #121a29;
+  /* --search-local-highlight-color: var(--ifm-hover-overlay); */
+  --search-local-highlight-color: #6366f1;
+  --search-local-hit-color: #fff;
+  --search-local-hit-background: #2d3748;
+  --search-local-hit-active-color: var(--ifm-color-primary);
+  --ifm-input-border-color: #ccc; /* Default border color */
+  --ifm-input-border-focus-color: red; /* Border color when focused */
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
+}
+
+.table-of-contents__link--active,
+a:not(
+    .card,
+    .menu__link,
+    .menu__link--sublist,
+    .menu__link--sublist-item,
+    .table-of-contents__link
+  ) {
+  /* color: #793ae8; */
+  color: #6366f1;
+}
+
+.card {
+  background-color: rgb(31 41 55/0.9);
+}
+
+.theme-admonition a {
+  color: #fff;
+}
+
+.menu__link--active,
+.menu__list-item-collapsible--active {
+  background: linear-gradient(0deg, #8238e9 0%, #5d42e6 100%);
+}
+
+/* .tabs__item--active {
+  background: linear-gradient(0deg, #8238e9 0%, #5d42e6 100%);
+} */
+
+.tabs__item {
+  border-bottom: 1px solid #fff;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  padding: 0.5rem 1rem;
+}
+
+.tabs__item--active {
+  /* background: rgba(255, 255, 255, 0.1); */
+  color: #a37ff0;
+  border-bottom: 3px solid #a37ff0;
+}
+
+.footer {
+  background: var(--ifm-navbar-background-color);
+  border-top: 1px solid #2d3748;
+}

gen-docs/static/CNAME

@@ -0,0 +1 @@
+docs.jellyseerr.dev

gen-docs/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./src/components/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

gen-docs/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}