Fix/#12 support under javascript disabled

src/components/ActivityCalendar/ActivityDay.svelte → 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>

src/components/ActivityCalendar/ActivityWeek.svelte → 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,34 +12,25 @@ interface $$Props
   translateX: number;
 }
 
-let {
+const {
   colors = ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
   week,
   textHeight,
   blockMargin,
   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]}
       y={textHeight + (blockSize + blockMargin) * weekday}
       {blockRadius}
       {blockSize}
     />
-  {/each}
+  ))}
 </g>

src/components/ActivityCalendar/ColorLegend.svelte → src/components/ActivityCalendar/ColorLegend.astro

@@ -1,38 +1,37 @@
-<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"
   width={dimentions.width}
   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}
       width={blockSize}
       height={blockSize}
       rx={blockRadius}
       ry={blockRadius}
-      style="--color-fill: {color}"
+      style={`--color-fill: ${color}`}
     />
-  {/each}
+  ))}
 </svg>
 
 <style>

src/components/ActivityCalendar/MonthLegend.svelte → src/components/ActivityCalendar/MonthLegend.astro

@@ -1,23 +1,20 @@
-<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"
   > {
   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>

src/components/ActivityCalendar/index.svelte → 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,17 +48,16 @@ const dimentions = {
         height={dimentions.height}
         viewBox={`0 0 ${dimentions.width} ${dimentions.height}`}
       >
-        {#if !hideMonthLabels}
+        {!hideMonthLabels && (
           <MonthLegend
             weeks={activityWeeks}
             {monthLabels}
             {blockSize}
             {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">

src/components/FeedCard.svelte → 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;
   }
 

src/components/FeedList.svelte → 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>
 

src/components/Hero.svelte → src/components/Hero.astro

@@ -1,41 +1,15 @@
-<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>
     <a href="/blog" title="Blog" data-astro-prefetch>
       <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
@@ -68,9 +42,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>

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;