Fix/light mode toggle

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,62 +1,43 @@
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-* 
-*   http://www.apache.org/licenses/LICENSE-2.0
-* 
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied.  See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-
 'use client';
 
 import { useTheme } from 'next-themes';
-import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
+import { Sun, Moon, Monitor } from 'lucide-react';
 
 export function ColorSchemeToggle() {
+  const { theme, setTheme } = useTheme();
   const { setColorScheme } = useMantineColorScheme();
-  const { setTheme } = useTheme();
 
-  /**
-   * You might improve this component. Anyway, it's a good starting point.
-   * As you can see we have to handle both the Mantine and Nextra dark mode.
-   */
+  const toggleTheme = (mode: 'light' | 'dark' | 'system') => {
+    setTheme(mode);
+    setColorScheme(mode === 'system' ? 'auto' : mode);
+  };
 
   return (
     <Group justify="center" mt="xl">
-      <Button
-        onClick={() => {
-          setColorScheme('light');
-          setTheme('light');
-        }}
+      <ActionIcon
+        variant={theme === 'light' ? 'filled' : 'default'}
+        onClick={() => toggleTheme('light')}
+        title="Switch to Light mode"
       >
-        Light
-      </Button>
-      <Button
-        onClick={() => {
-          setColorScheme('dark');
-          setTheme('dark');
-        }}
+        <Sun size={18} />
+      </ActionIcon>
+
+      <ActionIcon
+        variant={theme === 'dark' ? 'filled' : 'default'}
+        onClick={() => toggleTheme('dark')}
+        title="Switch to Dark mode"
       >
-        Dark
-      </Button>
-      <Button
-        onClick={() => {
-          setColorScheme('auto');
-          setTheme('system');
-        }}
+        <Moon size={18} />
+      </ActionIcon>
+
+      <ActionIcon
+        variant={theme === 'system' ? 'filled' : 'default'}
+        onClick={() => toggleTheme('system')}
+        title="Follow System preference"
       >
-        Auto
-      </Button>
+        <Monitor size={18} />
+      </ActionIcon>
     </Group>
   );
 }

components/SearchBar/SearchBar.tsx

@@ -1,45 +1,61 @@
 /*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-* 
-*   http://www.apache.org/licenses/LICENSE-2.0
-* 
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied.  See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use client';
 
-'use client'
-
-import { Button } from '@mantine/core';
+import { useEffect, useState } from 'react';
 import { IconSearch } from '@tabler/icons-react';
+import { Button } from '@mantine/core';
 
 export function SearchBar() {
-  const handleSearch = () => {
-    // This triggers Nextra's built-in search using keyboard shortcut
-    const event = new KeyboardEvent('keydown', {
-      key: 'k',
-      metaKey: true, // For Mac
-      ctrlKey: true, // For Windows/Linux
+  const [pagefindReady, setPagefindReady] = useState(false);
+
+  useEffect(() => {
+    import('@pagefind/default-ui').then((mod) => {
+      new mod.PagefindUI({
+        element: '#search',
+        showImages: false,
+        basePath: '/_pagefind/', // 👈 ensures correct path
+      });
+      setPagefindReady(true);
     });
-    document.dispatchEvent(event);
+  }, []);
+
+  const handleSearch = () => {
+    const searchElement = document.querySelector('#search') as HTMLElement;
+    if (searchElement) {
+      searchElement.scrollIntoView({ behavior: 'smooth' });
+    }
   };
 
   return (
-    <Button
-      onClick={handleSearch}
-      leftSection={<IconSearch size={20} />}
-      variant="subtle"
-    >
-      Search
-    </Button>
+    <>
+      <Button
+        onClick={handleSearch}
+        leftSection={<IconSearch size={20} />}
+        variant="subtle"
+        disabled={!pagefindReady}
+      >
+        Search
+      </Button>
+
+      {/* Pagefind search box gets injected here */}
+      <div id="search" style={{ marginTop: '1rem' }} />
+    </>
   );
-} 
+}

components/Welcome/Welcome.tsx

@@ -21,11 +21,14 @@
 
 import { TextAnimate } from '@gfazioli/mantine-text-animate';
 import { IconBrandGithub, IconExternalLink } from '@tabler/icons-react';
-import { Anchor, Button, Center, Paper, Text, Title } from '@mantine/core';
+import { Anchor, Button, Center, Paper, Text, Title, useMantineColorScheme } from '@mantine/core';
 import pack from '../../package.json';
 import classes from './Welcome.module.css';
 
 export function Welcome() {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
   return (
     <>
       <Title maw="90vw" mx="auto" ta="center" mt={100}>
@@ -58,19 +61,23 @@ export function Welcome() {
 
       <Center>
         <Button
-          href="https://resilientdb.incubator.apache.org/"
-          component="a"
-          rightSection={<IconExternalLink />}
-          leftSection={<IconBrandGithub />}
-          variant="outline"
-          px={32}
-          radius={256}
-          size="lg"
-          mx="auto"
-          mt="xl"
-        >
-          Latest Release v{pack.version}
-        </Button>
+                href="https://resilientdb.incubator.apache.org/"
+                component="a"
+                leftSection={<IconBrandGithub size={18} />}
+                rightSection={<IconExternalLink size={18} />}
+                variant={isDark ? 'outline' : 'gradient'} // dark: outline, light: gradient
+                gradient={isDark ? undefined : { from: 'blue', to: 'cyan' }} // gradient only for light mode
+                color={isDark ? 'gray' : undefined} // fallback color for dark mode
+                px={32}
+                radius="xl"
+                size="lg"
+                mx="auto"
+                mt="xl"
+              >
+  Latest Release v{pack.version}
+</Button>
+
+
       </Center>
 
       <Paper shadow="xl" p={8} mih={300} my={32} bg="dark.9" mx="auto" radius={8}>

global.d.ts

@@ -0,0 +1,9 @@
+declare module "@pagefind/default-ui" {
+  export class PagefindUI {
+    constructor(options: {
+      element: string;
+      showImages?: boolean;
+      basePath?: string;
+    });
+  }
+}

next-env.d.ts

@@ -1,22 +1,3 @@
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-* 
-*   http://www.apache.org/licenses/LICENSE-2.0
-* 
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied.  See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />

next.config.mjs

@@ -52,4 +52,18 @@ export default withNextra(
       maxInactiveAge: 25 * 1000,
       pagesBufferLength: 2,
     },
-  }));
+
+    // 🔑 Add this to ensure Pagefind files are accessible
+    async headers() {
+      return [
+        {
+          source: '/_pagefind/:path*',
+          headers: [
+            { key: 'Access-Control-Allow-Origin', value: '*' },
+            { key: 'Cache-Control', value: 'public, max-age=3600, immutable' },
+          ],
+        },
+      ];
+    },
+  })
+);

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && npm run build:pagefind",
     "build:pagefind": "pagefind --site .next/server/app --output-path public/_pagefind",
     "analyze": "ANALYZE=true next build",
     "start": "next start",
@@ -35,6 +35,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/bundle-analyzer": "^15.3.1",
     "@octokit/rest": "^22.0.0",
+    "@pagefind/default-ui": "^1.4.0",
     "@tabler/icons-react": "^3.31.0",
     "@uiw/codemirror-theme-vscode": "^4.23.12",
     "@uiw/react-codemirror": "^4.23.12",

types/pagefind.d.ts

@@ -0,0 +1,4 @@
+declare module '@pagefind/default-ui' {
+  const PagefindUI: any;
+  export default PagefindUI;
+}