feat(web): make headings more distinct

Author: avivkeller

src/generators/jsx-ast/constants.mjs

@@ -154,12 +154,7 @@ export const OVERRIDDEN_POSITIONS = [
 ];
 
 // These types are methods, and have signatures we should enumerate
-export const TYPES_WITH_METHOD_SIGNATURES = [
-  'class',
-  'ctor',
-  'method',
-  'classMethod',
-];
+export const TYPES_WITH_METHOD_SIGNATURES = ['ctor', 'method', 'classMethod'];
 
 // Regex to trim leading whitespace, colons, and hyphens from strings
 export const TRIMMABLE_PADDING_REGEX = /^[\s:-]+/;

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

@@ -3,7 +3,6 @@
 import readingTime from 'reading-time';
 import { visit } from 'unist-util-visit';
 
-import { getFullName } from './signature.mjs';
 import getConfig from '../../../utils/configuration/index.mjs';
 import {
   GITHUB_EDIT_URL,
@@ -49,25 +48,16 @@ const extractHeading = entry => {
 
   const cliFlagOrEnv = [...data.text.matchAll(/`(-[\w-]+|[A-Z0-9_]+=)/g)];
 
-  let heading;
-
-  if (cliFlagOrEnv.length > 0) {
-    heading = cliFlagOrEnv.at(-1)[1];
-  } else {
-    const rawName = data.name
-      // Remove any containing code blocks
-      .replace(/`/g, '')
-      // Remove any prefixes (i.e. 'Class:')
-      .replace(/^[^:]+:/, '')
-      // Trim the remaining whitespace
-      .trim();
-
-    heading = getFullName(data, rawName);
-  }
-
-  if (data.type === 'ctor') {
-    heading += ' Constructor';
-  }
+  const heading =
+    cliFlagOrEnv.length > 0
+      ? cliFlagOrEnv.at(-1)[1]
+      : data.text
+          // Remove any containing code blocks
+          .replace(/`/g, '')
+          // Remove any prefixes (i.e. 'Class:')
+          .replace(/^[^:]+:/, '')
+          // Trim the remaining whitespace
+          .trim();
 
   return {
     depth: entry.heading.depth,

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

@@ -21,8 +21,8 @@ import {
   TYPE_PREFIX_LENGTH,
 } from '../constants.mjs';
 import {
-  insertSignatureCodeBlock,
   createSignatureTable,
+  createSignatureCodeBlock,
   getFullName,
 } from './signature.mjs';
 import getConfig from '../../../utils/configuration/index.mjs';
@@ -125,12 +125,15 @@ export const extractHeadingContent = content => {
 /**
  * Creates a heading wrapper element with anchors, icons, and optional change history.
  * @param {import('mdast').Node} content - The content node to extract text from
+ * @param {import('mdast.Node')} parent - The parent
  * @param {import('unist').Node|null} changeElement - The change history element, if available
  */
-export const createHeadingElement = (content, changeElement) => {
+export const createHeadingElement = (content, parent, changeElement) => {
   const { type, depth, slug } = content.data;
 
-  let headingContent = extractHeadingContent(content);
+  let headingContent = TYPES_WITH_METHOD_SIGNATURES.includes(type)
+    ? createSignatureCodeBlock(parent, content)
+    : extractHeadingContent(content);
 
   // Build heading with anchor link
   const headingWrapper = createElement('div', [
@@ -212,6 +215,7 @@ export const transformHeadingNode = async (
   // Replace heading node with our enhanced heading element
   parent.children[index] = createHeadingElement(
     node,
+    parent,
     createChangeElement(entry, remark)
   );
 
@@ -243,11 +247,6 @@ export const transformHeadingNode = async (
     parent.children.splice(index + 1, 0, sourceLink);
   }
 
-  // If the heading type supports method signatures, insert signature block
-  if (TYPES_WITH_METHOD_SIGNATURES.includes(node.data.type)) {
-    insertSignatureCodeBlock(parent, node, index + 1);
-  }
-
   return [SKIP];
 };
 

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

@@ -1,5 +1,3 @@
-import { h as createElement } from 'hastscript';
-
 import { createJSXElement } from './ast.mjs';
 import { parseListIntoProperties } from './types.mjs';
 import { highlighter } from '../../../utils/highlighter.mjs';
@@ -48,20 +46,6 @@ export const generateSignature = (
   return `${prefix}${functionName}(${paramsStr})${returnStr}`;
 };
 
-/**
- * Creates a syntax-highlighted code block for a signature using rehype-shiki.
- *
- * @param {string} functionName - The function name to display.
- * @param {import('../../legacy-json/types').MethodSignature} signature - Signature object with parameter and return type info.
- * @param {string} prefix - Optional prefix like `'new '`.
- */
-export const createSignatureCodeBlock = (functionName, signature, prefix) => {
-  const sig = generateSignature(functionName, signature, prefix);
-  const highlighted = highlighter.highlightToHast(sig, 'typescript');
-
-  return createElement('div', { class: 'signature' }, [highlighted]);
-};
-
 /**
  * Infers the "real" function name from a heading node.
  * Useful when auto-generated headings differ from code tokens.
@@ -87,14 +71,12 @@ export const getFullName = ({ name, text }, fallback = name) => {
 };
 
 /**
- * Transforms a heading + list structure into a function/class signature block.
- * Mutates the `children` array by injecting the signature HAST node.
+ * Creates a syntax-highlighted code block for a signature using rehype-shiki.
  *
  * @param {import('@types/mdast').Parent} parent - The parent MDAST node (usually a section).
  * @param {import('@types/mdast').Heading} heading - The heading node with metadata.
- * @param {number} idx - The index at which the heading occurs in `parent.children`.
  */
-export const insertSignatureCodeBlock = ({ children }, { data }, idx) => {
+export const createSignatureCodeBlock = ({ children }, { data }) => {
   // Try to locate the parameter list immediately following the heading
   const listIdx = children.findIndex(createQueries.UNIST.isStronglyTypedList);
 
@@ -119,16 +101,15 @@ export const insertSignatureCodeBlock = ({ children }, { data }, idx) => {
     children.splice(listIdx, 1); // Remove class param list
   }
 
-  // Insert the highlighted signature block above the heading
-  children.splice(
-    idx,
-    0,
-    createSignatureCodeBlock(
-      displayName,
-      signature,
-      data.type === 'ctor' ? 'new ' : ''
-    )
+  const sig = generateSignature(
+    displayName,
+    signature,
+    data.type === 'ctor' ? 'new ' : ''
   );
+
+  const highlighted = highlighter.highlightToHast(sig, 'typescript');
+
+  return highlighted.children[0].children;
 };
 
 /**

src/generators/web/ui/index.css

@@ -106,15 +106,4 @@ main {
     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;
-      }
-    }
-  }
 }