MDX + LIBNAME

pmndrs · Aug 9, 2024 · ba5d07c · ba5d07c
1 parent c328aba
commit ba5d07c
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 359 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+MDX=docs
diff --git a/package.json b/package.json
@@ -22,9 +22,7 @@
     "@tailwindcss/typography": "^0.5.4",
     "clsx": "^1.2.1",
     "gray-matter": "^4.0.2",
-    "isomorphic-git": "^1.19.1",
     "match-sorter": "^6.3.1",
-    "memfs": "^3.4.7",
     "next": "^14.2.5",
     "next-mdx-remote": "^4.4.1",
     "p-memoize": "^7.1.1",

diff --git a/readme.md b/readme.md
@@ -1,8 +1,14 @@
-# Poimandres Docs
+```sh
+$ MDX=docs LIBNAME="React Three Fiber" yarn dev
+```
 
-```bash
-yarn
-yarn dev
+```sh
+$ MDX=docs LIBNAME="React Three Fiber" yarn build
 ```
 
-[![Powered by Vercel](public/vercel.svg)](https://vercel.com/?utm_source=pmndrs&utm_campaign=oss)
+| var         | description                                               | default |
+| ----------- | --------------------------------------------------------- | ------- |
+| `MDX`       | Path to `*.mxd` folder<br>NB: can be relative or absolute | `docs`  |
+| `LIBNAME`\* | Library name                                              | none    |
+
+\* Required
diff --git a/src/app/[[...slug]]/DocsContext.tsx b/src/app/[[...slug]]/DocsContext.tsx
@@ -18,7 +18,7 @@ export type DocToC = {
 export type Doc = {
   slug: string[]
   url: string
-  editURL: string
+  // editURL: string
   nav: number
   title: string
   description: string

diff --git a/src/app/[[...slug]]/layout.tsx b/src/app/[[...slug]]/layout.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import * as React from 'react'
-import LibSwitcher from '@/components/LibSwitcher'
 import Nav from '@/components/Nav'
 import Icon from '@/components/Icon'
 import Toc from '@/components/Toc'
@@ -11,10 +10,8 @@ import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
 
 import ToggleTheme from '@/components/ToggleTheme'
 
-import { Doc, DocsContext } from './DocsContext'
-import libraries from '@/data/libraries'
-import { notFound } from 'next/navigation'
-import { getData, getDocs } from '@/utils/docs'
+import { DocsContext } from './DocsContext'
+import { getData } from '@/utils/docs'
 
 export type Props = {
   params: { slug: string[] }
@@ -24,15 +21,8 @@ export type Props = {
 export default async function Layout({ params, children }: Props) {
   const slug = params.slug
 
-  // 404
-  if (!(slug[0] in libraries)) {
-    return notFound()
-  }
-
   const asPath = `/${slug.join('/')}`
 
-  const lib = slug[0]
-
   const { docs, doc } = await getData(...slug)
   // console.log('docs', docs)
 
@@ -47,14 +37,16 @@ export default async function Layout({ params, children }: Props) {
 
   // React.useEffect(() => setMenuOpen(false), [asPath])
 
+  const { LIBNAME } = process.env
+
   return (
     <>
       <DocsContext value={docs}>
         <header className="sticky top-0 flex flex-none w-full mx-auto border-b border-gray-200 bg-white max-w-8xl z-40 lg:z-50 dark:bg-gray-900 dark:border-gray-800 dark:text-gray-100">
           <div className="flex justify-between items-center w-full pr-2">
             <Link href="/" aria-label="Poimandres Docs">
               <div className="h-full flex items-center flex-none p-2 pl-4 sm:pl-6 xl:pl-4 lg:w-60 xl:w-72">
-                <span className="font-bold">Pmndrs</span>
+                <span className="font-bold">pmndrs</span>
                 <span className="font-normal">.docs</span>
               </div>
             </Link>
@@ -89,7 +81,11 @@ export default async function Layout({ params, children }: Props) {
                   className="overflow-y-auto px-4 font-medium text-base lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-16) z-10 relative"
                 >
                   <div className="mt-8 md:mt-0 mb-4">
-                    <LibSwitcher currentPage={libraries[lib].title} lib={lib} />
+                    {LIBNAME?.length && (
+                      <span className="mt-4 block w-full px-6 py-2 focus:outline-none bg-black rounded-md font-bold text-lg text-white dark:bg-white dark:text-gray-900 text-center">
+                        {LIBNAME}
+                      </span>
+                    )}
                   </div>
                   <Nav docs={docs} asPath={asPath} />
                 </nav>
@@ -114,7 +110,7 @@ export default async function Layout({ params, children }: Props) {
                   <div>{children}</div>
 
                   <footer>
-                    {!!currentPage && (
+                    {/* {!!currentPage && (
                       <div className="flex justify-end w-full max-w-3xl pb-10 mx-auto mt-24">
                         <a
                           target="_blank"
@@ -125,7 +121,7 @@ export default async function Layout({ params, children }: Props) {
                           Edit this page on GitHub
                         </a>
                       </div>
-                    )}
+                    )} */}
 
                     {(!!previousPage || !!nextPage) && (
                       <nav className="flex justify-between w-full max-w-3xl mx-auto mt-12">

diff --git a/src/app/[[...slug]]/page.tsx b/src/app/[[...slug]]/page.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import SEO from '@/components/Seo'
 import Post from '@/components/Post'
 
 import { getData, getDocs } from '@/utils/docs'
@@ -12,11 +11,11 @@ export type Props = {
 export default async function Page({ params }: Props) {
   const slug = params.slug
 
-  const { doc } = await getData(...slug) // [ 'react-three-fiber', 'getting-started', 'introduction' ]
+  console.log('page', slug)
+  const { doc } = await getData(...slug) // [ 'getting-started', 'introduction' ]
 
   return (
     <>
-      {/* <SEO lib={slug[0]} /> */}
       <div className="max-w-3xl mx-auto">
         <div className="pb-6 mb-4 border-b dark:border-gray-700 post-header ">
           <h1 className="mb-4 text-5xl font-bold tracking-tighter">{doc?.title}</h1>
@@ -33,30 +32,31 @@ export default async function Page({ params }: Props) {
 export async function generateStaticParams() {
   console.log('generateStaticParams')
 
-  const docs = await getDocs('react-three-fiber')
-  const paths = docs.map(({ slug }) => ({ slug }))
+  // const docs = await getDocs('docs')
+  // const paths = docs.map(({ slug }) => ({ slug }))
+  // console.log('paths', paths)
 
   return [
-    { slug: ['react-three-fiber', 'getting-started', 'introduction'] },
-    { slug: ['react-three-fiber', 'getting-started', 'installation'] },
-    { slug: ['react-three-fiber', 'getting-started', 'your-first-scene'] },
-    // { slug: [ 'react-three-fiber', 'getting-started', 'examples' ] },
-    // { slug: [ 'react-three-fiber', 'api', 'canvas' ] },
-    // { slug: [ 'react-three-fiber', 'api', 'objects' ] },
-    // { slug: [ 'react-three-fiber', 'api', 'hooks' ] },
-    // { slug: [ 'react-three-fiber', 'api', 'events' ] },
-    // { slug: [ 'react-three-fiber', 'api', 'additional-exports' ] },
-    // { slug: [ 'react-three-fiber', 'advanced', 'scaling-performance' ] },
-    // { slug: [ 'react-three-fiber', 'advanced', 'pitfalls' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'v8-migration-guide' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'events-and-interaction' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'loading-models' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'loading-textures' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'basic-animations' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'using-with-react-spring' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'typescript' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'testing' ] },
-    // { slug: [ 'react-three-fiber', 'tutorials', 'how-it-works' ] }
+    { slug: ['getting-started', 'introduction'] },
+    { slug: ['getting-started', 'installation'] },
+    { slug: ['getting-started', 'your-first-scene'] },
+    // { slug: [ 'getting-started', 'examples' ] },
+    // { slug: [ 'api', 'canvas' ] },
+    // { slug: [ 'api', 'objects' ] },
+    // { slug: [ 'api', 'hooks' ] },
+    // { slug: [ 'api', 'events' ] },
+    // { slug: [ 'api', 'additional-exports' ] },
+    // { slug: [ 'advanced', 'scaling-performance' ] },
+    // { slug: [ 'advanced', 'pitfalls' ] },
+    // { slug: [ 'tutorials', 'v8-migration-guide' ] },
+    // { slug: [ 'tutorials', 'events-and-interaction' ] },
+    // { slug: [ 'tutorials', 'loading-models' ] },
+    // { slug: [ 'tutorials', 'loading-textures' ] },
+    // { slug: [ 'tutorials', 'basic-animations' ] },
+    // { slug: [ 'tutorials', 'using-with-react-spring' ] },
+    // { slug: [ 'tutorials', 'typescript' ] },
+    // { slug: [ 'tutorials', 'testing' ] },
+    // { slug: [ 'tutorials', 'how-it-works' ] }
   ]
   // return paths
 }
diff --git a/src/components/LibSwitcher.tsx b/src/components/LibSwitcher.tsx
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
diff --git a/src/data/libraries.ts b/src/data/libraries.ts