feat(docs): use doc-kit 1.3.0 (#11)

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/Metabar/index.jsx

@@ -2,31 +2,25 @@ 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];
+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,23 +1,57 @@
 import SideBar from '@node-core/ui-components/Containers/Sidebar';
+import { relative } from '@node-core/doc-kit/src/utils/url.mjs';
+import { pages } from '#theme/config';
 
-import { sideNav } from '../config.json' with { type: 'json' };
+/** @type {Array<[string, string]>} */
+const categories = [
+  ['getting-started', 'Getting Started'],
+  ['command-line', 'Command Line'],
+  ['http', 'HTTP'],
+  ['file-system', 'File System'],
+  ['asynchronous-work', 'Asynchronous Work'],
+  ['typescript', 'TypeScript'],
+  ['package-management', 'Package Management'],
+  ['diagnostics', 'Diagnostics'],
+  ['testing', 'Testing'],
+  ['security', 'Security'],
+];
 
-/**
- * Redirect to a URL
- * @param {string} url URL
- */
+/** @type {Map<string, Array<{ heading: string, path: string }>>} */
+const byDir = new Map();
+for (const [heading, path] of pages) {
+  const dir = path.split('/')[1];
+  if (!byDir.has(dir)) byDir.set(dir, []);
+  byDir.get(dir).push({ heading, path });
+}
+
+/** @param {string} url */
 const redirect = url => (window.location.href = url);
 
+const PrefetchLink = props => <a {...props} rel="prefetch" />;
+
 /**
  * Sidebar component for MDX documentation with page navigation
- * @param {{ pathname: string }} props
  */
-export default ({ pathname }) => (
-  <SideBar
-    pathname={pathname}
-    groups={sideNav}
-    onSelect={redirect}
-    as={props => <a {...props} rel="prefetch" />}
-    title="Navigation"
-  />
-);
+export default ({ metadata }) => {
+  const { path: currentPath, basename } = metadata;
+  const pathname = `${basename}.html`;
+
+  const groups = categories.map(([dir, title]) => ({
+    groupName: title,
+    items: byDir.get(dir).map(({ heading, path }) => ({
+      label: heading,
+      link:
+        currentPath === path ? pathname : `${relative(path, currentPath)}.html`,
+    })),
+  }));
+
+  return (
+    <SideBar
+      pathname={pathname}
+      groups={groups}
+      onSelect={redirect}
+      as={PrefetchLink}
+      title="Navigation"
+    />
+  );
+};

doc-kit.config.mjs

@@ -7,13 +7,10 @@ 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(