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

site/.gitignore

@@ -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/README.md

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

site/app/(home)/layout.tsx

@@ -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)/page.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/docs/[[...slug]]/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/layout.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/global.css

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

site/app/layout.config.tsx

@@ -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.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>
+  );
+}

site/app/source.ts

@@ -0,0 +1,8 @@
+import { docs, meta } from '@/.source';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+
+export const source = loader({
+  baseUrl: '/docs',
+  source: createMDXSource(docs, meta),
+});

site/docs/intervals.md → site/content/docs/basics/intervals.md

@@ -1,24 +1,26 @@
 ---
 title: Intervals
-sidebar_position: 3
+description: Calculate and manipulate intervals
+package: interval
 ---
 
-![tonal](https://img.shields.io/badge/@tonaljs-interval-yellow.svg?style=flat-square) [![npm version](https://img.shields.io/npm/v/@tonaljs/interval.svg?style=flat-square)](https://www.npmjs.com/package/@tonaljs/interval)
+`Intervals` module allow to do distance calculations between notes using intervals, obtain information and do calculations:
 
 ```js
 import { Interval } from "tonal";
 
+Interval.distance("C4", "G4"); // => "5P"
 Interval.invert("2M"); // => "7m"
 Interval.simplify("9M"); // => "2M"
-Interval.semitones("P4"); // => 5
-Interval.distance("C4", "G4"); // => "5P"
+Interval.semitones("4P"); // => 5
+Interval.add("4P", "2M"); // => "5P"
 ```
 
 ## Interval properties
 
 ### `Interval.get`
 
-#### `get(name: string) -> Interval`
+`get(name: string) -> Interval`
 
 Get properties of an interval:
 
@@ -49,7 +51,7 @@ Interval.semitones("P4"); // => 5
 
 ### `Interval.names`
 
-#### `names() => string[]`
+`names() => string[]`
 
 Return a list of (natural) interval names:
 
@@ -59,7 +61,7 @@ Interval.names(); // => ["1P", "2M", "3M", "4P", "5P", "6m", "7m"]
 
 ### `Interval.fromSemitones`
 
-#### `fromSemitones(semitones: number) => string`
+`fromSemitones(semitones: number) => string`
 
 Given a number of semitones, returns the interval name:
 
@@ -74,7 +76,7 @@ Interval.fromSemitones(-7); // => "-5P"
 
 ### `Interval.simplify`
 
-#### `simplify(interval: string) => string`
+`simplify(interval: string) => string`
 
 Simplify an interval:
 
@@ -88,7 +90,7 @@ Interval.simplify("-2M"); // => "7m"
 
 ### `Interval.invert`
 
-#### `invert(interval: string) => string`
+`invert(interval: string) => string`
 
 Get the interval inversion:
 
@@ -99,7 +101,7 @@ Interval.invert("2M"); // => "7m"
 
 ### `Interval.distance`
 
-#### `distance(from: string, to: string) => string`
+`distance(from: string, to: string) => string`
 
 Find the interval between two notes.
 
@@ -109,7 +111,7 @@ Interval.distance("C4", "G4"); // => "5P"
 
 ### `Interval.add`
 
-#### `add(a: string, b: string) => string`
+`add(a: string, b: string) => string`
 
 Add two intervals:
 
@@ -119,7 +121,7 @@ Interval.add("3m", "5P"); // => "7m"
 
 ### `Interval.subtract`
 
-#### `subtract(min: string, sub: string) => string`
+`subtract(min: string, sub: string) => string`
 
 Substract two intervals:
 

site/content/docs/basics/meta.json

@@ -0,0 +1,4 @@
+{
+  "defaultOpen": true,
+  "pages": ["notes", "intervals", "midi"]
+}

site/docs/notation/midi.md → site/content/docs/basics/midi.md

@@ -1,15 +1,20 @@
 ---
-title: MIDI
-sidebar_position: 1
+title: Midi
+description: Manipulate midi notes
+package: midi
 ---
 
-![tonal](https://img.shields.io/badge/@tonaljs-midi-yellow.svg?style=flat-square) [![npm version](https://img.shields.io/npm/v/@tonaljs/midi.svg?style=flat-square)](https://www.npmjs.com/package/@tonaljs/midi)
+```js
+import { Midi } from "tonal";
+
+Midi.toMidi("C4"); // => 60
+```
 
-`@tonaljs/midi` is collection of functions to convert from and to midi numbers
+## Functions
 
 ### `Midi.toMidi`
 
-#### `toMidi(note: string | number) => number | null`
+`toMidi(note: string | number) => number | null`
 
 Given a note name or number, return the midi number. Midi numbers are always in range 0..127
 
@@ -25,7 +30,7 @@ Midi.toMidi(-1); // => null
 
 ### `Midi.midiToFreq`
 
-#### `midiToFreq(midi: number, tuning = 440) => number`
+`midiToFreq(midi: number, tuning = 440) => number`
 
 Given a midi number, return the frequency:
 
@@ -39,7 +44,7 @@ Midi.midiToFreq(69, 443); // => 443
 
 ### `Midi.midiToNoteName`
 
-#### `midiToNoteName(midi: number) => string`
+`midiToNoteName(midi: number) => string`
 
 Given a midi number, returns a note name. The altered notes will have flats unless explicitly set with the optional `useSharps` parameter.
 
@@ -56,7 +61,7 @@ midiToNoteName(61.7); // => "D4"
 
 ### `Midi.freqToMidi`
 
-#### `freqToMidi(freq: number) => number`
+`freqToMidi(freq: number) => number`
 
 Given a frequency in hertz, returns the midi number. The midi number can have decimals (with two digits precision)
 
@@ -70,7 +75,7 @@ Midi.freqToMidi(261); //=> 59.96
 
 ### `Midi.pcset`
 
-#### `pcset(set: number[] | string) => number[]`
+`pcset(set: number[] | string) => number[]`
 
 Return the pitch class set from a number of midi note numbers or pcset chroma.
 
@@ -89,7 +94,7 @@ The string is a pitch class chroma, a string with a binary representation of a s
 
 ### `Midi.pcsetNearest`
 
-#### `pcsetNearest(set: number[] | string) => (midi: number) => number | undefined`
+`pcsetNearest(set: number[] | string) => (midi: number) => number | undefined`
 
 Returns a function that finds the nearest midi note of a pitch class set. Can be used to constrain a note to a scale, for example:
 
@@ -100,7 +105,7 @@ const nearest = Midi.pcsetNearest(Scale.get("D dorian").chroma);
 
 ### `Midi.pcsetSteps`
 
-#### `pcsetSteps(set: number[] | string, tonic: number) => (index: number) => number`
+`pcsetSteps(set: number[] | string, tonic: number) => (index: number) => number`
 
 Returns a function to map a pitch class set over any note. Given a tonic a pitch class set, step 0 means the first note, step 1 the second, and so on: