Implement PageFind within VitePress project #545

Karlstens · 2024-01-16T00:26:43Z

Karlstens
Jan 16, 2024

Would anyone happen to know of any tutorials on how to implement Pagefind within a VitePress project?

bglw · 2024-01-16T00:28:55Z

bglw
Jan 16, 2024
Maintainer

Hey @Karlstens 👋

I haven’t done so myself, but this npm package looks interesting!

https://www.npmjs.com/package/vitepress-plugin-pagefind

2 replies

Karlstens Jan 18, 2024
Author

Yah, I also spotted the vitepress-plugin-pagefind package on NPM whilst searching. I think it'll be my first point of call when I have a moment to start exploring.

I'll keep this thread updated with my PageFind & VitePress experiences over the coming weeks, might be handy for anyone interested. ☕

bglw Jan 29, 2024
Maintainer

Also possibly of interest: #550

Karlstens · 2024-02-10T05:10:54Z

Karlstens
Feb 10, 2024
Author

I've added vitepress-plugin-pagefind to my sandbox VitePress project (rc42), it's been an interesting experience!

Anything in the markdown body is more-or-less searchable out-of-the-box. And data-pagefind-ignore and data-pagefind-weight work well.

## {{ $frontmatter.title }}

Sprouts

<aside data-pagefind-ignore>
Potatoes!
</aside>

<p data-pagefind-weight="7">
    Cats
</p>

Where I'm currently stuck, is that I'm not too sure how to index Header content, as by default PageFind is only indexing the title of my page, but I have been testing some custom meta elements etc, but none of which return.

For example, I'd like to add search terms (and weighted terms would be perfect!!!) to each of my page headers.

My VitePress *.md files typically look like this - and don't mind the sandbox data - they're just search terms I'm testing with 😂

---
{
    "title": "Unique Shape",
    "category": "zebras go here",
    "description": "elephants yeah",
    "status": "Published",
    "state": "Incomplete",
    "data-pagefind-meta": "Rhino",
    "head":
        [
            ["meta", { "name": "pagefind", "content": "WXYZ" }],
            ["meta", { "name": "myPropB", "content": "EFGH" }],
            ["meta", { "name": "data-pagefind-meta", "content": "Shark" }],
            ["meta", { "name": "application", "content": "Unique App" }],
            [
                "meta",
                {
                    "name": "search",
                    "content": "Jellyfish",
                    data-pagefind-meta: "Jellyfish",
                },
            ],
        ],
    "author": "",
}
---

## {{ $frontmatter.title }}

Sprouts

<aside data-pagefind-ignore>
Potatoes!
</aside>

<p data-pagefind-weight="7">
    Cats
</p>

I'm very keen on for the ability to search for weighted search terms from the of my articles, to help steer my users search experience.

Below is the debug F12 from my served VitePress page, the data looks as it should, I'm just needing some advice on tweaking my project so that data is also available and weighted in the PageFind search.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Unique Shape | My VitePress Project</title>
    <meta name="description" content="elephants yeah">
    <meta name="generator" content="VitePress v1.0.0-rc.42">
    <link rel="preload stylesheet" href="/assets/style.1DMjEprB.css" as="style">
    <script type="module" src="/assets/app.yPuS6gMx.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.sIErfVaB.js">
    <link rel="modulepreload" href="/assets/chunks/theme.h8bvATGw.js">
    <link rel="modulepreload" href="/assets/shapes_triangle.md.f843E4vX.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
    <script>import("/pagefind/pagefind.js").then(i=>{window.__pagefind__=i,i.init()}).catch(()=>{});</script>
  <link rel="prefetch" href="/assets/index.md.-ay9fjvg.js"><link rel="prefetch" href="/assets/shapes.md.nOcSswRr.js">
  <link rel="prefetch" href="/assets/colours.md.UP93VFsT.js"><link rel="prefetch" href="/assets/sizes.md.EvXYqUFy.js">
  <link rel="prefetch" href="/assets/shapes_circle.md.SAWA8y7F.js"><link rel="prefetch" href="/assets/shapes_square.md.jlrRrczp.js">
  <link rel="prefetch" href="/assets/shapes_large-square.md.P60yUnxu.js">
  <link rel="prefetch" href="/assets/shapes_rectangle.md.MLE3P-me.js">
  <link rel="prefetch" href="/assets/shapes_unique-shape.md.QOxOfoD_.js">
  <link rel="prefetch" href="/assets/experimental.md.KSIhIEtm.js">
  <meta name="pagefind" content="WXYZ"><meta name="myPropB" content="EFGH">
  <meta name="data-pagefind-meta" content="Shark">
  <meta name="application" content="Unique App"><meta name="search" content="Jellyfish" data-pagefind-meta="Jellyfish">
  </head>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement PageFind within VitePress project #545

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Implement PageFind within VitePress project #545

Karlstens Jan 16, 2024

Replies: 2 comments · 2 replies

bglw Jan 16, 2024 Maintainer

Karlstens Jan 18, 2024 Author

bglw Jan 29, 2024 Maintainer

Karlstens Feb 10, 2024 Author

Karlstens
Jan 16, 2024

Replies: 2 comments 2 replies

bglw
Jan 16, 2024
Maintainer

Karlstens Jan 18, 2024
Author

bglw Jan 29, 2024
Maintainer

Karlstens
Feb 10, 2024
Author