code review

avivkeller · avivkeller · commit dfae938f4c7b · 2025-06-24T12:18:38.000-04:00
diff --git a/src/generators/jsx-ast/utils/buildContent.mjs b/src/generators/jsx-ast/utils/buildContent.mjs
@@ -95,7 +95,7 @@ const transformStabilityNode = (node, index, parent) => {
   parent.children[index] = createJSXElement(JSX_IMPORTS.AlertBox.name, {
     children: sliceMarkdown(node, start, getTreeLength(node), {
       trimWhitespace: true,
-    }).children,
+    }).children[0].children,
     level: STABILITY_LEVELS[parseInt(node.data.index)],
     title: node.data.index,
   });
diff --git a/src/generators/web/template.html b/src/generators/web/template.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{title}}</title>
   <link rel="stylesheet" href="styles.css" />
+
+  <!-- Apply theme before paint to avoid FOUC (Flash of Unstyled Content) -->
   <script>
-    // This script runs before the document renders
     document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ||
       (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
   </script>
diff --git a/src/generators/web/ui/components/NavBar.jsx b/src/generators/web/ui/components/NavBar.jsx
@@ -20,7 +20,7 @@ export default () => {
       navItems={[]}
     >
       {/* TODO(@avivkeller): Orama doesn't support Server-Side rendering yet */}
-      {CLIENT && <SearchBox />}
+      {CLIENT && <SearchBox theme={theme} />}
       <ThemeToggle
         onClick={toggleTheme}
         aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
diff --git a/src/generators/web/ui/components/SearchBox/index.jsx b/src/generators/web/ui/components/SearchBox/index.jsx
@@ -3,13 +3,13 @@ import { OramaSearchButton, OramaSearchBox } from '@orama/react-components';
 import { useState, useEffect } from 'react';
 
 import { themeConfig } from './config.mjs';
-import { useTheme } from '../../hooks/useTheme.mjs';
 
 /**
- * Search component that provides documentation search functionality using Orama
+ * Search component that provides documentation search functionality using Orama.
+ *
+ * @param {{ theme: string }} props - Component props.
  */
-const MDXSearchBox = () => {
-  const [colorScheme] = useTheme();
+const SearchBox = ({ theme }) => {
   const [client, setClient] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -23,10 +23,8 @@ const MDXSearchBox = () => {
           schema: {},
         });
 
-        // Set the client immediately so it's available
         setClient(db);
 
-        // Then fetch and load the data
         const response = await fetch('orama-db.json');
         if (response.ok) {
           load(db, await response.json());
@@ -44,7 +42,7 @@ const MDXSearchBox = () => {
       <OramaSearchButton
         aria-disabled={!client || isLoading}
         style={{ flexGrow: 1 }}
-        colorScheme={colorScheme}
+        colorScheme={theme}
         themeConfig={themeConfig}
         aria-label="Search documentation"
       >
@@ -55,11 +53,11 @@ const MDXSearchBox = () => {
         disableChat={true}
         linksTarget="_self"
         clientInstance={client}
-        colorScheme={colorScheme}
+        colorScheme={theme}
         themeConfig={themeConfig}
       />
     </>
   );
 };
 
-export default MDXSearchBox;
+export default SearchBox;
diff --git a/src/generators/web/ui/hooks/useTheme.mjs b/src/generators/web/ui/hooks/useTheme.mjs
@@ -1,22 +1,40 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 /**
- * This hook provides theme management functionality
+ * Applies the given theme to the <html> element and persists it in localStorage.
+ *
+ * @param {string} theme - The theme to apply ('light' or 'dark').
+ */
+const applyTheme = theme => {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
+};
+
+/**
+ * A React hook for managing light/dark theme.
  */
 export const useTheme = () => {
-  const [theme, setTheme] = useState(() =>
-    CLIENT ? document.documentElement.getAttribute('data-theme') : 'light'
-  );
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    const initial =
+      localStorage.getItem('theme') ||
+      document.documentElement.getAttribute('data-theme') ||
+      'light';
+    applyTheme(initial);
+    setTheme(initial);
+  }, []);
 
   /**
-   * Toggles the theme between 'light' and 'dark'.
+   * Toggle between 'light' and 'dark' themes.
    */
-  const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light';
-    setTheme(newTheme);
-    document.documentElement.setAttribute('data-theme', newTheme);
-    localStorage.setItem('theme', newTheme);
-  };
+  const toggleTheme = useCallback(() => {
+    setTheme(prev => {
+      const next = prev === 'light' ? 'dark' : 'light';
+      applyTheme(next);
+      return next;
+    });
+  }, []);
 
   return [theme, toggleTheme];
 };

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default () => {`
`20`	`20`	`navItems={[]}`
`21`	`21`	`>`
`22`	`22`	`{/* TODO(@avivkeller): Orama doesn't support Server-Side rendering yet */}`
`23`		`- {CLIENT && <SearchBox />}`
	`23`	`+ {CLIENT && <SearchBox theme={theme} />}`
`24`	`24`	`<ThemeToggle`
`25`	`25`	`onClick={toggleTheme}`
`26`	`26`	aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}