next14 (pages) (#280)

pmndrs · Aug 7, 2024 · d0c243d · d0c243d
1 parent 03af670
commit d0c243d
Show file tree

Hide file tree

Showing 12 changed files with 1,445 additions and 523 deletions.
diff --git a/next.config.js → next.config.mjs b/next.config.js → next.config.mjs
@@ -1,7 +1,8 @@
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   productionBrowserSourceMaps: true,
   images: {
-    domains: ['codesandbox.io'],
+    // domains: ['codesandbox.io'],
     unoptimized: true,
   },
   async redirects() {
@@ -54,3 +55,5 @@ module.exports = {
     ]
   },
 }
+
+export default nextConfig
diff --git a/package.json b/package.json
@@ -1,15 +1,16 @@
 {
   "devDependencies": {
     "@types/node": "^18.6.4",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.8",
     "eslint": "^8.21.0",
-    "eslint-config-next": "^12.2.4",
+    "eslint-config-next": "^14.2.5",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "sharp": "^0.30.7",
     "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4"
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "@headlessui/react": "^1.6.6",
@@ -20,10 +21,10 @@
     "isomorphic-git": "^1.19.1",
     "match-sorter": "^6.3.1",
     "memfs": "^3.4.7",
-    "next": "^12.3.4",
+    "next": "^14.2.5",
     "next-mdx-remote": "^4.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "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"
@@ -34,5 +35,9 @@
     "build": "next build",
     "format": "prettier -w src/",
     "lint": "eslint src/**/*.{ts,tsx} && prettier . --check"
-  }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "yarn@1.22.19"
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -32,13 +32,11 @@ export default function Layout({ doc, children }: LayoutProps) {
     <>
       <div 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="/">
-            <a 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>
-            </a>
+          <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
@@ -107,8 +105,11 @@ export default function Layout({ doc, children }: LayoutProps) {
                           Previous
                         </label>
                         <div className="text-xl">
-                          <Link href={previousPage.url}>
-                            <a className="text-gray-900 dark:text-gray-300">{previousPage.title}</a>
+                          <Link
+                            href={previousPage.url}
+                            className="text-gray-900 dark:text-gray-300"
+                          >
+                            {previousPage.title}
                           </Link>
                         </div>
                       </div>
@@ -119,8 +120,8 @@ export default function Layout({ doc, children }: LayoutProps) {
                           Next
                         </label>
                         <div className="text-xl">
-                          <Link href={nextPage.url}>
-                            <a className="text-gray-900 dark:text-gray-300">{nextPage.title}</a>
+                          <Link href={nextPage.url} className="text-gray-900 dark:text-gray-300">
+                            {nextPage.title}
                           </Link>
                         </div>
                       </div>

diff --git a/src/components/LibSwitcher.tsx b/src/components/LibSwitcher.tsx
@@ -18,15 +18,15 @@ export default function LibSwitcher() {
       <Popover.Panel className="absolute z-10 w-full mt-4 p-3 shadow-2xl bg-white dark:bg-gray-800 rounded-md">
         <div className="flex flex-col space-y-3">
           {Object.entries(libs).map(([id, data]) => (
-            <Link key={id} href={data.url}>
-              <a
-                className={clsx(
-                  'px-3 py-2 hover:bg-gray-50 rounded-md font-normal text-base dark:hover:bg-gray-600/30',
-                  id === query.slug![0] && 'sr-only'
-                )}
-              >
-                {data.title}
-              </a>
+            <Link
+              key={id}
+              href={data.url}
+              className={clsx(
+                'px-3 py-2 hover:bg-gray-50 rounded-md font-normal text-base dark:hover:bg-gray-600/30',
+                id === query.slug![0] && 'sr-only'
+              )}
+            >
+              {data.title}
             </Link>
           ))}
         </div>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -15,15 +15,14 @@ function NavItem({ doc }: NavItemProps) {
   React.useEffect(() => setActive(doc.url === asPath), [doc.url, asPath])
 
   return (
-    <Link href={doc.url ?? '/'}>
-      <a
-        className={clsx(
-          'rounded-md block px-6 py-2 text-gray-800 font-normal hover:bg-gray-50 cursor-pointer dark:text-gray-400 dark:hover:bg-gray-700 mb-1',
-          active && 'bg-gray-100 dark:bg-gray-700'
-        )}
-      >
-        {doc.title}
-      </a>
+    <Link
+      href={doc.url ?? '/'}
+      className={clsx(
+        'rounded-md block px-6 py-2 text-gray-800 font-normal hover:bg-gray-50 cursor-pointer dark:text-gray-400 dark:hover:bg-gray-700 mb-1',
+        active && 'bg-gray-100 dark:bg-gray-700'
+      )}
+    >
+      {doc.title}
     </Link>
   )
 }

diff --git a/src/components/Search/SearchItem.tsx b/src/components/Search/SearchItem.tsx
@@ -17,17 +17,17 @@ export interface SearchItemProps {
 
 function SearchItem({ search, result }: SearchItemProps) {
   return (
-    <Link href={result.url}>
-      <a
-        className="block no-underline search-item outline-none"
-        target={result.url.startsWith('http') ? '_blank' : undefined}
-      >
-        <li className="px-2 py-1">
-          <div className="p-4 py-5 rounded-md bg-gray-100 hover:bg-gray-800 hover:text-gray-200 flex justify-between items-center transition-all dark:bg-gray-900/50 dark:text-gray-100 dark:hover:bg-gray-900/70">
-            <span
-              className="pr-3"
-              dangerouslySetInnerHTML={{
-                __html: `
+    <Link
+      href={result.url}
+      className="block no-underline search-item outline-none"
+      target={result.url.startsWith('http') ? '_blank' : undefined}
+    >
+      <li className="px-2 py-1">
+        <div className="p-4 py-5 rounded-md bg-gray-100 hover:bg-gray-800 hover:text-gray-200 flex justify-between items-center transition-all dark:bg-gray-900/50 dark:text-gray-100 dark:hover:bg-gray-900/70">
+          <span
+            className="pr-3"
+            dangerouslySetInnerHTML={{
+              __html: `
                   <span class="block text-xs text-gray-400 dark:text-gray-500 pb-1">${
                     result.label
                   }</span>
@@ -36,17 +36,16 @@ function SearchItem({ search, result }: SearchItemProps) {
                     ${highlight(result.description, search)}
                   </span>
                 `,
-              }}
-            />
-            {result.image ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img className="rounded max-w-[40%]" src={result.image} alt={result.title} />
-            ) : (
-              <Icon icon="enter" className="text-gray-400" />
-            )}
-          </div>
-        </li>
-      </a>
+            }}
+          />
+          {result.image ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img className="rounded max-w-[40%]" src={result.image} alt={result.title} />
+          ) : (
+            <Icon icon="enter" className="text-gray-400" />
+          )}
+        </div>
+      </li>
     </Link>
   )
 }

diff --git a/src/data/libraries.ts b/src/data/libraries.ts
@@ -14,6 +14,8 @@ export interface Library {
   image?: string
   // Optional project icon
   icon?: string
+  iconWidth?: number
+  iconHeight?: number
   // Optional repository to fetch and serve docs from
   // <user>/<repo>/<branch>/<path/to/dir>
   docs?: string
@@ -48,6 +50,8 @@ const libraries: Record<string, Library> = {
     description:
       'Zustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooks',
     icon: zustandIcon.src,
+    iconWidth: zustandIcon.width,
+    iconHeight: zustandIcon.height,
     image: zustandShare.src,
     docs: 'pmndrs/zustand/main/docs',
   },
@@ -57,6 +61,8 @@ const libraries: Record<string, Library> = {
     github: 'https://github.com/pmndrs/jotai',
     description: 'Jotai is a primitive and flexible state management library for React',
     icon: jotaiIcon.src,
+    iconWidth: jotaiIcon.width,
+    iconHeight: jotaiIcon.height,
   },
   valtio: {
     title: 'Valtio',

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -36,14 +36,13 @@ export default function HomePage() {
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 dark:text-gray-100">
         <header className="pt-2">
           <div className="max-w-7xl mx-auto flex justify-between">
-            <Link href="/">
-              <a
-                aria-label="Poimandres Docs"
-                className="p-2 block text-3xl text-center lg:text-left"
-              >
-                <span className="font-bold">Pmndrs</span>
-                <span className="font-normal">.docs</span>
-              </a>
+            <Link
+              href="/"
+              aria-label="Poimandres Docs"
+              className="p-2 block text-3xl text-center lg:text-left"
+            >
+              <span className="font-bold">Pmndrs</span>
+              <span className="font-normal">.docs</span>
             </Link>
             <ToggleTheme />
           </div>
@@ -68,22 +67,23 @@ export default function HomePage() {
                         <a href={data.github} target="_blank" rel="noopener" className="block">
                           <Image
                             src={data.icon}
-                            layout="fill"
                             className="object-contain"
                             alt={data.title}
                             aria-hidden
+                            width={data.iconWidth}
+                            height={data.iconHeight}
                           />
                         </a>
                       </div>
                     )}
                   </div>
                   <div className="flex w-full border-t border-gray-200 dark:border-gray-700 divide-x divide-gray-200 dark:divide-gray-700">
                     <Link href={data.url}>
-                      <a className="inline-flex items-center space-x-2 w-1/2 px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                      <span className="inline-flex items-center space-x-2 w-1/2 px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                         <Icon icon="docs" />
                         <span className="sm:hidden">Docs</span>
                         <span className="hidden sm:inline">Documentation</span>
-                      </a>
+                      </span>
                     </Link>
                     <a
                       href={data.github}

diff --git a/src/utils/docs.ts b/src/utils/docs.ts
@@ -60,8 +60,9 @@ export async function getDocs(
     return docs.filter(Boolean).flat()
   }
 
-  const config = libs[lib]
-  const [user, repo, branch, ...rest] = config.docs!.split('/')
+  const libDocs = libs[lib].docs
+  if (!libDocs) return []
+  const [user, repo, branch, ...rest] = libDocs.split('/')
 
   const dir = `/${user}-${repo}-${branch}`
   const root = `${dir}/${rest.join('/')}`