feat: implement post search using Pagefind (#12)
This commit is contained in:
saica.go
GitHub
parent
31bb0d576e
commit
79ec8030cc
|
|
@ -9,6 +9,7 @@ import rehypeKatex from "rehype-katex"
|
|||
import rehypeSlug from "rehype-slug"
|
||||
import remarkMath from "remark-math"
|
||||
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs"
|
||||
import vue from "@astrojs/vue"
|
||||
|
||||
const oklchToHex = (str) => {
|
||||
const DEFAULT_HUE = 250
|
||||
|
|
@ -37,6 +38,7 @@ export default defineConfig({
|
|||
Compress({
|
||||
Image: false,
|
||||
}),
|
||||
vue()
|
||||
],
|
||||
markdown: {
|
||||
remarkPlugins: [remarkMath, remarkReadingTime],
|
||||
|
|
@ -55,6 +57,7 @@ export default defineConfig({
|
|||
tagName: "span",
|
||||
properties: {
|
||||
className: ["anchor-icon"],
|
||||
'data-pagefind-ignore': true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"build": "astro build && pagefind --site dist",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"new-post": "node scripts/new-post.js",
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
"colorjs.io": "^0.4.5",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"overlayscrollbars": "^2.4.6",
|
||||
"pagefind": "^1.0.4",
|
||||
"reading-time": "^1.5.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-katex": "^7.0.0",
|
||||
|
|
@ -31,7 +32,8 @@
|
|||
"sharp": "^0.32.6",
|
||||
"tailwindcss": "^3.3.7",
|
||||
"typescript": "^5.2.2",
|
||||
"valine": "^1.5.1"
|
||||
"valine": "^1.5.1",
|
||||
"vue": "^3.4.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/ts-plugin": "^1.3.1",
|
||||
|
|
|
|||
174
pnpm-lock.yaml
174
pnpm-lock.yaml
|
|
@ -13,7 +13,7 @@ dependencies:
|
|||
version: 5.1.0(astro@4.1.1)(tailwindcss@3.3.7)
|
||||
'@astrojs/vue':
|
||||
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':
|
||||
specifier: ^5.0.19
|
||||
version: 5.0.19
|
||||
|
|
@ -35,6 +35,9 @@ dependencies:
|
|||
overlayscrollbars:
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6
|
||||
pagefind:
|
||||
specifier: ^1.0.4
|
||||
version: 1.0.4
|
||||
reading-time:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.0
|
||||
|
|
@ -62,6 +65,9 @@ dependencies:
|
|||
valine:
|
||||
specifier: ^1.5.1
|
||||
version: 1.5.1
|
||||
vue:
|
||||
specifier: ^3.4.15
|
||||
version: 3.4.15(typescript@5.3.3)
|
||||
|
||||
devDependencies:
|
||||
'@astrojs/ts-plugin':
|
||||
|
|
@ -250,19 +256,19 @@ packages:
|
|||
vscode-languageserver-textdocument: 1.0.11
|
||||
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==}
|
||||
engines: {node: '>=18.14.1'}
|
||||
peerDependencies:
|
||||
astro: ^4.0.0
|
||||
vue: ^3.2.30
|
||||
dependencies:
|
||||
'@vitejs/plugin-vue': 4.5.2(vite@5.0.10)(vue@3.3.12)
|
||||
'@vitejs/plugin-vue-jsx': 3.1.0(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.4.15)
|
||||
'@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6)
|
||||
'@vue/compiler-sfc': 3.3.12
|
||||
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:
|
||||
- '@babel/core'
|
||||
- supports-color
|
||||
|
|
@ -1424,6 +1430,46 @@ packages:
|
|||
'@nodelib/fs.scandir': 2.1.5
|
||||
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:
|
||||
resolution: {integrity: sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
|
@ -1712,7 +1758,7 @@ packages:
|
|||
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
|
||||
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==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
|
|
@ -1723,12 +1769,12 @@ packages:
|
|||
'@babel/plugin-transform-typescript': 7.23.6(@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)
|
||||
vue: 3.3.12(typescript@5.3.3)
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
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==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
|
|
@ -1736,7 +1782,7 @@ packages:
|
|||
vue: ^3.2.25
|
||||
dependencies:
|
||||
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
|
||||
|
||||
/@volar/kit@1.10.10(typescript@5.3.3):
|
||||
|
|
@ -1838,6 +1884,16 @@ packages:
|
|||
source-map-js: 1.0.2
|
||||
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:
|
||||
resolution: {integrity: sha512-RdJU9oEYaoPKUdGXCy0l+i4clesdDeLmbvRlszoc9iagsnBnMmQtYfCPVQ5BHB6o7K4SCucDdJM2Dh3oXB0D6g==}
|
||||
dependencies:
|
||||
|
|
@ -1845,6 +1901,13 @@ packages:
|
|||
'@vue/shared': 3.3.12
|
||||
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:
|
||||
resolution: {integrity: sha512-yy5b9e7b79dsGbMmglCe/YnhCQgBkHO7Uf6JfjWPSf2/5XH+MKn18LhzhHyxbHdJgnA4lZCqtXzLaJz8Pd8lMw==}
|
||||
dependencies:
|
||||
|
|
@ -1860,6 +1923,20 @@ packages:
|
|||
source-map-js: 1.0.2
|
||||
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:
|
||||
resolution: {integrity: sha512-adCiMJPznfWcQyk/9HSuXGja859IaMV+b8UNSVzDatqv7h0PvT9BEeS22+gjkWofDiSg5d78/ZLls3sLA+cn3A==}
|
||||
dependencies:
|
||||
|
|
@ -1867,6 +1944,13 @@ packages:
|
|||
'@vue/shared': 3.3.12
|
||||
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:
|
||||
resolution: {integrity: sha512-g5TijmML7FyKkLt6QnpqNmA4KD7K/T5SbXa88Bhq+hydNQEkzA8veVXWAQuNqg9rjaFYD0rPf0a9NofKA0ENgg==}
|
||||
dependencies:
|
||||
|
|
@ -1877,41 +1961,45 @@ packages:
|
|||
magic-string: 0.30.5
|
||||
dev: false
|
||||
|
||||
/@vue/reactivity@3.3.12:
|
||||
resolution: {integrity: sha512-vOJORzO8DlIx88cgTnMLIf2GlLYpoXAKsuoQsK6SGdaqODjxO129pVPTd2s/N/Mb6KKZEFIHIEwWGmtN4YPs+g==}
|
||||
/@vue/reactivity@3.4.15:
|
||||
resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.3.12
|
||||
'@vue/shared': 3.4.15
|
||||
dev: false
|
||||
|
||||
/@vue/runtime-core@3.3.12:
|
||||
resolution: {integrity: sha512-5iL4w7MZrSGKEZU2wFAYhDZdZmgn+s//73EfgDXW1M+ZUOl36md7tlWp1QFK/ladiq4FvQ82shVjo0KiPDPr0A==}
|
||||
/@vue/runtime-core@3.4.15:
|
||||
resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.3.12
|
||||
'@vue/shared': 3.3.12
|
||||
'@vue/reactivity': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
dev: false
|
||||
|
||||
/@vue/runtime-dom@3.3.12:
|
||||
resolution: {integrity: sha512-8mMzqiIdl+IYa/OXwKwk6/4ebLq7cYV1pUcwCSwBK2KerUa6cwGosen5xrCL9f8o2DJ9TfPFwbPEvH7OXzUpoA==}
|
||||
/@vue/runtime-dom@3.4.15:
|
||||
resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
|
||||
dependencies:
|
||||
'@vue/runtime-core': 3.3.12
|
||||
'@vue/shared': 3.3.12
|
||||
'@vue/runtime-core': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
csstype: 3.1.3
|
||||
dev: false
|
||||
|
||||
/@vue/server-renderer@3.3.12(vue@3.3.12):
|
||||
resolution: {integrity: sha512-OZ0IEK5TU5GXb5J8/wSplyxvGGdIcwEmS8EIO302Vz8K6fGSgSJTU54X0Sb6PaefzZdiN3vHsLXO8XIeF8crQQ==}
|
||||
/@vue/server-renderer@3.4.15(vue@3.4.15):
|
||||
resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
|
||||
peerDependencies:
|
||||
vue: 3.3.12
|
||||
vue: 3.4.15
|
||||
dependencies:
|
||||
'@vue/compiler-ssr': 3.3.12
|
||||
'@vue/shared': 3.3.12
|
||||
vue: 3.3.12(typescript@5.3.3)
|
||||
'@vue/compiler-ssr': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/@vue/shared@3.3.12:
|
||||
resolution: {integrity: sha512-6p0Yin0pclvnER7BLNOQuod9Z+cxSYh8pSh7CzHnWNjAIP6zrTlCdHRvSCb1aYEx6i3Q3kvfuWU7nG16CgG1ag==}
|
||||
dev: false
|
||||
|
||||
/@vue/shared@3.4.15:
|
||||
resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
|
||||
dev: false
|
||||
|
||||
/acorn@8.11.2:
|
||||
resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
|
||||
engines: {node: '>=0.4.0'}
|
||||
|
|
@ -4807,6 +4895,17 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
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:
|
||||
resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
|
||||
dependencies:
|
||||
|
|
@ -4982,6 +5081,15 @@ packages:
|
|||
picocolors: 1.0.0
|
||||
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:
|
||||
resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -6482,19 +6590,19 @@ packages:
|
|||
resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
|
||||
dev: false
|
||||
|
||||
/vue@3.3.12(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-jYNv2QmET2OTHsFzfWHMnqgCfqL4zfo97QwofdET+GBRCHhSCHuMTTvNIgeSn0/xF3JRT5OGah6MDwUFN7MPlg==}
|
||||
/vue@3.4.15(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.3.12
|
||||
'@vue/compiler-sfc': 3.3.12
|
||||
'@vue/runtime-dom': 3.3.12
|
||||
'@vue/server-renderer': 3.3.12(vue@3.3.12)
|
||||
'@vue/shared': 3.3.12
|
||||
'@vue/compiler-dom': 3.4.15
|
||||
'@vue/compiler-sfc': 3.4.15
|
||||
'@vue/runtime-dom': 3.4.15
|
||||
'@vue/server-renderer': 3.4.15(vue@3.4.15)
|
||||
'@vue/shared': 3.4.15
|
||||
typescript: 5.3.3
|
||||
dev: false
|
||||
|
||||
|
|
|
|||
|
|
@ -195,5 +195,15 @@ color_set({
|
|||
.float-panel.closed {
|
||||
@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>
|
||||
|
|
@ -7,6 +7,7 @@ import {i18n} from "../i18n/translation";
|
|||
import {LinkPreset, NavBarLink} from "../types/config";
|
||||
import {navBarConfig, siteConfig} from "../config";
|
||||
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
||||
import SearchPanel from "./SearchPanel.vue"
|
||||
const className = Astro.props.class;
|
||||
|
||||
function isI18nKey(key: string): key is I18nKey {
|
||||
|
|
@ -63,20 +64,19 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
|
|||
})}
|
||||
</div>
|
||||
<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(--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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<DisplaySetting></DisplaySetting>
|
||||
<NavMenuPanel links={links}></NavMenuPanel>
|
||||
|
||||
|
|
@ -121,7 +121,16 @@ loadButtonScript();
|
|||
document.addEventListener('astro:after-swap', () => {
|
||||
loadButtonScript();
|
||||
}, { 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -7,7 +7,7 @@ interface Props {
|
|||
}
|
||||
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="max-w-none custom-md">-->
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -234,19 +234,22 @@ function activateDisplaySettings() {
|
|||
setHue(hue);
|
||||
}
|
||||
|
||||
function setClickOutsideToClose(panel, switchBtn) {
|
||||
function setClickOutsideToClose(panel: string, ignores: string[]) {
|
||||
document.addEventListener("click", event => {
|
||||
var cDom = document.getElementById(panel);
|
||||
let settingBtn = document.getElementById(switchBtn);
|
||||
var tDom = event.target;
|
||||
if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
|
||||
let panelDom = document.getElementById(panel);
|
||||
let tDom = event.target;
|
||||
for (let ig of ignores) {
|
||||
let ie = document.getElementById(ig)
|
||||
if (ie == tDom || ie.contains(tDom)) {
|
||||
return;
|
||||
}
|
||||
cDom.classList.add("closed");
|
||||
}
|
||||
panelDom.classList.add("closed");
|
||||
});
|
||||
}
|
||||
setClickOutsideToClose("display-setting", "display-settings-switch")
|
||||
setClickOutsideToClose("nav-menu-panel", "nav-menu-switch")
|
||||
setClickOutsideToClose("display-setting", ["display-setting", "display-settings-switch"])
|
||||
setClickOutsideToClose("nav-menu-panel", ["nav-menu-panel", "nav-menu-switch"])
|
||||
setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-switch"])
|
||||
}
|
||||
|
||||
function loadTheme() {
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
<!-- title -->
|
||||
<div class="relative">
|
||||
<div
|
||||
data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
|
||||
class="transition w-full block font-bold mb-3
|
||||
text-3xl md:text-[2.5rem]/[2.75rem]
|
||||
text-black/90 dark:text-white/90
|
||||
|
|
|
|||
Loading…
Reference in New Issue