show page title in search (#4643)

* separate navigation from search result when clicking * show page title in search
2026-01-28 02:41:03 +00:00 · 2026-01-26 15:26:15 -08:00
parent 440b60d311
commit 11a11dd248
3 changed files with 328 additions and 242 deletions
--- a/docs/.vitepress/constants.ts
+++ b/docs/.vitepress/constants.ts
@@ -15,51 +15,12 @@
 */

 import type { DefaultTheme } from 'vitepress'
-import consola from 'consola'
+import { excluded } from './shared'
 import { transform, transformGuide } from './transformer'

 // @unocss-include

-export const meta = {
-  name: 'freemediaheckyeah',
-  description: 'The largest collection of free stuff on the internet!',
-  hostname: 'https://fmhy.net',
-  keywords: ['stream', 'movies', 'gaming', 'reading', 'anime'],
-  build: {
-    api: true,
-    nsfw: true
-  }
-}
-
-export const excluded = [
-  'readme.md',
-  'single-page',
-  'feedback.md',
-  'index.md',
-  'sandbox.md',
-  'startpage.md'
-]
-
-if (process.env.FMHY_BUILD_NSFW === 'false') {
-  consola.info('FMHY_BUILD_NSFW is set to false, disabling NSFW content')
-  meta.build.nsfw = false
-}
-if (process.env.FMHY_BUILD_API === 'false') {
-  consola.info('FMHY_BUILD_API is set to false, disabling API component')
-  meta.build.api = false
-}
-
-const formatCommitRef = (commitRef: string) =>
-  `<a href="https://github.com/fmhy/edit/commit/${commitRef}">${commitRef.slice(0, 8)}</a>`
-
-export const commitRef =
-  process.env.CF_PAGES && process.env.CF_PAGES_COMMIT_SHA
-    ? formatCommitRef(process.env.CF_PAGES_COMMIT_SHA)
-    : process.env.COMMIT_REF
-      ? formatCommitRef(process.env.COMMIT_REF)
-      : 'dev'
-
-export const feedback = `<a href="/feedback" class="feedback-footer">Made with ❤</a>`
+export * from './shared'

 export const search: DefaultTheme.Config['search'] = {
  options: {
@@ -147,190 +108,3 @@ export const search: DefaultTheme.Config['search'] = {
  },
  provider: 'local'
 }
-
-export const socialLinks: DefaultTheme.SocialLink[] = [
-  { icon: 'github', link: 'https://github.com/fmhy/edit' },
-  { icon: 'discord', link: 'https://github.com/fmhy/FMHY/wiki/FMHY-Discord' },
-  {
-    icon: 'reddit',
-    link: 'https://reddit.com/r/FREEMEDIAHECKYEAH'
-  }
-]
-
-export const nav: DefaultTheme.NavItem[] = [
-  { text: '📑 Changelog', link: '/posts/changelog-sites' },
-  { text: '📖 Glossary', link: 'https://rentry.org/The-Piracy-Glossary' },
-  {
-    text: '💾 Backups',
-    link: '/other/backups'
-  },
-  {
-    text: '🌱 Ecosystem',
-    items: [
-      { text: '🌐 Search', link: '/posts/search' },
-      { text: '❓ FAQs', link: '/other/FAQ' },
-      { text: '🔖 Bookmarks', link: 'https://github.com/fmhy/bookmarks' },
-      { text: '✅ SafeGuard', link: 'https://github.com/fmhy/FMHY-SafeGuard' },
-      { text: '🚀 Startpage', link: 'https://fmhy.net/startpage' },
-      { text: '📋 snowbin', link: 'https://pastes.fmhy.net' },
-      { text: '🔎 SearXNG', link: 'https://searx.fmhy.net/' },
-      {
-        text: '💡 Site Hunting',
-        link: 'https://www.reddit.com/r/FREEMEDIAHECKYEAH/wiki/find-new-sites/'
-      },
-      {
-        text: '😇 SFW FMHY',
-        link: 'https://rentry.org/piracy'
-      },
-      {
-        text: '🏠 Selfhosting',
-        link: '/other/selfhosting'
-      },
-      { text: '🏞 Wallpapers', link: '/other/wallpapers' },
-      { text: '💙 Feedback', link: '/feedback' }
-    ]
-  }
-]
-
-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'
-  },
-  {
-    text: 'Wiki',
-    collapsed: false,
-    items: [
-      {
-        text: '<span class="i-twemoji:name-badge"></span> Adblocking / Privacy',
-        link: '/privacy'
-      },
-      {
-        text: '<span class="i-twemoji:robot"></span> Artificial Intelligence',
-        link: '/ai'
-      },
-      {
-        text: '<span class="i-twemoji:television"></span> Movies / TV / Anime',
-        link: '/video'
-      },
-      {
-        text: '<span class="i-twemoji:musical-note"></span> Music / Podcasts / Radio',
-        link: '/audio'
-      },
-      {
-        text: '<span class="i-twemoji:video-game"></span> Gaming / Emulation',
-        link: '/gaming'
-      },
-      {
-        text: '<span class="i-twemoji:green-book"></span> Books / Comics / Manga',
-        link: '/reading'
-      },
-      {
-        text: '<span class="i-twemoji:floppy-disk"></span> Downloading',
-        link: '/downloading'
-      },
-      {
-        text: '<span class="i-twemoji:cyclone"></span> Torrenting',
-        link: '/torrenting'
-      },
-      {
-        text: '<span class="i-twemoji:brain"></span> Educational',
-        link: '/educational'
-      },
-      {
-        text: '<span class="i-twemoji:mobile-phone"></span> Android / iOS',
-        link: '/mobile'
-      },
-      {
-        text: '<span class="i-twemoji:penguin"></span> Linux / macOS',
-        link: '/linux-macos'
-      },
-      {
-        text: '<span class="i-twemoji:globe-showing-asia-australia"></span> Non-English',
-        link: '/non-english'
-      },
-      {
-        text: '<span class="i-twemoji:file-folder"></span> Miscellaneous',
-        link: '/misc'
-      }
-    ]
-  },
-  {
-    text: 'Tools',
-    collapsed: false,
-    items: [
-      {
-        text: '<span class="i-twemoji:laptop"></span> System Tools',
-        link: '/system-tools'
-      },
-      {
-        text: '<span class="i-twemoji:card-file-box"></span> File Tools',
-        link: '/file-tools'
-      },
-      {
-        text: '<span class="i-twemoji:paperclip"></span> Internet Tools',
-        link: '/internet-tools'
-      },
-      {
-        text: '<span class="i-twemoji:left-speech-bubble"></span> Social Media Tools',
-        link: '/social-media-tools'
-      },
-      {
-        text: '<span class="i-twemoji:memo"></span> Text Tools',
-        link: '/text-tools'
-      },
-      {
-        text: '<span class="i-twemoji:alien-monster"></span> Gaming Tools',
-        link: '/gaming-tools'
-      },
-      {
-        text: '<span class="i-twemoji:camera"></span> Image Tools',
-        link: '/image-tools'
-      },
-      {
-        text: '<span class="i-twemoji:videocassette"></span> Video Tools',
-        link: '/video-tools'
-      },
-      {
-        text: '<span class="i-twemoji:speaker-high-volume"></span> Audio Tools',
-        link: '/audio#audio-tools'
-      },
-      {
-        text: '<span class="i-twemoji:red-apple"></span> Educational Tools',
-        link: '/educational#educational-tools'
-      },
-      {
-        text: '<span class="i-twemoji:man-technologist"></span> Developer Tools',
-        link: '/developer-tools'
-      }
-    ]
-  },
-  {
-    text: 'More',
-    collapsed: true,
-    items: [
-      meta.build.nsfw
-        ? {
-          text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
-          link: 'https://rentry.org/NSFW-Checkpoint'
-        }
-        : {},
-      {
-        text: '<span class="i-twemoji:warning"></span> Unsafe Sites',
-        link: '/unsafe'
-      },
-      {
-        text: '<span class="i-twemoji:package"></span> Storage',
-        link: '/storage'
-      }
-    ]
-  }
-]
--- a/docs/.vitepress/shared.ts
+++ b/docs/.vitepress/shared.ts
@@ -0,0 +1,250 @@
+/**
+ *  Copyright (c) 2025 taskylizard. Apache License 2.0.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import type { DefaultTheme } from 'vitepress'
+
+// @unocss-include
+
+export const meta = {
+    name: 'freemediaheckyeah',
+    description: 'The largest collection of free stuff on the internet!',
+    hostname: 'https://fmhy.net',
+    keywords: ['stream', 'movies', 'gaming', 'reading', 'anime'],
+    build: {
+        api: true,
+        nsfw: true
+    }
+}
+
+export const excluded = [
+    'readme.md',
+    'single-page',
+    'feedback.md',
+    'index.md',
+    'sandbox.md',
+    'startpage.md'
+]
+
+const safeEnv = (key: string) => typeof process !== 'undefined' ? process.env?.[key] : undefined
+
+if (safeEnv('FMHY_BUILD_NSFW') === 'false') {
+    meta.build.nsfw = false
+}
+if (safeEnv('FMHY_BUILD_API') === 'false') {
+    meta.build.api = false
+}
+
+const formatCommitRef = (commitRef: string) =>
+    `<a href="https://github.com/fmhy/edit/commit/${commitRef}">${commitRef.slice(0, 8)}</a>`
+
+const cfStart = safeEnv('CF_PAGES_COMMIT_SHA')
+const commitStart = safeEnv('COMMIT_REF')
+
+export const commitRef =
+    safeEnv('CF_PAGES') && cfStart
+        ? formatCommitRef(cfStart)
+        : commitStart
+            ? formatCommitRef(commitStart)
+            : 'dev'
+
+export const feedback = `<a href="/feedback" class="feedback-footer">Made with ❤</a>`
+
+export const socialLinks: DefaultTheme.SocialLink[] = [
+    { icon: 'github', link: 'https://github.com/fmhy/edit' },
+    { icon: 'discord', link: 'https://github.com/fmhy/FMHY/wiki/FMHY-Discord' },
+    {
+        icon: 'reddit',
+        link: 'https://reddit.com/r/FREEMEDIAHECKYEAH'
+    }
+]
+
+export const nav: DefaultTheme.NavItem[] = [
+    { text: '📑 Changelog', link: '/posts/changelog-sites' },
+    { text: '📖 Glossary', link: 'https://rentry.org/The-Piracy-Glossary' },
+    {
+        text: '💾 Backups',
+        link: '/other/backups'
+    },
+    {
+        text: '🌱 Ecosystem',
+        items: [
+            { text: '🌐 Search', link: '/posts/search' },
+            { text: '❓ FAQs', link: '/other/FAQ' },
+            { text: '🔖 Bookmarks', link: 'https://github.com/fmhy/bookmarks' },
+            { text: '✅ SafeGuard', link: 'https://github.com/fmhy/FMHY-SafeGuard' },
+            { text: '🚀 Startpage', link: 'https://fmhy.net/startpage' },
+            { text: '📋 snowbin', link: 'https://pastes.fmhy.net' },
+            { text: '🔎 SearXNG', link: 'https://searx.fmhy.net/' },
+            {
+                text: '💡 Site Hunting',
+                link: 'https://www.reddit.com/r/FREEMEDIAHECKYEAH/wiki/find-new-sites/'
+            },
+            {
+                text: '😇 SFW FMHY',
+                link: 'https://rentry.org/piracy'
+            },
+            {
+                text: '🏠 Selfhosting',
+                link: '/other/selfhosting'
+            },
+            { text: '🏞 Wallpapers', link: '/other/wallpapers' },
+            { text: '💙 Feedback', link: '/feedback' }
+        ]
+    }
+]
+
+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'
+    },
+    {
+        text: 'Wiki',
+        collapsed: false,
+        items: [
+            {
+                text: '<span class="i-twemoji:name-badge"></span> Adblocking / Privacy',
+                link: '/privacy'
+            },
+            {
+                text: '<span class="i-twemoji:robot"></span> Artificial Intelligence',
+                link: '/ai'
+            },
+            {
+                text: '<span class="i-twemoji:television"></span> Movies / TV / Anime',
+                link: '/video'
+            },
+            {
+                text: '<span class="i-twemoji:musical-note"></span> Music / Podcasts / Radio',
+                link: '/audio'
+            },
+            {
+                text: '<span class="i-twemoji:video-game"></span> Gaming / Emulation',
+                link: '/gaming'
+            },
+            {
+                text: '<span class="i-twemoji:green-book"></span> Books / Comics / Manga',
+                link: '/reading'
+            },
+            {
+                text: '<span class="i-twemoji:floppy-disk"></span> Downloading',
+                link: '/downloading'
+            },
+            {
+                text: '<span class="i-twemoji:cyclone"></span> Torrenting',
+                link: '/torrenting'
+            },
+            {
+                text: '<span class="i-twemoji:brain"></span> Educational',
+                link: '/educational'
+            },
+            {
+                text: '<span class="i-twemoji:mobile-phone"></span> Android / iOS',
+                link: '/mobile'
+            },
+            {
+                text: '<span class="i-twemoji:penguin"></span> Linux / macOS',
+                link: '/linux-macos'
+            },
+            {
+                text: '<span class="i-twemoji:globe-showing-asia-australia"></span> Non-English',
+                link: '/non-english'
+            },
+            {
+                text: '<span class="i-twemoji:file-folder"></span> Miscellaneous',
+                link: '/misc'
+            }
+        ]
+    },
+    {
+        text: 'Tools',
+        collapsed: false,
+        items: [
+            {
+                text: '<span class="i-twemoji:laptop"></span> System Tools',
+                link: '/system-tools'
+            },
+            {
+                text: '<span class="i-twemoji:card-file-box"></span> File Tools',
+                link: '/file-tools'
+            },
+            {
+                text: '<span class="i-twemoji:paperclip"></span> Internet Tools',
+                link: '/internet-tools'
+            },
+            {
+                text: '<span class="i-twemoji:left-speech-bubble"></span> Social Media Tools',
+                link: '/social-media-tools'
+            },
+            {
+                text: '<span class="i-twemoji:memo"></span> Text Tools',
+                link: '/text-tools'
+            },
+            {
+                text: '<span class="i-twemoji:alien-monster"></span> Gaming Tools',
+                link: '/gaming-tools'
+            },
+            {
+                text: '<span class="i-twemoji:camera"></span> Image Tools',
+                link: '/image-tools'
+            },
+            {
+                text: '<span class="i-twemoji:videocassette"></span> Video Tools',
+                link: '/video-tools'
+            },
+            {
+                text: '<span class="i-twemoji:speaker-high-volume"></span> Audio Tools',
+                link: '/audio#audio-tools'
+            },
+            {
+                text: '<span class="i-twemoji:red-apple"></span> Educational Tools',
+                link: '/educational#educational-tools'
+            },
+            {
+                text: '<span class="i-twemoji:man-technologist"></span> Developer Tools',
+                link: '/developer-tools'
+            }
+        ]
+    },
+    {
+        text: 'More',
+        collapsed: true,
+        items: [
+            meta.build.nsfw
+                ? {
+                    text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
+                    link: 'https://rentry.org/NSFW-Checkpoint'
+                }
+                : {},
+            {
+                text: '<span class="i-twemoji:warning"></span> Unsafe Sites',
+                link: '/unsafe'
+            },
+            {
+                text: '<span class="i-twemoji:package"></span> Storage',
+                link: '/storage'
+            }
+        ]
+    }
+]
--- a/docs/.vitepress/theme/components/VPLocalSearchBox.vue
+++ b/docs/.vitepress/theme/components/VPLocalSearchBox.vue
@@ -59,6 +59,7 @@ import { LRUCache } from 'vitepress/dist/client/theme-default/support/lru'
 import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
 import Tooltip from './Tooltip.vue'
 import FloatingVue from 'floating-vue'
+import { sidebar } from '../../shared'

 const emit = defineEmits<{
  (e: 'close'): void
@@ -236,9 +237,34 @@ debouncedWatch(
      }
    }

-    results.value = index
+    function findPageTitle(items: any[], path: string): string | null {
+      for (const item of items) {
+        if (item.link === path) return item.text
+        if (item.items) {
+          const found = findPageTitle(item.items, path)
+          if (found) return found
+        }
+      }
+      return null
+    }
+
+    const rawResults = index
      .search(query, searchOptions)
      .slice(0, 16) as (SearchResult & Result)[]
+
+    results.value = rawResults.map((r) => {
+      const [id] = r.id.split('#')
+      const cleanPath = '/' + id.replace(/\.html$/, '').replace(/^\//, '')
+      const pageTitle = findPageTitle(Array.isArray(sidebar) ? sidebar : [], cleanPath)
+      const titles = [...r.titles]
+      
+      if (pageTitle && !titles.includes(pageTitle) && r.title !== pageTitle) {
+        titles.unshift(pageTitle)
+      }
+
+      return { ...r, titles }
+    })
+
    enableNoResults.value = true

    // Fetch and process excerpts for detailed view highlighting
@@ -256,11 +282,13 @@ debouncedWatch(
      const [id, anchor] = r.id.split('#')
      const map = cache.get(id)
      const text = map?.get(anchor) ?? ''
+      
      if (isFuzzySearch.value) {
        for (const term in r.match) {
          terms.add(term)
        }
      }
+
      return { ...r, text }
    })

@@ -705,8 +733,8 @@ function formMarkRegex(terms: Set<string>) {

 function onMouseMove(e: MouseEvent) {
  if (!disableMouseOver.value) return
-  const el = (e.target as HTMLElement)?.closest<HTMLAnchorElement>('.result')
-  const index = Number.parseInt(el?.dataset.index!)
+  const el = (e.target as HTMLElement)?.closest<HTMLElement>('.result-item')
+  const index = el?.dataset?.index ? Number.parseInt(el.dataset.index) : -1
  if (index >= 0 && index !== selectedIndex.value) {
    selectedIndex.value = index
  }
@@ -819,6 +847,8 @@ function onMouseMove(e: MouseEvent) {
            :id="'localsearch-item-' + index"
            :aria-selected="selectedIndex === index ? 'true' : 'false'"
            role="option"
+            class="result-item"
+            :data-index="index"
          >
            <a
              :href="p.id"
@@ -852,20 +882,24 @@ function onMouseMove(e: MouseEvent) {
                  <div v-if="p.text" class="excerpt" inert>
                    <div class="vp-doc" v-html="p.text" />
                  </div>
+
                  <div class="excerpt-gradient-bottom" />
                  <div class="excerpt-gradient-top" />
-                  <div v-if="(resultMarks.get(index)?.length ?? 0) > 1" class="excerpt-actions" @click.prevent.stop @mousedown.prevent.stop>
-                    <button class="match-nav-button" @click.prevent.stop="prevMatch(index)" title="Previous match">
-                      <span class="vpi-chevron-left navigate-icon" />
-                    </button>
-                    <span class="match-count">{{ (currentMarkIndex.get(index) ?? 0) + 1 }}/{{ resultMarks.get(index)?.length }}</span>
-                    <button class="match-nav-button" @click.prevent.stop="nextMatch(index)" title="Next match">
-                      <span class="vpi-chevron-right navigate-icon" />
-                    </button>
-                  </div>
                </div>
              </div>
            </a>
+            <div
+              v-if="showDetailedList && (resultMarks.get(index)?.length ?? 0) > 1"
+              class="excerpt-actions"
+            >
+              <button type="button" class="match-nav-button" @click="prevMatch(index)" title="Previous match">
+                <span class="vpi-chevron-left navigate-icon" />
+              </button>
+              <span class="match-count">{{ (currentMarkIndex.get(index) ?? 0) + 1 }}/{{ resultMarks.get(index)?.length }}</span>
+              <button type="button" class="match-nav-button" @click="nextMatch(index)" title="Next match">
+                <span class="vpi-chevron-right navigate-icon" />
+              </button>
+            </div>
          </li>
          <li
            v-if="filterText && !results.length && enableNoResults"
@@ -996,10 +1030,17 @@ function onMouseMove(e: MouseEvent) {
 }

 /* Custom Feature: Match navigation controls overlay */
+.result-item {
+  position: relative;
+}
+
 .excerpt-actions {
  position: absolute;
-  bottom: 5px;
-  right: 5px;
+  /* (12px margin + 2px border + 5px spacing) */
+  bottom: 19px;
+  right: 19px;
+  z-index: 2000;
+  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
@@ -1010,6 +1051,14 @@ function onMouseMove(e: MouseEvent) {
  box-shadow: var(--vp-shadow-1);
 }

+@media (max-width: 767px) {
+  .excerpt-actions {
+    /* (8px margin + 2px border + 5px spacing) */
+    bottom: 15px;
+    right: 15px;
+  }
+}
+
 .match-nav-button {
  display: flex;
  align-items: center;
@@ -1019,6 +1068,7 @@ function onMouseMove(e: MouseEvent) {
  border-radius: 2px;
  color: var(--vp-c-text-2);
  transition: color 0.2s, background-color 0.2s;
+  cursor: pointer;
 }

 .match-nav-button:hover {
@@ -1168,6 +1218,7 @@ function onMouseMove(e: MouseEvent) {
 .titles {
  display: flex;
  flex-wrap: wrap;
+  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1001;
@@ -1180,6 +1231,17 @@ function onMouseMove(e: MouseEvent) {
  gap: 4px;
 }

+.title .text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.title-icon + .title .text {
+  font-weight: 600;
+  border-bottom: 1px solid var(--vp-c-brand-1);
+}
+
 .title.main {
  font-weight: 500;
 }