feat(docs): use doc-kit 1.3.0

Author: avivkeller

.gitignore

@@ -1,3 +1,2 @@
 node_modules
 out
-components/config.json

.remarkrc.json

@@ -1,3 +1,3 @@
 {
-  "plugins": ["@node-core/remark-lint"]
+  "plugins": ["remark-frontmatter", "@node-core/remark-lint"]
 }

components/Layout/index.jsx

@@ -0,0 +1,41 @@
+import TableOfContents from '@node-core/ui-components/Common/TableOfContents';
+import Article from '@node-core/ui-components/Containers/Article';
+
+import NavBar from '../Navigation';
+import MetaBar from '../Metabar';
+
+import Footer from '#theme/Footer';
+import SideBar from '#theme/Sidebar';
+
+/**
+ * @typedef {Object} Props
+ * @property {import('@node-core/doc-kit/src/generators/web/ui/types.d.ts').SerializedMetadata} metadata
+ * @property {Array} headings
+ * @property {string} readingTime
+ * @property {import('preact').ComponentChildren} children
+ */
+
+/**
+ * @param {Props} props
+ */
+export default ({ metadata, headings, readingTime, children }) => (
+  <>
+    <NavBar />
+    <Article>
+      <SideBar metadata={metadata} />
+      <div>
+        <div>
+          <TableOfContents headings={headings} summaryTitle="On this page" />
+          <br />
+          <main>{children}</main>
+        </div>
+        <MetaBar
+          metadata={metadata}
+          headings={headings}
+          readingTime={readingTime}
+        />
+      </div>
+    </Article>
+    <Footer />
+  </>
+);

components/Metabar/index.jsx

@@ -2,30 +2,27 @@ import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 
-import { authors } from '../config.json' with { type: 'json' };
+import { editURL } from '#theme/config';
 
-/**
- * @typedef MetaBarProps
- * @property {Array<import('@vcarl/remark-headings').Heading>} headings
- * @property {string} readingTime
- * @property {Array<[string, string]>} viewAs
- * @property {string} editThisPage
- */
-
-/** @param {MetaBarProps} props */
-export default ({ headings = [], readingTime, viewAs = [], editThisPage }) => {
-  const pageAuthors = authors[editThisPage];
+/** @param {import('../Layout').Props} props */
+export default ({ metadata, headings = [], readingTime }) => {
+  const editThisPage = editURL.replace('{path}', metadata.path);
+  const authors = metadata.authors?.split(',').map(id => ({
+    image: `https://avatars.githubusercontent.com/${id.trim()}`,
+    url: `https://github.com/${id.trim()}`,
+    nickname: id,
+  }));
 
   return (
     <MetaBar
       heading="Table of Contents"
       headings={{ items: headings }}
       items={{
         'Reading Time': readingTime,
-        ...(CLIENT && pageAuthors?.length
+        ...(CLIENT && authors?.length
           ? {
               Authors: (
-                <AvatarGroup avatars={pageAuthors} as="a" clickable limit={5} />
+                <AvatarGroup avatars={authors} as="a" limit={5} />
               ),
             }
           : {}),

components/Navigation/index.jsx

@@ -7,7 +7,6 @@ import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/Searc
 import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
 
 import Logo from '#theme/Logo';
-import { topNav } from '../config.json' with { type: 'json' };
 
 /**
  * NavBar component that displays the headings, search, etc.
@@ -19,7 +18,7 @@ export default () => {
     <NavBar
       Logo={Logo}
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
-      navItems={topNav}
+      navItems={[]}
     >
       <SearchBox />
       <ThemeToggle

components/Sidebar/index.jsx

@@ -7,27 +7,13 @@ export default {
     output: 'out',
     input: ['pages/**/*.md'],
   },
-  'jsx-ast': {
-    // TODO(@avivkeller): Hook this up to render at nodejs.org/learn
-    pageURL: 'https://nodejs.github.io/learn{path}.html',
-    editURL: 'https://github.com/nodejs/learn/edit/main/pages{path}.md',
-  },
   web: {
     title: '',
+    pageURL: 'https://nodejs.org/learn{path}.html',
+    editURL: 'https://github.com/nodejs/learn/edit/main/pages{path}.md',
     imports: {
       ...web.defaultConfiguration.imports,
-      '#theme/Navigation': join(
-        import.meta.dirname,
-        'components/Navigation/index.jsx'
-      ),
-      '#theme/Sidebar': join(
-        import.meta.dirname,
-        'components/Sidebar/index.jsx'
-      ),
-      '#theme/Metabar': join(
-        import.meta.dirname,
-        'components/Metabar/index.jsx'
-      ),
+      '#theme/Layout': join(import.meta.dirname, 'components/Layout/index.jsx'),
     },
   },
 };

doc-kit.config.mjs

@@ -1,6 +1,5 @@
 {
   "scripts": {
-    "prebuild": "node scripts/generate-component-config.mjs",
     "build": "doc-kit generate -t web -t orama-db --config-file doc-kit.config.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -10,14 +9,15 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@node-core/doc-kit": "1.2.1",
+    "@node-core/doc-kit": "1.3.0",
     "@node-core/remark-lint": "^1.3.0",
     "eslint": "^10.1.0",
     "eslint-plugin-mdx": "^3.7.0",
     "globals": "^17.4.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.1",
+    "remark-frontmatter": "^5.0.0",
     "typescript-eslint": "^8.57.2"
   },
   "dependencies": {

package-lock.json

@@ -1,6 +1,6 @@
-<!-- YAML
+---
 authors: aug2uag, ovflowd
--->
+---
 
 # Asynchronous flow control