docs: custom client directives

web/astro.config.ts

@@ -1,12 +1,16 @@
 import sitemap, { ChangeFreqEnum } from '@astrojs/sitemap'
+import clickDirective from './src/lib/directives/click/register'
 import { defineConfig } from 'astro/config'
 import mdx from '@astrojs/mdx'
+import searchDirective from './src/lib/directives/search/register'
 import solid from '@astrojs/solid-js'
 import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [
+    clickDirective(),
+    searchDirective(),
     mdx(),
     sitemap({
       serialize(item) {

web/src/components/Drawer.tsx

@@ -5,7 +5,7 @@ import HeaderLogoLight from '@assets/header_logo_light.svg'
 
 const NavDrawer: FlowComponent = (props) => {
   return (
-    <Drawer side="left" breakPoints={[0.75]}>
+    <Drawer initialOpen={true} side="left" breakPoints={[0.75]}>
       {(drawerProps) => (
         <>
           <Drawer.Trigger class="p-1.5 md:hidden">

web/src/components/Topbar.astro

@@ -51,12 +51,12 @@ const { inDocs } = Astro.props
       {
         inDocs === true && (
           <>
-            <SearchDialog client:media="(min-width: 768px)" />
-            <SearchDrawer client:media="(max-width: 767px)" />
+            <SearchDialog client:search="(min-width: 768px)" />
+            <SearchDrawer client:search="(max-width: 767px)" />
           </>
         )
       }
-      <ThemeSelect client:idle />
+      <ThemeSelect client:click />
       <a href="https://github.com/corvudev/corvu/" target="_blank" class="p-2">
         <span class="sr-only">GitHub repository</span>
         <svg
@@ -73,7 +73,7 @@ const { inDocs } = Astro.props
             clip-rule="evenodd"></path>
         </svg>
       </a>
-      <Drawer client:media="(max-width: 767px)">
+      <Drawer client:click>
         <Navigation />
       </Drawer>
     </div>

web/src/components/docs/code/Code.astro

@@ -17,5 +17,5 @@ const trimmedCode = code.trim()
   class="not-prose relative mb-6 mt-4 grid rounded-md border-2 border-corvu-200"
 >
   <RawCode code={trimmedCode} lang={lang} />
-  {copyButton === true && <CopyToClipboard code={trimmedCode} client:visible />}
+  {copyButton === true && <CopyToClipboard code={trimmedCode} client:click />}
 </div>

web/src/components/docs/code/RawCode.astro

@@ -29,4 +29,4 @@ const codeHtml = await codeToHtml(trimmedCode, {
   class="contents [&>pre]:overflow-auto [&>pre]:rounded-md [&>pre]:py-2 [&>pre]:pl-2 [&>pre]:pr-12 [&>pre]:md:pr-2"
   set:html={codeHtml}
 />
-{copyButton === true && <CopyToClipboard code={trimmedCode} client:visible />}
+{copyButton === true && <CopyToClipboard code={trimmedCode} client:click />}

web/src/lib/directives/click/click.ts

@@ -0,0 +1,13 @@
+import type { ClientDirective } from 'astro'
+
+export default ((load, _opts, el) => {
+  el.addEventListener(
+    'click',
+    async (e) => {
+      e.preventDefault()
+      const hydrate = await load()
+      await hydrate()
+    },
+    { once: true },
+  )
+}) satisfies ClientDirective

web/src/lib/directives/click/index.d.ts

@@ -0,0 +1,6 @@
+import 'astro'
+declare module 'astro' {
+  interface AstroClientDirectives {
+    'client:click'?: boolean
+  }
+}

web/src/lib/directives/click/register.ts

@@ -0,0 +1,14 @@
+import type { AstroIntegration } from 'astro'
+
+export default () =>
+  ({
+    name: 'client:click',
+    hooks: {
+      'astro:config:setup': ({ addClientDirective }) => {
+        addClientDirective({
+          name: 'click',
+          entrypoint: './src/lib/directives/click/click.ts',
+        })
+      },
+    },
+  }) satisfies AstroIntegration

web/src/lib/directives/search/index.d.ts

@@ -0,0 +1,6 @@
+import 'astro'
+declare module 'astro' {
+  interface AstroClientDirectives {
+    'client:search'?: string
+  }
+}

web/src/lib/directives/search/register.ts

@@ -0,0 +1,14 @@
+import type { AstroIntegration } from 'astro'
+
+export default () =>
+  ({
+    name: 'client:search',
+    hooks: {
+      'astro:config:setup': ({ addClientDirective }) => {
+        addClientDirective({
+          name: 'search',
+          entrypoint: './src/lib/directives/search/search.ts',
+        })
+      },
+    },
+  }) satisfies AstroIntegration

web/src/lib/directives/search/search.ts

@@ -0,0 +1,19 @@
+import type { ClientDirective } from 'astro'
+
+export default ((load, opts, el) => {
+  const mql = matchMedia(opts.value)
+  const init = async () => {
+    if (!mql.matches) return
+    window.removeEventListener('keydown', onKeydown)
+    const hydrate = await load()
+    await hydrate()
+  }
+  const onKeydown = async (e: KeyboardEvent) => {
+    if (e.metaKey && e.key === 'k') {
+      // el.setAttribute('data-key-init', '')
+      init()
+    }
+  }
+  window.addEventListener('keydown', onKeydown)
+  el.addEventListener('pointerover', init, { once: true })
+}) satisfies ClientDirective