From a66153ad4eccd58130b2ec61f0b18b1821c65cd4 Mon Sep 17 00:00:00 2001
From: oriverk <oriveryk@gmail.com>
Date: Mon, 15 Apr 2024 22:44:43 +0900
Subject: [PATCH 1/2] refactor: change from svelet to astro

---
 .../{ActivityDay.svelte => ActivityDay.astro} |  13 +--
 ...ActivityWeek.svelte => ActivityWeek.astro} |  25 ++---
 .../{ColorLegend.svelte => ColorLegend.astro} |  17 ++-
 .../{MonthLegend.svelte => MonthLegend.astro} |  19 ++--
 .../{index.svelte => index.astro}             |  45 +++-----
 .../{FeedCard.svelte => FeedCard.astro}       |  15 ++-
 .../{FeedList.svelte => FeedList.astro}       |  15 ++-
 src/components/{Hero.svelte => Hero.astro}    |  36 +-----
 src/components/LinkCard.astro                 |   2 +-
 .../{PostCard.svelte => PostCard.astro}       |  62 +++++------
 ...Pagination.svelte => PostPagination.astro} |  54 ++++-----
 src/components/PostTag.astro                  |  29 +++++
 src/components/PostTag.svelte                 |  26 -----
 ...sitoryCard.svelte => RepositoryCard.astro} | 104 ++++++++----------
 ...sitoryList.svelte => RepositoryList.astro} |  15 ++-
 src/components/SearchButton.astro             |   2 +-
 .../{Search => SvelteSearch}/BlogHit.svelte   |   0
 src/components/SvelteSearch/SearchIcon.svelte |  68 ++++++++++++
 .../SvelteSearch/SearchIconButton.svelte      |  50 +++++++++
 .../SearchInput.svelte                        |   4 +-
 .../{Search => SvelteSearch}/index.svelte     |  23 +++-
 src/components/ui/{Card.svelte => Card.astro} |  13 ++-
 ...entWrapper.svelte => ContentWrapper.astro} |  13 ++-
 .../ui/{Details.svelte => Details.astro}      |  19 ++--
 src/components/ui/{Icon.svelte => Icon.astro} |   9 +-
 .../ui/{Markdown.svelte => Markdown.astro}    |   8 +-
 src/components/ui/Toc/TocList.astro           |  27 +++++
 src/components/ui/Toc/TocList.svelte          |  23 ----
 .../ui/Toc/{index.svelte => index.astro}      |  20 ++--
 src/layouts/Header.astro                      |   2 +-
 src/layouts/Layout.astro                      |   2 +-
 src/layouts/MarkdownLayout.astro              |   4 +-
 src/pages/404.astro                           |   2 +-
 src/pages/[...slug].astro                     |   4 +-
 src/pages/blog/[...page].astro                |   6 +-
 src/pages/blog/[...slug].astro                |  10 +-
 src/pages/blog/tags/[tag]/[...page].astro     |   6 +-
 src/pages/index.astro                         |  15 ++-
 38 files changed, 447 insertions(+), 360 deletions(-)
 rename src/components/ActivityCalendar/{ActivityDay.svelte => ActivityDay.astro} (55%)
 rename src/components/ActivityCalendar/{ActivityWeek.svelte => ActivityWeek.astro} (68%)
 rename src/components/ActivityCalendar/{ColorLegend.svelte => ColorLegend.astro} (65%)
 rename src/components/ActivityCalendar/{MonthLegend.svelte => MonthLegend.astro} (52%)
 rename src/components/ActivityCalendar/{index.svelte => index.astro} (76%)
 rename src/components/{FeedCard.svelte => FeedCard.astro} (84%)
 rename src/components/{FeedList.svelte => FeedList.astro} (65%)
 rename src/components/{Hero.svelte => Hero.astro} (73%)
 rename src/components/{PostCard.svelte => PostCard.astro} (53%)
 rename src/components/{PostPagination.svelte => PostPagination.astro} (62%)
 create mode 100644 src/components/PostTag.astro
 delete mode 100644 src/components/PostTag.svelte
 rename src/components/{RepositoryCard.svelte => RepositoryCard.astro} (55%)
 rename src/components/{RepositoryList.svelte => RepositoryList.astro} (68%)
 rename src/components/{Search => SvelteSearch}/BlogHit.svelte (100%)
 create mode 100644 src/components/SvelteSearch/SearchIcon.svelte
 create mode 100644 src/components/SvelteSearch/SearchIconButton.svelte
 rename src/components/{Search => SvelteSearch}/SearchInput.svelte (93%)
 rename src/components/{Search => SvelteSearch}/index.svelte (84%)
 rename src/components/ui/{Card.svelte => Card.astro} (76%)
 rename src/components/ui/{ContentWrapper.svelte => ContentWrapper.astro} (66%)
 rename src/components/ui/{Details.svelte => Details.astro} (66%)
 rename src/components/ui/{Icon.svelte => Icon.astro} (93%)
 rename src/components/ui/{Markdown.svelte => Markdown.astro} (97%)
 create mode 100644 src/components/ui/Toc/TocList.astro
 delete mode 100644 src/components/ui/Toc/TocList.svelte
 rename src/components/ui/Toc/{index.svelte => index.astro} (57%)

diff --git a/src/components/ActivityCalendar/ActivityDay.svelte b/src/components/ActivityCalendar/ActivityDay.astro
similarity index 55%
rename from src/components/ActivityCalendar/ActivityDay.svelte
rename to src/components/ActivityCalendar/ActivityDay.astro
index 2e7f6e7..8b82c49 100644
--- a/src/components/ActivityCalendar/ActivityDay.svelte
+++ b/src/components/ActivityCalendar/ActivityDay.astro
@@ -1,17 +1,16 @@
-<script lang="ts">
-import type { Activity, ActivityCalendar } from "../../types/activityCalendar";
+---
+import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
 
-interface $$Props extends Pick<ActivityCalendar, "blockRadius" | "blockSize"> {
+interface Props extends Pick<ActivityCalendar, "blockRadius" | "blockSize"> {
   day: Activity;
   color: string;
   y: number;
 }
 
-let { day, color, y, blockRadius, blockSize } = $$props as $$Props;
-export { day, color, y, blockRadius, blockSize };
+const { day, color, y, blockRadius, blockSize } = Astro.props;
 const { date, level, count } = day;
 const label = `${count} contributions on ${date}`;
-</script>
+---
 
 <rect
   x={0}
@@ -24,7 +23,7 @@ const label = `${count} contributions on ${date}`;
   data-level={level}
   data-count={count}
   data-label={label}
-  style="--color-fill: {color}"
+  style={`--color-fill: ${color}`}
 >
   <title>{label}</title>
 </rect>
diff --git a/src/components/ActivityCalendar/ActivityWeek.svelte b/src/components/ActivityCalendar/ActivityWeek.astro
similarity index 68%
rename from src/components/ActivityCalendar/ActivityWeek.svelte
rename to src/components/ActivityCalendar/ActivityWeek.astro
index c27de8e..c91d857 100644
--- a/src/components/ActivityCalendar/ActivityWeek.svelte
+++ b/src/components/ActivityCalendar/ActivityWeek.astro
@@ -1,8 +1,8 @@
-<script lang="ts">
+---
 import type { Activity, ActivityCalendar } from "../../types/activityCalendar";
-import ActivityDay from "./ActivityDay.svelte";
+import ActivityDay from "./ActivityDay.astro";
 
-interface $$Props
+interface Props
   extends Pick<
     ActivityCalendar,
     "colors" | "blockMargin" | "blockRadius" | "blockSize"
@@ -12,7 +12,7 @@ interface $$Props
   translateX: number;
 }
 
-let {
+const {
   colors = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
   week,
   textHeight,
@@ -20,20 +20,11 @@ let {
   blockRadius,
   blockSize,
   translateX,
-} = $$props as $$Props;
-export {
-  colors,
-  week,
-  textHeight,
-  blockMargin,
-  blockRadius,
-  blockSize,
-  translateX,
-};
-</script>
+} = Astro.props;
+---
 
 <g transform={`translate(${translateX}, 0)`}>
-  {#each week as { date, level, count }, weekday}
+  {week.map(({ date, level, count }, weekday) => (
     <ActivityDay
       day={{ date, level, count }}
       color={colors[level]}
@@ -41,5 +32,5 @@ export {
       {blockRadius}
       {blockSize}
     />
-  {/each}
+  ))}
 </g>
diff --git a/src/components/ActivityCalendar/ColorLegend.svelte b/src/components/ActivityCalendar/ColorLegend.astro
similarity index 65%
rename from src/components/ActivityCalendar/ColorLegend.svelte
rename to src/components/ActivityCalendar/ColorLegend.astro
index 9c7a2b2..217e8db 100644
--- a/src/components/ActivityCalendar/ColorLegend.svelte
+++ b/src/components/ActivityCalendar/ColorLegend.astro
@@ -1,20 +1,19 @@
-<script lang="ts">
-import type { ActivityCalendar } from "../../types/activityCalendar";
+---
+import type { ActivityCalendar } from "@/types/activityCalendar";
 
-interface $$Props
+interface Props
   extends Pick<
     ActivityCalendar,
     "colors" | "blockMargin" | "blockRadius" | "blockSize"
   > {}
 
-let { colors, blockMargin, blockRadius, blockSize } = $$props as $$Props;
-export { colors, blockMargin, blockRadius, blockSize };
+const { colors, blockMargin, blockRadius, blockSize } = Astro.props;
 
 const dimentions = {
   width: colors.length * (blockSize + blockMargin) - blockMargin,
   height: blockSize,
 };
-</script>
+---
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +21,7 @@ const dimentions = {
   height={dimentions.height}
   viewBox={`0 0 ${dimentions.width} ${dimentions.height}`}
 >
-  {#each colors as color, i}
+  {colors.map((color, i) => (
     <rect
       x={i * (blockSize + blockMargin)}
       y={0}
@@ -30,9 +29,9 @@ const dimentions = {
       height={blockSize}
       rx={blockRadius}
       ry={blockRadius}
-      style="--color-fill: {color}"
+      style={`--color-fill: ${color}`}
     />
-  {/each}
+  ))}
 </svg>
 
 <style>
diff --git a/src/components/ActivityCalendar/MonthLegend.svelte b/src/components/ActivityCalendar/MonthLegend.astro
similarity index 52%
rename from src/components/ActivityCalendar/MonthLegend.svelte
rename to src/components/ActivityCalendar/MonthLegend.astro
index d994736..dafc29e 100644
--- a/src/components/ActivityCalendar/MonthLegend.svelte
+++ b/src/components/ActivityCalendar/MonthLegend.astro
@@ -1,8 +1,8 @@
-<script lang="ts">
-import type { Activity, ActivityCalendar } from "../../types/activityCalendar";
-import { getMonthLabels } from "../../utils/github/getActivityCalendar";
+---
+import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
+import { getMonthLabels } from "@/utils/github/getActivityCalendar";
 
-interface $$Props
+interface Props
   extends Pick<
     ActivityCalendar,
     "monthLabels" | "blockSize" | "blockMargin" | "fontSize"
@@ -10,14 +10,11 @@ interface $$Props
   weeks: Activity[][];
 }
 
-let { weeks, monthLabels, blockSize, blockMargin, fontSize } =
-  $$props as $$Props;
-export { weeks, monthLabels, blockSize, blockMargin, fontSize };
+const { weeks, monthLabels, blockSize, blockMargin, fontSize } = Astro.props;
 const labels = getMonthLabels(weeks, monthLabels);
-</script>
-
+---
 <g>
-  {#each labels as { text, x }}
+  {labels.map(({text, x}) => (
     <text
       x={(blockSize + blockMargin) * x}
       y={0}
@@ -26,7 +23,7 @@ const labels = getMonthLabels(weeks, monthLabels);
     >
       {text}
     </text>
-  {/each}
+  ))}
 </g>
 
 <style>
diff --git a/src/components/ActivityCalendar/index.svelte b/src/components/ActivityCalendar/index.astro
similarity index 76%
rename from src/components/ActivityCalendar/index.svelte
rename to src/components/ActivityCalendar/index.astro
index 469581f..979f555 100644
--- a/src/components/ActivityCalendar/index.svelte
+++ b/src/components/ActivityCalendar/index.astro
@@ -1,21 +1,21 @@
-<script lang="ts">
+---
 import {
   DEFAULT_COLORS,
   DEFAULT_MONTH_LABELS,
-} from "../../constants/activityCalendar";
-import type { Activity, ActivityCalendar } from "../../types/activityCalendar";
-import { parseContributionCalendarDay } from "../../utils/github/getActivityCalendar";
-import Card from "../ui/Card.svelte";
-import CalendarWeek from "./ActivityWeek.svelte";
-import ColorsLegend from "./ColorLegend.svelte";
-import MonthLegend from "./MonthLegend.svelte";
+} from "@/constants/activityCalendar";
+import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
+import { parseContributionCalendarDay } from "@/utils/github/getActivityCalendar";
+import Card from "@/components/ui/Card.astro";
+import CalendarWeek from "./ActivityWeek.astro";
+import ColorsLegend from "./ColorLegend.astro";
+import MonthLegend from "./MonthLegend.astro";
 
-interface $$Props
+interface Props
   extends Partial<Omit<ActivityCalendar, "contributionCalendar">> {
   contributionCalendar: ActivityCalendar["contributionCalendar"];
 }
 
-let {
+const {
   contributionCalendar,
   blockMargin = 4,
   blockRadius = 2,
@@ -24,18 +24,7 @@ let {
   hideMonthLabels = false,
   colors = DEFAULT_COLORS,
   monthLabels = DEFAULT_MONTH_LABELS,
-} = $$props as $$Props;
-
-export {
-  contributionCalendar,
-  blockMargin,
-  blockRadius,
-  blockSize,
-  fontSize,
-  hideMonthLabels,
-  colors,
-  monthLabels,
-};
+} = Astro.props;
 
 const { totalContributions, weeks } = contributionCalendar;
 const activityWeeks: Activity[][] = weeks.map((week) => {
@@ -48,8 +37,7 @@ const dimentions = {
   width: activityWeeks.length * (blockSize + blockMargin) - blockMargin,
   height: textHeight + (blockSize + blockMargin) * 7 - blockMargin,
 };
-</script>
-
+---
 <Card className="activity" disabled>
   <div class="activity-inner">
     <p>{totalContributions} contributions in the last year</p>
@@ -60,7 +48,7 @@ const dimentions = {
         height={dimentions.height}
         viewBox={`0 0 ${dimentions.width} ${dimentions.height}`}
       >
-        {#if !hideMonthLabels}
+        {!hideMonthLabels && (
           <MonthLegend
             weeks={activityWeeks}
             {monthLabels}
@@ -68,9 +56,8 @@ const dimentions = {
             {blockMargin}
             {fontSize}
           />
-        {/if}
-
-        {#each activityWeeks as week, i}
+        )}
+        {activityWeeks.map((week, i) => (
           <CalendarWeek
             {week}
             {textHeight}
@@ -80,7 +67,7 @@ const dimentions = {
             translateX={i * (blockSize + blockMargin)}
             {colors}
           />
-        {/each}
+        ))}
       </svg>
     </div>
     <div class="information">
diff --git a/src/components/FeedCard.svelte b/src/components/FeedCard.astro
similarity index 84%
rename from src/components/FeedCard.svelte
rename to src/components/FeedCard.astro
index fcc0c11..4fcfb80 100644
--- a/src/components/FeedCard.svelte
+++ b/src/components/FeedCard.astro
@@ -1,21 +1,20 @@
-<script lang="ts">
+---
 import type { FeedItem } from "../types/feed";
 import { getFaviconSrcFromOrigin } from "../utils/feed";
 import { getTimeFromNow } from "../utils/getTimeFromNow";
-import Card from "./ui/Card.svelte";
+import Card from "./ui/Card.astro";
 
-interface $$Props
+interface Props
   extends Pick<FeedItem, "title" | "link" | "dateMiliSeconds"> {}
 
-let { title, link, dateMiliSeconds } = $$props as $$Props;
-export { title, link, dateMiliSeconds };
+const { title, link, dateMiliSeconds } = Astro.props;
 const timeString = `${getTimeFromNow(dateMiliSeconds)} ago`;
 const isExternal = link.startsWith("http");
 const url = isExternal ? link : "https://oriverk.dev";
 const { hostname, origin } = new URL(url);
-</script>
+---
 
-<a  href={link} target={isExternal ? "_blank" : ""} rel={isExternal ? "noopenner noreferrer" : ""}>
+<a  href={link} target={isExternal ? "_blank" : ""} rel={isExternal ? "noopenner noreferrer" : ""} class="feed-card">
   <Card>
     <div class="feed">
       <time>{timeString}</time>
@@ -34,7 +33,7 @@ const { hostname, origin } = new URL(url);
 </a>
 
 <style>
-  a {
+  .feed-card {
     text-decoration: none;
   }
 
diff --git a/src/components/FeedList.svelte b/src/components/FeedList.astro
similarity index 65%
rename from src/components/FeedList.svelte
rename to src/components/FeedList.astro
index 9dde721..8a5a3bd 100644
--- a/src/components/FeedList.svelte
+++ b/src/components/FeedList.astro
@@ -1,23 +1,22 @@
-<script lang="ts">
+---
 import type { FeedItem } from "../types/feed";
-import FeedCard from "./FeedCard.svelte";
+import FeedCard from "./FeedCard.astro";
 
-interface $$Props {
+interface Props {
   items: FeedItem[];
   displayItemsCount?: number;
 }
 
-let { items, displayItemsCount = 12 } = $$props as $$Props;
-export { items, displayItemsCount };
-</script>
+const { items, displayItemsCount = 12 } = Astro.props;
+---
 
 <div class="feed-list">
   <ol class="grid">
-    {#each items.slice(0, displayItemsCount) as item}
+    {items.slice(0, displayItemsCount).map(item => (
       <li>
         <FeedCard {...item} />
       </li>
-    {/each}
+    ))}
   </ol>
 </div>
 
diff --git a/src/components/Hero.svelte b/src/components/Hero.astro
similarity index 73%
rename from src/components/Hero.svelte
rename to src/components/Hero.astro
index de5d3d2..467d3e4 100644
--- a/src/components/Hero.svelte
+++ b/src/components/Hero.astro
@@ -1,41 +1,16 @@
-<script lang="ts">
+---
 import urlJoin from "url-join";
 import siteConfig from "../../site.config";
-import Search from "./Search/index.svelte";
-import Dialog from "./ui/Dialog.svelte";
-import Icon from "./ui/Icon.svelte";
+import Icon from "./ui/Icon.astro";
 
 const { github, zenn, x } = siteConfig;
-
-let dialog: HTMLDialogElement;
-function openDialog() {
-  dialog.showModal();
-  dialog.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      dialog?.close();
-    }
-  });
-
-  dialog.addEventListener("click", (e) => {
-    if (e.target === dialog) {
-      dialog?.close();
-    }
-  });
-}
-
-function closeDialog() {
-  dialog.close();
-}
-</script>
+---
 
 <div class="hero">
   <h1>oriverk.dev</h1>
   <p><span class="text-gradient">Agr.</span> → ? / Bicycle</p>
   <div class="links">
-    <button type="button" on:click={openDialog} title="Search">
-      <Icon type="magnifyingGlass" size="medium" />
-      <span class="sr-only">Search</span>
-    </button>
+    <slot />
     <a href="/blog" title="Blog" data-astro-prefetch>
       <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
@@ -68,9 +43,6 @@ function closeDialog() {
       <span class="sr-only">Zenn.dev link</span>
     </a>
   </div>
-  <Dialog bind:dialog on:closeDialog={closeDialog} id="search-dialog">
-    <Search />
-  </Dialog>
 </div>
 
 <style>
diff --git a/src/components/LinkCard.astro b/src/components/LinkCard.astro
index 5ff11de..a58a270 100644
--- a/src/components/LinkCard.astro
+++ b/src/components/LinkCard.astro
@@ -1,7 +1,7 @@
 ---
 import { getFaviconSrcFromOrigin } from '@/utils/feed';
 import { getSiteMetadata } from '@/utils/getSiteMetadata';
-import Card from './ui/Card.svelte';
+import Card from './ui/Card.astro';
 
 interface Props {
   href: string;
diff --git a/src/components/PostCard.svelte b/src/components/PostCard.astro
similarity index 53%
rename from src/components/PostCard.svelte
rename to src/components/PostCard.astro
index 9219bfc..7511547 100644
--- a/src/components/PostCard.svelte
+++ b/src/components/PostCard.astro
@@ -1,8 +1,8 @@
-<script lang="ts">
+---
 import type { CollectionEntry } from "astro:content";
-import PostTag from "./PostTag.svelte";
+import PostTag from "./PostTag.astro";
 
-interface $$Props
+interface Props
   extends Pick<
     CollectionEntry<"blog">["data"],
     "title" | "tags" | "create" | "update"
@@ -10,7 +10,7 @@ interface $$Props
   href: string;
 }
 
-let { title, tags = [], create, update, href } = $$props as $$Props;
+const { title, tags = [], create, update, href } = Astro.props;
 export { title, tags, create, update, href };
 const lastModified = update || create;
 const date = lastModified.toLocaleDateString("ja-JP", {
@@ -19,9 +19,9 @@ const date = lastModified.toLocaleDateString("ja-JP", {
   day: "numeric",
 });
 const isoDate = lastModified.toISOString();
-</script>
+---
 
-<article>
+<article class="post-card" style={{"color": "red"}}>
   <a {href} class="thumbnail">
     <div>
       <h2>{title}</h2>
@@ -30,37 +30,37 @@ const isoDate = lastModified.toISOString();
   <div class="info">
     <time datetime={isoDate}>{date}</time>
     <div class="tags">
-      {#each tags as tag}
+      {tags.map(tag => (
         <PostTag {tag} href={`/blog/tags/${tag}`} />
-      {/each}
+      ))}
     </div>
   </div>
 </article>
 
 <style>
-  a {
-    text-decoration: none;
+  .post-card {
+    border: 1px solid rgba(var(--color-hover));
   }
 
-  article {
-    border: 1px solid  rgba(var(--color-hover));
-  }
+  .thumbnail {
+    text-decoration: none;
 
-  h2 {
-    font-size: 1.25rem;
-  }
+    & > div {
+      padding-inline: 1rem;
+      padding-block: 0.5rem;
+      aspect-ratio: 1.9 / 1;
+      display: flex;
+      align-items: center;
+      transition: background-color 100ms ease-in;
+      background-color: rgba(var(--color-hover));
 
-  .thumbnail > div {
-    padding-inline: 1rem;
-    padding-block: 0.5rem;
-    aspect-ratio: 1.9 / 1;
-    display: flex;
-    align-items: center;
-    transition: background-color 100ms ease-in;
-    background-color: rgba(var(--color-hover));
+      &:hover{
+        background-color: rgba(0 0 0 / 0.3);
+      }
+    }
 
-    &:hover{
-      background-color: rgba(0 0 0 / 0.3);
+    & h2 {
+      font-size: 1.25rem;
     }
   }
 
@@ -70,11 +70,11 @@ const isoDate = lastModified.toISOString();
     display: flex;
     flex-direction: column;
     gap: .5rem;
-  }
 
-  .tags {
-    display: flex;
-    column-gap: .75rem;
-    flex-wrap: wrap;
+    & > .tags {
+      display: flex;
+      column-gap: .75rem;
+      flex-wrap: wrap;
+    }
   }
 </style>
diff --git a/src/components/PostPagination.svelte b/src/components/PostPagination.astro
similarity index 62%
rename from src/components/PostPagination.svelte
rename to src/components/PostPagination.astro
index 4a8d950..51c5f01 100644
--- a/src/components/PostPagination.svelte
+++ b/src/components/PostPagination.astro
@@ -1,43 +1,45 @@
-<script lang="ts">
+---
 import type { Page } from "astro";
 
-interface $$Props extends Omit<Page, "data"> {}
-let { start, end, total, currentPage, size, lastPage, url } =
-  $$props as $$Props;
-export { start, end, total, currentPage, size, lastPage, url };
+interface Props extends Omit<Page, "data"> {}
+const { start, end, total, currentPage, size, lastPage, url } = Astro.props;
 const { current, prev, next } = url;
 const maxPage = Math.ceil(total / size);
 const curr = (index: number) => (index === currentPage ? "page" : null);
 const tab = (index: number) => (index === currentPage ? -1 : 0);
-</script>
+---
 
 <ol>
-  {#if prev}
-    <li>
-      <a href="/blog" data-astro-prefetch>&lt;&lt;</a>
-    </li>
-    <li>
-      <a href={prev} data-astro-prefetch>&lt;</a>
-    </li>
-  {/if}
-  {#if size < total}
+  {!!prev && (
+    <>
+      <li>
+        <a href="/blog" data-astro-prefetch>&lt;&lt;</a>
+      </li>
+      <li>
+        <a href={prev} data-astro-prefetch>&lt;</a>
+      </li>
+    </>
+  )}
+  {size < total && (
     <li>
       <a href="/blog" aria-current={curr(1)} tabindex={tab(1)} data-astro-prefetch>1</a>
     </li>
-  {/if}
-  {#each [...Array(maxPage - 1)] as _, index}
+  )}
+  {[...Array(maxPage - 1)].map((_, index) => (
     <li>
       <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} data-astro-prefetch>&gt;</a>
-    </li>
-    <li>
-      <a href={`/blog/${lastPage}`} data-astro-prefetch>&gt;&gt;</a>
-    </li>
-  {/if}
+  ))}
+  {!!next && (
+    <ol>
+      <li>
+        <a href={next} data-astro-prefetch>&gt;</a>
+      </li>
+      <li>
+        <a href={`/blog/${lastPage}`} data-astro-prefetch>&gt;&gt;</a>
+      </li>
+    </ol>
+  )}
 </ol>
 
 <style>
diff --git a/src/components/PostTag.astro b/src/components/PostTag.astro
new file mode 100644
index 0000000..e65fcf3
--- /dev/null
+++ b/src/components/PostTag.astro
@@ -0,0 +1,29 @@
+---
+interface Props {
+  tag: string;
+  href?: string;
+}
+const { tag, href } = Astro.props
+---
+
+{!!href ? (
+  <a {href} class="tag">#{tag}</a>
+): (
+  <span class="tag">#{tag}</span>
+)}
+
+<style>
+  .tag {
+    color: gray;
+    font-size: 1rem;
+  }
+
+  a.tag {
+    text-decoration: none;
+
+    &:hover {
+      color: rgb(var(--color-miku));
+      border-color: rgb(var(--color-miku));
+    }
+  }
+</style>
diff --git a/src/components/PostTag.svelte b/src/components/PostTag.svelte
deleted file mode 100644
index 3bf5cd5..0000000
--- a/src/components/PostTag.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-export let tag: string;
-export let href = "";
-</script>
-
-{#if href}
-  <a {href}>#{tag}</a>
-{:else}
-  <span>#{tag}</span>
-{/if}
-
-<style>
-  span, a {
-    color: gray;
-    font-size: 1rem;
-  }
-
-  a {
-    text-decoration: none;
-
-    &:hover {
-      color: rgb(var(--color-miku));
-      border-color: rgb(var(--color-miku));
-    }
-  }
-</style>
diff --git a/src/components/RepositoryCard.svelte b/src/components/RepositoryCard.astro
similarity index 55%
rename from src/components/RepositoryCard.svelte
rename to src/components/RepositoryCard.astro
index 72b6d69..4aefeb4 100644
--- a/src/components/RepositoryCard.svelte
+++ b/src/components/RepositoryCard.astro
@@ -1,85 +1,82 @@
-<script lang="ts">
+---
 import type { Language, Repository } from "@octokit/graphql-schema";
-import Card from "./ui/Card.svelte";
-import Icon from "./ui/Icon.svelte";
+import Card from "./ui/Card.astro";
+import Icon from "./ui/Icon.astro";
 
-interface $$Props
-  extends Pick<
+interface Props extends Pick<
     Repository,
     "name" | "description" | "url" | "stargazerCount" | "isArchived"
   > {
   primaryLanguage: Pick<Language, "name" | "color">;
 }
 
-let {
-  name,
-  description,
-  url,
-  stargazerCount = 0,
-  isArchived = false,
-  primaryLanguage,
-} = $$props as $$Props;
-export { name, description, url, stargazerCount, isArchived, primaryLanguage };
-</script>
+const { name, description, url, stargazerCount, isArchived, primaryLanguage } = Astro.props;
+---
 
-<a href={url} target="_blank" rel="noopener noreferrer">
+<a href={url} target="_blank" rel="noopener noreferrer" class="repository">
   <Card>
     <div class="repository">
       <div class="title">
         <Icon type="repository" size="small" />
         <span>{name}</span>
-        {#if isArchived}
+        {isArchived ? (
           <span class="public archived">Public archive</span>
-        {:else}
+        ): (
           <span class="public">Public</span>
-        {/if}
+        )}
       </div>
       <p class="description">{description ?? ''}</p>
       <div class="information">
-        {#if !!primaryLanguage.name}
+        {!!primaryLanguage.name && (
           <div class="primaryLanguage">
             <span
               class="color"
-              style="--color-language: {primaryLanguage.color}"
+              style={`--color-language: ${primaryLanguage.color}`}
             />
             <span class="name">{primaryLanguage.name}</span>
           </div>
-        {/if}
-        {#if !!stargazerCount}
+        )}
+        {!!stargazerCount && (
           <span class="stargazerCount">
             <Icon type="star" size="small" />
             {stargazerCount}
           </span>
-        {/if}
+        )}
       </div>
     </div>
   </Card>
 </a>
 
 <style>
-  a {
-    text-decoration: none;
-  }
-
   .repository {
+    text-decoration: none;
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-  }
 
-  .title,
-  .information {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
+    & > .title, & > .information {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
 
-  .title {
-    gap: 0.5rem;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: rgb(var(--color-miku));
+    & > .title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: rgb(var(--color-miku));
+    }
+
+    & > .description {
+      margin: 0;
+      flex-grow: 1;
+      color: rgb(var(--color-lightgray));
+    }
+
+    & > .information {
+      height: 1rem;
+      gap: 1rem;
+    }
   }
 
   .public {
@@ -94,30 +91,19 @@ export { name, description, url, stargazerCount, isArchived, primaryLanguage };
     border-color: yellow;
   }
 
-  .description {
-    margin: 0;
-    flex-grow: 1;
-    color: rgb(var(--color-lightgray));
-  }
-
-  .information {
-    height: 1rem;
-    gap: 1rem;
-  }
-
   .primaryLanguage {
     display: flex;
     align-items: center;
     gap: 0.25rem;
-  }
 
-  .primaryLanguage > .color {
-    display: inline-block;
-    width: 14px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    /* Advanced styling: https://svelte.jp/tutorial/style-directive */
-    background-color: var(--color-language);
+    & > .color {
+      display: inline-block;
+      width: 14px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      /* Advanced styling: https://svelte.jp/tutorial/style-directive */
+      background-color: var(--color-language);
+    }
   }
 
   .stargazerCount {
diff --git a/src/components/RepositoryList.svelte b/src/components/RepositoryList.astro
similarity index 68%
rename from src/components/RepositoryList.svelte
rename to src/components/RepositoryList.astro
index a288699..a0aedeb 100644
--- a/src/components/RepositoryList.svelte
+++ b/src/components/RepositoryList.astro
@@ -1,17 +1,20 @@
-<script lang="ts">
+---
 import type { PinnedItem } from "../types/github";
-import RepositoryCard from "./RepositoryCard.svelte";
+import RepositoryCard from "./RepositoryCard.astro";
 
-export let repositoryItems: PinnedItem[] = [];
-</script>
+interface Props {
+  repositoryItems: PinnedItem[]
+}
 
+const { repositoryItems } = Astro.props;
+---
 <div class="github-list">
   <ol class="grid">
-    {#each repositoryItems as item}
+    {repositoryItems.map(item => (
       <li>
         <RepositoryCard {...item} />
       </li>
-    {/each}
+    ))}
   </ol>
 </div>
 
diff --git a/src/components/SearchButton.astro b/src/components/SearchButton.astro
index 3e167a2..75eedef 100644
--- a/src/components/SearchButton.astro
+++ b/src/components/SearchButton.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "./ui/Icon.svelte";
+import Icon from "./ui/Icon.astro";
 ---
 
 <button type="button" id="search-button">
diff --git a/src/components/Search/BlogHit.svelte b/src/components/SvelteSearch/BlogHit.svelte
similarity index 100%
rename from src/components/Search/BlogHit.svelte
rename to src/components/SvelteSearch/BlogHit.svelte
diff --git a/src/components/SvelteSearch/SearchIcon.svelte b/src/components/SvelteSearch/SearchIcon.svelte
new file mode 100644
index 0000000..8f4e5b1
--- /dev/null
+++ b/src/components/SvelteSearch/SearchIcon.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import clsx from "clsx";
+
+  interface Props {
+    size?: "small" | "medium" | "large" | "xlarge";
+    color?: "white" | "black" | "gray";
+    style?: string;
+  }
+
+export let size: Props["size"] = "medium"
+export let color: Props["color"] = "white"
+export let style: Props["style"] = ""
+</script>
+
+<span class={clsx('icon', size, color)} {style} />
+
+<style>
+  .icon {
+    display: flex;
+  }
+
+  .icon::before {
+    content: '';
+    display: inline-block;
+    mask: no-repeat center;
+    mask-size: contain;
+    background-color: currentColor;
+    mask-image: url('/assets/magnifyingGlass.svg');
+  }
+
+  /* size */
+  .small::before {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .medium::before {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .large::before {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .xlarge::before {
+    width: 4rem;
+    height: 4rem;
+  }
+
+  /* color */
+  .white::before {
+    background-color: rgb(var(--color-white));
+  }
+
+  .black::before {
+    background-color: rgb(var(--color-black));
+  }
+
+  .gray::before {
+    background-color: rgb(var(--color-gray));
+  }
+
+  .currentColor::before {
+    background-color: currentColor;
+  }
+</style>
diff --git a/src/components/SvelteSearch/SearchIconButton.svelte b/src/components/SvelteSearch/SearchIconButton.svelte
new file mode 100644
index 0000000..3e868e3
--- /dev/null
+++ b/src/components/SvelteSearch/SearchIconButton.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+import Search from "./index.svelte";
+import Dialog from "@/components/ui/Dialog.svelte";
+import SearchIcon from "./SearchIcon.svelte"
+
+let dialog: HTMLDialogElement;
+function openDialog() {
+  dialog.showModal();
+  dialog.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      dialog?.close();
+    }
+  });
+
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) {
+      dialog?.close();
+    }
+  });
+}
+
+function closeDialog() {
+  dialog.close();
+}
+</script>
+
+<button type="button" on:click={openDialog} title="Search">
+  <SearchIcon size="medium" />
+  <span class="sr-only">Search</span>
+</button>
+<Dialog bind:dialog on:closeDialog={closeDialog} id="search-dialog">
+  <Search />
+</Dialog>
+
+<style>
+button {
+  width: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+  transition: background-color 100ms ease-in;
+  background-color: rgb(var(--color-hover));
+
+  &:hover {
+    background-color: rgba(0 0 0 / 0.3);
+  }
+}
+</style>
diff --git a/src/components/Search/SearchInput.svelte b/src/components/SvelteSearch/SearchInput.svelte
similarity index 93%
rename from src/components/Search/SearchInput.svelte
rename to src/components/SvelteSearch/SearchInput.svelte
index 793e8d0..2cb884e 100644
--- a/src/components/Search/SearchInput.svelte
+++ b/src/components/SvelteSearch/SearchInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import clsx from "clsx";
 import type { HTMLInputAttributes } from "svelte/elements";
-import Icon from "../ui/Icon.svelte";
+import SearchIcon from "./SearchIcon.svelte";
 
 interface $$Props extends Omit<HTMLInputAttributes, "class"> {
   className?: string;
@@ -15,7 +15,7 @@ export { className, value, placeholder };
   <label for="search" class="sr-only">検索</label>
   <div class="search-input-wrapper">
     <div class="search-icon">
-      <Icon type="magnifyingGlass" size="small" />
+      <SearchIcon size="small" />
     </div>
     <input class="search-input" {placeholder} bind:value {...$$restProps} />
   </div>
diff --git a/src/components/Search/index.svelte b/src/components/SvelteSearch/index.svelte
similarity index 84%
rename from src/components/Search/index.svelte
rename to src/components/SvelteSearch/index.svelte
index 7e23c31..bd21468 100644
--- a/src/components/Search/index.svelte
+++ b/src/components/SvelteSearch/index.svelte
@@ -3,7 +3,7 @@ import type { AlgoliaBlog } from "@/types/algolia";
 import { searchAlgolia } from "@/utils/algolia";
 import type { Hit, SearchResponse } from "@algolia/client-search";
 import { onMount } from "svelte";
-import Icon from "../ui/Icon.svelte";
+// import Icon from "@/components/ui/Icon.astro";
 import BlogHit from "./BlogHit.svelte";
 import SearchInput from "./SearchInput.svelte";
 
@@ -88,7 +88,8 @@ $: {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Icon type="algolia" />
+      <!-- <Icon type="algolia" /> -->
+      <span class="icon alogolia" />
     </a>
   </div>
   {#if !results?.nbHits}
@@ -121,6 +122,20 @@ $: {
     margin: 1rem 0;
     display: flex;
     justify-content: flex-end;
+
+    & > .icon.algolia {
+      &::before {
+        content: '';
+    display: inline-block;
+    mask: no-repeat center;
+    mask-size: contain;
+    background-color: currentColor;
+        height: 1.25rem;
+        mask-image: url('/assets/algolia.svg');
+        aspect-ratio: 572 / 64;
+      }
+      display: flex;
+    }
   }
 
   .search-results-wrapper {
@@ -131,7 +146,7 @@ $: {
     gap: 0.5rem;
   }
 
-  .search-icon-wrapper :global(.icon.algolia::before) {
+  /* .search-icon-wrapper :global(.icon.algolia::before) {
     height: 1.25rem;
-  }
+  } */
 </style>
diff --git a/src/components/ui/Card.svelte b/src/components/ui/Card.astro
similarity index 76%
rename from src/components/ui/Card.svelte
rename to src/components/ui/Card.astro
index 397f26a..ae50753 100644
--- a/src/components/ui/Card.svelte
+++ b/src/components/ui/Card.astro
@@ -1,8 +1,13 @@
-<script lang="ts">
+---
 import clsx from "clsx";
-export let className = "";
-export let disabled = false;
-</script>
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+}
+
+const { className, disabled = false } = Astro.props;
+---
 
 <div class={clsx(className, disabled && 'disabled')}>
   <slot />
diff --git a/src/components/ui/ContentWrapper.svelte b/src/components/ui/ContentWrapper.astro
similarity index 66%
rename from src/components/ui/ContentWrapper.svelte
rename to src/components/ui/ContentWrapper.astro
index fd8dc29..113a8d2 100644
--- a/src/components/ui/ContentWrapper.svelte
+++ b/src/components/ui/ContentWrapper.astro
@@ -1,8 +1,13 @@
-<script lang="ts">
+---
 import clsx from "clsx";
-export let className = "";
-export let style = "";
-</script>
+
+interface Props {
+  classNane?: string;
+  style?: string;
+}
+
+const { className, style } = Astro.props;
+---
 
 <div class={clsx('content-wrapper', className)} style={style}>
   <slot />
diff --git a/src/components/ui/Details.svelte b/src/components/ui/Details.astro
similarity index 66%
rename from src/components/ui/Details.svelte
rename to src/components/ui/Details.astro
index 0ac4481..00a9170 100644
--- a/src/components/ui/Details.svelte
+++ b/src/components/ui/Details.astro
@@ -1,23 +1,20 @@
-<script lang="ts">
-import type { HTMLDetailsAttributes } from "svelte/elements";
+---
+import type { HTMLAttributes } from 'astro/types';
 
-interface $$Props extends Omit<HTMLDetailsAttributes, "class"> {
+interface Props extends Omit<HTMLAttributes<"details">, "class"> {
   summary: string;
   className?: string;
 }
 
-let { summary, className } = $$props as $$Props;
-export { summary, className };
-</script>
+const { summary, className, ...restProps } = Astro.props;
+---
 
-<details
-  {...$$restProps}
->
-  {#if summary}
+<details class={className} {...restProps}>
+  {!!summary && (
     <summary>
       {summary}
     </summary>
-  {/if}
+  )}
   <slot />
 </details>
 
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.astro
similarity index 93%
rename from src/components/ui/Icon.svelte
rename to src/components/ui/Icon.astro
index 2357365..bde762d 100644
--- a/src/components/ui/Icon.svelte
+++ b/src/components/ui/Icon.astro
@@ -1,7 +1,7 @@
-<script lang="ts">
+---
 import clsx from "clsx";
 
-interface $$Props {
+interface Props {
   type:
     | "oriver"
     | "github"
@@ -18,9 +18,8 @@ interface $$Props {
   style?: string;
 }
 
-let { type, size, color, style } = $$props as $$Props;
-export { type, size, color, style };
-</script>
+const { type, size, color, style } = Astro.props;
+---
 
 <span class={clsx('icon', type, size, color)} {style} />
 
diff --git a/src/components/ui/Markdown.svelte b/src/components/ui/Markdown.astro
similarity index 97%
rename from src/components/ui/Markdown.svelte
rename to src/components/ui/Markdown.astro
index 647bd90..f069796 100644
--- a/src/components/ui/Markdown.svelte
+++ b/src/components/ui/Markdown.astro
@@ -1,16 +1,16 @@
-<script lang="ts">
+---
 import "katex/dist/katex.min.css";
 import "remark-github-alerts/styles/github-base.css";
 import "remark-github-alerts/styles/github-colors-dark-class.css";
 import "remark-github-alerts/styles/github-colors-light.css";
-</script>
+---
 
 <div class="markdown">
   <slot />
 </div>
 
-<style>
-  :global(.markdown){
+<style is:global>
+  .markdown {
     & > :where(*+*) {
       margin-block-start: 2rem;
     }
diff --git a/src/components/ui/Toc/TocList.astro b/src/components/ui/Toc/TocList.astro
new file mode 100644
index 0000000..00198d1
--- /dev/null
+++ b/src/components/ui/Toc/TocList.astro
@@ -0,0 +1,27 @@
+---
+import type { Hierarchy } from "@/utils/getBlog";
+
+interface Props {
+  heading: Hierarchy
+}
+
+const { heading } = Astro.props;
+const { slug, text, subHeadings } = heading;
+---
+
+<li>
+  <a href={`#${slug}`}>{text}</a>
+  {!!subHeadings.length && (
+    <ol>
+      {subHeadings.map(heading => (
+        <Astro.self heading={heading} />
+      ))}
+    </ol>
+  )}
+</li>
+
+<style>
+  ol {
+    list-style: none;
+  }
+</style>
diff --git a/src/components/ui/Toc/TocList.svelte b/src/components/ui/Toc/TocList.svelte
deleted file mode 100644
index 30c491b..0000000
--- a/src/components/ui/Toc/TocList.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-import type { Hierarchy } from "../../../utils/getBlog";
-
-export let heading: Hierarchy;
-const { slug, text, subHeadings } = heading;
-</script>
-
-<li>
-  <a href={`#${slug}`}>{text}</a>
-  {#if subHeadings.length}
-    <ol>
-      {#each subHeadings as heading}
-        <svelte:self {heading} />
-      {/each}
-    </ol>
-  {/if}
-</li>
-
-<style>
-  ol {
-    list-style: none;
-  }
-</style>
diff --git a/src/components/ui/Toc/index.svelte b/src/components/ui/Toc/index.astro
similarity index 57%
rename from src/components/ui/Toc/index.svelte
rename to src/components/ui/Toc/index.astro
index ac57c4b..ed01e00 100644
--- a/src/components/ui/Toc/index.svelte
+++ b/src/components/ui/Toc/index.astro
@@ -1,19 +1,23 @@
-<script lang="ts">
+---
 import type { Hierarchy } from "../../../utils/getBlog";
-import TocList from "./TocList.svelte";
+import TocList from "./TocList.astro";
 
-export let toc: Hierarchy[];
-</script>
+interface Props {
+  toc: Hierarchy[];
+}
 
-{#if toc.length}
+const { toc } = Astro.props;
+---
+
+{!!toc.length && (
   <nav>
     <ol>
-      {#each toc as heading}
+      {toc.map(heading => (
         <TocList {heading} />
-      {/each}
+      ))}
     </ol>
   </nav>
-{/if}
+)}
 
 <style>
   ol {
diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
index 42f14c3..84291d5 100644
--- a/src/layouts/Header.astro
+++ b/src/layouts/Header.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "@/components/ui/Icon.svelte";
+import Icon from "@/components/ui/Icon.astro";
 const isCurrent = (path: string) => path === Astro.url.pathname;
 ---
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 53061a9..b9e293a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import { ViewTransitions } from "astro:transitions";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import urlJoin from "url-join";
 import Footer from "./Footer.astro";
 import Header from "./Header.astro";
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index 8ae1fab..d3c5677 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -1,6 +1,6 @@
 ---
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
-import Markdown from "@/components/ui/Markdown.svelte";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
+import Markdown from "@/components/ui/Markdown.astro";
 import type { MarkdownLayoutProps } from "astro";
 import Layout from "./Layout.astro";
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 3a7eea6..b6bfc38 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,5 +1,5 @@
 ---
-import Card from "@/components/ui/Card.svelte";
+import Card from "@/components/ui/Card.astro";
 import Layout from "@/layouts/Layout.astro";
 ---
 
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index e775f12..ae9417d 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
-import Markdown from "@/components/ui/Markdown.svelte";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
+import Markdown from "@/components/ui/Markdown.astro";
 import Layout from "@/layouts/Layout.astro";
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
 import AstroLink from "@/components/AstroLink.astro"
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
index 930f7fb..2604c90 100644
--- a/src/pages/blog/[...page].astro
+++ b/src/pages/blog/[...page].astro
@@ -1,7 +1,7 @@
 ---
-import PostCard from "@/components/PostCard.svelte";
-import PostPagination from "@/components/PostPagination.svelte";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
+import PostCard from "@/components/PostCard.astro";
+import PostPagination from "@/components/PostPagination.astro";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getBlog } from "@/utils/getBlog";
 import type { GetStaticPaths } from "astro";
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 534885c..26c12a3 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,10 +1,10 @@
 ---
 import AstroLink from "@/components/AstroLink.astro";
-import PostTag from "@/components/PostTag.svelte";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
-import Details from "@/components/ui/Details.svelte";
-import Markdown from "@/components/ui/Markdown.svelte";
-import Toc from "@/components/ui/Toc/index.svelte";
+import PostTag from "@/components/PostTag.astro";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
+import Details from "@/components/ui/Details.astro";
+import Markdown from "@/components/ui/Markdown.astro";
+import Toc from "@/components/ui/Toc/index.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getBlog, getTocHierarchy } from "@/utils/getBlog";
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
diff --git a/src/pages/blog/tags/[tag]/[...page].astro b/src/pages/blog/tags/[tag]/[...page].astro
index d741997..4ebf613 100644
--- a/src/pages/blog/tags/[tag]/[...page].astro
+++ b/src/pages/blog/tags/[tag]/[...page].astro
@@ -1,7 +1,7 @@
 ---
-import PostCard from "@/components/PostCard.svelte";
-import PostPagination from "@/components/PostPagination.svelte";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
+import PostCard from "@/components/PostCard.astro";
+import PostPagination from "@/components/PostPagination.astro";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getBlog, getTags } from "@/utils/getBlog";
 import type { GetStaticPaths } from "astro";
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 74a3ecc..b9d92d4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,14 @@
 ---
-import ActivityCalendar from "@/components/ActivityCalendar/index.svelte";
-import FeedList from "@/components/FeedList.svelte";
-import Hero from "@/components/Hero.svelte";
-import RepositoryList from "@/components/RepositoryList.svelte";
-import ContentWrapper from "@/components/ui/ContentWrapper.svelte";
+import ActivityCalendar from "@/components/ActivityCalendar/index.astro";
+import FeedList from "@/components/FeedList.astro";
+import Hero from "@/components/Hero.astro";
+import RepositoryList from "@/components/RepositoryList.astro";
+import ContentWrapper from "@/components/ui/ContentWrapper.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getFeedItems } from "@/utils/feed";
 import { getBlog } from "@/utils/getBlog";
 import { getUserContent } from "@/utils/github/getUserContent";
+import SearchIconButton from "@/components/SvelteSearch/SearchIconButton.svelte";
 
 const userContent = getUserContent();
 const feedItems = getFeedItems();
@@ -36,7 +37,9 @@ const colors = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"];
   <section class="home-hero">
     <ContentWrapper>
       <div class="hero">
-        <Hero client:only="svelte" />
+        <Hero>
+          <SearchIconButton client:only="svelte" />
+        </Hero>
       </div>
     </ContentWrapper>
   </section>

From 4b24c283c072bf10c4b111f8ece82051a263d668 Mon Sep 17 00:00:00 2001
From: oriverk <oriveryk@gmail.com>
Date: Wed, 17 Apr 2024 13:43:42 +0900
Subject: [PATCH 2/2] feat: support under javascript disabled

---
 src/components/Hero.astro                     |  1 -
 .../SvelteSearch/SearchButton.svelte          | 77 +++++++++++++++++++
 .../SvelteSearch/SearchIconButton.svelte      | 50 ------------
 src/layouts/Header.astro                      | 10 ++-
 src/pages/index.astro                         |  5 +-
 5 files changed, 86 insertions(+), 57 deletions(-)
 create mode 100644 src/components/SvelteSearch/SearchButton.svelte
 delete mode 100644 src/components/SvelteSearch/SearchIconButton.svelte

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 467d3e4..38d840d 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -10,7 +10,6 @@ const { github, zenn, x } = siteConfig;
   <h1>oriverk.dev</h1>
   <p><span class="text-gradient">Agr.</span> → ? / Bicycle</p>
   <div class="links">
-    <slot />
     <a href="/blog" title="Blog" data-astro-prefetch>
       <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
diff --git a/src/components/SvelteSearch/SearchButton.svelte b/src/components/SvelteSearch/SearchButton.svelte
new file mode 100644
index 0000000..c491704
--- /dev/null
+++ b/src/components/SvelteSearch/SearchButton.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+import Search from "./index.svelte";
+import Dialog from "@/components/ui/Dialog.svelte";
+import SearchIcon from "./SearchIcon.svelte"
+
+let dialog: HTMLDialogElement;
+function openDialog() {
+  dialog.showModal();
+  dialog.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      dialog?.close();
+    }
+  });
+
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) {
+      dialog?.close();
+    }
+  });
+}
+
+function closeDialog() {
+  dialog.close();
+}
+</script>
+
+<button type="button" on:click={openDialog} title="Search">
+  <div class="content">
+    <SearchIcon size="small" />
+    <span>Search</span>
+    <span class="sr-only">posts</span>
+  </div>
+</button>
+<Dialog bind:dialog on:closeDialog={closeDialog} id="search-dialog">
+  <Search />
+</Dialog>
+
+<style>
+button {
+  padding: .15rem;
+  background: rgba(0 0 0 / 0.3);
+  background-position: 100%;
+  transition: background-position 600ms var(--cubic-bezier), background-color 600ms var(--cubic-bezier);
+  border-radius: .5rem;
+
+  & > .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .5rem;
+    background: rgba(0 0 0 / 0.3);
+    border-radius: .3rem;
+    padding-inline: .5rem;
+
+    & > span {
+      color:gray;
+      line-height: 2rem;
+      font-size: 1.1rem;
+      transition: color 600ms var(--cubic-bezier);
+    }
+  }
+}
+
+button:is(:hover, :focus-within) {
+  background: var(--accent-gradient);
+  background-position: 0;
+  background-size: 400%;
+
+  & > .content {
+    background-color: rgb(var(--color-hover));
+
+    & > span {
+      color: white;
+    }
+  }
+}
+</style>
diff --git a/src/components/SvelteSearch/SearchIconButton.svelte b/src/components/SvelteSearch/SearchIconButton.svelte
deleted file mode 100644
index 3e868e3..0000000
--- a/src/components/SvelteSearch/SearchIconButton.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-import Search from "./index.svelte";
-import Dialog from "@/components/ui/Dialog.svelte";
-import SearchIcon from "./SearchIcon.svelte"
-
-let dialog: HTMLDialogElement;
-function openDialog() {
-  dialog.showModal();
-  dialog.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      dialog?.close();
-    }
-  });
-
-  dialog.addEventListener("click", (e) => {
-    if (e.target === dialog) {
-      dialog?.close();
-    }
-  });
-}
-
-function closeDialog() {
-  dialog.close();
-}
-</script>
-
-<button type="button" on:click={openDialog} title="Search">
-  <SearchIcon size="medium" />
-  <span class="sr-only">Search</span>
-</button>
-<Dialog bind:dialog on:closeDialog={closeDialog} id="search-dialog">
-  <Search />
-</Dialog>
-
-<style>
-button {
-  width: 3rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1;
-  border-radius: 0.5rem;
-  transition: background-color 100ms ease-in;
-  background-color: rgb(var(--color-hover));
-
-  &:hover {
-    background-color: rgba(0 0 0 / 0.3);
-  }
-}
-</style>
diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
index 84291d5..b373052 100644
--- a/src/layouts/Header.astro
+++ b/src/layouts/Header.astro
@@ -1,6 +1,9 @@
 ---
 import Icon from "@/components/ui/Icon.astro";
-const isCurrent = (path: string) => path === Astro.url.pathname;
+import HeaderSearch from "@/components/SvelteSearch/SearchButton.svelte"
+const { pathname } = Astro.url;
+const subpath = pathname.match(/[^\/]+/g);
+const isActive = (href: string) => href === pathname || href === `/${subpath?.[0]}`;
 ---
 
 <nav>
@@ -11,7 +14,10 @@ const isCurrent = (path: string) => path === Astro.url.pathname;
   <div class="header-right">
     <ul>
       <li>
-        <a href="/blog" class:list={[{acitve: isCurrent("/blog")}]} data-astro-prefetch>Blog</a>
+        <HeaderSearch client:only="svelte" />
+      </li>
+      <li>
+        <a href="/blog" class:list={[{acitve: isActive("/blog")}]} data-astro-prefetch>Blog</a>
       </li>
       <li>
         <a href="https://oriverk.github.io/" target="_blank" rel="noopener noreferrer" title="GitHub Page">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b9d92d4..c9b1f4b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,7 +8,6 @@ import Layout from "@/layouts/Layout.astro";
 import { getFeedItems } from "@/utils/feed";
 import { getBlog } from "@/utils/getBlog";
 import { getUserContent } from "@/utils/github/getUserContent";
-import SearchIconButton from "@/components/SvelteSearch/SearchIconButton.svelte";
 
 const userContent = getUserContent();
 const feedItems = getFeedItems();
@@ -37,9 +36,7 @@ const colors = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"];
   <section class="home-hero">
     <ContentWrapper>
       <div class="hero">
-        <Hero>
-          <SearchIconButton client:only="svelte" />
-        </Hero>
+        <Hero />
       </div>
     </ContentWrapper>
   </section>