DataTag, CodeTabs

Author: avivkeller

package-lock.json

@@ -41,19 +41,19 @@
     "@babel/generator": "^7.27.3",
     "@babel/types": "^7.27.3",
     "@clack/prompts": "^0.10.1",
+    "@heroicons/react": "^2.2.0",
     "@node-core/rehype-shiki": "^1.0.1-601b74e6d7dfc706eb99e854fc96120bea42f03a",
-    "@node-core/ui-components": "^1.0.1-6cb8b0a0c75c24f5ccc84bb07a1ea9b4b810abd2",
+    "@node-core/ui-components": "^1.0.1-79dc76991a4c35cbd47e62c12e8d3507e3d9a7c4",
     "@orama/orama": "^3.1.6",
     "@orama/plugin-data-persistence": "^3.1.6",
     "@orama/react-components": "^0.8.0",
-    "@radix-ui/react-tabs": "^1.1.12",
     "@tailwindcss/postcss": "^4.1.8",
     "acorn": "^8.14.1",
     "commander": "^13.1.0",
     "dedent": "^1.6.0",
     "esbuild": "^0.25.5",
     "esbuild-style-plugin": "^1.6.3",
-    "estree-to-babel": "^11.0.2",
+    "estree-to-babel": "^11.0.3",
     "estree-util-value-to-estree": "^3.4.0",
     "estree-util-visit": "^2.0.0",
     "github-slugger": "^2.0.0",
@@ -62,7 +62,7 @@
     "hastscript": "^9.0.1",
     "html-minifier-terser": "^7.2.0",
     "mustache": "^4.2.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "postcss-calc": "^10.1.1",
     "preact": "^10.26.8",
     "preact-render-to-string": "^6.5.13",

package.json

@@ -11,6 +11,17 @@ export const STABILITY_LEVELS = [
   'info', // (3) Legacy
 ];
 
+/**
+ * UI classes for heading depths
+ */
+export const HEADER_SIZE_MAP = [
+  undefined, // h0
+  'lg', // h1
+  'md', // h2
+  'sm', // h3
+  'sm', // h4
+];
+
 /**
  * HTML tag to UI component mappings
  */
@@ -26,19 +37,6 @@ export const TYPE_TRANSFORMS = {
   raw: 'text',
 };
 
-/**
- * API type icon configurations
- */
-export const API_ICONS = {
-  event: { symbol: 'E', color: 'red' },
-  method: { symbol: 'M', color: 'red' },
-  property: { symbol: 'P', color: 'red' },
-  class: { symbol: 'C', color: 'red' },
-  module: { symbol: 'M', color: 'red' },
-  classMethod: { symbol: 'S', color: 'red' },
-  ctor: { symbol: 'C', color: 'red' },
-};
-
 /**
  * API lifecycle change labels
  */

src/generators/jsx-ast/constants.mjs

@@ -12,8 +12,8 @@ import { sortChanges } from '../../../utils/generators.mjs';
 import createQueries from '../../../utils/queries/index.mjs';
 import { JSX_IMPORTS } from '../../web/constants.mjs';
 import {
-  API_ICONS,
   STABILITY_LEVELS,
+  HEADER_SIZE_MAP,
   LIFECYCLE_LABELS,
   INTERNATIONALIZABLE,
 } from '../constants.mjs';
@@ -104,15 +104,22 @@ const transformStabilityNode = ({ data }, index, parent) => {
 const transformHeadingNode = (entry, node, index, parent) => {
   const { data, children } = node;
   const headerChildren = [
-    createElement(`h${data.depth + 1}`, [
-      createElement(`a#${data.slug}`, { href: `#${data.slug}` }, children),
-    ]),
+    createElement(
+      `h${data.depth + 1}`,
+      {
+        style: 'display: flex; align-items: center; gap: 8px;',
+      },
+      [createElement(`a#${data.slug}`, { href: `#${data.slug}` }, children)]
+    ),
   ];
 
   // Add type icon if available
-  if (data.type in API_ICONS) {
-    headerChildren.unshift(
-      createJSXElement(JSX_IMPORTS.DataTag.name, API_ICONS[data.type])
+  if (data.type && data.type !== 'misc') {
+    headerChildren[0].children.unshift(
+      createJSXElement(JSX_IMPORTS.DataTag.name, {
+        kind: data.type,
+        size: HEADER_SIZE_MAP[data.depth],
+      })
     );
   }
 

src/generators/jsx-ast/utils/buildContent.mjs

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
-import { staticData } from '../utilities.mjs';
+import { STATIC_DATA } from '../constants.mjs';
 
-const languageDisplayNameMap = new Map(staticData.shikiDisplayNameMap);
+const languageDisplayNameMap = new Map(STATIC_DATA.shikiDisplayNameMap);
 
 /**
  * Get the display name of a language

src/generators/web/client/components/CodeBox.jsx

@@ -1,22 +1,40 @@
 import MetaBar from '@node-core/ui-components/Containers/MetaBar';
-import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub.tsx';
+import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
+import { CodeBracketIcon, DocumentIcon } from '@heroicons/react/24/outline';
 
-export default ({ headings, addedIn, readingTime, viewAs, editThisPage }) => {
-  return (
-    <MetaBar
-      heading="Table of Contents"
-      headings={{ items: headings }}
-      items={{
-        'Added In': addedIn,
-        'Reading Time': readingTime,
-        'View As': viewAs.map(([title, path]) => <a href={path}>{title}</a>),
-        Contribute: (
-          <>
-            <GitHubIcon className="fill-neutral-700 dark:fill-neutral-100" />
-            <a href={editThisPage}>Edit this page</a>
-          </>
-        ),
-      }}
-    />
-  );
+const iconMap = {
+  JSON: CodeBracketIcon,
+  MD: DocumentIcon,
 };
+
+export default ({ headings, addedIn, readingTime, viewAs, editThisPage }) => (
+  <MetaBar
+    heading="Table of Contents"
+    headings={{ items: headings }}
+    items={{
+      'Added In': addedIn,
+      'Reading Time': readingTime,
+      'View As': (
+        <ol>
+          {viewAs.map(([title, path]) => {
+            const Icon = iconMap[title];
+            return (
+              <ol key={title}>
+                <a href={path}>
+                  {Icon && <Icon className="inline w-4 h-4 mr-1" />}
+                  {title}
+                </a>
+              </ol>
+            );
+          })}
+        </ol>
+      ),
+      Contribute: (
+        <>
+          <GitHubIcon className="fill-neutral-700 dark:fill-neutral-100" />
+          <a href={editThisPage}>Edit this page</a>
+        </>
+      ),
+    }}
+  />
+);

src/generators/web/client/components/CodeTabs.jsx

@@ -20,7 +20,7 @@ const MDXSearchBox = () => {
         setClient(db);
 
         // Then fetch and load the data
-        const response = await fetch('/orama-db.json');
+        const response = await fetch('orama-db.json');
         if (response.ok) {
           load(db, await response.json());
         }
@@ -35,6 +35,7 @@ const MDXSearchBox = () => {
   return (
     <>
       <OramaSearchButton
+        aria-disabled={!client || isLoading}
         style={{ flexGrow: 1 }}
         colorScheme={colorScheme}
         themeConfig={themeConfig}
@@ -43,6 +44,7 @@ const MDXSearchBox = () => {
         Search documentation
       </OramaSearchButton>
       <OramaSearchBox
+        aria-disabled={!client || isLoading}
         disableChat={true}
         linksTarget="_self"
         clientInstance={client}

src/generators/web/client/components/DataTag.jsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-undef
+export const STATIC_DATA = __STATIC_DATA__;