Merge pull request #7 from oriverk/dev

perf: enable astro prefech
oriverk · Mar 25, 2024 · c73f5f5 · c73f5f5
2 parents bacc13b + 9165879
commit c73f5f5
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 41 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -17,6 +17,7 @@ import {
 export default defineConfig({
   site: "https://oriverk.dev",
   publicDir: "./public",
+  prefetch: true,
   integrations: [
     svelte(),
     // NOTE: expressiveCode must be before mdx

diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
@@ -36,7 +36,7 @@ function closeDialog() {
       <Icon type="magnifyingGlass" size="medium" />
       <span class="sr-only">Search</span>
     </button>
-    <a href="/blog" title="Blog">
+    <a href="/blog" title="Blog" data-astro-prefetch>
       <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
     </a>

diff --git a/src/components/PostPagination.svelte b/src/components/PostPagination.svelte
@@ -14,28 +14,28 @@ const tab = (index: number) => (index === currentPage ? -1 : 0);
 <ol>
   {#if prev}
     <li>
-      <a href="/blog">&lt;&lt;</a>
+      <a href="/blog" data-astro-prefetch>&lt;&lt;</a>
     </li>
     <li>
-      <a href={prev}>&lt;</a>
+      <a href={prev} data-astro-prefetch>&lt;</a>
     </li>
   {/if}
   {#if size < total}
     <li>
-      <a href="/blog" aria-current={curr(1)} tabindex={tab(1)}>1</a>
+      <a href="/blog" aria-current={curr(1)} tabindex={tab(1)} data-astro-prefetch>1</a>
     </li>
   {/if}
   {#each [...Array(maxPage - 1)] as _, index}
     <li>
-      <a href={`/blog/${index+2}`} aria-current={curr(index+2)} tabindex={tab(index+2)}>{index+2}</a>
+      <a href={`/blog/${index+2}`} aria-current={curr(index+2)} tabindex={tab(index+2)} data-astro-prefetch>{index+2}</a>
     </li>
   {/each}
   {#if next}
     <li>
-      <a href={next}>&gt;</a>
+      <a href={next} data-astro-prefetch>&gt;</a>
     </li>
     <li>
-      <a href={`/blog/${lastPage}`}>&gt;&gt;</a>
+      <a href={`/blog/${lastPage}`} data-astro-prefetch>&gt;&gt;</a>
     </li>
   {/if}
 </ol>

diff --git a/src/components/Search/AlgoliaIcon.svelte b/src/components/Search/AlgoliaIcon.svelte
diff --git a/src/components/Search/BlogHit.svelte b/src/components/Search/BlogHit.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { Hit } from "@algolia/client-search";
-import type { AlgoliaBlog } from "../../types/algolia";
+import type { AlgoliaBlog } from "@/types/algolia";
 
 interface $$Props extends Hit<AlgoliaBlog> {
   selected: boolean;
@@ -11,7 +11,7 @@ export { selected, id, title, tags };
 </script>
 
 <a
-  href={`https://blog.oriverk.dev/entry/${id}`}
+  href={`/blog/${id}`}
   class:active={selected}
   on:mouseover
   on:focus

diff --git a/src/components/Search/index.svelte b/src/components/Search/index.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 import type { Hit, SearchResponse } from "@algolia/client-search";
 import { onMount } from "svelte";
-import type { AlgoliaBlog } from "../../types/algolia";
-import { searchAlgolia } from "../../utils/algolia";
-import AlgoliaIcon from "./AlgoliaIcon.svelte";
+import type { AlgoliaBlog } from "@/types/algolia";
+import { searchAlgolia } from "@/utils/algolia";
+import Icon from "../ui/Icon.svelte";
 import BlogHit from "./BlogHit.svelte";
 import SearchInput from "./SearchInput.svelte";
 
@@ -55,7 +55,7 @@ function selectHit() {
   if (hits[activeHit]) {
     const { id } = results.hits[activeHit];
     if (!anchor || !id) return;
-    anchor.setAttribute("href", `https://blog.oriverk.dev/entry/${id}`);
+    anchor.setAttribute("href", `/blog/${id}`);
     anchor.click();
   }
 }
@@ -88,7 +88,7 @@ $: {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <AlgoliaIcon height="1.25rem" />
+      <Icon type="algolia" />
     </a>
   </div>
   {#if !results?.nbHits}
@@ -130,4 +130,8 @@ $: {
     flex-direction: column;
     gap: 0.5rem;
   }
+
+  .search-icon-wrapper :global(.icon.algolia::before) {
+    height: 1.25rem;
+  }
 </style>
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.svelte
@@ -7,6 +7,7 @@ interface $$Props {
     | "github"
     | "zenn"
     | "x"
+    | "algolia"
     | "pencil"
     | "magnifyingGlass"
     | "repository"
@@ -94,6 +95,11 @@ export { type, size, color, style };
     mask-image: url('/assets/x.svg');
   }
 
+  .algolia::before {
+    mask-image: url('/assets/algolia.svg');
+    aspect-ratio: 572 / 64;
+  }
+
   /* general icon */
   .pencil::before {
     mask-image: url('/assets/pencil.svg');

diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
@@ -11,7 +11,7 @@ const isCurrent = (path: string) => path === Astro.url.pathname;
   <div class="header-right">
     <ul>
       <li>
-        <a href="/blog" class:list={[{acitve: isCurrent("/blog")}]}>Blog</a>
+        <a href="/blog" class:list={[{acitve: isCurrent("/blog")}]} data-astro-prefetch>Blog</a>
       </li>
       <li>
         <a href="https://oriverk.github.io/" target="_blank" rel="noopener noreferrer" title="GitHub Page">