Add search feature to the blog thanks to pagefind

Einenlum · Jul 20, 2023 · f80333d · f80333d · vercel · Jul 20, 2023
1 parent dfc1251
commit f80333d
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 9 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -11,12 +11,18 @@ import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx(), sitemap()],
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    mdx(),
+    sitemap(),
+  ],
   markdown: {
     shikiConfig: {
       theme: 'nord',
       wrap: true,
     },
   },
-  site: 'https://www.einenlum.com',
+  site: 'https://www.einenlum.com/',
 });
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build",
+    "build": "astro build && pagefind",
     "preview": "astro preview",
     "astro": "astro"
   },
@@ -16,6 +16,7 @@
     "@astrojs/sitemap": "^2.0.0",
     "@astrojs/tailwind": "^4.0.0",
     "astro": "^2.8.5",
+    "pagefind": "^0.12.0",
     "tailwindcss": "^3.3.3"
   }
 }
diff --git a/pagefind.yml b/pagefind.yml
@@ -0,0 +1,2 @@
+source: dist
+bundle_dir: _pagefind
diff --git a/src/components/article-header.astro b/src/components/article-header.astro
@@ -8,5 +8,5 @@ const { publishedAt, title } = Astro.props as Props;
 ---
 <div class="mt-10 mb-8 xl:mb-10 py-6 pl-6 align-bottom border-l-4 border-l-pink-900">
     <h1 class="text-lg md:text-xl font-sans tracking-wide md:tracking-wider">{title}</h1>
-    <p class="justify-end mt-4 text-gray-700 dark:text-gray-400">{publishedAt.toDateString()}</p>
+    <p class="justify-end mt-4 text-gray-700 dark:text-gray-400" data-pagefind-meta="date">{publishedAt.toDateString()}</p>
 </div>
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -5,13 +5,14 @@ const elements = [
     { text: 'Blog', path: '/' },
     { text: 'Book', path: '/book' },
     { text: 'About', path: '/about' },
+    { text: 'Search', path: '/search' },
 ]
 
 ---
 
 
 <header class="mb-14 md:mb-20">
-    <h1 class="text-right md:my-12 xl:my-16 mb-4 mt-10 text-xl md:text-2xl font-mono">Einenlum<span class="text-pink-700 font-bold">.</span></h1>
+    <div class="text-right md:my-12 xl:my-16 mb-4 mt-10 text-xl md:text-2xl font-mono">Einenlum<span class="text-pink-700 font-bold">.</span></div>
     <nav class="my-6 md:my-12 md:pr-0 pr-2">
         <ul class="flex justify-end">
             {elements.map((element) => <HeaderElement text={element.text} path={element.path} />)}

diff --git a/src/layouts/article-layout.astro b/src/layouts/article-layout.astro
@@ -12,7 +12,10 @@ const { title, description, publishedAt } = Astro.props;
 ---
 
 <Layout title={title} description={description}>
-    <ArticleHeader title={title} publishedAt={publishedAt} />
+    <!-- Pagefind will only look for articles now -->
+    <div data-pagefind-body>
+        <ArticleHeader title={title} publishedAt={publishedAt} />
 
-    <slot />
+        <slot />
+    </div>
 </Layout>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -1,19 +1,25 @@
 ---
 import Header from '../components/header.astro';
 import FeedLink from '../components/feed-link.astro';
+import '../styles/global.css';
 
 export interface Props {
 	title: string,
 	description: string,
+	includeSearch?: boolean,
 }
 
-const { title, description } = Astro.props as Props;
+const { title, description, includeSearch } = Astro.props as Props;
 ---
 
 <!DOCTYPE html>
 <html lang="en-US">
 	<head>
 		<link rel="shortcut icon" href="/favicon.png" />
+		{includeSearch && (
+			<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+			<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+		)}
 		<meta name="description" content={description} />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta property="og:title" content={title}>

diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -0,0 +1,20 @@
+---
+
+import Layout from '../layouts/layout.astro';
+import PageTitle from '../components/page-title.astro';
+
+---
+
+<Layout title="Einenlum - Search" description="Search articles." includeSearch={true}>
+    <div class="mb-8">
+        <PageTitle>Search for articles</PageTitle>
+    </div>
+
+    <div id="search"></div>
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            new PagefindUI({ element: "#search", showImages: false });
+        });
+    </script>
+
+</Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.pagefind-ui--reset mark, mark {
+    @apply bg-indigo-200 !important;
+}
+
+.pagefind-ui__result-tag {
+    @apply text-black;
+}
+
+.pagefind-ui__result, .pagefind-ui__result-title, .pagefind-ui__result-link {
+    @apply dark:text-amber-50 !important;
+}
+
+.pagefind-ui__message {
+    @apply text-black dark:text-amber-50 !important;
+    @apply font-normal !important;
+}
+
+.pagefind-ui__result-link {
+    @apply text-pink-900 !important;
+    @apply hover:text-pink-700 !important;
+    @apply dark:text-indigo-200 !important;
+    @apply transition !important;
+    @apply ease-in-out !important;
+    @apply delay-150 !important;
+    text-decoration: none !important;
+}
+
+.pagefind-ui__search-input {
+    @apply border border-pink-900 dark:border-indigo-200 !important;
+    @apply font-normal !important;
+    @apply font-sans !important;
+}
+
+.pagefind-ui__search-input:focus, .pagefind-ui__search-input:active, .pagefind-ui__search-input:focus-visible {
+    /* @apply border-pink-900 dark:border-indigo-200 !important; */
+    outline: unset !important;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -838,6 +838,13 @@ acorn@^8.0.0, acorn@^8.8.0, acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 ansi-align@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -1267,7 +1274,7 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-debug@^4.0.0, debug@^4.1.0, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1851,6 +1858,14 @@ html-void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
   integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
 
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -2933,6 +2948,14 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pagefind@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/pagefind/-/pagefind-0.12.0.tgz#ee73a4fd2d3b4d7b88f7188181143447f7e48352"
+  integrity sha512-LHUmlYYweBM6/rK1G+7z2q2WjYeycrB7g5Kuw0w6yMkYztzsEdO2Qj2pJ3z8gsWV8eJsYQyAGOAdqE3SZWlCqA==
+  dependencies:
+    https-proxy-agent "^5.0.0"
+    proxy-from-env "^1.1.0"
+
 parse-entities@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.1.tgz#4e2a01111fb1c986549b944af39eeda258fc9e4e"
@@ -3128,6 +3151,11 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
   integrity sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"