Tested out pagefind as search system

2023-07-23 00:03:57 +01:00 · 2023-07-23 00:03:57 +01:00 · e8b90616be
commit e8b90616be
parent a5e1f2c2a4
5 changed files with 263 additions and 38 deletions
--- a/package.json
+++ b/package.json
@ -9,17 +9,19 @@
 "build:css:watch": "sass ./themes/bookstack/sass:./themes/bookstack/static/css --watch", 
 "build:hugo:prod": "hugo", 
 "build:hugo:watch": "hugo serve -DF", 
- "build": "npm-run-all --sequential build:css:prod build:hugo:prod", 
- "serve": "npm-run-all build:hugo:watch", 
+ "build:search": "pagefind --source 'public'", 
+ "build": "npm-run-all --sequential build:css:prod build:hugo:prod build:search", 
+ "serve": "pagefind --source 'public' --serve", 
 "dev": "npm-run-all --parallel build:hugo:watch build:css:watch", 
 "deploy:server": "rsync -avx --delete --exclude '.git/' --exclude 'node_modules/' ./ sandcat:/var/www/bookstackapp.com/", 
- "deploy": "npm-run-all --sequential build:css:prod build:hugo:prod deploy:server", 
+ "deploy": "npm-run-all --sequential build:css:prod build:hugo:prod build:search deploy:server", 
 "test": "echo \"Error: no test specified\" && exit 1" 
 }, 
 "author": "Dan Brown", 
 "license": "MIT", 
 "devDependencies": { 
 "npm-run-all": "^4.1.5", 
+ "pagefind": "0.12.0", 
 "sass": "^1.63.6" 
 } 
 } 
--- a/themes/bookstack/layouts/partials/footer.html
+++ b/themes/bookstack/layouts/partials/footer.html
@ -53,21 +53,6 @@
 </div> 
 </footer> 
  
-  
- <script src="{{.Site.BaseURL}}libs/docs-searchbar.min.js"></script> 
- <script> 
- const searchInputSelector = '.doc-search-input,.blog-search-input'; 
- if (document.querySelector(searchInputSelector) !== null) { 
- docsSearchBar({ 
- hostUrl: 'https://search.bookstackapp.com', 
- apiKey: 'f896fc840ba4f2881068c5e8f0cd5c33546646967bd176ecda716dd0a89b280c', 
- indexUid: 'docs', 
- inputSelector: searchInputSelector, 
- debug: false, // Set debug to true if you want to inspect the dropdown 
- }) 
- } 
- </script> 
-  
 <script src="{{.Site.BaseURL}}js/script.js"></script> 
 </body> 
 </html> 
--- a/themes/bookstack/layouts/partials/header.html
+++ b/themes/bookstack/layouts/partials/header.html
@ -58,7 +58,7 @@
 <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96" /> 
 <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32" /> 
  
- <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/styles.css?v={{ now.Format "2006-01-02T15:04:05" }}" /> 
+ <link rel="stylesheet" type="text/css" href="/css/styles.css?v={{ now.Format "2006-01-02T15:04:05" }}" /> 
  
 {{ if .Site.Params.RSSLink}} 
 <link href="{{.Site.Params.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> 
@ -74,13 +74,21 @@
  
 <link rel="canonical" href="{{ .Permalink }}" /> 
  
+ <!-- Analytics & Search --> 
 <script async defer data-domain="bookstackapp.com" src="https://analytics.bookstackapp.com/js/plausible.js"></script> 
-  
- <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}libs/docs-searchbar.min.css" /> 
-  
- {{ if .Site.Params.customHeaderPartial }} 
- {{ partial .Site.Params.customHeaderPartial . }} 
- {{ end }} 
+ <script src="/_pagefind/pagefind-modular-ui.js" type="text/javascript"></script>  
+ <script type="module"> 
+ if (window.PagefindModularUI) { 
+ const instance = new PagefindModularUI.Instance(); 
+ instance.add(new PagefindModularUI.Input({ 
+ inputElement: "#site-search" 
+ })); 
+ instance.add(new PagefindModularUI.ResultList({ 
+ containerElement: "#site-search-results", 
+ showImages: false, 
+ })); 
+ } 
+ </script> 
 </head> 
 <body class="nav-closed"> 
  
@ -94,7 +102,8 @@
 <button tabindex="1" id="menu-button" class="button muted" type="button">{{partial "icon/menu.svg"}}</button> 
 </div> 
 <div class="header-search-section"> 
- <input type="text" placeholder="Search site" class="doc-search-input"> 
+ <input type="text" id="site-search" placeholder="Search site" class="doc-search-input"> 
+ <div id="site-search-results"></div> 
 </div> 
 <div class="main-nav"> 
 <div class="nav-dropdown-wrap"> 
--- a/themes/bookstack/sass/_pagefind.scss
+++ b/themes/bookstack/sass/_pagefind.scss
@ -0,0 +1,224 @@
+/** 
+ * This file originated from pagefind-modular-ui.js. 
+ * (MIT, Copyright 2022 CloudCannon, https://github.com/CloudCannon/pagefind/blob/main/LICENSE) 
+ * https://github.com/CloudCannon/pagefind/tree/v0.12.0/pagefind_ui/modular/css 
+ * 
+ * Customizations applied to suit site. 
+ */ 
+  
+:root { 
+ --pagefind-ui-scale: 0.8; 
+ --pagefind-ui-primary: #034AD8; 
+ --pagefind-ui-fade: #707070; 
+ --pagefind-ui-text: #393939; 
+ --pagefind-ui-background: #ffffff; 
+ --pagefind-ui-border: #eeeeee; 
+ --pagefind-ui-tag: #eeeeee; 
+ --pagefind-ui-border-width: 2px; 
+ --pagefind-ui-border-radius: 8px; 
+ --pagefind-ui-image-border-radius: 8px; 
+ --pagefind-ui-image-box-ratio: 3 / 2; 
+ --pagefind-ui-font: system, -apple-system, ".SFNSText-Regular", 
+ "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", 
+ "Lucida Grande", sans-serif; 
+} 
+  
+[data-pfmod-hidden] { 
+ display: none !important; 
+} 
+  
+[data-pfmod-suppressed] { 
+ opacity: 0 !important; 
+ pointer-events: none !important; 
+} 
+  
+[data-pfmod-sr-hidden] { 
+ -webkit-clip: rect(0 0 0 0) !important; 
+ clip: rect(0 0 0 0) !important; 
+ -webkit-clip-path: inset(100%) !important; 
+ clip-path: inset(100%) !important; 
+ height: 1px !important; 
+ overflow: hidden !important; 
+ overflow: clip !important; 
+ position: absolute !important; 
+ white-space: nowrap !important; 
+ width: 1px !important; 
+} 
+  
+[data-pfmod-loading] { 
+ color: var(--pagefind-ui-text); 
+ background-color: var(--pagefind-ui-text); 
+ border-radius: var(--pagefind-ui-border-radius); 
+ opacity: 0.1; 
+ pointer-events: none; 
+} 
+  
+/* Input */ 
+  
+.pagefind-modular-input-wrapper { 
+ position: relative; 
+} 
+  
+.pagefind-modular-input-wrapper::before { 
+ background-color: var(--pagefind-ui-text); 
+ width: calc(18px * var(--pagefind-ui-scale)); 
+ height: calc(18px * var(--pagefind-ui-scale)); 
+ top: calc(23px * var(--pagefind-ui-scale)); 
+ left: calc(20px * var(--pagefind-ui-scale)); 
+ content: ""; 
+ position: absolute; 
+ display: block; 
+ opacity: 0.7; 
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A"); 
+ mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A"); 
+ -webkit-mask-size: 100%; 
+ mask-size: 100%; 
+ z-index: 9; 
+ pointer-events: none; 
+} 
+  
+.pagefind-modular-input { 
+ height: calc(64px * var(--pagefind-ui-scale)); 
+ padding: 0 calc(70px * var(--pagefind-ui-scale)) 0 calc(54px * var(--pagefind-ui-scale)); 
+ background-color: var(--pagefind-ui-background); 
+ border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border); 
+ border-radius: var(--pagefind-ui-border-radius); 
+ font-size: calc(21px * var(--pagefind-ui-scale)); 
+ position: relative; 
+ appearance: none; 
+ -webkit-appearance: none; 
+ display: flex; 
+ width: 100%; 
+ box-sizing: border-box; 
+ font-weight: 700; 
+} 
+  
+.pagefind-modular-input::placeholder { 
+ opacity: 0.2; 
+} 
+  
+.pagefind-modular-input-clear { 
+ position: absolute; 
+ top: calc(2px * var(--pagefind-ui-scale)); 
+ right: calc(2px * var(--pagefind-ui-scale)); 
+ height: calc(60px * var(--pagefind-ui-scale)); 
+ border-radius: var(--pagefind-ui-border-radius); 
+ padding: 0 calc(15px * var(--pagefind-ui-scale)) 0 calc(2px * var(--pagefind-ui-scale)); 
+ color: var(--pagefind-ui-text); 
+ font-size: calc(14px * var(--pagefind-ui-scale)); 
+ cursor: pointer; 
+ background-color: var(--pagefind-ui-background); 
+ border: none; 
+ appearance: none; 
+} 
+  
+/* ResultList */ 
+  
+.pagefind-modular-list-result { 
+ list-style-type: none; 
+ display: flex; 
+ align-items: flex-start; 
+ gap: min(calc(12px * var(--pagefind-ui-scale)), 3%); 
+ padding: calc(12px * var(--pagefind-ui-scale)) 1rem calc(40px * var(--pagefind-ui-scale)) 1rem; 
+ border-top: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border); 
+} 
+  
+.pagefind-modular-list-result:last-of-type { 
+ border-bottom: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border); 
+} 
+  
+.pagefind-modular-list-thumb { 
+ display: none; 
+ // width: min(30%, 
+ // calc((30% - (100px * var(--pagefind-ui-scale))) * 100000)); 
+ // max-width: calc(120px * var(--pagefind-ui-scale)); 
+ // margin-top: calc(10px * var(--pagefind-ui-scale)); 
+ // aspect-ratio: var(--pagefind-ui-image-box-ratio); 
+ // position: relative; 
+} 
+  
+.pagefind-modular-list-image { 
+ display: block; 
+ position: absolute; 
+ left: 50%; 
+ transform: translateX(-50%); 
+ font-size: 0; 
+ width: auto; 
+ height: auto; 
+ max-width: 100%; 
+ max-height: 100%; 
+ border-radius: var(--pagefind-ui-image-border-radius); 
+} 
+  
+.pagefind-modular-list-inner { 
+ flex: 1; 
+ display: flex; 
+ flex-direction: column; 
+ align-items: flex-start; 
+ margin-top: calc(10px * var(--pagefind-ui-scale)); 
+} 
+  
+.pagefind-modular-list-title { 
+ display: inline-block; 
+ font-weight: 700; 
+ font-size: calc(21px * var(--pagefind-ui-scale)); 
+ margin-top: 0; 
+ margin-bottom: 0; 
+} 
+  
+.pagefind-modular-list-link { 
+ color: var(--pagefind-ui-text); 
+ text-decoration: none; 
+} 
+  
+.pagefind-modular-list-link:hover { 
+ text-decoration: underline; 
+} 
+  
+.pagefind-modular-list-excerpt { 
+ display: inline-block; 
+ font-weight: 400; 
+ font-size: .9rem; 
+ font-size: calc(16px * var(--pagefind-ui-scale)); 
+ margin-top: calc(4px * var(--pagefind-ui-scale)); 
+ margin-bottom: 0; 
+ min-width: calc(250px * var(--pagefind-ui-scale)); 
+} 
+  
+/* FilterPills */ 
+  
+.pagefind-modular-filter-pills-wrapper { 
+ overflow-x: scroll; 
+ padding: 15px 0; 
+} 
+  
+.pagefind-modular-filter-pills { 
+ display: flex; 
+ gap: 6px; 
+} 
+  
+.pagefind-modular-filter-pill { 
+ display: flex; 
+ justify-content: center; 
+ align-items: center; 
+ border: none; 
+ appearance: none; 
+ padding: 0 calc(24px * var(--pagefind-ui-scale)); 
+ background-color: var(--pagefind-ui-background); 
+ color: var(--pagefind-ui-fade); 
+ border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border); 
+ border-radius: calc(25px * var(--pagefind-ui-scale)); 
+ font-size: calc(18px * var(--pagefind-ui-scale)); 
+ height: calc(50px * var(--pagefind-ui-scale)); 
+ cursor: pointer; 
+ white-space: nowrap; 
+} 
+  
+.pagefind-modular-filter-pill:hover { 
+ border-color: var(--pagefind-ui-primary); 
+} 
+  
+.pagefind-modular-filter-pill[aria-pressed="true"] { 
+ border-color: var(--pagefind-ui-primary); 
+ color: var(--pagefind-ui-primary); 
+} 
--- a/themes/bookstack/sass/styles.scss
+++ b/themes/bookstack/sass/styles.scss
@ -11,6 +11,7 @@
@import "header"; 
@import "blog"; 
@import "photoswipe"; 
+@import "pagefind"; 
  
 .md-margin-top { 
 margin-top: $-xxl*1.4; 
@ -384,6 +385,22 @@ input[type="text"].doc-search-input {
 } 
 } 
  
+.header-search-section { 
+ position: relative; 
+} 
+  
+#site-search-results { 
+ position: absolute; 
+ background-color: #FFF; 
+ border-radius: 4px; 
+ overflow: hidden; 
+ box-shadow: 0 2px 12px 0 rgba(0,0,0, 0.1); 
+ max-width: 420px; 
+ max-height: 80vh; 
+ left: -60px; 
+ color: #444; 
+} 
+  
 .youtube-embed-wrap { 
 margin-bottom: 1rem; 
 } 
@ -433,18 +450,6 @@ iframe[src^="https://www.youtube-nocookie.com"],
 width: 100%; 
 } 
  
-.meilisearch-autocomplete .docs-searchbar-footer { 
- font-size: 0.8rem; 
-} 
-.meilisearch-autocomplete .docs-searchbar-footer-logo, 
-.meilisearch-autocomplete .docs-searchbar-footer { 
- vertical-align: top !important; 
-} 
-  
-.meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column { 
- color: #53555a !important; 
-} 
-  
 .price-table { 
 display: flex; 
 flex-wrap: wrap;