Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement post search using Pagefind (#12)

This commit is contained in:
saica.go 2024-01-24 12:28:16 +08:00 committed by GitHub
parent 31bb0d576e
commit 79ec8030cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 297 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
astro.config.mjs
View File

@ -9,6 +9,7 @@ import rehypeKatex from "rehype-katex"
import rehypeSlug from "rehype-slug" import rehypeSlug from "rehype-slug"
import remarkMath from "remark-math" import remarkMath from "remark-math"
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs" import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs"
import vue from "@astrojs/vue"
const oklchToHex = (str) => { const oklchToHex = (str) => {
const DEFAULT_HUE = 250 const DEFAULT_HUE = 250
@ -37,6 +38,7 @@ export default defineConfig({
Compress({ Compress({
Image: false, Image: false,
}), }),
vue()
], ],
markdown: { markdown: {
remarkPlugins: [remarkMath, remarkReadingTime], remarkPlugins: [remarkMath, remarkReadingTime],
@ -55,6 +57,7 @@ export default defineConfig({
tagName: "span", tagName: "span",
properties: { properties: {
className: ["anchor-icon"], className: ["anchor-icon"],
'data-pagefind-ignore': true,
}, },
children: [ children: [
{ {

6
package.json
View File

@ -5,7 +5,7 @@
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"build": "astro build", "build": "astro build && pagefind --site dist",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro", "astro": "astro",
"new-post": "node scripts/new-post.js", "new-post": "node scripts/new-post.js",
@ -23,6 +23,7 @@
"colorjs.io": "^0.4.5", "colorjs.io": "^0.4.5",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"overlayscrollbars": "^2.4.6", "overlayscrollbars": "^2.4.6",
"pagefind": "^1.0.4",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^7.0.0", "rehype-katex": "^7.0.0",
@ -31,7 +32,8 @@
"sharp": "^0.32.6", "sharp": "^0.32.6",
"tailwindcss": "^3.3.7", "tailwindcss": "^3.3.7",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"valine": "^1.5.1" "valine": "^1.5.1",
"vue": "^3.4.15"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/ts-plugin": "^1.3.1", "@astrojs/ts-plugin": "^1.3.1",

174
pnpm-lock.yaml
View File

@ -13,7 +13,7 @@ dependencies:
version: 5.1.0(astro@4.1.1)(tailwindcss@3.3.7) version: 5.1.0(astro@4.1.1)(tailwindcss@3.3.7)
'@astrojs/vue': '@astrojs/vue':
specifier: ^4.0.8 specifier: ^4.0.8
version: 4.0.8(@babel/core@7.23.6)(astro@4.1.1)(vite@5.0.10)(vue@3.3.12) version: 4.0.8(@babel/core@7.23.6)(astro@4.1.1)(vite@5.0.10)(vue@3.4.15)
'@fontsource-variable/jetbrains-mono': '@fontsource-variable/jetbrains-mono':
specifier: ^5.0.19 specifier: ^5.0.19
version: 5.0.19 version: 5.0.19
@ -35,6 +35,9 @@ dependencies:
overlayscrollbars: overlayscrollbars:
specifier: ^2.4.6 specifier: ^2.4.6
version: 2.4.6 version: 2.4.6
pagefind:
specifier: ^1.0.4
version: 1.0.4
reading-time: reading-time:
specifier: ^1.5.0 specifier: ^1.5.0
version: 1.5.0 version: 1.5.0
@ -62,6 +65,9 @@ dependencies:
valine: valine:
specifier: ^1.5.1 specifier: ^1.5.1
version: 1.5.1 version: 1.5.1
vue:
specifier: ^3.4.15
version: 3.4.15(typescript@5.3.3)
devDependencies: devDependencies:
'@astrojs/ts-plugin': '@astrojs/ts-plugin':
@ -250,19 +256,19 @@ packages:
vscode-languageserver-textdocument: 1.0.11 vscode-languageserver-textdocument: 1.0.11
dev: true dev: true
/@astrojs/vue@4.0.8(@babel/core@7.23.6)(astro@4.1.1)(vite@5.0.10)(vue@3.3.12): /@astrojs/vue@4.0.8(@babel/core@7.23.6)(astro@4.1.1)(vite@5.0.10)(vue@3.4.15):
resolution: {integrity: sha512-RnNA4wFy4HvQxU4vswH3c6sa7Br1F/JVzWdQvHYLP4CEe5OZ6yhEqxAUUo3LDkF+sNn23XznFLOPqZak6ziBwg==} resolution: {integrity: sha512-RnNA4wFy4HvQxU4vswH3c6sa7Br1F/JVzWdQvHYLP4CEe5OZ6yhEqxAUUo3LDkF+sNn23XznFLOPqZak6ziBwg==}
engines: {node: '>=18.14.1'} engines: {node: '>=18.14.1'}
peerDependencies: peerDependencies:
astro: ^4.0.0 astro: ^4.0.0
vue: ^3.2.30 vue: ^3.2.30
dependencies: dependencies:
'@vitejs/plugin-vue': 4.5.2(vite@5.0.10)(vue@3.3.12) '@vitejs/plugin-vue': 4.5.2(vite@5.0.10)(vue@3.4.15)
'@vitejs/plugin-vue-jsx': 3.1.0(vite@5.0.10)(vue@3.3.12) '@vitejs/plugin-vue-jsx': 3.1.0(vite@5.0.10)(vue@3.4.15)
'@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6) '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6)
'@vue/compiler-sfc': 3.3.12 '@vue/compiler-sfc': 3.3.12
astro: 4.1.1(stylus@0.59.0)(typescript@5.3.3) astro: 4.1.1(stylus@0.59.0)(typescript@5.3.3)
vue: 3.3.12(typescript@5.3.3) vue: 3.4.15(typescript@5.3.3)
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
- supports-color - supports-color
@ -1424,6 +1430,46 @@ packages:
'@nodelib/fs.scandir': 2.1.5 '@nodelib/fs.scandir': 2.1.5
fastq: 1.16.0 fastq: 1.16.0
/@pagefind/darwin-arm64@1.0.4:
resolution: {integrity: sha512-2OcthvceX2xhm5XbgOmW+lT45oLuHqCmvFeFtxh1gsuP5cO8vcD8ZH8Laj4pXQFCcK6eAdSShx+Ztx/LsQWZFQ==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@pagefind/darwin-x64@1.0.4:
resolution: {integrity: sha512-xkdvp0D9Ld/ZKsjo/y1bgfhTEU72ITimd2PMMQtts7jf6JPIOJbsiErCvm37m/qMFuPGEq/8d+fZ4pydOj08HQ==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: false
optional: true
/@pagefind/linux-arm64@1.0.4:
resolution: {integrity: sha512-jGBrcCzIrMnNxLKVtogaQyajVfTAXM59KlBEwg6vTn8NW4fQ6nuFbbhlG4dTIsaamjEM5e8ZBEAKZfTB/qd9xw==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@pagefind/linux-x64@1.0.4:
resolution: {integrity: sha512-LIn/QcvcEtLEBqKe5vpSbSC2O3fvqbRCWOTIklslqSORisCsvzsWbP6j+LYxE9q0oWIfkdMoWV1vrE/oCKRxHg==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: false
optional: true
/@pagefind/windows-x64@1.0.4:
resolution: {integrity: sha512-QlBCVeZfj9fc9sbUgdOz76ZDbeK4xZihOBAFqGuRJeChfM8pnVeH9iqSnXgO3+m9oITugTf7PicyRUFAG76xeQ==}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: false
optional: true
/@rollup/plugin-yaml@4.1.2: /@rollup/plugin-yaml@4.1.2:
resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==} resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
@ -1712,7 +1758,7 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: false dev: false
/@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.3.12): /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.4.15):
resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==} resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1723,12 +1769,12 @@ packages:
'@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.6) '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.6)
'@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6) '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6)
vite: 5.0.10(stylus@0.59.0) vite: 5.0.10(stylus@0.59.0)
vue: 3.3.12(typescript@5.3.3) vue: 3.4.15(typescript@5.3.3)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: false dev: false
/@vitejs/plugin-vue@4.5.2(vite@5.0.10)(vue@3.3.12): /@vitejs/plugin-vue@4.5.2(vite@5.0.10)(vue@3.4.15):
resolution: {integrity: sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==} resolution: {integrity: sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies: peerDependencies:
@ -1736,7 +1782,7 @@ packages:
vue: ^3.2.25 vue: ^3.2.25
dependencies: dependencies:
vite: 5.0.10(stylus@0.59.0) vite: 5.0.10(stylus@0.59.0)
vue: 3.3.12(typescript@5.3.3) vue: 3.4.15(typescript@5.3.3)
dev: false dev: false
/@volar/kit@1.10.10(typescript@5.3.3): /@volar/kit@1.10.10(typescript@5.3.3):
@ -1838,6 +1884,16 @@ packages:
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: false dev: false
/@vue/compiler-core@3.4.15:
resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
dependencies:
'@babel/parser': 7.23.6
'@vue/shared': 3.4.15
entities: 4.5.0
estree-walker: 2.0.2
source-map-js: 1.0.2
dev: false
/@vue/compiler-dom@3.3.12: /@vue/compiler-dom@3.3.12:
resolution: {integrity: sha512-RdJU9oEYaoPKUdGXCy0l+i4clesdDeLmbvRlszoc9iagsnBnMmQtYfCPVQ5BHB6o7K4SCucDdJM2Dh3oXB0D6g==} resolution: {integrity: sha512-RdJU9oEYaoPKUdGXCy0l+i4clesdDeLmbvRlszoc9iagsnBnMmQtYfCPVQ5BHB6o7K4SCucDdJM2Dh3oXB0D6g==}
dependencies: dependencies:
@ -1845,6 +1901,13 @@ packages:
'@vue/shared': 3.3.12 '@vue/shared': 3.3.12
dev: false dev: false
/@vue/compiler-dom@3.4.15:
resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
dependencies:
'@vue/compiler-core': 3.4.15
'@vue/shared': 3.4.15
dev: false
/@vue/compiler-sfc@3.3.12: /@vue/compiler-sfc@3.3.12:
resolution: {integrity: sha512-yy5b9e7b79dsGbMmglCe/YnhCQgBkHO7Uf6JfjWPSf2/5XH+MKn18LhzhHyxbHdJgnA4lZCqtXzLaJz8Pd8lMw==} resolution: {integrity: sha512-yy5b9e7b79dsGbMmglCe/YnhCQgBkHO7Uf6JfjWPSf2/5XH+MKn18LhzhHyxbHdJgnA4lZCqtXzLaJz8Pd8lMw==}
dependencies: dependencies:
@ -1860,6 +1923,20 @@ packages:
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: false dev: false
/@vue/compiler-sfc@3.4.15:
resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
dependencies:
'@babel/parser': 7.23.6
'@vue/compiler-core': 3.4.15
'@vue/compiler-dom': 3.4.15
'@vue/compiler-ssr': 3.4.15
'@vue/shared': 3.4.15
estree-walker: 2.0.2
magic-string: 0.30.5
postcss: 8.4.33
source-map-js: 1.0.2
dev: false
/@vue/compiler-ssr@3.3.12: /@vue/compiler-ssr@3.3.12:
resolution: {integrity: sha512-adCiMJPznfWcQyk/9HSuXGja859IaMV+b8UNSVzDatqv7h0PvT9BEeS22+gjkWofDiSg5d78/ZLls3sLA+cn3A==} resolution: {integrity: sha512-adCiMJPznfWcQyk/9HSuXGja859IaMV+b8UNSVzDatqv7h0PvT9BEeS22+gjkWofDiSg5d78/ZLls3sLA+cn3A==}
dependencies: dependencies:
@ -1867,6 +1944,13 @@ packages:
'@vue/shared': 3.3.12 '@vue/shared': 3.3.12
dev: false dev: false
/@vue/compiler-ssr@3.4.15:
resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
dependencies:
'@vue/compiler-dom': 3.4.15
'@vue/shared': 3.4.15
dev: false
/@vue/reactivity-transform@3.3.12: /@vue/reactivity-transform@3.3.12:
resolution: {integrity: sha512-g5TijmML7FyKkLt6QnpqNmA4KD7K/T5SbXa88Bhq+hydNQEkzA8veVXWAQuNqg9rjaFYD0rPf0a9NofKA0ENgg==} resolution: {integrity: sha512-g5TijmML7FyKkLt6QnpqNmA4KD7K/T5SbXa88Bhq+hydNQEkzA8veVXWAQuNqg9rjaFYD0rPf0a9NofKA0ENgg==}
dependencies: dependencies:
@ -1877,41 +1961,45 @@ packages:
magic-string: 0.30.5 magic-string: 0.30.5
dev: false dev: false
/@vue/reactivity@3.3.12: /@vue/reactivity@3.4.15:
resolution: {integrity: sha512-vOJORzO8DlIx88cgTnMLIf2GlLYpoXAKsuoQsK6SGdaqODjxO129pVPTd2s/N/Mb6KKZEFIHIEwWGmtN4YPs+g==} resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
dependencies: dependencies:
'@vue/shared': 3.3.12 '@vue/shared': 3.4.15
dev: false dev: false
/@vue/runtime-core@3.3.12: /@vue/runtime-core@3.4.15:
resolution: {integrity: sha512-5iL4w7MZrSGKEZU2wFAYhDZdZmgn+s//73EfgDXW1M+ZUOl36md7tlWp1QFK/ladiq4FvQ82shVjo0KiPDPr0A==} resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
dependencies: dependencies:
'@vue/reactivity': 3.3.12 '@vue/reactivity': 3.4.15
'@vue/shared': 3.3.12 '@vue/shared': 3.4.15
dev: false dev: false
/@vue/runtime-dom@3.3.12: /@vue/runtime-dom@3.4.15:
resolution: {integrity: sha512-8mMzqiIdl+IYa/OXwKwk6/4ebLq7cYV1pUcwCSwBK2KerUa6cwGosen5xrCL9f8o2DJ9TfPFwbPEvH7OXzUpoA==} resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
dependencies: dependencies:
'@vue/runtime-core': 3.3.12 '@vue/runtime-core': 3.4.15
'@vue/shared': 3.3.12 '@vue/shared': 3.4.15
csstype: 3.1.3 csstype: 3.1.3
dev: false dev: false
/@vue/server-renderer@3.3.12(vue@3.3.12): /@vue/server-renderer@3.4.15(vue@3.4.15):
resolution: {integrity: sha512-OZ0IEK5TU5GXb5J8/wSplyxvGGdIcwEmS8EIO302Vz8K6fGSgSJTU54X0Sb6PaefzZdiN3vHsLXO8XIeF8crQQ==} resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
peerDependencies: peerDependencies:
vue: 3.3.12 vue: 3.4.15
dependencies: dependencies:
'@vue/compiler-ssr': 3.3.12 '@vue/compiler-ssr': 3.4.15
'@vue/shared': 3.3.12 '@vue/shared': 3.4.15
vue: 3.3.12(typescript@5.3.3) vue: 3.4.15(typescript@5.3.3)
dev: false dev: false
/@vue/shared@3.3.12: /@vue/shared@3.3.12:
resolution: {integrity: sha512-6p0Yin0pclvnER7BLNOQuod9Z+cxSYh8pSh7CzHnWNjAIP6zrTlCdHRvSCb1aYEx6i3Q3kvfuWU7nG16CgG1ag==} resolution: {integrity: sha512-6p0Yin0pclvnER7BLNOQuod9Z+cxSYh8pSh7CzHnWNjAIP6zrTlCdHRvSCb1aYEx6i3Q3kvfuWU7nG16CgG1ag==}
dev: false dev: false
/@vue/shared@3.4.15:
resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
dev: false
/acorn@8.11.2: /acorn@8.11.2:
resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==} resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
@ -4807,6 +4895,17 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: false
/pagefind@1.0.4:
resolution: {integrity: sha512-oRIizYe+zSI2Jw4zcMU0ebDZm27751hRFiSOBLwc1OIYMrsZKk+3m8p9EVaOmc6zZdtqwwdilNUNxXvBeHcP9w==}
hasBin: true
optionalDependencies:
'@pagefind/darwin-arm64': 1.0.4
'@pagefind/darwin-x64': 1.0.4
'@pagefind/linux-arm64': 1.0.4
'@pagefind/linux-x64': 1.0.4
'@pagefind/windows-x64': 1.0.4
dev: false
/param-case@3.0.4: /param-case@3.0.4:
resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==} resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
dependencies: dependencies:
@ -4982,6 +5081,15 @@ packages:
picocolors: 1.0.0 picocolors: 1.0.0
source-map-js: 1.0.2 source-map-js: 1.0.2
/postcss@8.4.33:
resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
dev: false
/prebuild-install@7.1.1: /prebuild-install@7.1.1:
resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==} resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -6482,19 +6590,19 @@ packages:
resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==} resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
dev: false dev: false
/vue@3.3.12(typescript@5.3.3): /vue@3.4.15(typescript@5.3.3):
resolution: {integrity: sha512-jYNv2QmET2OTHsFzfWHMnqgCfqL4zfo97QwofdET+GBRCHhSCHuMTTvNIgeSn0/xF3JRT5OGah6MDwUFN7MPlg==} resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
peerDependenciesMeta: peerDependenciesMeta:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@vue/compiler-dom': 3.3.12 '@vue/compiler-dom': 3.4.15
'@vue/compiler-sfc': 3.3.12 '@vue/compiler-sfc': 3.4.15
'@vue/runtime-dom': 3.3.12 '@vue/runtime-dom': 3.4.15
'@vue/server-renderer': 3.3.12(vue@3.3.12) '@vue/server-renderer': 3.4.15(vue@3.4.15)
'@vue/shared': 3.3.12 '@vue/shared': 3.4.15
typescript: 5.3.3 typescript: 5.3.3
dev: false dev: false

10
src/components/GlobalStyles.astro
View File

@ -195,5 +195,15 @@ color_set({
.float-panel.closed { .float-panel.closed {
@apply top-[4.75rem] opacity-0 pointer-events-none @apply top-[4.75rem] opacity-0 pointer-events-none
} }
.search-panel mark {
@apply bg-transparent text-[var(--primary)]
}
.text-deep {
@apply text-black/90 dark:text-white/90
}
.text-sub {
@apply text-black/50 dark:text-white/50
}
} }
</style> </style>

29
src/components/Navbar.astro
View File

@ -7,6 +7,7 @@ import {i18n} from "../i18n/translation";
import {LinkPreset, NavBarLink} from "../types/config"; import {LinkPreset, NavBarLink} from "../types/config";
import {navBarConfig, siteConfig} from "../config"; import {navBarConfig, siteConfig} from "../config";
import NavMenuPanel from "./widget/NavMenuPanel.astro"; import NavMenuPanel from "./widget/NavMenuPanel.astro";
import SearchPanel from "./SearchPanel.vue"
const className = Astro.props.class; const className = Astro.props.class;
function isI18nKey(key: string): key is I18nKey { function isI18nKey(key: string): key is I18nKey {
@ -63,20 +64,19 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
})} })}
</div> </div>
<div class="flex"> <div class="flex">
<div> <SearchPanel client:load>
<Icon slot="search-icon" name="material-symbols:search" size={"1.25rem"} class="ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
<!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" size={"1.25rem"} class="transition my-auto text-[var(&#45;&#45;primary)]"></Icon>-->
<Icon slot="arrow-icon" name="fa6-solid:chevron-right" size={"0.75rem"} class="transition translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
<Button slot="search-switch" name="Search Panel" class="block lg:hidden rounded-lg active:scale-90" id="search-switch" iconName="material-symbols:search" iconSize={"1.25rem"} isIcon light></Button>
</SearchPanel>
<Button name="Display Settings" class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={"1.25rem"} isIcon light></Button> <Button name="Display Settings" class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={"1.25rem"} isIcon light></Button>
</div>
<div>
<Button name="Light/Dark Mode" class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="2.75rem" width="2.75rem"> <Button name="Light/Dark Mode" class="rounded-lg flex items-center justify-center active:scale-90" id="scheme-switch" light height="2.75rem" width="2.75rem">
<Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon> <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
<Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon> <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
</Button> </Button>
</div>
<div>
<Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={"1.25rem"} isIcon light></Button> <Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={"1.25rem"} isIcon light></Button>
</div> </div>
</div>
<DisplaySetting></DisplaySetting> <DisplaySetting></DisplaySetting>
<NavMenuPanel links={links}></NavMenuPanel> <NavMenuPanel links={links}></NavMenuPanel>
@ -121,7 +121,16 @@ loadButtonScript();
document.addEventListener('astro:after-swap', () => { document.addEventListener('astro:after-swap', () => {
loadButtonScript(); loadButtonScript();
}, { once: false }); }, { once: false });
</script>
<script is:raw>
async function loadPagefind() {
console.log('load')
const pagefind = await import("/pagefind/pagefind.js");
await pagefind.options({
"excerptLength": 20
})
pagefind.init();
window.pagefind = pagefind
}
loadPagefind()
</script> </script>

100
src/components/SearchPanel.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
const keywordDesktop = ref('')
const keywordMobile = ref('')
const result = ref([])
const search = async (keyword: string, isDesktop: boolean) => {
let panel = document.getElementById('search-panel');
// for desktop hide panel immediately if keyword is empty
if (!keyword && isDesktop) {
panel.classList.add("closed");
return
}
// for prod
const ret = await pagefind.search(keyword)
let arr = []
for (const item of ret.results) {
arr.push(await item.data())
}
// for dev
// const arr = JSON.parse('[{"url":"/posts/guide/","content":"Simple Guides for Fuwari. Cover image source: Source. This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs. Front-matter of Posts. --- title: My First Blog Post published: 2023-09-09 description: This is the first post of my new Astro blog. image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false ---AttributeDescription title. The title of the post. published. The date the post was published. description. A short description of the post. Displayed on index page. image. The cover image path of the post. 1. Start with http:// or https://: Use web image 2. Start with /: For image in public dir 3. With none of the prefixes: Relative to the markdown file. tags. The tags of the post. category. The category of the post. draft. If this post is still a draft, which won’t be displayed. Where to Place the Post Files. Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets. src/content/posts/ ├── post-1.md └── post-2/ ├── cover.png └── index.md.","word_count":187,"filters":{},"meta":{"title":"Simple Guides for Fuwari - Fuwari"},"anchors":[{"element":"h2","id":"front-matter-of-posts","text":"Front-matter of Posts","location":34},{"element":"h2","id":"where-to-place-the-post-files","text":"Where to Place the Post Files","location":151}],"weighted_locations":[{"weight":10,"balanced_score":57600,"location":3}],"locations":[3],"raw_content":"Simple Guides for Fuwari. Cover image source: Source. This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs. Front-matter of Posts. --- title: My First Blog Post published: 2023-09-09 description: This is the first post of my new Astro blog. image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false ---AttributeDescription title. The title of the post. published. The date the post was published. description. A short description of the post. Displayed on index page. image. The cover image path of the post. 1. Start with http:// or https://: Use web image 2. Start with /: For image in public dir 3. With none of the prefixes: Relative to the markdown file. tags. The tags of the post. category. The category of the post. draft. If this post is still a draft, which won’t be displayed. Where to Place the Post Files. Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets. src/content/posts/ ├── post-1.md └── post-2/ ├── cover.png └── index.md.","raw_url":"/posts/guide/","excerpt":"Simple Guides for <mark>Fuwari.</mark> Cover image source: Source. This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers","sub_results":[{"title":"Simple Guides for Fuwari - Fuwari","url":"/posts/guide/","weighted_locations":[{"weight":10,"balanced_score":57600,"location":3}],"locations":[3],"excerpt":"Simple Guides for <mark>Fuwari.</mark> Cover image source: Source. This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers"}]},{"url":"/about/","content":"About. This is the demo site for Fuwari. Sources of images used in this site. Unsplash. 星と少女 by Stella. Rabbit - v1.4 Showcase by Rabbit_YourMajesty.","word_count":25,"filters":{},"meta":{"title":"About"},"anchors":[{"element":"h1","id":"about","text":"About","location":0},{"element":"h3","id":"sources-of-images-used-in-this-site","text":"Sources of images used in this site","location":8}],"weighted_locations":[{"weight":1,"balanced_score":576,"location":7}],"locations":[7],"raw_content":"About. This is the demo site for Fuwari. Sources of images used in this site. Unsplash. 星と少女 by Stella. Rabbit - v1.4 Showcase by Rabbit_YourMajesty.","raw_url":"/about/","excerpt":"About. This is the demo site for <mark>Fuwari.</mark> Sources of images used in this site. Unsplash. 星と少女 by Stella. Rabbit - v1.4 Showcase by Rabbit_YourMajesty.","sub_results":[{"title":"About","url":"/about/#about","anchor":{"element":"h1","id":"about","text":"About","location":0},"weighted_locations":[{"weight":1,"balanced_score":576,"location":7}],"locations":[7],"excerpt":"About. This is the demo site for <mark>Fuwari.</mark>"}]}]')
if (!arr.length && isDesktop) {
// for desktop hide panel immediately if results is empty
panel.classList.add("closed");
return
}
panel.classList.remove("closed");
result.value = arr
}
const togglePanel = async () => {
console.log('togglePanel')
let panel = document.getElementById('search-panel');
panel.classList.toggle("closed");
}
watch(keywordDesktop, async (newVal, oldVal) => {
search(newVal, true)
})
watch(keywordMobile, async (newVal, oldVal) => {
search(newVal, false)
})
</script>
<template>
<!-- search bar for desktop view -->
<div id="search-bar" class="hidden lg:flex transition-all items-center h-11 mr-2 rounded-lg
bg-black/[0.04] hover:bg-black/[0.06] focus-within:bg-black/[0.06]
dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
">
<slot name="search-icon"></slot>
<input placeholder="Search" v-model="keywordDesktop" @focusin="search(keywordDesktop, true)"
class="transition-all text-sm ml-2 bg-transparent outline-0
h-full w-40 active:w-60 focus:w-60 text-black/50 dark:text-white/50"
>
</div>
<!-- toggle btn for phone/tablet view -->
<div @click="togglePanel">
<slot name="search-switch"></slot>
</div>
<!-- search panel -->
<div id="search-panel" class="float-panel closed search-panel absolute md:w-[30rem] top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
<!-- search bar inside panel for phone/tablet -->
<div id="search-bar-inside" class="flex lg:hidden transition-all items-center h-11 rounded-xl
bg-black/[0.04] hover:bg-black/[0.06] focus-within:bg-black/[0.06]
dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
">
<slot name="search-icon"></slot>
<input placeholder="Search" v-model="keywordMobile"
class="transition-all text-sm ml-2 bg-transparent outline-0
h-full w-full focus:w-60 text-black/50 dark:text-white/50"
>
</div>
<!-- search results -->
<a v-for="item of result" :href="item.url"
class="transition first-of-type:mt-2 lg:first-of-type:mt-0 group block
rounded-xl text-lg px-3 py-2 hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]">
<div class="transition text-deep inline-flex font-bold group-hover:text-[var(--primary)]">
{{ item.meta.title }}<slot name="arrow-icon"></slot>
</div>
<!-- list all sub results looks bad -->
<!-- <div v-for="sub of item.sub_results" v-html="sub.excerpt" class="transition text-sm text-sub">-->
<!-- </div>-->
<div v-html="item.excerpt" class="transition text-sm text-sub">
</div>
</a>
</div>
</template>
<style scoped>
</style>

2
src/components/misc/Markdown.astro
View File

@ -7,7 +7,7 @@ interface Props {
} }
const className = Astro.props.class; const className = Astro.props.class;
--- ---
<div class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`> <div data-pagefind-body class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
<!--<div class="prose dark:prose-invert max-w-none custom-md">--> <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
<!--<div class="max-w-none custom-md">--> <!--<div class="max-w-none custom-md">-->
<slot /> <slot />

19
src/layouts/Layout.astro
View File

@ -234,19 +234,22 @@ function activateDisplaySettings() {
setHue(hue); setHue(hue);
} }
function setClickOutsideToClose(panel, switchBtn) { function setClickOutsideToClose(panel: string, ignores: string[]) {
document.addEventListener("click", event => { document.addEventListener("click", event => {
var cDom = document.getElementById(panel); let panelDom = document.getElementById(panel);
let settingBtn = document.getElementById(switchBtn); let tDom = event.target;
var tDom = event.target; for (let ig of ignores) {
if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) { let ie = document.getElementById(ig)
if (ie == tDom || ie.contains(tDom)) {
return; return;
} }
cDom.classList.add("closed"); }
panelDom.classList.add("closed");
}); });
} }
setClickOutsideToClose("display-setting", "display-settings-switch") setClickOutsideToClose("display-setting", ["display-setting", "display-settings-switch"])
setClickOutsideToClose("nav-menu-panel", "nav-menu-switch") setClickOutsideToClose("nav-menu-panel", ["nav-menu-panel", "nav-menu-switch"])
setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-switch"])
} }
function loadTheme() { function loadTheme() {

1
src/pages/posts/[...slug].astro
View File

@ -52,6 +52,7 @@ const { remarkPluginFrontmatter } = await entry.render();
<!-- title --> <!-- title -->
<div class="relative"> <div class="relative">
<div <div
data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
class="transition w-full block font-bold mb-3 class="transition w-full block font-bold mb-3
text-3xl md:text-[2.5rem]/[2.75rem] text-3xl md:text-[2.5rem]/[2.75rem]
text-black/90 dark:text-white/90 text-black/90 dark:text-white/90