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 SideBar from '../Sidebar';
+
+import Footer from '#theme/Footer';
+
+/**
+ * @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,31 +2,26 @@ 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} />
-              ),
+              Authors: <AvatarGroup avatars={authors} as="a" limit={5} />,
             }
           : {}),
         Contribute: (

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,23 @@ export default () => {
     <NavBar
       Logo={Logo}
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
-      navItems={topNav}
+      navItems={[
+        { link: '/learn', text: 'Learn' },
+        { link: '/about', text: 'About' },
+        { link: '/download', text: 'Download' },
+        { link: '/blog', text: 'Blog' },
+        { link: 'https://nodejs.org/docs/latest/api/', text: 'Docs' },
+        {
+          link: 'https://github.com/nodejs/node/blob/main/CONTRIBUTING.md',
+          text: 'Contribute',
+          target: '_blank',
+        },
+        {
+          link: 'https://training.linuxfoundation.org/openjs/',
+          text: 'Courses',
+          target: '_blank',
+        },
+      ]}
     >
       <SearchBox />
       <ThemeToggle

components/Sidebar/index.jsx

@@ -1,7 +1,5 @@
 import SideBar from '@node-core/ui-components/Containers/Sidebar';
 
-import { sideNav } from '../config.json' with { type: 'json' };
-
 /**
  * Redirect to a URL
  * @param {string} url URL
@@ -10,14 +8,24 @@ const redirect = url => (window.location.href = url);
 
 /**
  * Sidebar component for MDX documentation with page navigation
- * @param {{ pathname: string }} props
+ * @param {import('../Layout').Props} props
  */
-export default ({ pathname }) => (
-  <SideBar
-    pathname={pathname}
-    groups={sideNav}
-    onSelect={redirect}
-    as={props => <a {...props} rel="prefetch" />}
-    title="Navigation"
-  />
-);
+export default ({ metadata }) => {
+  const items = pages.map(([heading, path]) => ({
+    label: heading,
+    link:
+      metadata.path === path
+        ? `${metadata.basename}.html`
+        : `${relative(path, metadata.path)}.html`,
+  }));
+
+  return (
+    <SideBar
+      pathname={`${metadata.basename}.html`}
+      groups={[{ groupName: 'Learn Articles', items }]}
+      onSelect={redirect}
+      as={props => <a {...props} rel="prefetch" />}
+      title="Navigation"
+    />
+  );
+};

doc-kit.config.mjs

@@ -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'),
     },
   },
 };