📖 New Docs Website (#42)

gpt-turbo.code-workspace

@@ -4,6 +4,10 @@
       "name": "lib",
       "path": "packages/lib"
     },
+    {
+      "name": "docs",
+      "path": "packages/docs"
+    },
     {
       "name": "web",
       "path": "packages/implementations/web"
@@ -31,12 +35,14 @@
   ],
   "settings": {
     "jest.disabledWorkspaceFolders": [
+      "docs",
       "web",
       "discord",
       "stats",
       "nest",
       "cli",
       "root"
-    ]
+    ],
+    "typescript.tsdk": "root/node_modules/typescript/lib",
   }
 }

packages/docs/.eslintrc.json

@@ -0,0 +1,59 @@
+{
+    "parserOptions": {
+        "project": "tsconfig.json"
+    },
+    "extends": [
+        "next/core-web-vitals",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_",
+                "ignoreRestSiblings": true
+            }
+        ],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/await-thenable": "warn",
+        "max-classes-per-file": "off",
+        "no-useless-constructor": "off",
+        "class-methods-use-this": "off",
+        "eqeqeq": ["warn", "always"],
+        "lines-between-class-members": "off",
+        "no-console": [
+            "warn",
+            {
+                "allow": ["warn", "error", "info", "clear"]
+            }
+        ],
+        "no-continue": "off",
+        "no-plusplus": "off",
+        "no-param-reassign": [
+            "warn",
+            {
+                "props": false
+            }
+        ],
+        "no-restricted-exports": "off",
+        "no-unused-vars": "off",
+        "spaced-comment": [
+            "warn",
+            "always",
+            {
+                "markers": ["/"]
+            }
+        ],
+        "arrow-body-style": "off",
+
+        "prettier/prettier": ["warn"],
+
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn"
+    }
+}

packages/docs/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.contentlayer

packages/docs/.prettierrc

@@ -0,0 +1,12 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "arrowParens": "always",
+    "semi": true,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "es5",
+    "endOfLine": "lf",
+    "printWidth": 80,
+    "singleQuote": false
+}

packages/docs/README.md

@@ -0,0 +1,15 @@
+# GPT Turbo - Docs
+
+Documentation website for GPT Turbo, built with NextJS 13 with app directory.
+
+## Development
+
+To setup the project for development, run the following commands:
+
+```bash
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```

packages/docs/contentlayer.config.ts

@@ -0,0 +1,78 @@
+// Thanks to taxonomy: https://github.com/shadcn-ui/taxonomy/blob/main/contentlayer.config.js
+import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeSlug from "rehype-slug";
+
+export const Doc = defineDocumentType(() => {
+    const getSlug = (doc: any) => {
+        return doc._raw.flattenedPath.split("/").slice(1).join("/");
+    };
+
+    return {
+        name: "Doc",
+        filePathPattern: `docs/**/*.mdx`,
+        contentType: "mdx",
+        fields: {
+            title: {
+                type: "string",
+                required: true,
+            },
+            description: {
+                type: "string",
+                required: false,
+            },
+            order: {
+                type: "number",
+                required: false,
+            },
+            api: {
+                type: "string",
+                required: false,
+            },
+        },
+        computedFields: {
+            slug: {
+                type: "string",
+                resolve: getSlug,
+            },
+            slugGroup: {
+                type: "string",
+                resolve: (doc) => doc._raw.flattenedPath.split("/")[1],
+            },
+            slugPage: {
+                type: "string",
+                resolve: (doc) => {
+                    const slugSplits = doc._raw.flattenedPath
+                        .split("/")
+                        .slice(1);
+                    return slugSplits[slugSplits.length - 1];
+                },
+            },
+            isGroupIndex: {
+                type: "boolean",
+                resolve: (doc) => getSlug(doc).split("/").length === 1,
+            },
+        },
+    };
+});
+
+export default makeSource({
+    contentDirPath: "./src/mdx",
+    documentTypes: [Doc],
+    mdx: {
+        remarkPlugins: [],
+        rehypePlugins: [
+            rehypeSlug,
+            [
+                rehypeAutolinkHeadings,
+                {
+                    properties: {
+                        className: ["subheading-anchor"],
+                        ariaLabel: "Link to section",
+                    },
+                    behavior: "wrap",
+                },
+            ],
+        ],
+    },
+});

packages/docs/next.config.js

@@ -0,0 +1,12 @@
+const { withContentlayer } = require("next-contentlayer");
+const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    swcMinify: true,
+};
+
+module.exports = withVanillaExtract(withContentlayer(nextConfig));

packages/docs/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "gpt-turbo-docs",
+    "version": "5.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "concurrently \"npm run contentlayer:dev\" \"npm run next:dev\"",
+        "next:dev": "next dev",
+        "contentlayer:dev": "contentlayer dev",
+        "build": "contentlayer build && next build",
+        "preview": "npm run build && npm start",
+        "start": "next start",
+        "lint": "next lint",
+        "tscheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@mantine/code-highlight": "^7.0.0-alpha.21",
+        "@mantine/core": "^7.0.0-alpha.21",
+        "@mantine/hooks": "^7.0.0-alpha.21",
+        "@mantine/spotlight": "^7.0.0-alpha.21",
+        "@mantine/vanilla-extract": "^7.0.0-alpha.21",
+        "@vanilla-extract/css": "^1.12.0",
+        "contentlayer": "^0.3.4",
+        "next": "13.4.12",
+        "next-contentlayer": "^0.3.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-icons": "^4.10.1",
+        "rehype-autolink-headings": "^6.1.1",
+        "rehype-slug": "^5.1.0",
+        "zod": "^3.21.4",
+        "zustand": "^4.4.0"
+    },
+    "devDependencies": {
+        "@types/mdx": "^2.0.5",
+        "@types/node": "20.4.6",
+        "@types/react": "18.2.18",
+        "@types/react-dom": "18.2.7",
+        "@vanilla-extract/next-plugin": "^2.2.1",
+        "concurrently": "^8.2.0",
+        "eslint": "8.46.0",
+        "eslint-config-next": "13.4.12",
+        "eslint-config-prettier": "^8.9.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "postcss": "^8.4.27",
+        "postcss-preset-mantine": "^1.7.0",
+        "postcss-simple-vars": "^7.0.1",
+        "prettier": "^3.0.0",
+        "typescript": "^5.1.6"
+    }
+}

packages/docs/postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    plugins: {
+        "postcss-preset-mantine": {},
+        "postcss-simple-vars": {
+            variables: {
+                "mantine-breakpoint-xs": "36em",
+                "mantine-breakpoint-sm": "48em",
+                "mantine-breakpoint-md": "62em",
+                "mantine-breakpoint-lg": "75em",
+                "mantine-breakpoint-xl": "88em",
+            },
+        },
+    },
+};

packages/docs/src/app/components/DocsSpotlight/DocsSpotlight.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { rem } from "@mantine/core";
+import {
+    Spotlight,
+    SpotlightActionData,
+    createSpotlight,
+} from "@mantine/spotlight";
+import React from "react";
+import { BiSearch } from "react-icons/bi";
+import useDocs from "../../../contexts/hooks/useDocs";
+import { useRouter } from "next/navigation";
+
+export const [docsStore, docsSpotlight] = createSpotlight();
+
+const DocsSpotlight = () => {
+    const { docs } = useDocs();
+    const router = useRouter();
+
+    const actions = React.useMemo<SpotlightActionData[]>(
+        () =>
+            docs.reduce((acc, doc) => {
+                return doc.isGroupIndex
+                    ? acc
+                    : acc.concat({
+                          id: doc.slug,
+                          label: doc.title,
+                          description: doc.description,
+                          onClick: () => router.push(`/docs/${doc.slug}`),
+                      });
+            }, [] as SpotlightActionData[]),
+        [docs, router]
+    );
+
+    return (
+        <Spotlight
+            store={docsStore}
+            actions={actions}
+            shortcut={["mod + K", "mod + P", "/"]}
+            highlightQuery
+            clearQueryOnClose
+            radius="md"
+            limit={7}
+            nothingFound="Nothing found..."
+            searchProps={{
+                leftSection: (
+                    <BiSearch style={{ width: rem(20), height: rem(20) }} />
+                ),
+                placeholder: "Search documentation...",
+            }}
+        />
+    );
+};
+
+export default DocsSpotlight;

packages/docs/src/app/components/HomeHero/HomeHero.css.ts

@@ -0,0 +1,27 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@theme";
+import { rem } from "@mantine/core";
+
+const freq = rem(28);
+const size = rem(2);
+
+export const root = style({
+    height: `calc(100vh - ${rem(60)})`,
+    boxShadow: vars.shadows.sm,
+
+    borderBottom: "1px solid",
+    borderBottomColor: vars.colors.gray[4],
+
+    backgroundColor: vars.colors.gray[1],
+    backgroundImage: `radial-gradient(${vars.colors.gray[3]} ${size}, transparent 0)`,
+    backgroundSize: `${freq} ${freq}`,
+
+    selectors: {
+        [vars.darkSelector]: {
+            borderBottomColor: vars.colors.gray[8],
+
+            backgroundColor: vars.colors.dark[8],
+            backgroundImage: `radial-gradient(${vars.colors.dark[7]} ${size}, transparent 0)`,
+        },
+    },
+});