Create documentation website (#6)

Author: k0d13

.github/labeller.yml

@@ -6,6 +6,10 @@
   - changed-files:
       - any-glob-to-any-file: ['examples/**']
 
+'website':
+  - changed-files:
+      - any-glob-to-any-file: ['website/**']
+
 'tests':
   - changed-files:
       - any-glob-to-any-file: ['packages/**/*.test.ts']

.github/labels.yml

@@ -18,6 +18,10 @@
   description: Updates or additions to example apps
   color: 009688
 
+- name: website
+  description: Updates to the documentation website
+  color: 0ea5e9
+
 - name: tests
   description: Modifications, additions, or fixes related to testing
   color: 00bfa5

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 packages:
   - examples/*
   - packages/*
+  - website
 
 onlyBuiltDependencies:
   - esbuild

pnpm-workspace.yaml

@@ -0,0 +1,26 @@
+# deps
+/node_modules
+
+# generated content
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

website/.gitignore

@@ -0,0 +1,45 @@
+# website
+
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+## Explore
+
+In the project, you can see:
+
+- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
+- `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
+
+| Route                     | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `app/(home)`              | The route group for your landing page and other pages. |
+| `app/docs`                | The documentation layout and pages.                    |
+| `app/api/search/route.ts` | The Route Handler for search.                          |
+
+### Fumadocs MDX
+
+A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
+
+Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.dev) - learn about Fumadocs

website/README.md

@@ -0,0 +1,62 @@
+import { getMDXComponents } from 'components/mdx';
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+  MarkdownCopyButton,
+  ViewOptionsPopover,
+} from 'fumadocs-ui/layouts/docs/page';
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { gitConfig } from 'lib/layout.shared';
+import { getPageImage, source } from 'lib/source';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export default async function Page({ params }: PageProps<'/[...slug]'>) {
+  const { slug } = await params;
+  const page = source.getPage(slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription className="mb-0">{page.data.description}</DocsDescription>
+      <div className="flex flex-row gap-2 items-center border-b pb-6">
+        <MarkdownCopyButton markdownUrl={`${page.url}.mdx`} />
+        <ViewOptionsPopover
+          markdownUrl={`${page.url}.mdx`}
+          githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${page.path}`}
+        />
+      </div>
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            // this allows you to link to other pages with relative file paths
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata({ params }: PageProps<'/[...slug]'>): Promise<Metadata> {
+  const { slug } = await params;
+  const page = source.getPage(slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    openGraph: {
+      images: getPageImage(page).url,
+    },
+  };
+}

website/app/(docs)/[...slug]/page.tsx

@@ -0,0 +1,22 @@
+import { DocsLayout, DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
+import { baseOptions } from 'lib/layout.shared';
+import { source } from 'lib/source';
+import { Metadata } from 'next';
+
+function docsOptions(): DocsLayoutProps {
+  return {
+    ...baseOptions(),
+    tree: source.getPageTree(),
+  };
+}
+
+export default function Layout({ children }: LayoutProps<'/'>) {
+  return <DocsLayout {...docsOptions()}>{children}</DocsLayout>;
+}
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s - SayKit',
+    default: 'SayKit',
+  },
+};

website/app/(docs)/layout.tsx

@@ -0,0 +1,7 @@
+import { createFromSource } from 'fumadocs-core/search/server';
+import { source } from 'lib/source';
+
+export const { GET } = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});

website/app/api/search/route.ts

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/ruby.css';
+@import 'fumadocs-ui/css/preset.css';