dropdown, and bg restyling

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
+]

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>

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');