Merge pull request #4 from budavariam/search-with-pagefind

feat(search): Add search with PageFind

.eleventy.js

@@ -10,6 +10,14 @@ const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { minify } = require("terser");
 const { cache } = require('eleventy-plugin-workbox');
+const { execSync } = require('child_process')
+
+/** List of extensions that must be cached by service worker. */
+const IMAGE_FORMATS = ['jpg', 'png', 'gif', 'ico', 'svg', 'jpeg', 'avif', 'webp'];
+const FONT_FORMATS = ['eot', 'ttf', 'otf', 'ttc', 'woff', 'woff2'];
+const DYNAMIC_FORMATS = ['js', 'css', 'mjs', 'html', 'json'];
+const PAGEFIND_FORMATS = ['pf_meta', 'pf_index', 'pf_fragment', 'pagefind']
+const EXTENSIONS = [...DYNAMIC_FORMATS, ...IMAGE_FORMATS, ...FONT_FORMATS, ...PAGEFIND_FORMATS];
 
 module.exports = function (eleventyConfig) {
   // Copy the `img` and `css` folders to the output
@@ -29,34 +37,37 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.addPlugin(cache, {
-	/**
-	 * Options that will be passed to
-	 * [`generateSW` function](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW).
-	 */
-	generateSWOptions: {
-    modifyURLPrefix: {
-      '': '/learning-spanish/',
+    /**
+     * Options that will be passed to
+     * [`generateSW` function](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW).
+     * https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-WebpackGenerateSWOptions
+     * creates: service-worker.js
+     */
+    generateSWOptions: {
+      modifyURLPrefix: {
+        '': '/learning-spanish/',
+      },
+      globPatterns: [`*.{${EXTENSIONS}}`, `**/*.{${EXTENSIONS}}`],
     },
-  },
-	/**
-	 * Directory inside _output_ folder to be used as place for
-	 * service worker.
-	 */
-	// publicDirectory?: string;
-	/**
-	 * Scope for service worker.
-	 * Default `/`.
-	 */
-	scope: "./"
-	/**
-	 * Tells if plugin should generate service worker.
-	 * Useful for situations when there is a need to test service worker,
-	 * especially in development process.
-	 *
-	 * By default, it is enabled if `NODE_ENV === 'production'`.
-	 */
-	// enabled?: boolean;
-	});
+    /**
+     * Directory inside _output_ folder to be used as place for
+     * service worker.
+     */
+    // publicDirectory?: string;
+    /**
+     * Scope for service worker.
+     * Default `/`.
+     */
+    scope: "./"
+    /**
+     * Tells if plugin should generate service worker.
+     * Useful for situations when there is a need to test service worker,
+     * especially in development process.
+     *
+     * By default, it is enabled if `NODE_ENV === 'production'`.
+     */
+    // enabled?: boolean;
+  });
 
 
   eleventyConfig.addFilter("readableDate", dateObj => {
@@ -161,6 +172,11 @@ module.exports = function (eleventyConfig) {
     ghostMode: false
   });
 
+  eleventyConfig.on('eleventy.after', () => {
+    console.log("Start pageIndex generation...")
+    execSync(`npx pagefind --site _site --glob \"**/*.html\"`, { encoding: 'utf-8' })
+  })
+
   return {
     // Control which files Eleventy will process
     // e.g.: *.md, *.njk, *.html, *.liquid
@@ -179,9 +195,9 @@ module.exports = function (eleventyConfig) {
 
     // -----------------------------------------------------------------
     // If your site deploys to a subdirectory, change `pathPrefix`.
-    // Don’t worry about leading and trailing slashes, we normalize these.
+    // Don't worry about leading and trailing slashes, we normalize these.
 
-    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+    // If you don't have a subdirectory, use "" or "/" (they do the same thing)
     // This is only used for link URLs (it does not affect your file structure)
     // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
 

.eleventyignore

@@ -1 +1,2 @@
 README.md
+DEFAULT_README.md

_includes/layouts/base.njk

@@ -16,10 +16,11 @@
     {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
     {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
-    <link rel="manifest" href="{{ '/manifest.json' | url }}" />
+    <link rel="manifest" href="{{ '/manifest.json' | url }}">
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-diff.css' | url }}">
+    <link rel="stylesheet" href="{{ '/pagefind/pagefind-ui.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
     <link rel="icon" type="image/x-icon" href="{{ '/img/favicon/favicon.ico' | url }}">
@@ -41,7 +42,7 @@
       </ul>
     </header>
 
-    <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
+    <main{% if templateClass %} class="{{ templateClass }}"{% endif %} data-pagefind-body>
       {{ content | safe }}
     </main>
 
@@ -51,7 +52,7 @@
 
     <!-- capture the JS content as a Nunjucks variable -->
     {% set js %}
-      {% include "preferred-color-scheme.js" %}
+      {% include "lib/preferred-color-scheme.js" %}
     {% endset %}
     <!-- feed it through our jsmin filter to minify -->
     <script>
@@ -67,5 +68,9 @@
         .catch(console.error);
     }
   </script>
+  <script 
+    src="{{ '/pagefind/pagefind-ui.js' | url }}" 
+    onload="new PagefindUI({ element: '#search', showImages: false });">
+  </script>
   </body>
 </html>

_includes/layouts/home.njk

@@ -2,4 +2,7 @@
 layout: layouts/base.njk
 templateClass: tmpl-home
 ---
-{{ content | safe }}
+
+<div data-pagefind-ignore="all">
+    {{ content | safe }}
+</div>

_includes/layouts/post.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 templateClass: tmpl-post
 ---
-<h1>{{ title }}</h1>
+<h1 data-pagefind-meta="title">{{ title }}</h1>
 
 {# <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> #}
 {%- for tag in tags | filterTagList %}
@@ -18,12 +18,12 @@ templateClass: tmpl-post
 {%- if nextPost or previousPost %}
 <hr>
 {%- set githubUrl %}https://github.com/budavariam/learning-spanish/blob/main/{{ page.filePathStem }}.md{% endset %}
-<small>Van egy ötletem! Szeretnék <a href="{{ githubUrl }}" class="github-url">javítani ezen az oldalon</a> githubon keresztül!</small>
+<small data-pagefind-ignore="all">Van egy ötletem! Szeretnék <a href="{{ githubUrl }}" class="github-url">javítani ezen az oldalon</a> githubon keresztül!</small>
 <hr>
 
 <ul>
-  {%- if nextPost %}<li>Következő: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
-  {%- if previousPost %}<li>Előző: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+  {%- if nextPost %}<li data-pagefind-ignore="all">Következő: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+  {%- if previousPost %}<li data-pagefind-ignore="all">Előző: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
 </ul>
 {%- endif %}
 {%- endif %}

about/index.md

@@ -1,7 +1,6 @@
 ---
-layout: layouts/post.njk
 title: Rólam
-templateClass: tmpl-post
+layout: layouts/home.njk
 eleventyNavigation:
   key: Rólam
   order: 7

archive.njk

@@ -1,12 +1,10 @@
 ---
-layout: layouts/home.njk
+layout: layouts/post.njk
 permalink: /posts/
 eleventyNavigation:
   key: Archívum
   order: 2
 ---
 
-<h1>Archívum</h1>
-
 {% set postslist = collections.posts %}
 {% include "postslist.njk" %}

crossword/index.md

@@ -1,7 +1,6 @@
 ---
-layout: layouts/post.njk
+layout: layouts/home.njk
 title: Keresztrejtvény
-templateClass: tmpl-post
 eleventyNavigation:
   key: Keresztrejtvény
   order: 5

css/index.css

@@ -47,6 +47,13 @@
   --text-background-hover: #4a4a4a;
   --text-background: var(--color-gray-80);
   --bckg-normal: #242424;
+
+  /* Support dark mode in pagefind */
+  --pagefind-ui-primary: #eeeeee;
+  --pagefind-ui-text: #eeeeee;
+  --pagefind-ui-background: #152028;
+  --pagefind-ui-border: #152028;
+  --pagefind-ui-tag: #152028;
 }
 
 /* Global stylesheet */

flashcard/index.md

@@ -1,7 +1,6 @@
 ---
-layout: layouts/post.njk
+layout: layouts/home.njk
 title: Szókártya
-templateClass: tmpl-post
 eleventyNavigation:
   key: Szókártya
   order: 6

package.json

@@ -29,6 +29,7 @@
     "@11ty/eleventy-navigation": "^0.3.3",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
+    "child_process": "^1.0.2",
     "csv-parse": "^5.3.0",
     "luxon": "^2.5.2",
     "markdown-it": "^13.0.1",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "chalk": "^4.1.2",
     "eleventy-plugin-workbox": "^1.4.0",
+    "pagefind": "^1.0.3",
     "workbox-build": "^6.5.4"
   }
 }

search/index.md

@@ -0,0 +1,9 @@
+---
+layout: layouts/home.njk
+title: Keresés...
+eleventyNavigation:
+  key: Keresés
+  order: 9
+---
+
+<div id="search" class="search"></div>

szavak/index.md

@@ -1,7 +1,6 @@
 ---
-layout: layouts/post.njk
+layout: layouts/home.njk
 title: Szavak
-templateClass: tmpl-post
 eleventyNavigation:
   key: Szavak
   order: 4