Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@abernier
abernier committed Aug 9, 2024
1 parent 47b13f4 commit 8d72067
Show file tree
Hide file tree
Showing 35 changed files with 1,721 additions and 1,785 deletions.
1 change: 1 addition & 0 deletions next.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const nextConfig = {
// domains: ['codesandbox.io'],
unoptimized: true,
},
output: 'export',
async redirects() {
return [
{
Expand Down
15 changes: 10 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
{
"name": "pmndrs-docs",
"version": "0.1.0",
"private": true,
"type": "module",
"devDependencies": {
"@types/node": "^18.6.4",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.8",
"eslint": "^8.21.0",
"eslint-config-next": "^14.2.5",
"postcss": "^8.4.16",
"postcss": "^8",
"prettier": "^2.7.1",
"sharp": "^0.30.7",
"tailwindcss": "^3.1.8",
"tailwindcss": "^3.4.1",
"typescript": "^5.5.4"
},
"dependencies": {
Expand All @@ -22,17 +26,18 @@
"match-sorter": "^6.3.1",
"memfs": "^3.4.7",
"next": "^14.2.5",
"next-mdx-remote": "^4.1.0",
"next-mdx-remote": "^4.4.1",
"p-memoize": "^7.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^4.12.0",
"rehype-prism-plus": "^1.5.0",
"remark-gfm": "^3.0.1"
},
"scripts": {
"dev": "next",
"dev": "NODE_OPTIONS='--inspect' next",
"start": "next start",
"build": "next build",
"build": "rm -rf out && next build",
"format": "prettier -w src/",
"lint": "eslint src/**/*.{ts,tsx} && prettier . --check"
},
Expand Down
38 changes: 38 additions & 0 deletions src/app/[...slug]/DocsContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
'use client'

import { ReactNode } from 'react'

import { createRequiredContext } from '@/lib/createRequiredContext'

export type DocToC = {
id: string
level: number
title: string
description: string
content: string
url: string
parent: DocToC | null
label: string
}

export type Doc = {
slug: string[]
url: string
editURL: string
nav: number
title: string
description: string
content: string
boxes: string[]
tableOfContents: DocToC[]
}

export type Ctx = Doc[]

const [hook, Provider] = createRequiredContext<Ctx>()

export { hook as useDocs }

export function DocsContext({ children, value = [] }: { children?: ReactNode; value: Ctx }) {
return <Provider value={value}>{children}</Provider>
}
178 changes: 178 additions & 0 deletions src/app/[...slug]/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
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'
import Search from '@/components/Search'
import Link from 'next/link'
// import { useRouter } from 'next/router'
import { useLockBodyScroll } from '@/hooks/useLockBodyScroll'
import libs from '@/data/libraries'

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'

export type Props = {
params: { slug: string[] }
children: React.ReactNode
}

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)

// const [menuOpen, setMenuOpen] = React.useState(false)
// useLockBodyScroll(menuOpen)

// const { asPath } = useRouter()
const currentPageIndex = docs.findIndex((item) => item.url === asPath)
const currentPage = docs[currentPageIndex]
const previousPage = currentPageIndex > 0 && docs[currentPageIndex - 1]
const nextPage = currentPageIndex < docs.length - 1 && docs[currentPageIndex + 1]

// React.useEffect(() => setMenuOpen(false), [asPath])

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-normal">.docs</span>
</div>
</Link>
<Search />
<button
className="block lg:hidden p-2 mr-2 ml-2"
// onClick={() => setMenuOpen((v) => !v)}
type="button"
aria-label="Menu"
>
<Icon icon="menu" />
</button>
<ToggleTheme />
</div>
</header>

<div className="w-full mx-auto max-w-8xl dark:bg-gray-900 dark:text-gray-100">
<div className="lg:flex">
<div
id="sidebar"
className={clsx(
'fixed inset-0 z-40 flex-none w-full h-full bg-opacity-25 lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block bg-white dark:!bg-gray-900 dark:text-gray-100'
// !menuOpen && 'hidden'
)}
>
<div
id="nav-wrapper"
className="overflow-hidden overflow-y-auto h-full mr-24 scrolling-touch lg:h-auto lg:block lg:sticky lg:bg-transparent lg:top-16 lg:mr-0 z-10 relative bg-white dark:bg-gray-900"
>
<nav
id="nav"
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={libs[lib].title} lib={lib} />
</div>
<Nav docs={docs} asPath={asPath} />
</nav>
</div>
{/* <button
onClick={() => setMenuOpen(false)}
className={clsx(
'w-screen h-screen z-0 fixed top-0 right-0 bg-gray-900 opacity-0 dark:bg-gray-200',
!menuOpen && 'hidden'
)}
/> */}
</div>
<div
id="content-wrapper"
className={clsx(
'flex-auto'
// menuOpen && 'overflow-hidden'
)}
>
<div className="flex w-full">
<main className="flex-auto min-w-0 px-4 pt-8 pb-24 sm:px-6 xl:px-8 lg:pb-16">
<div>{children}</div>

<footer>
{!!currentPage && (
<div className="flex justify-end w-full max-w-3xl pb-10 mx-auto mt-24">
<a
target="_blank"
rel="noopener noreferrer"
className="mb-2 text-base text-gray-500 hover:underline"
href={currentPage.editURL}
>
Edit this page on GitHub
</a>
</div>
)}

{(!!previousPage || !!nextPage) && (
<nav className="flex justify-between w-full max-w-3xl mx-auto mt-12">
{!!previousPage && (
<div className="">
<label className="mb-2 text-xs font-bold leading-4 text-gray-500 uppercase">
Previous
</label>
<div className="text-xl">
<Link
href={previousPage.url}
className="text-gray-900 dark:text-gray-300"
>
{previousPage.title}
</Link>
</div>
</div>
)}
{!!nextPage && (
<div className="ml-auto text-right">
<label className="mb-2 text-xs font-bold leading-4 text-gray-500 uppercase">
Next
</label>
<div className="text-xl">
<Link
href={nextPage.url}
className="text-gray-900 dark:text-gray-300"
>
{nextPage.title}
</Link>
</div>
</div>
)}
</nav>
)}
</footer>
</main>

<aside className="flex-none hidden w-64 pl-8 pr-8 xl:text-sm xl:block">
{doc?.tableOfContents?.length ? <Toc toc={doc.tableOfContents} /> : null}
</aside>
</div>
</div>
</div>
</div>
</DocsContext>
</>
)
}
62 changes: 62 additions & 0 deletions src/app/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import * as React from 'react'

import SEO from '@/components/Seo'
import Post from '@/components/Post'

import { getData, getDocs } from '@/utils/docs'

export type Props = {
params: { slug: string[] }
}

export default async function Page({ params }: Props) {
const slug = params.slug

const { doc } = await getData(...slug) // [ 'react-three-fiber', '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>
{!!doc?.description?.length && (
<p className="text-base text-gray-400 leading-5">{doc.description}</p>
)}
</div>
<div className="content-container">{doc ? <Post doc={doc} /> : 'empty doc'}</div>
</div>
</>
)
}

export async function generateStaticParams() {
console.log('generateStaticParams')

const docs = await getDocs('react-three-fiber')
const paths = docs.map(({ slug }) => ({ slug }))

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' ] }
]
// return paths
}
Binary file added src/app/favicon.ico
View file
Binary file not shown.
Loading

0 comments on commit 8d72067

Please sign in to comment.