fix width, increase toc depth

Author: avivkeller

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

@@ -7,12 +7,6 @@ import { SAMPLE } from './utils.mjs';
 import { JSX_IMPORTS } from '../../../web/constants.mjs';
 import buildContent from '../buildContent.mjs';
 
-const expectedNames = [
-  JSX_IMPORTS.NavBar.name,
-  JSX_IMPORTS.Article.name,
-  JSX_IMPORTS.SideBar.name,
-];
-
 describe('buildContent', () => {
   it('should process entries and include JSX wrapper elements', async () => {
     const tree = await buildContent(
@@ -27,12 +21,10 @@ describe('buildContent', () => {
     const foundNames = [];
     visit(tree, node => node.name && foundNames.push(node.name));
 
-    expectedNames.forEach(name => {
-      assert(
-        foundNames.includes(name),
-        `Missing "${name}". Found: ${foundNames.join(', ')}`
-      );
-    });
+    assert.equal(foundNames, [
+      JSX_IMPORTS.NotificationProvider.name,
+      JSX_IMPORTS.NavBar.name,
+    ]);
 
     assert.equal(tree.data, SAMPLE);
   });

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

@@ -26,7 +26,7 @@ export const buildMetaBarProps = (head, entries) => {
 
   const headings = entries
     .filter(
-      entry => entry.heading?.data?.text && entry.heading?.data?.depth < 3
+      entry => entry.heading?.data?.text && entry.heading?.data?.depth < 4
     )
     .map(entry => {
       let heading = getFullName(

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

@@ -8,8 +8,18 @@ import { TAG_TRANSFORMS } from '../constants.mjs';
  * @returns {T}
  */
 const transformer = tree => {
-  visit(tree, 'element', node => {
+  visit(tree, 'element', (node, index, parent) => {
     node.tagName = TAG_TRANSFORMS[node.tagName] || node.tagName;
+
+    // Wrap <table> in a <div class="table-container">
+    if (node.tagName === 'table' && parent && typeof index === 'number') {
+      parent.children[index] = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['overflow-container'] },
+        children: [node],
+      };
+    }
   });
 
   // Are there footnotes?

src/generators/web/build/bundle.mjs

@@ -15,7 +15,7 @@ export default async function bundle(code, { server = false } = {}) {
     input: 'entrypoint.jsx',
     output: {
       format: server ? 'cjs' : 'iife',
-      minify: server ? undefined : true,
+      minify: !server,
     },
     platform: server ? 'node' : 'browser',
     external: server ? ['preact', '@node-core/ui-components'] : [],

src/generators/web/build/css.mjs

@@ -55,7 +55,7 @@ export default () => {
       this.emitFile({
         type: 'asset',
         name: 'styles.css',
-        source: Array.from(cssChunks).join('\n'),
+        source: Array.from(cssChunks).join(''),
       });
     },
   };

src/generators/web/build/data.mjs

@@ -25,5 +25,4 @@ export const createStaticData = () => {
   };
 };
 
-const staticData = JSON.stringify(createStaticData());
-export default staticData;
+export default JSON.stringify(createStaticData());

src/generators/web/ui/index.css

@@ -1,40 +1,58 @@
 @import '@node-core/ui-components/styles/index.css';
 
+/* Fonts */
 :root {
   --font-open-sans: 'Open Sans', sans-serif;
   --font-ibm-plex-mono: 'IBM Plex Mono', monospace;
 }
 
-div:has(> h1, > h2, > h3, > h4) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Code should inherit its font size */
-code {
-  font-size: inherit;
-}
-
-a {
-  padding-right: unset;
-}
-
-.change-history {
-  margin-left: auto;
-}
-
-.arrow {
-  width: calc(var(--spacing, 0.25rem) * 3);
-  display: inline;
-  margin-left: var(--spacing, 0.25rem);
-}
-
-/* No line numbers on signatures */
-.signature .line::after {
-  all: unset !important;
-}
-
-.signature .line {
-  padding-left: unset !important;
-}
+main {
+  overflow: hidden;
+
+  /* Code should inherit its font size */
+  code {
+    font-size: inherit;
+  }
+
+  /* Don't overflow the parent */
+  .overflow-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  table {
+    /* In tables, don't pad `a` elements */
+    a {
+      padding-right: unset;
+    }
+  }
+
+  /* Change history positioning */
+  div:has(> h1, > h2, > h3, > h4) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .change-history {
+      margin-left: auto;
+    }
+  }
+
+  .arrow {
+    /* Arrow icon styling */
+    width: calc(var(--spacing, 0.25rem) * 3);
+    display: inline;
+    margin-left: var(--spacing, 0.25rem);
+  }
+
+  .signature {
+    /* Signature styling - remove line numbers and padding */
+    .line {
+      padding-left: unset !important;
+
+      &::after {
+        all: unset !important;
+      }
+    }
+  }
+}