feat: icons, search

.github/workflows/deploy.yml

@@ -0,0 +1,40 @@
+on:
+  push:
+
+jobs:
+  deploy:
+    name: "Deploy lastest (v4000) Docs on Cloudflare Workers"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v4
+      - name: Deploy app
+        uses: cloudflare/wrangler-action@v3
+        with:
+          packageManager: pnpm
+          apiToken: ${{ secrets.CLOUDFLARE_WORKERS_KEY }}
+          command: pages deploy dist --project-name=kaplay4000
+          preCommands: "pnpm i && pnpm build"
+
+  deploylegacy:
+    name: "Deploy legacy (v3001) Docs on Cloudflare Workers"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v4
+      - name: Checkout submodule to v3001
+        run: |
+          cd kaplay
+          git checkout v3001
+          cd ..
+      - name: Deploy app
+        uses: cloudflare/wrangler-action@v3
+        with:
+          packageManager: pnpm
+          apiToken: ${{ secrets.CLOUDFLARE_WORKERS_KEY }}
+          command: pages deploy dist --project-name=kaplay3001
+          preCommands: "pnpm i && pnpm build"

.gitignore

@@ -26,4 +26,5 @@ pnpm-debug.log*
 doc.json
 
 kaplay/
-.wrangler/
+.wrangler/
+public/pagefind

package.json

@@ -6,7 +6,7 @@
     "install": "git submodule init && git submodule update && cd kaplay && pnpm i",
     "dev": "npm run doc && astro dev",
     "start": "npm run doc && astro dev",
-    "build": "npm run doc && astro check && astro build && npm run lunaria:build",
+    "build": "npm run doc && astro check && astro build && pnpm run pagefind:build && npm run lunaria:build",
     "preview": "astro preview",
     "astro": "astro",
     "doc": "node scripts/buildDoc.js",
@@ -18,7 +18,8 @@
     "cf:deploy": "npm run build && wrangler pages deploy dist",
     "cf:preview": "wrangler pages dev dist",
     "f:dev": "astro dev",
-    "f:build": "NODE_ENV=fastproduction astro build"
+    "f:build": "NODE_ENV=fastproduction astro build",
+    "pagefind:build": "pagefind --site dist"
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
@@ -34,6 +35,7 @@
     "@types/node": "20",
     "astro": "^4.10.3",
     "astro-meta-tags": "^0.3.0",
+    "astro-pagefind": "^1.6.0",
     "astro-robots-txt": "^1.0.0",
     "dprint": "^0.47.2",
     "marked": "^13.0.0",
@@ -48,6 +50,7 @@
     "clsx": "^2.1.1",
     "daisyui": "^4.12.2",
     "dts-bundle-generator": "^9.5.1",
+    "pagefind": "^1.1.0",
     "shiki": "^1.9.0",
     "tailwind-merge": "^2.3.0",
     "wrangler": "^3.58.0"

src/components/Search/SearchDialog.astro

@@ -0,0 +1,19 @@
+<dialog id="search-modal" class="modal">
+    <div class="modal-box w-fit min-h-96 h-fit">
+        <div id="search"></div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
+
+<script is:inline>
+    document.addEventListener("astro:page-load", () => {
+        // @ts-ignore
+        new PagefindUI({
+            element: "#search",
+            showSubResults: true,
+            showImages: false,
+        });
+    });
+</script>

src/components/Sidebar/Sidebar.astro

@@ -1,12 +1,10 @@
 ---
-import kaplayPackageJson from "@/../kaplay/package.json";
 import kaplayOutlined from "@/assets/kaplay-o.webp";
 import { $lang } from "@/stores";
 import { t } from "@/util/i18n";
 import { getLangedRoute } from "@/util/path";
 import Image from "astro/components/Image.astro";
 import { getBlogEntries, getDocEntries, getGuidesEntries } from "./entries";
-import SidebarChangeLink from "./SidebarChangeLink.astro";
 import { SidebarLink } from "./SidebarLink";
 import { SidebarList } from "./SidebarList";
 import VersionSelector from "./VersionSelector.astro";
@@ -71,18 +69,27 @@ else if (sidebarMode === "blog") {
                     />
                 </a>
             </figure>
+            <div class="divider"></div>
+            <button
+                class="btn border-primary w-full mb-4"
+                onclick="document.querySelector('#search-modal')?.showModal()"
+            >
+                Search in KAPLAY
+            </button>
             <div class="px-4 pb-4">
                 <VersionSelector />
             </div>
+            <div class="divider"></div>
             <ul class="flex-col gap-2">
-                <SidebarLink href="/" lang={lang}>{
+                <SidebarLink href="/" lang={lang} icon="home">{
                     t(lang, "sidebar.home")
                 }</SidebarLink>
                 <SidebarLink
                     href="https://kaboomjs.com/discord"
                     target="_blank"
                     lang={lang}
                     noTranslate
+                    icon="discord"
                 >
                     Discord
                 </SidebarLink>
@@ -91,13 +98,15 @@ else if (sidebarMode === "blog") {
                     target="_blank"
                     lang={lang}
                     noTranslate
+                    icon="github"
                 >
                     GitHub
                 </SidebarLink>
                 <SidebarLink
                     href="/changelog"
                     lang={lang}
                     noTranslate
+                    icon="pog"
                 >
                     What's new on v4000
                 </SidebarLink>
@@ -106,6 +115,7 @@ else if (sidebarMode === "blog") {
                     target="_blank"
                     lang={lang}
                     noTranslate
+                    icon="controller"
                 >
                     {t(lang, "sidebar.playground")}
                 </SidebarLink>
@@ -114,21 +124,28 @@ else if (sidebarMode === "blog") {
                     target="_blank"
                     lang={lang}
                     noTranslate
+                    icon="donate"
                 >
                     Donate to KAPLAY
                 </SidebarLink>
             </ul>
             <div class="divider"></div>
             <ul class="flex-col gap-2">
-                <SidebarChangeLink link="/guides/install" {lang}>{
-                    t(lang, "sidebar.guides")
-                }</SidebarChangeLink>
-                <SidebarChangeLink link="/doc/kaplay" {lang}>{
-                    t(lang, "sidebar.refdoc")
-                }</SidebarChangeLink>
-                <SidebarChangeLink link="/blog" {lang}>{
+                <SidebarLink
+                    href="/guides/install"
+                    lang={lang}
+                    icon="guides"
+                    reloadAll
+                >{t(lang, "sidebar.guides")}</SidebarLink>
+                <SidebarLink
+                    href="/doc/kaplay"
+                    lang={lang}
+                    icon="api"
+                    reloadAll
+                >{t(lang, "sidebar.refdoc")}</SidebarLink>
+                <SidebarLink href="/blog" lang={lang} icon="blog" reloadAll>{
                     t(lang, "sidebar.blog")
-                }</SidebarChangeLink>
+                }</SidebarLink>
             </ul>
             <div class="divider"></div>
             <SidebarList