fix docs

juliusmarminge · Feb 9, 2024 · e0d6429 · e0d6429
1 parent a88f6e0
commit e0d6429
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 55 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/app/calsans.ttf b/docs/app/calsans.ttf
diff --git a/docs/app/docs/[[...slug]]/page.tsx b/docs/app/docs/[[...slug]]/page.tsx
@@ -1,23 +1,24 @@
+import { RollButton } from "fumadocs-ui/components/roll-button";
 import { DocsBody, DocsPage } from "fumadocs-ui/page";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { getPage, getPages } from "~/app/source";
 
-export default async function Page({
-  params,
-}: {
+interface PageParams {
   params: { slug?: string[] };
-}) {
-  const page = getPage(params.slug);
+}
 
+export default async function Page({ params }: PageParams) {
+  const page = getPage(params.slug);
   if (page == null) notFound();
 
   const MDX = page.data.exports.default;
 
   return (
     <DocsPage toc={page.data.exports.toc}>
+      <RollButton />
       <DocsBody>
-        <h1>{page.data.title}</h1>
+        <h1 className="font-cal">{page.data.title}</h1>
         <MDX />
       </DocsBody>
     </DocsPage>
@@ -30,7 +31,7 @@ export async function generateStaticParams() {
   }));
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+export function generateMetadata({ params }: PageParams) {
   const page = getPage(params.slug);
 
   if (page == null) notFound();

diff --git a/docs/app/docs/layout.tsx b/docs/app/docs/layout.tsx
@@ -1,10 +1,17 @@
 import { DocsLayout } from "fumadocs-ui/layout";
 import type { ReactNode } from "react";
-import { pageTree } from "~/app/source";
+import { pageTree, siteConfig } from "~/app/source";
 
 export default function RootDocsLayout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={pageTree} nav={{ title: "My App" }}>
+    <DocsLayout
+      tree={pageTree}
+      nav={{
+        title: siteConfig.name,
+        githubUrl: siteConfig.links.github,
+      }}
+      links={[{ text: "Docs", url: "/docs" }]}
+    >
       {children}
     </DocsLayout>
   );

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -2,22 +2,25 @@ import { RootProvider } from "fumadocs-ui/provider";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata, Viewport } from "next";
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
 import "~/app/global.css";
+import { siteConfig } from "~/app/source";
 
-const inter = Inter({
-  subsets: ["latin"],
+const fontCal = localFont({
+  src: "./calsans.ttf",
+  variable: "--font-cal",
 });
 
 export const metadata = {
   metadataBase: new URL("https://timeit.jumr.dev"),
   title: {
-    default: "Time Reporting App",
-    template: "%s - Time Reporting App",
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
   },
-  description:
-    "An app for indie contractors to track time and generate invoices.",
+  description: siteConfig.description,
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-1e6x16.png",
@@ -34,13 +37,14 @@ export const viewport = {
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en">
       <body
-        className={[
+        className={twMerge(
           "min-h-screen font-sans antialiased",
+          fontCal.variable,
           GeistSans.variable,
           GeistMono.variable,
-        ].join(" ")}
+        )}
       >
         <RootProvider>{children}</RootProvider>
       </body>

diff --git a/docs/app/page.tsx b/docs/app/page.tsx
@@ -1,37 +1,50 @@
+import { Layout } from "fumadocs-ui/layout";
 import Link from "next/link";
 
+import { siteConfig } from "~/app/source";
+import { buttonVariants } from "~/components/button";
+
 export default function IndexPage() {
   return (
-    <section className="container flex flex-col justify-center overflow-hidden items-center min-h-[calc(100vh-4rem)] gap-6 pb-8 pt-6 md:py-10">
-      <div className="max-w-5xl space-y-8">
-        <h1
-          className="font-cal text-balance animate-fade-up bg-gradient-to-br from-foreground/80 to-muted-foreground bg-clip-text text-center text-5xl/[3rem] font-bold text-transparent opacity-0 drop-shadow-sm md:text-7xl/[5rem]"
-          style={{ animationDelay: "0.20s", animationFillMode: "forwards" }}
-        >
-          Acme Corp Lib
-        </h1>
-        <p
-          className="animate-fade-up text-balance text-center text-muted-foreground/80 opacity-0 md:text-xl"
-          style={{ animationDelay: "0.30s", animationFillMode: "forwards" }}
-        >
-          The perfect starter template for your next TypeScript library.
-          Batteries included powered by PNPM Workspaces, Turborepo, tsup &
-          Changesets.
-        </p>
-        <div
-          className="flex justify-center gap-4 animate-fade-up opacity-0"
-          style={{ animationDelay: "0.40s", animationFillMode: "forwards" }}
-        >
-          <Link href="/docs">Documentation</Link>
-          <Link
-            target="_blank"
-            rel="noreferrer"
-            href="https://github.com/juliusmarminge/acme-corp-lib"
+    <Layout
+      nav={{
+        title: siteConfig.name,
+        githubUrl: siteConfig.links.github,
+      }}
+      links={[{ text: "Docs", url: siteConfig.links.docs }]}
+    >
+      <section className="container flex flex-col justify-center items-center gap-6 pb-8 pt-6 md:py-10">
+        <div className="max-w-5xl space-y-8">
+          <h1
+            className="font-cal text-balance animate-fade-up bg-gradient-to-br from-foreground/80 to-muted-foreground bg-clip-text text-center text-5xl/[3rem] font-bold text-transparent opacity-0 drop-shadow-sm md:text-7xl/[5rem]"
+            style={{ animationDelay: "0.20s", animationFillMode: "forwards" }}
+          >
+            {siteConfig.name}
+          </h1>
+          <p
+            className="animate-fade-up text-balance text-center text-muted-foreground/80 opacity-0 md:text-xl"
+            style={{ animationDelay: "0.30s", animationFillMode: "forwards" }}
+          >
+            {siteConfig.description}
+          </p>
+          <div
+            className="flex justify-center gap-4 animate-fade-up opacity-0"
+            style={{ animationDelay: "0.40s", animationFillMode: "forwards" }}
           >
-            GitHub
-          </Link>
+            <Link className={buttonVariants({})} href={siteConfig.links.docs}>
+              Documentation
+            </Link>
+            <Link
+              target="_blank"
+              rel="noreferrer"
+              className={buttonVariants({})}
+              href={siteConfig.links.github}
+            >
+              GitHub
+            </Link>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </Layout>
   );
 }
diff --git a/docs/app/source.ts b/docs/app/source.ts
@@ -7,3 +7,14 @@ export const { getPage, getPages, pageTree } = loader({
   rootDir: "docs",
   source: createMDXSource(map),
 });
+
+export const siteConfig = {
+  name: "Acme Corp Lib",
+  description:
+    "The perfect starter template for your next TypeScript library. Batteries included powered by PNPM Workspaces, Turborepo, tsup & Changesets.",
+  links: {
+    twitter: "https://twitter.com/jullerino",
+    github: "https://github.com/juliusmarminge/acme-corp-lib",
+    docs: "/docs",
+  },
+};
diff --git a/docs/components/button.tsx b/docs/components/button.tsx
@@ -0,0 +1,51 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { twMerge } from "tailwind-merge";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline text-primary",
+      },
+      size: {
+        default: "h-10 py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-11 px-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={twMerge(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/docs/content/docs/index.mdx b/docs/content/docs/index.mdx
@@ -3,11 +3,13 @@ title: Hello World
 description: Your first document
 ---
 
+import { Card, Cards } from "fumadocs-ui/components/card"
+
 Welcome to the docs! You can start writing documents in `/content/docs`.
 
 ## What is Next?
 
 <Cards>
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" description="" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" description="" />
 </Cards>
diff --git a/docs/content/docs/test.mdx b/docs/content/docs/test.mdx
@@ -3,6 +3,8 @@ title: Components
 description: Components
 ---
 
+import { Card, Cards } from "fumadocs-ui/components/card"
+
 ## Code Block
 
 ```js
@@ -12,6 +14,6 @@ console.log('Hello World');
 ## Cards
 
 <Cards>
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" description=""/>
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" description=""/>
 </Cards>
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
@@ -1,9 +1,55 @@
+import { Heading } from "fumadocs-ui/components/heading";
 import defaultComponents from "fumadocs-ui/mdx";
+
 import type { MDXComponents } from "mdx/types";
+import { twMerge } from "tailwind-merge";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
     ...components,
+
+    h1: (props) => (
+      <Heading
+        as="h1"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
+    h2: (props) => (
+      <Heading
+        as="h2"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
+    h3: (props) => (
+      <Heading
+        as="h3"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
+    h4: (props) => (
+      <Heading
+        as="h4"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
+    h5: (props) => (
+      <Heading
+        as="h5"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
+    h6: (props) => (
+      <Heading
+        as="h6"
+        {...props}
+        className={twMerge(props.className, "font-cal")}
+      />
+    ),
   };
 }
diff --git a/docs/package.json b/docs/package.json
@@ -14,7 +14,8 @@
     "geist": "^1.2.2",
     "next": "^14.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",