return support for main astro render pages and preview must be fixed …

…for header
invertase · Mar 13, 2024 · afb4f2b · afb4f2b
1 parent ae0038a
commit afb4f2b
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 96 deletions.
diff --git a/website/src/components/Scripts.astro b/website/src/components/Scripts.astro
@@ -5,22 +5,23 @@ const ctx = context.get();
 const { config, theme, owner, repository, ref, domain } = ctx;
 ---
 
-<!-- <script is:inline define:vars={{ config, theme, owner, repository, ref, domain }}>
+<script is:inline define:vars={{ config, theme, owner, repository, ref, domain }}>
   // Load the context into the window, so we can access it from other scripts
   // without losing access to Astros script hoisting.
   window.docs_page = { config, theme, owner, repository, ref, domain };
-</script> -->
+</script>
 <script>
-  import context from 'src/context';
-
-  const { config } = context.get();
+  /**
+   * This script is used to load the Algolia DocSearch library, and apply it to
+   * the search input with the `data-docsearch` attribute.
+   */
+  const { config } = (window as any).docs_page;
 
   const element = document.querySelector('div[data-docsearch]');
 
   if (config?.docsearch && element) {
     const docsearch = (await import('@docsearch/js')).default;
     const overrides = document.querySelectorAll('button[data-docsearch-override]');
-
     docsearch({
       container: element as HTMLElement,
       ...config.docsearch,
@@ -37,6 +38,79 @@ const { config, theme, owner, repository, ref, domain } = ctx;
   }
 </script>
 
+<script>
+  import type { Context } from 'src/context';
+  const { owner, repository, domain, ref } = (window as any).docs_page as Context;
+  const html = document.documentElement;
+  const isDark = () => html.getAttribute('data-theme') === 'dark';
+
+  const toggle = document.querySelector('button[data-theme-toggle]')!;
+  const light = toggle.querySelector('span[data-theme-type="light"]') as HTMLSpanElement;
+  const dark = toggle.querySelector('span[data-theme-type="dark"]') as HTMLSpanElement;
+
+  function toggleElements() {
+    if (isDark()) {
+      light.style.display = 'none';
+      dark.style.display = 'inline';
+    } else {
+      dark.style.display = 'none';
+      light.style.display = 'inline';
+    }
+  }
+
+  toggle.addEventListener('click', () => {
+    const theme = isDark() ? 'light' : 'dark';
+    // Update the theme attribute on the <html> element
+    theme === 'light'
+      ? html.removeAttribute('data-theme')
+      : html.setAttribute('data-theme', 'dark');
+    // Toggle the icons
+    toggleElements();
+    // Update the theme via server and return a cookie
+    fetch('/api/docs.page/theme', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        owner,
+        repository,
+        ref,
+        domain,
+        theme,
+      }),
+    });
+  });
+
+  toggleElements();
+</script>
+
+<script>
+  const toggle = document.querySelector('button[data-sidebar-toggle]')!;
+  const sidebar = document.querySelector('div[data-sidebar]')!;
+  const mask = document.querySelector('div[data-sidebar-mask]')!;
+
+  // Listen to menu toggle events and toggle the body attribute.
+  toggle.addEventListener('click', () => {
+    document.body.setAttribute(
+      'sidebar-open',
+      (document.body.getAttribute('sidebar-open') !== 'true').toString(),
+    );
+  });
+
+  mask.addEventListener('click', () => {
+    document.body.setAttribute('sidebar-open', 'false');
+  });
+
+  new MutationObserver(() => {
+    const open = document.body.getAttribute('sidebar-open') === 'true';
+    for (const el of [sidebar, mask]) el.setAttribute('data-visible', `${open}`);
+  }).observe(document.body, {
+    attributes: true,
+    attributeFilter: ['sidebar-open'],
+  });
+</script>
+
 <script>
   /**
    * This script looks for any buttons with the `data-copy` attribute, and adds
@@ -72,9 +146,7 @@ const { config, theme, owner, repository, ref, domain } = ctx;
     }
   }
 
-  import context from 'src/context';
-
-  const { theme } = context.get();
+  const { theme } = (window as any).docs_page;
 
   const tweets = document.querySelectorAll('div[data-tweet]');
 
@@ -171,9 +243,7 @@ const { config, theme, owner, repository, ref, domain } = ctx;
    * group ID across the page, and onto a cookie via the server.
    */
 
-  import context from 'src/context';
-
-  const { owner, repository, ref, domain } = context.get();
+  const { owner, repository, ref, domain } = (window as any).docs_page;
 
   const tabs = document.querySelectorAll('div[data-tab-group]');
 

diff --git a/website/src/components/SideBarToggle.tsx b/website/src/components/SideBarToggle.tsx
@@ -1,42 +1,8 @@
-import { useEffect, useState } from 'react';
 import { BarsIcon } from './icons';
 
 export function SideBarToggle() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const toggleSideBar = () => {
-    setSidebarOpen(!sidebarOpen);
-    updateSideBar();
-  };
-
-  // potentially we need to fall back to ReactWay of getting Refs
-  const updateSideBar = () => {
-    document.body.setAttribute(
-      'sidebar-open',
-      (document.body.getAttribute('sidebar-open') !== 'true').toString(),
-    );
-  };
-
-  useEffect(() => {
-    // potentially we need to fall back to ReactWay of getting Refs
-    const sidebar = document.querySelector('div[data-sidebar]');
-    const mask = document.querySelector('div[data-sidebar-mask]');
-
-    mask?.addEventListener('click', () => {
-      document.body.setAttribute('sidebar-open', 'false');
-    });
-
-    new MutationObserver(() => {
-      const open = document.body.getAttribute('sidebar-open') === 'true';
-      for (const el of [sidebar, mask]) el?.setAttribute('data-visible', `${open}`);
-    }).observe(document.body, {
-      attributes: true,
-      attributeFilter: ['sidebar-open'],
-    });
-  }, [sidebarOpen]);
-
   return (
-    <button onClick={toggleSideBar} className="h-6 w-6 transition-opacity hover:opacity-75">
+    <button data-sidebar-toggle className="h-6 w-6 transition-opacity hover:opacity-75">
       <BarsIcon />
     </button>
   );

diff --git a/website/src/components/ThemeToggle.tsx b/website/src/components/ThemeToggle.tsx
@@ -1,56 +1,14 @@
-import { useStore } from '@nanostores/react';
 import { MoonIcon, SunIcon } from './icons';
-import context from 'src/context';
-import { useEffect, useState } from 'react';
 
 export default function ThemeToggle() {
-  const { owner, repository, domain, ref, theme } = useStore(context);
-  const [themeMode, setThemeMode] = useState(theme || 'dark');
-
-  const isDark = themeMode === 'dark';
-
-  useEffect(() => {
-    context.setKey('theme', themeMode);
-    document.querySelector('html')?.setAttribute('data-theme', themeMode);
-  }, [themeMode]);
-
-  const toggleThemeMode = () => {
-    if (isDark) {
-      setThemeMode('light');
-    } else {
-      setThemeMode('dark');
-    }
-
-    // Update the theme via server and return a cookie
-    fetch('/api/docs.page/theme', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        owner,
-        repository,
-        ref,
-        domain,
-        theme: themeMode,
-      }),
-    });
-  };
   return (
-    <button
-      data-theme-toggle
-      onClick={toggleThemeMode}
-      className="relative h-6 w-6 transition-opacity hover:opacity-75"
-    >
-      {themeMode === 'dark' ? (
-        <span data-theme-type="dark">
-          <MoonIcon />
-        </span>
-      ) : (
-        <span data-theme-type="light">
-          <SunIcon />
-        </span>
-      )}
+    <button data-theme-toggle className="relative h-6 w-6 transition-opacity hover:opacity-75">
+      <span data-theme-type="dark" className="hidden">
+        <MoonIcon />
+      </span>
+      <span data-theme-type="light" className="hidden">
+        <SunIcon />
+      </span>
     </button>
   );
 }