-

Author: Ehesp

api/src/bundler/getPlugins.ts

@@ -23,7 +23,7 @@ function getPlugins(config: OutputConfig) {
   if (config?.experimentalMath) {
     //@ts-ignore
     remarkPlugins.push(remarkMath);
-    rehypePlugins.push(rehypeKatex);
+    // rehypePlugins.push(rehypeKatex);
   }
   return { remarkPlugins, rehypePlugins };
 }

website-v3/package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@astrojs/react": "^1.2.2",
-    "@astrojs/vercel": "^2.3.5",
+    "@astrojs/vercel": "2.3.4",
     "@tailwindcss/typography": "^0.5.8",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",

website-v3/src/components/Markdown.tsx

@@ -11,7 +11,7 @@ const Markdown: React.FC = () => {
   const MDX = getMDXComponent(code);
 
   return (
-    <main className="prose prose-slate dark:prose-invert prose-p:leading-loose prose-a:text-white prose-a:font-bold prose-a:underline-offset-[5px] prose-a:decoration-docs-theme prose-a:decoration-2 hover:prose-a:decoration-4 prose-headings:mb-[1rem] max-w-none">
+    <main className="prose prose-slate dark:prose-invert prose-p:leading-loose dark:prose-a:text-white prose-a:font-bold prose-a:underline-offset-[5px] prose-a:decoration-docs-theme prose-a:decoration-2 hover:prose-a:decoration-4 prose-headings:mb-[1rem] max-w-none">
       <MDX
         components={{
           a: props => <Link {...props} href={props.href || '/'} />,

website-v3/src/components/Search.astro

@@ -1,4 +1,6 @@
 ---
+import { MagnifyingGlassIcon } from './icons';
+
 type Props = {
   appId: string;
   apiKey: string;
@@ -11,15 +13,34 @@ const { appId, apiKey, indexName } = Astro.props;
 ---
 
 <div data-docsearch data-appId={appId} data-apiKey={apiKey} data-indexName={indexName}></div>
+<button
+  data-docsearch-override
+  class="w-full bg-gradient-to-b from-gray-100 to-gray-100 dark:from-zinc-800/80 dark:to-zinc-800/40 flex items-center rounded px-4 py-2 border dark:border-zinc-800 hover:border-zinc-700/30 dark:hover:border-zinc-700/50 gap-2 text-sm text-gray-500 dark:text-white/70 dark:hover:text-white/90 transition"
+>
+  <span class="w-4 h-4"><MagnifyingGlassIcon /></span>
+  <span>Search...</span>
+  <span class="flex-1 flex items-center justify-end font-semibold opacity-50">⌘K</span>
+</button>
+<style is:global></style>
 <script>
   import docsearch from '@docsearch/js';
 
   const element = document.querySelector('div[data-docsearch]') as HTMLDivElement;
+  const override = document.querySelector('button[data-docsearch-override]') as HTMLButtonElement;
 
   docsearch({
     container: element,
     appId: element.dataset.appid!,
     indexName: element.dataset.indexname!,
     apiKey: element.dataset.apikey!,
   });
+
+  // Once triggered, get the native docsearch button
+  const button = element.querySelector('button.DocSearch') as HTMLButtonElement;
+
+  // Hide it
+  button.style.display = 'none';
+
+  // Then attach our own button to the native one
+  override.addEventListener('click', () => button.click());
 </script>

website-v3/src/components/Theme.astro

@@ -28,4 +28,5 @@ const dark = color.darken(0.2).hex().toString();
   root.style.setProperty('--theme-color', base);
   root.style.setProperty('--theme-color-dark', light);
   root.style.setProperty('--theme-color-light', dark);
+  root.style.setProperty('--docsearch-primary-color', base);
 </script>

website-v3/src/components/icons.tsx

@@ -0,0 +1,15 @@
+export const MagnifyingGlassIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+);

website-v3/src/components/mdx/Image.tsx

@@ -7,17 +7,21 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
 
 const Image: React.FC<ImageProps> = props => {
   const src = getImagePath(props.src ?? '');
+  const { width, height, ...other } = props;
 
   return (
-    <img
-      {...props}
-      src={src}
-      loading="lazy"
-      style={{
-        width: props.width ? parseInt(props.width.toString()) : 'inherit',
-        height: props.height ? parseInt(props.height.toString()) : 'inherit',
-      }}
-    />
+    <figure>
+      <img
+        {...other}
+        src={src}
+        loading="lazy"
+        className="mx-auto"
+        style={{
+          width: width ? parseInt(width.toString()) : 'inherit',
+          height: height ? parseInt(height.toString()) : 'inherit',
+        }}
+      />
+    </figure>
   );
 };
 

website-v3/src/layouts/Header.astro

@@ -11,7 +11,7 @@ const logoDark = getImagePath(config.logoDark);
 // TODO preview mode
 ---
 
-<header class="sticky top-0 border-b border-slate-800/80 bg:white z-10 backdrop-blur">
+<header class="sticky top-0 border-b dark:border-slate-800/80 bg:white z-10 backdrop-blur">
   <div class="absolute inset-0 z-0 dark:bg-zinc-900/90 dark:text-white"></div>
   <div class="max-w-8xl mx-auto relative z-10">
     <div class="h-16 px-4 lg:px-8 mx-4 lg:mx-0 flex items-center">
@@ -33,7 +33,11 @@ const logoDark = getImagePath(config.logoDark);
           }
         </Link>
       </div>
-      <div>
+      <div
+        class:list={{
+          'lg:w-64 xl:w-80': !!config.docsearch,
+        }}
+      >
         {!!config.docsearch && <Search {...config.docsearch} />}
       </div>
       <div class="flex-1 flex items-center justify-end">Menu</div>

website-v3/src/layouts/Root.astro

@@ -60,7 +60,7 @@ const theme = Astro.cookies.get('theme').value;
     <script is:inline define:vars={{ theme }}>
       // Only check users preference if they haven't already set a theme
       if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
       }
     </script>
     <slot />

website-v3/tailwind.config.cjs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: ['class', '[data-theme="dark"]'],
   theme: {
     extend: {
       maxWidth: {