Feat/new docs (#446)

* feat: use fumadocs for site

* feat: add doc contents

* feat: site deploy

* fixes

* feat: add rhythm patterns

* fix: test and build

Author: danigb

package-lock.json

@@ -1,20 +1,28 @@
-# Dependencies
+# deps
 /node_modules
 
-# Production
-/build
+# generated content
+.contentlayer
+.content-collections
+.source
 
-# Generated files
-.docusaurus
-.cache-loader
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
 
-# Misc
+# misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+*.pem
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

site/.gitignore

@@ -1,5 +1,7 @@
 # tonal docs
 
-```
-npm run deploy
+Run development server:
+
+```bash
+pnpm dev
 ```

site/README.md

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { HomeLayout } from 'fumadocs-ui/home-layout';
+import { baseOptions } from '../layout.config';
+
+export default function Layout({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+}

site/app/(home)/layout.tsx

@@ -0,0 +1,8 @@
+export default function HomePage() {
+  return (
+    <main className="flex h-screen flex-col justify-center text-center">
+      <h1 className="mb-4 text-2xl font-bold">tonal</h1>
+      <p className="mb-8 text-fd-muted-foreground">A music theory library</p>
+    </main>
+  );
+}

site/app/(home)/page.tsx

@@ -0,0 +1,57 @@
+import { source } from "@/app/source";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export default async function Page({
+  params,
+}: {
+  params: { slug?: string[] };
+}) {
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      {page.data.package ? (
+        <div className="flex">
+          <a
+            href={`https://www.npmjs.com/package/@tonaljs/${page.data.package}`}
+          >
+            <img
+              className="rounded-lg"
+              src={`https://img.shields.io/badge/@tonaljs-${page.data.package.replace("-", "--")}-yellow.svg?style=flat-square`}
+            />
+          </a>
+        </div>
+      ) : null}
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents }} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  } satisfies Metadata;
+}

site/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,12 @@
+import { DocsLayout } from 'fumadocs-ui/layout';
+import type { ReactNode } from 'react';
+import { baseOptions } from '../layout.config';
+import { source } from '@/app/source';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

site/app/docs/layout.tsx

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

site/app/global.css

@@ -0,0 +1,28 @@
+import { type HomeLayoutProps } from "fumadocs-ui/home-layout";
+import { BookIcon, GithubIcon } from "lucide-react";
+
+/**
+ * Shared layout configurations
+ *
+ * you can configure layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: HomeLayoutProps = {
+  nav: {
+    title: "Tonal",
+  },
+  links: [
+    {
+      text: "Documentation",
+      icon: <BookIcon />,
+      url: "/docs",
+      active: "nested-url",
+    },
+    {
+      text: "Repository",
+      icon: <GithubIcon />,
+      url: "https://github.com/tonaljs/tonal",
+    },
+  ],
+};

site/app/layout.config.tsx

@@ -0,0 +1,18 @@
+import { RootProvider } from "fumadocs-ui/provider";
+import { Inter } from "next/font/google";
+import type { ReactNode } from "react";
+import "./global.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body>
+        <RootProvider search={{ enabled: false }}>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}