feat: update documentation (#264)

.npmrc

@@ -1,2 +1,3 @@
 strict-peer-dependencies=false
-enable-pre-post-scripts=true
+enable-pre-post-scripts=true
+auto-install-peers=true

apps/web/.gitignore

@@ -11,6 +11,7 @@
 
 # next.js
 /.next/
+.contentlayer
 /out/
 
 # production

apps/web/app/(docs)/docs/[[...slug]]/page.tsx

@@ -0,0 +1,100 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { allDocs } from 'contentlayer/generated'
+import { getTableOfContents } from '@/lib/toc'
+import { Mdx } from '@/components/mdx-components'
+import { DocsPageHeader } from '@/components/page-header'
+import { DocsPager } from '@/components/pager'
+import { DashboardTableOfContents } from '@/components/toc'
+
+import '@/app/mdx.css'
+
+interface DocPageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-expect-error
+async function getDocFromParams(params) {
+  const slug = params.slug?.join('/') || ''
+  const doc = allDocs.find((doc: { slugAsParams: any }) => doc.slugAsParams === slug)
+
+  if (!doc)
+    return null
+
+  return doc
+}
+
+export async function generateMetadata({
+  params,
+}: DocPageProps): Promise<Metadata> {
+  const doc = await getDocFromParams(params)
+
+  if (!doc)
+    return {}
+
+  const url = 'https://openui-dd0.pages.dev/docs'
+
+  const ogUrl = new URL(`${url}/api/og`)
+  ogUrl.searchParams.set('heading', doc.description ?? doc.title)
+  ogUrl.searchParams.set('type', 'Documentation')
+  ogUrl.searchParams.set('mode', 'dark')
+
+  return {
+    title: doc.title,
+    description: doc.description,
+    openGraph: {
+      title: doc.title,
+      description: doc.description,
+      type: 'article',
+      url: doc.slug,
+      images: [
+        {
+          url: ogUrl.toString(),
+          width: 1200,
+          height: 630,
+          alt: doc.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: doc.title,
+      description: doc.description,
+      images: [ogUrl.toString()],
+    },
+  }
+}
+
+export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
+  return allDocs.map((doc: { slugAsParams: string }) => ({
+    slug: doc.slugAsParams.split('/'),
+  }))
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const doc = await getDocFromParams(params)
+
+  if (!doc)
+    notFound()
+
+  const toc = await getTableOfContents(doc.body.raw)
+
+  return (
+    <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
+      <div className="mx-auto w-full min-w-0">
+        <DocsPageHeader heading={doc.title} text={doc.description} />
+        <Mdx code={doc.body.code} />
+        <hr className="my-4 md:my-6" />
+        <DocsPager doc={doc} />
+      </div>
+      <div className="hidden text-sm xl:block">
+        <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+          <DashboardTableOfContents toc={toc} />
+        </div>
+      </div>
+    </main>
+  )
+}

apps/web/app/(docs)/docs/layout.tsx

@@ -0,0 +1,17 @@
+import { DocsSidebarNav } from '@/components/sidebar-nav'
+import { docsConfig } from '@/constants/docs'
+
+interface DocsLayoutProps {
+  children: React.ReactNode
+}
+
+export default function DocsLayout({ children }: DocsLayoutProps) {
+  return (
+    <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
+      <aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-10">
+        <DocsSidebarNav items={docsConfig.sidebarNav} />
+      </aside>
+      {children}
+    </div>
+  )
+}

apps/web/app/(docs)/layout.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { DocsSearch } from '@/components/docs-search'
+import { MainNav } from '@/components/main-nav'
+import { DocsSidebarNav } from '@/components/sidebar-nav'
+import { docsConfig } from '@/constants/docs'
+import { SiteFooter } from '@/components/docs-footer'
+
+interface DocsLayoutProps {
+  children: React.ReactNode
+}
+
+export default function DocsLayout({ children }: DocsLayoutProps) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-40 w-full shadow-large">
+        <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
+          <MainNav items={docsConfig.mainNav}>
+            <DocsSidebarNav items={docsConfig.sidebarNav} />
+          </MainNav>
+          <div className="flex flex-1 items-center space-x-4 sm:justify-end">
+            <div className="flex-1 sm:grow-0">
+              <DocsSearch />
+            </div>
+            <nav className="flex space-x-4">
+              <Link
+                href="https://github.com/OpenLab-dev/openui"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Github
+                <span className="sr-only">GitHub</span>
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+      <div className="container flex-1">{children}</div>
+      <SiteFooter />
+    </div>
+  )
+}

apps/web/app/blog/page.tsx

@@ -0,0 +1,7 @@
+export default function BlogPage() {
+  return (
+    <div>
+      <h1>Blog</h1>
+    </div>
+  )
+}

apps/web/app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from 'next'
 import './globals.css'
-import Menu from '@/components/menu'
-import Footer from '@/components/footer'
 
 export const metadata: Metadata = {
   title: 'Open UI',
@@ -16,9 +14,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Menu />
+
         {children}
-        <Footer />
+
       </body>
     </html>
   )

apps/web/app/mdx.css

@@ -0,0 +1,32 @@
+[data-rehype-pretty-code-fragment] code {
+  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
+  counter-reset: line;
+  box-decoration-break: clone;
+}
+[data-rehype-pretty-code-fragment] .line {
+  @apply px-4 py-1;
+}
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: gray;
+}
+[data-rehype-pretty-code-fragment] .line--highlighted {
+  @apply bg-slate-300 bg-opacity-10;
+}
+[data-rehype-pretty-code-fragment] .line-highlighted span {
+  @apply relative;
+}
+[data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply rounded-md bg-slate-300 bg-opacity-10 p-1;
+}
+[data-rehype-pretty-code-title] {
+  @apply mt-4 py-2 px-4 text-sm font-medium;
+}
+[data-rehype-pretty-code-title] + pre {
+  @apply mt-0;
+}

apps/web/app/page.tsx

@@ -1,16 +1,21 @@
+import Menu from '@/components/menu'
+import Footer from '@/components/footer'
 import Commons from '@/components/commons'
 import ExploreDocs from '@/components/explore-docs'
 import FAQ from '@/components/faq'
 import Home from '@/components/home'
 
 export default function Page() {
   return (
-    <main className="max-w-screen-2xl mx-auto flex flex-col items-center justify-center">
-      <Home />
-      <Commons />
-      <ExploreDocs />
-      <FAQ />
-    </main>
-
+    <>
+      <Menu />
+      <main className="max-w-screen-2xl mx-auto flex flex-col items-center justify-center">
+        <Home />
+        <Commons />
+        <ExploreDocs />
+        <FAQ />
+      </main>
+      <Footer />
+    </>
   )
 }

apps/web/components/callout.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@openui-org/theme'
+
+interface CalloutProps {
+  icon?: string
+  children?: React.ReactNode
+  type?: 'default' | 'warning' | 'danger'
+}
+
+export function Callout({
+  children,
+  icon,
+  type = 'default',
+  ...props
+}: CalloutProps) {
+  return (
+    <div
+      className={cn('my-6 flex items-start rounded-md border border-l-4 p-4', {
+        'border-red-900 bg-red-50': type === 'danger',
+        'border-yellow-900 bg-yellow-50': type === 'warning',
+      })}
+      {...props}
+    >
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      <div>{children}</div>
+    </div>
+  )
+}

apps/web/components/docs-footer.tsx

@@ -0,0 +1,48 @@
+import { cn } from '@openui-org/theme'
+import * as React from 'react'
+
+export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <footer className={cn(className)}>
+      <div className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
+        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+
+          <p className="text-center text-sm leading-loose md:text-left">
+            Built by
+            {' '}
+            <a
+              href="https://github.com/Open-Lab/openui"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              openui
+            </a>
+            . Hosted on
+            {' '}
+            <a
+              href="https://pages.cloudflare.com"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              Cloudflare
+            </a>
+
+            . The source code is available on
+            {' '}
+            <a
+              href="https://github.com/Open-Lab/openui"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              GitHub
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

apps/web/components/docs-search.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Input } from '@openui-org/react'
+import { cn } from '@openui-org/theme'
+import * as React from 'react'
+
+interface DocsSearchProps extends React.HTMLAttributes<HTMLFormElement> {}
+
+export function DocsSearch({ className, ...props }: DocsSearchProps) {
+  function onSubmit(event: React.SyntheticEvent) {
+    event.preventDefault()
+
+    return {
+      title: 'Not implemented',
+      description: 'We\'re still working on the search.',
+    }
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className={cn('relative w-full', className)}
+      {...props}
+    >
+      <Input
+        type="search"
+        placeholder="Search documentation..."
+        className="h-8 w-full sm:w-64 sm:pr-12 border border-black/80"
+      />
+    </form>
+  )
+}

apps/web/components/explore-docs.tsx

@@ -15,7 +15,7 @@ export default function ExploreDocs() {
         </div>
         <div className="flex flex-col gap-2 min-[400px]:flex-row lg:justify-end">
           <Button asChild>
-            <Link href="https://openui-org.gitbook.io/openui/">Explore Documentation</Link>
+            <Link href="#">Explore Documentation</Link>
           </Button>
         </div>
       </div>

apps/web/components/faq.tsx

@@ -26,7 +26,7 @@ export default function FAQ() {
             Send us your ideas to build a better design system.
             <Link
               className="underline underline-offset-2 pl-1"
-              href="/docs/introduction#faq"
+              href="/faq"
             >
               FAQ
             </Link>