deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pagefind): add search support to blog

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-10 19:47:57 +01:00
parent e3c5b3f31f
commit b18424b921
7 changed files with 262 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Readme.md
View File

@ -13,6 +13,8 @@ A custom Astro.js template
- 🏔️ Alpine.js integration, bringing reactive and declarative magic to your markup.
- 📘 TypeScript support for safer code through static typing.
- 🖊️ MDX Blog, allowing JSX in markdown for interactive and dynamic content.
- 📄 Pagination for easier navigation through content.
- 🔍 Pagefind for quick and efficient search functionality within the project.
- 🔖 Frontmatter CMS for easy content management.
- 🐇 Directus CMS support, providing a headless CMS for flexible content management.
- ✒️ Expressive Code Blocks, enhancing readability and maintainability of code snippets.

6
package.json
View File

@ -7,7 +7,7 @@
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && pnpm run pwa:generate-assets && astro build",
"build": "astro check && pnpm run pwa:generate-assets && astro build && pagefind --site dist",
"preview": "astro preview",
"astro": "astro",
"pwa:generate-assets": "pwa-assets-generator --preset minimal-2023 public/logo.svg",
@ -34,6 +34,7 @@
"@commitlint/cz-commitlint": "^19.0.3",
"@directus/sdk": "^15.0.2",
"@iconify-json/line-md": "^1.1.36",
"@pagefind/default-ui": "^1.0.4",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@tailwindcss/typography": "^0.5.10",
@ -47,6 +48,7 @@
"commitizen": "^4.3.0",
"cz-conventional-changelog": "^3.3.0",
"lucide-react": "^0.354.0",
"pagefind": "^1.0.4",
"prettier": "^3.2.5",
"prettier-plugin-astro": "^0.13.0",
"prettier-plugin-tailwindcss": "^0.5.12",
@ -54,7 +56,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"semantic-release": "^23.0.2",
"sharp": "^0.33.2",
"sharp": "0.32.6",
"tailwind-merge": "^2.2.1",
"tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7",

293
pnpm-lock.yaml generated
View File

@ -55,6 +55,9 @@ devDependencies:
'@iconify-json/line-md':
specifier: ^1.1.36
version: 1.1.36
'@pagefind/default-ui':
specifier: ^1.0.4
version: 1.0.4
'@semantic-release/changelog':
specifier: ^6.0.3
version: 6.0.3(semantic-release@23.0.2)
@ -94,6 +97,9 @@ devDependencies:
lucide-react:
specifier: ^0.354.0
version: 0.354.0(react@18.2.0)
pagefind:
specifier: ^1.0.4
version: 1.0.4
prettier:
specifier: ^3.2.5
version: 3.2.5
@ -116,8 +122,8 @@ devDependencies:
specifier: ^23.0.2
version: 23.0.2(typescript@5.4.2)
sharp:
specifier: ^0.33.2
version: 0.33.2
specifier: 0.32.6
version: 0.32.6
tailwind-merge:
specifier: ^2.2.1
version: 2.2.1
@ -922,14 +928,6 @@ packages:
resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==}
dev: false
/@emnapi/runtime@0.45.0:
resolution: {integrity: sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==}
requiresBuild: true
dependencies:
tslib: 2.6.2
dev: true
optional: true
/@esbuild/aix-ppc64@0.19.12:
resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
engines: {node: '>=12'}
@ -1237,194 +1235,6 @@ packages:
- supports-color
dev: false
/@img/sharp-darwin-arm64@0.33.2:
resolution: {integrity: sha512-itHBs1rPmsmGF9p4qRe++CzCgd+kFYktnsoR1sbIAfsRMrJZau0Tt1AH9KVnufc2/tU02Gf6Ibujx+15qRE03w==}
engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-darwin-arm64': 1.0.1
dev: true
optional: true
/@img/sharp-darwin-x64@0.33.2:
resolution: {integrity: sha512-/rK/69Rrp9x5kaWBjVN07KixZanRr+W1OiyKdXcbjQD6KbW+obaTeBBtLUAtbBsnlTTmWthw99xqoOS7SsySDg==}
engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [darwin]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-darwin-x64': 1.0.1
dev: true
optional: true
/@img/sharp-libvips-darwin-arm64@1.0.1:
resolution: {integrity: sha512-kQyrSNd6lmBV7O0BUiyu/OEw9yeNGFbQhbxswS1i6rMDwBBSX+e+rPzu3S+MwAiGU3HdLze3PanQ4Xkfemgzcw==}
engines: {macos: '>=11', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-darwin-x64@1.0.1:
resolution: {integrity: sha512-eVU/JYLPVjhhrd8Tk6gosl5pVlvsqiFlt50wotCvdkFGf+mDNBJxMh+bvav+Wt3EBnNZWq8Sp2I7XfSjm8siog==}
engines: {macos: '>=10.13', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linux-arm64@1.0.1:
resolution: {integrity: sha512-bnGG+MJjdX70mAQcSLxgeJco11G+MxTz+ebxlz8Y3dxyeb3Nkl7LgLI0mXupoO+u1wRNx/iRj5yHtzA4sde1yA==}
engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linux-arm@1.0.1:
resolution: {integrity: sha512-FtdMvR4R99FTsD53IA3LxYGghQ82t3yt0ZQ93WMZ2xV3dqrb0E8zq4VHaTOuLEAuA83oDawHV3fd+BsAPadHIQ==}
engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linux-s390x@1.0.1:
resolution: {integrity: sha512-3+rzfAR1YpMOeA2zZNp+aYEzGNWK4zF3+sdMxuCS3ey9HhDbJ66w6hDSHDMoap32DueFwhhs3vwooAB2MaK4XQ==}
engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [s390x]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linux-x64@1.0.1:
resolution: {integrity: sha512-3NR1mxFsaSgMMzz1bAnnKbSAI+lHXVTqAHgc1bgzjHuXjo4hlscpUxc0vFSAPKI3yuzdzcZOkq7nDPrP2F8Jgw==}
engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linuxmusl-arm64@1.0.1:
resolution: {integrity: sha512-5aBRcjHDG/T6jwC3Edl3lP8nl9U2Yo8+oTl5drd1dh9Z1EBfzUKAJFUDTDisDjUwc7N4AjnPGfCA3jl3hY8uDg==}
engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-libvips-linuxmusl-x64@1.0.1:
resolution: {integrity: sha512-dcT7inI9DBFK6ovfeWRe3hG30h51cBAP5JXlZfx6pzc/Mnf9HFCQDLtYf4MCBjxaaTfjCCjkBxcy3XzOAo5txw==}
engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@img/sharp-linux-arm64@0.33.2:
resolution: {integrity: sha512-pz0NNo882vVfqJ0yNInuG9YH71smP4gRSdeL09ukC2YLE6ZyZePAlWKEHgAzJGTiOh8Qkaov6mMIMlEhmLdKew==}
engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linux-arm64': 1.0.1
dev: true
optional: true
/@img/sharp-linux-arm@0.33.2:
resolution: {integrity: sha512-Fndk/4Zq3vAc4G/qyfXASbS3HBZbKrlnKZLEJzPLrXoJuipFNNwTes71+Ki1hwYW5lch26niRYoZFAtZVf3EGA==}
engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linux-arm': 1.0.1
dev: true
optional: true
/@img/sharp-linux-s390x@0.33.2:
resolution: {integrity: sha512-MBoInDXDppMfhSzbMmOQtGfloVAflS2rP1qPcUIiITMi36Mm5YR7r0ASND99razjQUpHTzjrU1flO76hKvP5RA==}
engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [s390x]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linux-s390x': 1.0.1
dev: true
optional: true
/@img/sharp-linux-x64@0.33.2:
resolution: {integrity: sha512-xUT82H5IbXewKkeF5aiooajoO1tQV4PnKfS/OZtb5DDdxS/FCI/uXTVZ35GQ97RZXsycojz/AJ0asoz6p2/H/A==}
engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linux-x64': 1.0.1
dev: true
optional: true
/@img/sharp-linuxmusl-arm64@0.33.2:
resolution: {integrity: sha512-F+0z8JCu/UnMzg8IYW1TMeiViIWBVg7IWP6nE0p5S5EPQxlLd76c8jYemG21X99UzFwgkRo5yz2DS+zbrnxZeA==}
engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [arm64]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linuxmusl-arm64': 1.0.1
dev: true
optional: true
/@img/sharp-linuxmusl-x64@0.33.2:
resolution: {integrity: sha512-+ZLE3SQmSL+Fn1gmSaM8uFusW5Y3J9VOf+wMGNnTtJUMUxFhv+P4UPaYEYT8tqnyYVaOVGgMN/zsOxn9pSsO2A==}
engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [linux]
requiresBuild: true
optionalDependencies:
'@img/sharp-libvips-linuxmusl-x64': 1.0.1
dev: true
optional: true
/@img/sharp-wasm32@0.33.2:
resolution: {integrity: sha512-fLbTaESVKuQcpm8ffgBD7jLb/CQLcATju/jxtTXR1XCLwbOQt+OL5zPHSDMmp2JZIeq82e18yE0Vv7zh6+6BfQ==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [wasm32]
requiresBuild: true
dependencies:
'@emnapi/runtime': 0.45.0
dev: true
optional: true
/@img/sharp-win32-ia32@0.33.2:
resolution: {integrity: sha512-okBpql96hIGuZ4lN3+nsAjGeggxKm7hIRu9zyec0lnfB8E7Z6p95BuRZzDDXZOl2e8UmR4RhYt631i7mfmKU8g==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@img/sharp-win32-x64@0.33.2:
resolution: {integrity: sha512-E4magOks77DK47FwHUIGH0RYWSgRBfGdK56kIHSVeB9uIS4pPFr4N2kIVsXdQQo4LzOsENKV5KAhRlRL7eMAdg==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@isaacs/cliui@8.0.2:
resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
engines: {node: '>=12'}
@ -1642,6 +1452,50 @@ packages:
resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
dev: true
/@pagefind/darwin-arm64@1.0.4:
resolution: {integrity: sha512-2OcthvceX2xhm5XbgOmW+lT45oLuHqCmvFeFtxh1gsuP5cO8vcD8ZH8Laj4pXQFCcK6eAdSShx+Ztx/LsQWZFQ==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@pagefind/darwin-x64@1.0.4:
resolution: {integrity: sha512-xkdvp0D9Ld/ZKsjo/y1bgfhTEU72ITimd2PMMQtts7jf6JPIOJbsiErCvm37m/qMFuPGEq/8d+fZ4pydOj08HQ==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@pagefind/default-ui@1.0.4:
resolution: {integrity: sha512-edkcaPSKq67C49Vehjo+LQCpT615v4d7JRhfGzFPccePvdklaL+VXrfghN/uIfsdoG+HoLI1PcYy2iFcB9CTkw==}
dev: true
/@pagefind/linux-arm64@1.0.4:
resolution: {integrity: sha512-jGBrcCzIrMnNxLKVtogaQyajVfTAXM59KlBEwg6vTn8NW4fQ6nuFbbhlG4dTIsaamjEM5e8ZBEAKZfTB/qd9xw==}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@pagefind/linux-x64@1.0.4:
resolution: {integrity: sha512-LIn/QcvcEtLEBqKe5vpSbSC2O3fvqbRCWOTIklslqSORisCsvzsWbP6j+LYxE9q0oWIfkdMoWV1vrE/oCKRxHg==}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@pagefind/windows-x64@1.0.4:
resolution: {integrity: sha512-QlBCVeZfj9fc9sbUgdOz76ZDbeK4xZihOBAFqGuRJeChfM8pnVeH9iqSnXgO3+m9oITugTf7PicyRUFAG76xeQ==}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@ -6784,6 +6638,17 @@ packages:
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
engines: {node: '>=6'}
/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: true
/parent-module@1.0.1:
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
engines: {node: '>=6'}
@ -7804,7 +7669,7 @@ packages:
dependencies:
decode-ico: 0.4.1
ico-endec: 0.1.6
sharp: 0.33.2
sharp: 0.32.6
dev: true
/sharp@0.32.6:
@ -7821,36 +7686,6 @@ packages:
tar-fs: 3.0.5
tunnel-agent: 0.6.0
/sharp@0.33.2:
resolution: {integrity: sha512-WlYOPyyPDiiM07j/UO+E720ju6gtNtHjEGg5vovUk1Lgxyjm2LFO+37Nt/UI3MMh2l6hxTWQWi7qk3cXJTutcQ==}
engines: {libvips: '>=8.15.1', node: ^18.17.0 || ^20.3.0 || >=21.0.0}
requiresBuild: true
dependencies:
color: 4.2.3
detect-libc: 2.0.2
semver: 7.6.0
optionalDependencies:
'@img/sharp-darwin-arm64': 0.33.2
'@img/sharp-darwin-x64': 0.33.2
'@img/sharp-libvips-darwin-arm64': 1.0.1
'@img/sharp-libvips-darwin-x64': 1.0.1
'@img/sharp-libvips-linux-arm': 1.0.1
'@img/sharp-libvips-linux-arm64': 1.0.1
'@img/sharp-libvips-linux-s390x': 1.0.1
'@img/sharp-libvips-linux-x64': 1.0.1
'@img/sharp-libvips-linuxmusl-arm64': 1.0.1
'@img/sharp-libvips-linuxmusl-x64': 1.0.1
'@img/sharp-linux-arm': 0.33.2
'@img/sharp-linux-arm64': 0.33.2
'@img/sharp-linux-s390x': 0.33.2
'@img/sharp-linux-x64': 0.33.2
'@img/sharp-linuxmusl-arm64': 0.33.2
'@img/sharp-linuxmusl-x64': 0.33.2
'@img/sharp-wasm32': 0.33.2
'@img/sharp-win32-ia32': 0.33.2
'@img/sharp-win32-x64': 0.33.2
dev: true
/shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}

185
src/components/blog/Search.astro Normal file
View File

@ -0,0 +1,185 @@
---
import '@pagefind/default-ui/css/ui.css';
---
<site-search id="search" class="ms-auto">
<button
data-open-modal
disabled
class="flex h-9 w-9 items-center justify-center rounded-md ring-zinc-400 transition-all hover:ring-2">
<svg
aria-label="search"
class="h-7 w-7"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-6-6"></path>
</svg>
</button>
<dialog
aria-label="search"
class="bg-bgColor h-full max-h-full w-full max-w-full border border-zinc-400 shadow backdrop:backdrop-blur sm:mx-auto sm:mb-auto sm:mt-16 sm:h-max sm:max-h-[calc(100%-8rem)] sm:min-h-[15rem] sm:w-5/6 sm:max-w-[48rem] sm:rounded-md">
<div class="dialog-frame flex flex-col gap-4 p-6 pt-12 sm:pt-6">
<button
data-close-modal
class="ms-auto cursor-pointer rounded-md bg-zinc-200 p-2 font-semibold">
Close
</button>
{
import.meta.env.DEV ? (
<div class="mx-auto text-center">
<p>
Search is only available in production builds. <br />
Try building and previewing the site to test it out locally.
</p>
</div>
) : (
<div class="search-container">
<div id="deploy__search" />
</div>
)
}
</div>
</dialog>
</site-search>
<script>
class SiteSearch extends HTMLElement {
private openBtn: HTMLButtonElement;
private closeBtn: HTMLButtonElement;
private dialog: HTMLDialogElement;
private dialogFrame: HTMLDivElement;
constructor() {
super();
this.openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
this.closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
this.dialog = this.querySelector('dialog')!;
this.dialogFrame = this.querySelector('.dialog-frame')!;
this.openBtn.addEventListener('click', this.openModal);
this.openBtn.disabled = false;
this.closeBtn.addEventListener('click', this.closeModal);
}
connectedCallback() {
// Listen for keyboard shortcut
window.addEventListener('keydown', this.onWindowKeydown);
// only add pagefind in production
if (import.meta.env.DEV) return;
const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
onIdle(async () => {
const { PagefindUI } = await import('@pagefind/default-ui');
new PagefindUI({
element: '#deploy__search',
baseUrl: import.meta.env.BASE_URL,
bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
showImages: false,
showSubResults: true,
});
});
}
disconnectedCallback() {
window.removeEventListener('keydown', this.onWindowKeydown);
}
onWindowClick = (event: MouseEvent) => {
// check if it's a link
const isLink = 'href' in (event.target || {});
// make sure the click is either a link or outside of the dialog
if (
isLink ||
(document.body.contains(event.target as Node) &&
!this.dialogFrame.contains(event.target as Node))
)
this.closeModal();
};
onWindowKeydown = (e: KeyboardEvent) => {
// check if it's the / key
if (e.key === '/' && !this.dialog.open) {
this.openModal();
e.preventDefault();
}
};
openModal = (event?: MouseEvent) => {
this.dialog.showModal();
this.querySelector('input')?.focus();
event?.stopPropagation();
window.addEventListener('click', this.onWindowClick);
};
closeModal = () => {
if (this.dialog.open) {
this.dialog.close();
window.removeEventListener('click', this.onWindowClick);
}
};
}
customElements.define('site-search', SiteSearch);
</script>
<style is:global>
:root {
--pagefind-ui-font: inherit;
}
#deploy__search .pagefind-ui__search-clear {
width: calc(60px * var(--pagefind-ui-scale));
padding: 0;
background-color: transparent;
overflow: hidden;
}
#deploy__search .pagefind-ui__search-clear:focus {
outline: 1px solid;
}
#deploy__search .pagefind-ui__search-clear::before {
content: '';
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E")
center / 60% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E")
center / 60% no-repeat;
display: block;
width: 100%;
height: 100%;
}
#deploy__search .pagefind-ui__result {
border: 0;
}
#search .pagefind-ui__result-link {
background-size: 100% 6px;
background-position: bottom;
background-repeat: repeat-x;
background-image: linear-gradient(transparent, transparent 5px);
}
#deploy__search .pagefind-ui__result-link:hover {
text-decoration: none;
background-image: linear-gradient(transparent, transparent 4px);
}
#search mark {
background-color: transparent;
font-weight: 600;
}
</style>
<style>
#deploy__search {
--pagefind-ui-border: theme('colors.zinc.400');
--pagefind-ui-border-width: 1px;
}
</style>

1
src/pagefind-default-ui.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module '@pagefind/default-ui';

4
src/pages/blog/[...slug].astro
View File

@ -26,7 +26,9 @@ const descriptionMeta =
---
<BaseLayout title={title} description={descriptionMeta}>
<div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
<div
class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl"
data-pagefind-body>
<h1 transition:name={title} class="text-4xl font-bold">{title}</h1>
<Content components={components} />
</div>

4
src/pages/blog/[page].astro
View File

@ -2,6 +2,7 @@
import { getCollection } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Heading from '@/components/ui/Heading.astro';
import Search from '@/components/blog/Search.astro';
import {
Pagination,
PaginationContent,
@ -19,7 +20,7 @@ interface BlogPost {
slug: string;
}
export async function getStaticPaths({ paginate }) {
export async function getStaticPaths({ paginate }: { paginate: Function }) {
const allBlogposts = await getCollection('blog');
const postsPerPage = 4;
@ -46,6 +47,7 @@ const {
<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
<Heading level={1}>Blog</Heading>
<Search />
<p>Here are some blogposts, they are located in the repository as mdx files.</p>
</div>
<hr class="mb-12 dark:border-zinc-700/75" />