css improvements

Author: avivkeller

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

@@ -104,17 +104,14 @@ const transformStabilityNode = ({ data }, index, parent) => {
 const transformHeadingNode = (entry, node, index, parent) => {
   const { data, children } = node;
   const headerChildren = [
-    createElement(
-      `h${data.depth + 1}`,
-      {
-        style: 'display: flex; align-items: center; gap: 8px;',
-      },
-      [createElement(`a#${data.slug}`, { href: `#${data.slug}` }, children)]
-    ),
+    createElement(`h${data.depth + 1}`, [
+      createElement(`a#${data.slug}`, { href: `#${data.slug}` }, children),
+    ]),
   ];
 
   // Add type icon if available
   if (data.type && data.type !== 'misc') {
+    headerChildren[0].properties.className = 'has-datatag';
     headerChildren[0].children.unshift(
       createJSXElement(JSX_IMPORTS.DataTag.name, {
         kind: data.type,

src/generators/web/client/hooks/useTheme.mjs

@@ -4,7 +4,6 @@ import { useState, useEffect } from 'react';
  * This hook provides theme management functionality
  */
 export const useTheme = () => {
-  /** @type {['light' | 'dark', Function]} */
   const [theme, setTheme] = useState('light');
 
   useEffect(() => {

src/generators/web/client/index.css

@@ -0,0 +1,7 @@
+@import '@node-core/ui-components/styles/index.css';
+
+.has-datatag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

src/generators/web/utils/astBuilder.mjs

@@ -50,7 +50,8 @@ export default () => {
       ...baseImports,
       createImportDeclaration(
         null,
-        '@node-core/ui-components/styles/index.css'
+        // Relative to ESBUILD_RESOLVE_DIR
+        './index.css'
       ),
       createImportDeclaration('hydrate', 'preact', false),