dropdown, and bg restyling

2025-07-31 08:12:23 +10:00 · 2025-06-26 20:19:13 +00:00 · 2025-06-26 20:19:13 +00:00 · e2c36289fc
commit e2c36289fc
parent 1f06675dc0
7 changed files with 603 additions and 250 deletions
--- a/docs/.vitepress/constants.ts
+++ b/docs/.vitepress/constants.ts
@ -155,7 +155,7 @@ export const nav: DefaultTheme.NavItem[] = [
      { text: '🚀 Startpage', link: 'https://fmhy.net/startpage' },
      { text: '📋 snowbin', link: 'https://pastes.fmhy.net' },
      {
-        text: '®️ Redlib',
+        text: '® Redlib',
        link: 'https://redlib.fmhy.net/r/FREEMEDIAHECKYEAH/wiki/index'
      },
      { text: '🔎 SearXNG', link: 'https://searx.fmhy.net/' },
@ -178,19 +178,7 @@ export const nav: DefaultTheme.NavItem[] = [
  }
 ]

-export const sidebar: DefaultTheme.Sidebar | DefaultTheme.NavItemWithLink[] = [
-  {
-    text: '<span class="i-twemoji:books"></span> Beginners Guide',
-    link: '/beginners-guide'
-  },
-  {
-    text: '<span class="i-twemoji:newspaper"></span> Posts',
-    link: '/posts'
-  },
-  {
-    text: '<span class="i-twemoji:light-bulb"></span> Contribute',
-    link: '/other/contributing'
-  },
+export const wikiSidebar = [
  {
    text: 'Wiki',
    collapsed: false,
@ -305,9 +293,9 @@ export const sidebar: DefaultTheme.Sidebar | DefaultTheme.NavItemWithLink[] = [
    items: [
      meta.build.nsfw
        ? {
-            text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
-            link: 'https://rentry.co/NSFW-Checkpoint'
-          }
+          text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
+          link: 'https://rentry.co/NSFW-Checkpoint'
+        }
        : {},
      {
        text: '<span class="i-twemoji:warning"></span> Unsafe Sites',
@ -320,3 +308,21 @@ export const sidebar: DefaultTheme.Sidebar | DefaultTheme.NavItemWithLink[] = [
    ]
  }
 ]
+
+export const beginnersGuideItem: DefaultTheme.NavItemWithLink = {
+  text: '<span class="i-twemoji:books"></span> Beginners Guide',
+  link: '/beginners-guide'
+}
+
+export const sidebar: DefaultTheme.Sidebar | DefaultTheme.NavItemWithLink[] = [
+  beginnersGuideItem,
+  {
+    text: '<span class="i-twemoji:newspaper"></span> Posts',
+    link: '/posts'
+  },
+  {
+    text: '<span class="i-twemoji:light-bulb"></span> Contribute',
+    link: '/other/contributing'
+  },
+  ...wikiSidebar
+]
--- a/docs/.vitepress/theme/components/VPButton.vue
+++ b/docs/.vitepress/theme/components/VPButton.vue
@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useSidebar } from 'vitepress/theme'
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { wikiSidebar as homepageItems } from '../../constants'

-const sidebar = useSidebar()
 const KNOWN_EXTENSIONS = new Set()

 function treatAsHtml(filename: string): boolean {
@ -12,18 +11,18 @@ function treatAsHtml(filename: string): boolean {
      (import.meta as any).env?.VITE_EXTRA_EXTENSIONS ||
      ''

-      // md, html? are intentionally omitted
-      ; (
-        '3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
-        'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
-        'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
-        'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
-        'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
-        'yaml,yml,zip' +
-        (extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
-      )
-        .split(',')
-        .forEach((ext) => KNOWN_EXTENSIONS.add(ext))
+    // md, html? are intentionally omitted
+    ;(
+      '3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
+      'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
+      'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
+      'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
+      'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
+      'yaml,yml,zip' +
+      (extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
+    )
+      .split(',')
+      .forEach((ext) => KNOWN_EXTENSIONS.add(ext))
  }

  const ext = filename.split('.').pop()
@ -53,12 +52,12 @@ function normalizeLink(url: string): string {
    pathname.endsWith('/') || pathname.endsWith('.html')
      ? url
      : url.replace(
-        /(?:(^\.+)\/)?.*$/,
-        `$1${pathname.replace(
-          /(\.md)?$/,
-          site.value.cleanUrls ? '' : '.html'
-        )}${search}${hash}`
-      )
+          /(?:(^\.+)\/)?.*$/,
+          `$1${pathname.replace(
+            /(\.md)?$/,
+            site.value.cleanUrls ? '' : '.html'
+          )}${search}${hash}`
+        )

  return withBase(normalizedPath)
 }
@ -72,6 +71,7 @@ interface Props {
  target?: string
  rel?: string
 }
+
 const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  theme: 'brand'
@ -84,12 +84,117 @@ const isExternal = computed(
 const component = computed(() => {
  return props.tag || (props.href ? 'a' : 'button')
 })
+
+// Dropdown functionality
+const isDropdownOpen = ref(false)
+const dropdownRef = ref<HTMLElement>()
+
+const toggleDropdown = (e: Event) => {
+  e.preventDefault()
+  e.stopPropagation()
+  isDropdownOpen.value = !isDropdownOpen.value
+}
+
+const closeDropdown = () => {
+  isDropdownOpen.value = false
+}
+
+const handleClickOutside = (event: Event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+const processedItems = computed(() => {
+  return homepageItems.map((item: any) => {
+    if ('items' in item && item.items) {
+      return {
+        ...item,
+        items: item.items.map((subItem: any) => ({
+          ...subItem,
+          displayText: subItem.text || ''
+        }))
+      }
+    }
+    return {
+      ...item,
+      displayText: item.text || ''
+    }
+  })
+})
 </script>

 <template>
-  <component :is="component" class="VPButton" :class="[size, theme]" :href="href ? normalizeLink(href) : undefined"
+  <div v-if="theme === 'brand'" class="VPButtonDropdown" ref="dropdownRef">
+    <div class="VPButtonWrapper">
+      <component
+        :is="component"
+        class="VPButton VPButtonMain"
+        :class="[size, theme]"
+        :href="href ? normalizeLink(href) : undefined"
+        :target="props.target ?? (isExternal ? '_blank' : undefined)"
+        :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
+      >
+        <slot>{{ text }}</slot>
+      </component>
+      <button
+        class="bg-$vp-c-default-soft text-text border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-2.5 py-4.5 text-sm font-medium transition-all duration-300 sm:h-7 VPButtonTrigger"
+        @click="toggleDropdown"
+        :aria-expanded="isDropdownOpen"
+        aria-label="Toggle dropdown menu"
+      >
+        <span
+          class="i-lucide:chevron-down"
+          :class="{ 'rotate-180': isDropdownOpen }"
+        ></span>
+      </button>
+    </div>
+
+    <div v-if="isDropdownOpen" class="VPButtonDropdownMenu">
+      <div class="VPButtonDropdownContent">
+        <template v-for="item in processedItems" :key="item.text">
+          <div v-if="'items' in item" class="VPButtonDropdownSection">
+            <div class="VPButtonDropdownSectionTitle" v-html="item.text"></div>
+            <a
+              v-for="subItem in item.items"
+              :key="subItem.text"
+              :href="subItem.link"
+              class="VPButtonDropdownItem"
+              @click="closeDropdown"
+            >
+              <span v-html="subItem.displayText"></span>
+            </a>
+          </div>
+          <a
+            v-else
+            :href="item.link"
+            class="VPButtonDropdownItem"
+            @click="closeDropdown"
+          >
+            <span v-html="item.displayText"></span>
+          </a>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <component
+    v-else
+    :is="component"
+    class="VPButton"
+    :class="[size, theme]"
+    :href="href ? normalizeLink(href) : undefined"
    :target="props.target ?? (isExternal ? '_blank' : undefined)"
-    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)">
+    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
+  >
    <slot>{{ text }}</slot>
  </component>
 </template>
@ -175,4 +280,95 @@ const component = computed(() => {
  color: var(--vp-button-sponsor-active-text);
  background-color: var(--vp-button-sponsor-active-bg);
 }
+
+/* Dropdown styles */
+.VPButtonDropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.VPButtonWrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+.VPButtonMain {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+.VPButtonDropdownMenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  margin-top: 4px;
+  background-color: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  min-width: 280px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.VPButtonDropdownContent {
+  padding: 8px;
+}
+
+.VPButtonDropdownSection {
+  margin-bottom: 8px;
+}
+
+.VPButtonDropdownSection:last-child {
+  margin-bottom: 0;
+}
+
+.VPButtonDropdownSectionTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  padding: 8px 12px 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.VPButtonDropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  font-size: 14px;
+  transition: background-color 0.2s ease;
+}
+
+.VPButtonDropdownItem:hover {
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-brand-1);
+}
+
+.VPButtonDropdownIcon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.VPButtonDropdownItem span :deep([class*="i-"]) {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+.VPButtonDropdownSectionTitle :deep([class*="i-"]) {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-right: 6px;
+}
 </style>
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@ -1,3 +1,41 @@
+:root {
+  --vp-c-bg: #fefbff;
+  --vp-c-bg-alt: #f2f0f4;
+  --vp-c-bg-elv: #f2f0f4;
+  --vp-c-bg-soft: #f2f0f4;
+}
+
+.dark {
+  --vp-c-bg: #121316;
+  --vp-c-bg-alt: #0d0e11;
+  --vp-c-bg-elv: #1b1b1f;
+  --vp-c-bg-soft: #1b1b1f;
+}
+
+:root {
+  --vp-c-border: #c2c2c4;
+  --vp-c-divider: #c4c6d0;
+  --vp-c-gutter: #e2e2e3;
+}
+
+.dark {
+  --vp-c-border: #77777a;
+  --vp-c-divider: #222429;
+  --vp-c-gutter: #000000;
+}
+
+:root {
+  --vp-c-text-1: #1b1b1f;
+  --vp-c-text-2: #2f3033;
+  --vp-c-text-3: #46464a;
+}
+
+.dark {
+  --vp-c-text-1: #e3e2e6;
+  --vp-c-text-2: #ababaf;
+  --vp-c-text-3: #919094;
+}
+
 :root {
  /* Colors: Brand */
  --vp-c-brand-1: theme('colors.swarm.500');
@ -20,13 +58,6 @@
  --vp-button-alt-hover-bg: #484848;
  --vp-button-alt-hover-text: #f0eeee;

-  /* Colors: Background */
- --vp-c-bg: #ffffff;
-  --vp-c-bg-alt: #f6f6f7;
-  --vp-c-bg-elv: #ffffff;
-  --vp-c-bg-soft: #f6f6f7;
-
-
  /* Colors: Custom Block */
  /** Info */
  --vp-custom-block-info-bg: theme('colors.swarm.100');
@ -57,12 +88,6 @@
  --vp-c-brand-3: theme('colors.swarm.700');
  --vp-c-brand-soft: theme('colors.swarm.300');

-  /* Colors: Background */
-  --vp-c-bg: #1a1a1a;
-  --vp-c-bg-alt: #151515;
-  --vp-c-bg-elv: #1f1f1f;
-  --vp-c-bg-soft: #1f1f1f;
-
  /* Colors: Custom Block */
  /** Info */
  --vp-custom-block-info-bg: theme('colors.swarm.950');
--- a/docs/index.md
+++ b/docs/index.md
@ -25,136 +25,6 @@ hero:
    - theme: alt
      text: Discord
      link: https://rentry.co/fmhy-invite
-
-features:
-  - title: Adblocking / Privacy
-    link: /adblockvpnguide
-    details: Learn how to block ads, trackers and other nasty things.
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#D05A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-ellipsis"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
-
-  - title: Artificial Intelligence
-    link: /ai
-    details: Explore the world of AI and machine learning.
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#91989F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
-
-  - title: Streaming
-    link: /videopiracyguide
-    details:
-      Stream, download, torrent and binge all your favourite movies and shows!
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#7aa2f7" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-projector"><path d="M5 7 3 5"/><path d="M9 6V3"/><path d="m13 7
-      2-2"/><circle cx="9" cy="13" r="3"/><path d="M11.83 12H20a2 2 0 0 1 2
-      2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17"/><path d="M16
-      16h2"/></svg>
-
-  - title: Listening
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#7c82fe" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-drum"><path d="m2 2 8 8"/><path d="m22 2-8 8"/><ellipse cx="12"
-      cy="9" rx="10" ry="5"/><path d="M7 13.4v7.9"/><path d="M12 14v8"/><path
-      d="M17 13.4v7.9"/><path d="M2 9v8a10 5 0 0 0 20 0V9"/></svg>
-    link: /audiopiracyguide
-    details: Stream, download and torrent songs, podcasts and more!
-
-  - title: Gaming
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#49d3e9" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-swords"><polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/><line
-      x1="13" x2="19" y1="19" y2="13"/><line x1="16" x2="20" y1="16"
-      y2="20"/><line x1="19" x2="21" y1="21" y2="19"/><polyline points="14.5 6.5
-      18 3 21 3 21 6 17.5 9.5"/><line x1="5" x2="9" y1="14" y2="18"/><line
-      x1="7" x2="4" y1="17" y2="20"/><line x1="3" x2="5" y1="19" y2="21"/></svg>
-    link: /gamingpiracyguide
-    details:
-      Download and play all your favourite games or emulate some old but gold
-      ones!
-
-  - title: Reading
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#3ccd93" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-book-marked"><path d="M10 2v8l3-3 3 3V2"/><path d="M4 19.5v-15A2.5
-      2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1
-      0-5H20"/></svg>
-    link: /readingpiracyguide
-    details:
-      Whether you're a bookworm, otaku or comic book fan, you'll be able to find
-      your favourite pieces of literature here for free!
-
-  - title: Downloading
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#BEC23F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-down"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m15 13-3 3-3-3"/></svg>
-    link: /downloadpiracyguide
-    details:
-      Download all your favourite software, movies, TV shows, music, games and
-      more!
-
-  - title: Torrenting
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8A6BBE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-waypoints"><circle cx="12" cy="4.5" r="2.5"/><path d="m10.2 6.3-3.9 3.9"/><circle cx="4.5" cy="12" r="2.5"/><path d="M7 12h10"/><circle cx="19.5" cy="12" r="2.5"/><path d="m13.8 17.7 3.9-3.9"/><circle cx="12" cy="19.5" r="2.5"/></svg>
-    link: /torrentpiracyguide
-    details: Download your favourite media using the BitTorrent protocol.
-
-  - title: Educational
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#A8D8B9" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-book-copy"><path d="M2 16V4a2 2 0 0 1 2-2h11"/><path d="M22 18H11a2
-      2 0 1 0 0 4h10.5a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5H11a2 2 0 0 0-2
-      2v12"/><path d="M5 14H4a2 2 0 1 0 0 4h1"/></svg>
-    link: /edupiracyguide
-    details: Educational content for all ages.
-
-  - title: Android / iOS
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#DAC9A6" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-smartphone"><rect width="14" height="20" x="5" y="2" rx="2"
-      ry="2"/><path d="M12 18h.01"/></svg>
-    link: /android-iosguide
-    details: All forms of content for Android and iOS.
-
-  - title: Linux / macOS
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f17c67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-terminal"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
-    link: /linuxguide
-    details: The $HOME of Linux and macOS.
-
-  - title: Non English
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#FB9966" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7
-      3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2
-      2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0
-      0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
-    link: /non-english
-    details: Content in languages other than English.
-
-  - title: Miscellaneous
-    icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0
-      0 24 24" fill="none" stroke="#DDD23B" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="lucide
-      lucide-swatch-book"><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0
-      0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path
-      d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6
-      7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/></svg>
-    link: /miscguide
-    details: Content too niche to be included elsewhere.
 ---

 <script setup>