fix: change components from astro to svelte

oriverk · Sep 25, 2024 · c2e712d · c2e712d
1 parent aa2d4d1
commit c2e712d
Show file tree

Hide file tree

Showing 58 changed files with 735 additions and 970 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1 @@
-SECRET_ALGOLIA_ADMIN_KEY=\w+
-
 SECRET_GH_PAT=\w+
diff --git a/astro.config.ts b/astro.config.ts
@@ -20,6 +20,20 @@ export default defineConfig({
   prefetch: {
     prefetchAll: true
   },
+  markdown: {
+    remarkPlugins: [
+      remarkComment,
+      // remarkMath,
+      remarkFencedCodeBlock,
+      remarkGithubAlerts,
+    ],
+    rehypePlugins: [
+      rehypeAnchor,
+      rehypeFigure,
+      // rehypeKatex
+    ],
+    gfm: true,
+  },
   integrations: [
     svelte(),
     // NOTE: expressiveCode must be before mdx
@@ -36,18 +50,4 @@ export default defineConfig({
     }),
     mdx(),
   ],
-  markdown: {
-    remarkPlugins: [
-      remarkComment,
-      // remarkMath,
-      remarkFencedCodeBlock,
-      remarkGithubAlerts,
-    ],
-    rehypePlugins: [
-      rehypeAnchor,
-      rehypeFigure,
-      // rehypeKatex
-    ],
-    gfm: true,
-  },
 });
diff --git a/site.config.ts b/site.config.ts
@@ -7,9 +7,4 @@ export default {
   docsGitHubRepositoryExpression: "HEAD:cv/index.md",
   zenn: 'oriverk',
   x: 'not_you_die',
-  algolia: {
-    appId: "WOHC62BVSP",
-    apiKey: "bae638093bc0fe3156732e769d096c41",
-    index: "rod_oriverkdev"
-  }
 }
diff --git a/...onents/ActivityCalendar/ActivityDay.astro → ...nents/ActivityCalendar/ActivityDay.svelte b/...onents/ActivityCalendar/ActivityDay.astro → ...nents/ActivityCalendar/ActivityDay.svelte
@@ -1,16 +1,16 @@
----
+<script lang="ts">
 import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
 
-interface Props extends Pick<ActivityCalendar, "blockRadius" | "blockSize"> {
+type Props = Pick<ActivityCalendar, "blockRadius" | "blockSize"> & {
   day: Activity;
   color: string;
   y: number;
-}
+};
 
-const { day, color, y, blockRadius, blockSize } = Astro.props;
+const { day, color, y, blockRadius, blockSize }: Props = $props();
 const { date, level, count } = day;
 const label = `${count} contributions on ${date}`;
----
+</script>
 
 <rect
   x={0}

diff --git a/...nents/ActivityCalendar/ActivityWeek.astro → ...ents/ActivityCalendar/ActivityWeek.svelte b/...nents/ActivityCalendar/ActivityWeek.astro → ...ents/ActivityCalendar/ActivityWeek.svelte
@@ -1,16 +1,15 @@
----
-import type { Activity, ActivityCalendar } from "../../types/activityCalendar";
-import ActivityDay from "./ActivityDay.astro";
+<script lang="ts">
+import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
+import ActivityDay from "./ActivityDay.svelte";
 
-interface Props
-  extends Pick<
-    ActivityCalendar,
-    "colors" | "blockMargin" | "blockRadius" | "blockSize"
-  > {
+type Props = Pick<
+  ActivityCalendar,
+  "colors" | "blockMargin" | "blockRadius" | "blockSize"
+> & {
   week: Activity[];
   textHeight: number;
   translateX: number;
-}
+};
 
 const {
   colors = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
@@ -20,17 +19,17 @@ const {
   blockRadius,
   blockSize,
   translateX,
-} = Astro.props;
----
+}: Props = $props();
+</script>
 
 <g transform={`translate(${translateX}, 0)`}>
-  {week.map(({ date, level, count }, weekday) => (
+  {#each week as {date, level, count}, weekday}
     <ActivityDay
       day={{ date, level, count }}
       color={colors[level]}
       y={textHeight + (blockSize + blockMargin) * weekday}
       {blockRadius}
       {blockSize}
     />
-  ))}
+  {/each}
 </g>
diff --git a/...onents/ActivityCalendar/ColorLegend.astro → ...nents/ActivityCalendar/ColorLegend.svelte b/...onents/ActivityCalendar/ColorLegend.astro → ...nents/ActivityCalendar/ColorLegend.svelte
@@ -1,27 +1,26 @@
----
+<script lang="ts">
 import type { ActivityCalendar } from "@/types/activityCalendar";
 
-interface Props
-  extends Pick<
-    ActivityCalendar,
-    "colors" | "blockMargin" | "blockRadius" | "blockSize"
-  > {}
+type Props = Pick<
+  ActivityCalendar,
+  "colors" | "blockMargin" | "blockRadius" | "blockSize"
+>;
 
-const { colors, blockMargin, blockRadius, blockSize } = Astro.props;
+const { colors, blockMargin, blockRadius, blockSize }: Props = $props();
 
 const dimentions = {
   width: colors.length * (blockSize + blockMargin) - blockMargin,
   height: blockSize,
 };
----
+</script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width={dimentions.width}
   height={dimentions.height}
   viewBox={`0 0 ${dimentions.width} ${dimentions.height}`}
 >
-  {colors.map((color, i) => (
+  {#each colors as color, i}
     <rect
       x={i * (blockSize + blockMargin)}
       y={0}
@@ -31,7 +30,7 @@ const dimentions = {
       ry={blockRadius}
       style={`--color-fill: ${color}`}
     />
-  ))}
+  {/each}
 </svg>
 
 <style>

diff --git a/...onents/ActivityCalendar/MonthLegend.astro → ...nents/ActivityCalendar/MonthLegend.svelte b/...onents/ActivityCalendar/MonthLegend.astro → ...nents/ActivityCalendar/MonthLegend.svelte
@@ -1,20 +1,21 @@
----
+<script lang="ts">
 import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
 import { getMonthLabels } from "@/utils/github/getActivityCalendar";
 
-interface Props
-  extends Pick<
-    ActivityCalendar,
-    "monthLabels" | "blockSize" | "blockMargin" | "fontSize"
-  > {
+type Props = Pick<
+  ActivityCalendar,
+  "monthLabels" | "blockSize" | "blockMargin" | "fontSize"
+> & {
   weeks: Activity[][];
-}
+};
 
-const { weeks, monthLabels, blockSize, blockMargin, fontSize } = Astro.props;
+const { weeks, monthLabels, blockSize, blockMargin, fontSize }: Props =
+  $props();
 const labels = getMonthLabels(weeks, monthLabels);
----
+</script>
+
 <g>
-  {labels.map(({text, x}) => (
+  {#each labels as {text, x}}
     <text
       x={(blockSize + blockMargin) * x}
       y={0}
@@ -23,7 +24,7 @@ const labels = getMonthLabels(weeks, monthLabels);
     >
       {text}
     </text>
-  ))}
+  {/each}
 </g>
 
 <style>

diff --git a/src/components/ActivityCalendar/index.astro → src/components/ActivityCalendar/index.svelte b/src/components/ActivityCalendar/index.astro → src/components/ActivityCalendar/index.svelte
@@ -1,19 +1,18 @@
----
-import Card from "@/components/ui/Card.astro";
+<script lang="ts">
+import Card from "@/components/ui/Card.svelte";
 import {
   DEFAULT_COLORS,
   DEFAULT_MONTH_LABELS,
 } from "@/constants/activityCalendar";
 import type { Activity, ActivityCalendar } from "@/types/activityCalendar";
 import { parseContributionCalendarDay } from "@/utils/github/getActivityCalendar";
-import CalendarWeek from "./ActivityWeek.astro";
-import ColorsLegend from "./ColorLegend.astro";
-import MonthLegend from "./MonthLegend.astro";
+import CalendarWeek from "./ActivityWeek.svelte";
+import ColorsLegend from "./ColorLegend.svelte";
+import MonthLegend from "./MonthLegend.svelte";
 
-interface Props
-  extends Partial<Omit<ActivityCalendar, "contributionCalendar">> {
+type Props = Partial<Omit<ActivityCalendar, "contributionCalendar">> & {
   contributionCalendar: ActivityCalendar["contributionCalendar"];
-}
+};
 
 const {
   contributionCalendar,
@@ -24,7 +23,7 @@ const {
   hideMonthLabels = false,
   colors = DEFAULT_COLORS,
   monthLabels = DEFAULT_MONTH_LABELS,
-} = Astro.props;
+}: Props = $props();
 
 const { totalContributions, weeks } = contributionCalendar;
 const activityWeeks: Activity[][] = weeks.map((week) => {
@@ -37,7 +36,8 @@ 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>
@@ -48,16 +48,16 @@ const dimentions = {
         height={dimentions.height}
         viewBox={`0 0 ${dimentions.width} ${dimentions.height}`}
       >
-        {!hideMonthLabels && (
+        {#if !hideMonthLabels}
           <MonthLegend
             weeks={activityWeeks}
             {monthLabels}
             {blockSize}
             {blockMargin}
             {fontSize}
           />
-        )}
-        {activityWeeks.map((week, i) => (
+        {/if}
+        {#each activityWeeks as week, i}
           <CalendarWeek
             {week}
             {textHeight}
@@ -67,7 +67,7 @@ const dimentions = {
             translateX={i * (blockSize + blockMargin)}
             {colors}
           />
-        ))}
+        {/each}
       </svg>
     </div>
     <div class="information">

diff --git a/src/components/FeedCard.astro → src/components/FeedCard.svelte b/src/components/FeedCard.astro → src/components/FeedCard.svelte
@@ -1,19 +1,19 @@
----
+<script lang="ts">
 import type { FeedItem } from "../types/feed";
 import { getFaviconSrcFromOrigin } from "../utils/feed";
 import { getTimeFromNow } from "../utils/getTimeFromNow";
-import Card from "./ui/Card.astro";
+import Card from "./ui/Card.svelte";
 
-interface Props extends Pick<FeedItem, "title" | "link" | "dateMiliSeconds"> {}
+type Props = Pick<FeedItem, "title" | "link" | "dateMiliSeconds">;
 
-const { title, link, dateMiliSeconds } = Astro.props;
+const { title, link, dateMiliSeconds }: Props = $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" : ""} class="feed-card">
+<a href={link} target={isExternal ? "_blank" : ""} rel={isExternal ? "noopenner noreferrer" : ""} class="feed-card">
   <Card>
     <div class="feed">
       <time>{timeString}</time>

diff --git a/src/components/FeedList.astro b/src/components/FeedList.astro