@vuepress-plume/plugin-search 1.0.0-rc.36

package/lib/client/components/SearchButton.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { toRef } from 'vue'
+import type { SearchBoxLocales } from '../../shared/index.js'
+import { useLocale } from '../composables/locale.js'
+
+const props = defineProps<{
+  locales: SearchBoxLocales
+}>()
+
+const locale = useLocale(toRef(props.locales))
+</script>
+
+<template>
+  <button type="button" class="mini-search mini-search-button" :aria-label="locale.placeholder">
+    <span class="mini-search-button-container">
+      <svg class="mini-search-search-icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon">
+        <path
+          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+          stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"
+        />
+      </svg>
+      <span class="mini-search-button-placeholder">{{ locale.placeholder }}</span>
+    </span>
+    <span class="mini-search-button-keys">
+      <kbd class="mini-search-button-key" />
+      <kbd class="mini-search-button-key">K</kbd>
+    </span>
+  </button>
+</template>
+
+<style>
+.mini-search-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 55px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.mini-search-button:hover {
+  background: transparent;
+}
+
+.mini-search-button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.mini-search-button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+@media (min-width: 768px) {
+  .mini-search-button {
+    justify-content: flex-start;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px 0 12px;
+    background-color: var(--vp-c-bg-alt);
+    border: 1px solid transparent;
+    border-radius: 8px;
+  }
+
+  .mini-search-button:hover {
+    background: var(--vp-c-bg-alt);
+    border-color: var(--vp-c-brand-1);
+  }
+}
+
+.mini-search-button .mini-search-button-container {
+  display: flex;
+  align-items: center;
+}
+
+.mini-search-button .mini-search-search-icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--vp-c-text-1);
+  fill: currentcolor;
+  transition: color 0.3s;
+}
+
+.mini-search-button:hover .mini-search-search-icon {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .mini-search-button .mini-search-search-icon {
+    top: 1px;
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    color: var(--vp-c-text-2);
+  }
+}
+
+.mini-search-button .mini-search-button-placeholder {
+  display: none;
+  padding: 0 16px 0 0;
+  margin-top: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.3s;
+}
+
+.mini-search-button:hover .mini-search-button-placeholder {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .mini-search-button .mini-search-button-placeholder {
+    display: inline-block;
+  }
+}
+
+.mini-search-button .mini-search-button-keys {
+  display: none;
+  min-width: auto;
+
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+@media (min-width: 768px) {
+  .mini-search-button .mini-search-button-keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.mini-search-button .mini-search-button-key {
+  display: block;
+  width: auto;
+
+  /* rtl:end:ignore */
+  min-width: 0;
+  height: 22px;
+  padding-left: 6px;
+  margin: 2px 0 0;
+  font-family: var(--vp-font-family-base);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 22px;
+  border: 1px solid var(--vp-c-divider);
+
+  /* rtl:begin:ignore */
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  transition: color 0.3s, border-color 0.3s;
+}
+
+.mini-search-button .mini-search-button-key + .mini-search-button-key {
+  padding-right: 6px;
+  padding-left: 2px;
+
+  /* rtl:begin:ignore */
+  border-right: 1px solid var(--vp-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+
+  /* rtl:end:ignore */
+}
+
+.mini-search-button .mini-search-button-key:first-child {
+  font-size: 0 !important;
+}
+
+.mini-search-button .mini-search-button-key:first-child::after {
+  font-size: 12px;
+  color: var(--mini-search-muted-color);
+  letter-spacing: normal;
+  content: "Ctrl";
+}
+
+.mac .mini-search-button .mini-search-button-key:first-child::after {
+  content: "\2318";
+}
+
+.mini-search-button .mini-search-button-key:first-child > * {
+  display: none;
+}
+</style>

package/lib/client/components/icons/BackIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M19 12H5m7 7l-7-7l7-7"
+    />
+  </svg>
+</template>

package/lib/client/components/icons/ClearIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
+    />
+  </svg>
+</template>

package/lib/client/components/icons/SearchIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+  >
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21l-4.35-4.35" />
+    </g>
+  </svg>
+</template>

package/lib/client/composables/index.d.ts

@@ -0,0 +1 @@
+export * from './searchIndex.js';

package/lib/client/composables/index.js

@@ -0,0 +1 @@
+export * from './searchIndex.js';

package/lib/client/composables/locale.d.ts

@@ -0,0 +1,18 @@
+import type { MaybeRef } from 'vue';
+import type { SearchBoxLocales } from '../../shared/index.js';
+export declare function useLocale(locales: MaybeRef<SearchBoxLocales>): import("vue").ComputedRef<Partial<{
+    placeholder: string;
+    buttonText: string;
+    resetButtonTitle: string;
+    backButtonTitle: string;
+    noResultsText: string;
+    footer: {
+        selectText: string;
+        selectKeyAriaLabel: string;
+        navigateText: string;
+        navigateUpKeyAriaLabel: string;
+        navigateDownKeyAriaLabel: string;
+        closeText: string;
+        closeKeyAriaLabel: string;
+    };
+}>>;

package/lib/client/composables/locale.js

@@ -0,0 +1,25 @@
+import { useRouteLocale } from 'vuepress/client';
+import { computed, toRef } from 'vue';
+const defaultLocales = {
+    '/': {
+        placeholder: 'Search',
+        resetButtonTitle: 'Reset search',
+        backButtonTitle: 'Close search',
+        noResultsText: 'No results for',
+        footer: {
+            selectText: 'to select',
+            selectKeyAriaLabel: 'enter',
+            navigateText: 'to navigate',
+            navigateUpKeyAriaLabel: 'up arrow',
+            navigateDownKeyAriaLabel: 'down arrow',
+            closeText: 'to close',
+            closeKeyAriaLabel: 'escape',
+        },
+    },
+};
+export function useLocale(locales) {
+    const localesRef = toRef(locales);
+    const routeLocale = useRouteLocale();
+    const locale = computed(() => localesRef.value[routeLocale.value] ?? defaultLocales[routeLocale.value] ?? defaultLocales['/']);
+    return locale;
+}

package/lib/client/composables/searchIndex.d.ts

@@ -0,0 +1,3 @@
+export declare function useSearchIndex(): import("vue").ShallowRef<Record<string, () => Promise<{
+    default: string;
+}>>>;

package/lib/client/composables/searchIndex.js

@@ -0,0 +1,14 @@
+import { searchIndex } from '@internal/minisearchIndex';
+import { shallowRef } from 'vue';
+const searchIndexData = shallowRef(searchIndex);
+export function useSearchIndex() {
+    return searchIndexData;
+}
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
+    __VUE_HMR_RUNTIME__.updateSearchIndex = (data) => {
+        searchIndexData.value = data;
+    };
+    __VUE_HMR_RUNTIME__.updateSearchIndex = (data) => {
+        searchIndexData.value = data;
+    };
+}

package/lib/client/config.d.ts

@@ -0,0 +1,3 @@
+import type { ClientConfig } from 'vuepress/client';
+declare const _default: ClientConfig;
+export default _default;

package/lib/client/config.js

@@ -0,0 +1,14 @@
+import { defineClientConfig } from 'vuepress/client';
+import { h } from 'vue';
+import Search from './components/Search.vue';
+const locales = __SEARCH_LOCALES__;
+const searchOptions = __SEARCH_OPTIONS__;
+export default defineClientConfig({
+    enhance({ app }) {
+        app.component('SearchBox', props => h(Search, {
+            locales,
+            options: searchOptions,
+            ...props,
+        }));
+    },
+});

package/lib/client/index.d.ts

@@ -0,0 +1,3 @@
+import SearchBox from './components/Search.vue';
+import { useSearchIndex } from './composables/index.js';
+export { SearchBox, useSearchIndex, };

package/lib/client/index.js

@@ -0,0 +1,3 @@
+import SearchBox from './components/Search.vue';
+import { useSearchIndex } from './composables/index.js';
+export { SearchBox, useSearchIndex, };

package/lib/client/shim.d.ts

@@ -0,0 +1,20 @@
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}
+
+declare module '@internal/minisearchIndex' {
+  const searchIndex: Record<string, () => Promise<{ default: string }>>
+  export {
+    searchIndex,
+  }
+}
+
+declare module 'mark.js/src/vanilla.js' {
+  import type Mark from 'mark.js'
+
+  const mark: typeof Mark
+  export default mark
+}

package/lib/client/utils/lru.d.ts

@@ -0,0 +1,9 @@
+export declare class LRUCache<K, V> {
+    private max;
+    private cache;
+    constructor(max?: number);
+    get(key: K): V | undefined;
+    set(key: K, val: V): void;
+    first(): K | undefined;
+    clear(): void;
+}

package/lib/client/utils/lru.js

@@ -0,0 +1,33 @@
+// adapted from https://stackoverflow.com/a/46432113/11613622
+export class LRUCache {
+    max;
+    cache;
+    constructor(max = 10) {
+        this.max = max;
+        this.cache = new Map();
+    }
+    get(key) {
+        const item = this.cache.get(key);
+        if (item !== undefined) {
+            // refresh key
+            this.cache.delete(key);
+            this.cache.set(key, item);
+        }
+        return item;
+    }
+    set(key, val) {
+        // refresh key
+        if (this.cache.has(key))
+            this.cache.delete(key);
+        // evict oldest
+        else if (this.cache.size === this.max)
+            this.cache.delete(this.first());
+        this.cache.set(key, val);
+    }
+    first() {
+        return this.cache.keys().next().value;
+    }
+    clear() {
+        this.cache.clear();
+    }
+}

package/lib/node/index.d.ts

@@ -0,0 +1,4 @@
+import { searchPlugin } from './searchPlugin.js';
+export { prepareSearchIndex } from './prepareSearchIndex.js';
+export * from '../shared/index.js';
+export { searchPlugin, };

package/lib/node/index.js

@@ -0,0 +1,4 @@
+import { searchPlugin } from './searchPlugin.js';
+export { prepareSearchIndex } from './prepareSearchIndex.js';
+export * from '../shared/index.js';
+export { searchPlugin, };

package/lib/node/prepareSearchIndex.d.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vuepress/core';
+import type { SearchOptions, SearchPluginOptions } from '../shared/index.js';
+export interface SearchIndexOptions {
+    app: App;
+    searchOptions: SearchOptions;
+    isSearchable: SearchPluginOptions['isSearchable'];
+}
+export declare function prepareSearchIndex({ app, isSearchable, searchOptions, }: SearchIndexOptions): Promise<void>;
+export declare function onSearchIndexUpdated(filepath: string, { app, isSearchable, searchOptions, }: SearchIndexOptions): Promise<void>;
+export declare function onSearchIndexRemoved(filepath: string, { app, isSearchable, searchOptions, }: SearchIndexOptions): Promise<void>;

package/lib/node/prepareSearchIndex.js

@@ -0,0 +1,140 @@
+import MiniSearch from 'minisearch';
+import pMap from 'p-map';
+const SEARCH_INDEX_DIR = 'internal/minisearchIndex/';
+const indexByLocales = new Map();
+const indexCache = new Map();
+function getIndexByLocale(locale, options) {
+    let index = indexByLocales.get(locale);
+    if (!index) {
+        index = new MiniSearch({
+            fields: ['title', 'titles', 'text'],
+            storeFields: ['title', 'titles'],
+            ...options.miniSearch?.options,
+        });
+        indexByLocales.set(locale, index);
+    }
+    return index;
+}
+function getIndexCache(filepath) {
+    let index = indexCache.get(filepath);
+    if (!index) {
+        index = [];
+        indexCache.set(filepath, index);
+    }
+    return index;
+}
+export async function prepareSearchIndex({ app, isSearchable, searchOptions, }) {
+    const pages = isSearchable ? app.pages.filter(isSearchable) : app.pages;
+    await pMap(pages, p => indexFile(p, searchOptions), {
+        concurrency: 64,
+    });
+    await writeTemp(app);
+}
+export async function onSearchIndexUpdated(filepath, { app, isSearchable, searchOptions, }) {
+    const pages = isSearchable ? app.pages.filter(isSearchable) : app.pages;
+    if (pages.some(p => p.filePathRelative?.endsWith(filepath))) {
+        await indexFile(app.pages.find(p => p.filePathRelative?.endsWith(filepath)), searchOptions);
+        await writeTemp(app);
+    }
+}
+export async function onSearchIndexRemoved(filepath, { app, isSearchable, searchOptions, }) {
+    const pages = isSearchable ? app.pages.filter(isSearchable) : app.pages;
+    if (pages.some(p => p.filePathRelative?.endsWith(filepath))) {
+        const page = app.pages.find(p => p.filePathRelative?.endsWith(filepath));
+        const fileId = page.path;
+        const locale = page.pathLocale;
+        const index = getIndexByLocale(locale, searchOptions);
+        const cache = getIndexCache(fileId);
+        index.removeAll(cache);
+        await writeTemp(app);
+    }
+}
+async function writeTemp(app) {
+    const records = [];
+    for (const [locale] of indexByLocales) {
+        const index = indexByLocales.get(locale);
+        const localeName = locale.replace(/^\/|\/$/g, '').replace(/\//g, '_') || 'default';
+        const filename = `searchBox-${localeName}.js`;
+        records.push(`${JSON.stringify(locale)}: () => import('@${SEARCH_INDEX_DIR}${filename}')`);
+        await app.writeTemp(`${SEARCH_INDEX_DIR}${filename}`, `export default ${JSON.stringify(JSON.stringify(index) ?? {})}`);
+    }
+    await app.writeTemp(`${SEARCH_INDEX_DIR}index.js`, `export const searchIndex = {${records.join(',')}}${app.env.isDev ? `\n${genHmrCode('searchIndex')}` : ''}`);
+}
+async function indexFile(page, options) {
+    // get file metadata
+    const fileId = page.path;
+    const locale = page.pathLocale;
+    const index = getIndexByLocale(locale, options);
+    const cache = getIndexCache(fileId);
+    // retrieve file and split into "sections"
+    const html = page.contentRendered;
+    const sections = splitPageIntoSections(html);
+    if (cache && cache.length)
+        index.removeAll(cache);
+    // add sections to the locale index
+    for await (const section of sections) {
+        if (!section || !(section.text || section.titles))
+            break;
+        const { anchor, text, titles } = section;
+        const id = anchor ? [fileId, anchor].join('#') : fileId;
+        const item = {
+            id,
+            text,
+            title: titles.at(-1),
+            titles: titles.slice(0, -1),
+        };
+        index.add(item);
+        cache.push(item);
+    }
+}
+const headingRegex = /<h(\d*).*?>(<a.*? href="#.*?".*?>.*?<\/a>)<\/h\1>/gi;
+const headingContentRegex = /<a.*? href="#(.*?)".*?>(.*?)<\/a>/i;
+/**
+ * Splits HTML into sections based on headings
+ */
+function* splitPageIntoSections(html) {
+    const result = html.split(headingRegex);
+    result.shift();
+    let parentTitles = [];
+    for (let i = 0; i < result.length; i += 3) {
+        const level = Number.parseInt(result[i]) - 1;
+        const heading = result[i + 1];
+        const headingResult = headingContentRegex.exec(heading);
+        const title = clearHtmlTags(headingResult?.[2] ?? '').trim();
+        const anchor = headingResult?.[1] ?? '';
+        const content = result[i + 2];
+        if (!title || !content)
+            continue;
+        const titles = parentTitles.slice(0, level);
+        titles[level] = title;
+        yield { anchor, titles, text: getSearchableText(content) };
+        if (level === 0)
+            parentTitles = [title];
+        else
+            parentTitles[level] = title;
+    }
+}
+function getSearchableText(content) {
+    content = clearHtmlTags(content);
+    return content;
+}
+function clearHtmlTags(str) {
+    return str.replace(/<[^>]*>/g, '');
+}
+function genHmrCode(m) {
+    const func = `update${m[0].toUpperCase()}${m.slice(1)}`;
+    return `
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.${m}) {
+    __VUE_HMR_RUNTIME__.${func}(${m})
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ ${m} }) => {
+    __VUE_HMR_RUNTIME__.${func}(${m})
+  })
+}
+`;
+}

package/lib/node/searchPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vuepress/core';
+import type { SearchPluginOptions } from '../shared/index.js';
+export declare function searchPlugin({ locales, isSearchable, ...searchOptions }?: SearchPluginOptions): Plugin;

package/lib/node/searchPlugin.js

@@ -0,0 +1,37 @@
+import chokidar from 'chokidar';
+import { getDirname, path } from 'vuepress/utils';
+import { addViteOptimizeDepsInclude } from '@vuepress/helper';
+import { onSearchIndexRemoved, onSearchIndexUpdated, prepareSearchIndex } from './prepareSearchIndex.js';
+const __dirname = getDirname(import.meta.url);
+export function searchPlugin({ locales = {}, isSearchable, ...searchOptions } = {}) {
+    return app => ({
+        name: '@vuepress-plume/plugin-search',
+        clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+        define: {
+            __SEARCH_LOCALES__: locales,
+            __SEARCH_OPTIONS__: searchOptions,
+        },
+        extendsBundlerOptions(bundlerOptions) {
+            addViteOptimizeDepsInclude(bundlerOptions, app, ['mark.js/src/vanilla.js', '@vueuse/integrations/useFocusTrap', 'minisearch']);
+        },
+        onPrepared: async (app) => {
+            await prepareSearchIndex({ app, isSearchable, searchOptions });
+        },
+        onWatched: async (app, watchers) => {
+            const searchIndexWatcher = chokidar.watch('pages/**/*.js', {
+                cwd: app.dir.temp(),
+                ignoreInitial: true,
+            });
+            searchIndexWatcher.on('add', (filepath) => {
+                onSearchIndexUpdated(filepath, { app, isSearchable, searchOptions });
+            });
+            searchIndexWatcher.on('change', (filepath) => {
+                onSearchIndexUpdated(filepath, { app, isSearchable, searchOptions });
+            });
+            searchIndexWatcher.on('unlink', (filepath) => {
+                onSearchIndexRemoved(filepath, { app, isSearchable, searchOptions });
+            });
+            watchers.push(searchIndexWatcher);
+        },
+    });
+}

package/lib/shared/index.d.ts

@@ -0,0 +1,38 @@
+import type { LocaleConfig, Page } from 'vuepress/core';
+import type { Options as MiniSearchOptions } from 'minisearch';
+export type SearchBoxLocales = LocaleConfig<{
+    placeholder: string;
+    buttonText: string;
+    resetButtonTitle: string;
+    backButtonTitle: string;
+    noResultsText: string;
+    footer: {
+        selectText: string;
+        selectKeyAriaLabel: string;
+        navigateText: string;
+        navigateUpKeyAriaLabel: string;
+        navigateDownKeyAriaLabel: string;
+        closeText: string;
+        closeKeyAriaLabel: string;
+    };
+}>;
+export interface SearchPluginOptions extends SearchOptions {
+    locales?: SearchBoxLocales;
+    isSearchable?: (page: Page) => boolean;
+}
+export interface SearchOptions {
+    /**
+     * @default false
+     */
+    disableQueryPersistence?: boolean;
+    miniSearch?: {
+        /**
+         * @see https://lucaong.github.io/minisearch/modules/_minisearch_.html#options
+         */
+        options?: Pick<MiniSearchOptions, 'extractField' | 'tokenize' | 'processTerm'>;
+        /**
+         * @see https://lucaong.github.io/minisearch/modules/_minisearch_.html#searchoptions-1
+         */
+        searchOptions?: MiniSearchOptions['searchOptions'];
+    };
+}

package/lib/shared/index.js

@@ -0,0 +1 @@
+export {};