feat: add ci

src/components/GoogleyEye.svelte

@@ -92,8 +92,7 @@
 <div
   class="googley-eyes"
   on:click={() => ($visible = !$visible)}
-  role="button"
-  tabindex="0"
+  role="img"
   aria-label="Toggle Googley Eyes"
   aria-hidden="true"
   on:keydown={(ev) => (ev.key === "Enter" ? ($visible = !$visible) : "")}

src/components/HeroCard.astro

@@ -1,7 +1,7 @@
 ---
 import markdownToText from "@helpers/markdownToText";
 import { Card } from "./card";
-import { useTranslatedPath } from "@i18n/utils";
+import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import Image from "@components/Image.astro";
 
 interface Props {
@@ -25,6 +25,7 @@ const {
 } = Astro.props.post;
 
 const translatePath = useTranslatedPath(Astro);
+const t = useTranslations(Astro);
 
 const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
 
@@ -44,7 +45,7 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
     <Card.Description>
       {markdownToText(body).slice(0, 200)}
     </Card.Description>
-    <Card.ReadMoreButton link={link} />
+    <Card.ReadMoreButton link={link} text={t("read-more")} />
   </Card.Content>
   {
     image?.format && (

src/components/Image.astro

@@ -11,8 +11,6 @@ interface Props {
 
 const { src: image, alt, maxWidth } = Astro.props;
 
-console.log({ image, alt, maxWidth });
-
 const sizes = [
   {
     width: 240,

src/components/Nav.astro

@@ -1,6 +1,7 @@
 ---
 import { useTranslations, useTranslatedPath } from "../i18n/utils";
 import Logo from "./Logo.astro";
+import ToggleTheme from "@components/ThemeToggle.svelte";
 
 function isActive(path: string) {
   return Astro.url.pathname === path ? "active" : "";
@@ -10,10 +11,6 @@ const t = useTranslations(Astro);
 const translatePath = useTranslatedPath(Astro);
 
 const paths = [
-  {
-    link: translatePath("/"),
-    component: Logo,
-  },
   {
     link: translatePath("/blog"),
     text: t("nav.blog"),
@@ -33,16 +30,26 @@ const paths = [
 ];
 ---
 
-<ul class="flex my-4 divide-x divide-x-1 divide-x-neutral">
+<ul class="flex my-4 h-12">
+  <li><a href="#main-content" class="skip-link">Skip to main content</a></li>
+  <li
+    class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
+  >
+    <a
+      href={translatePath("/")}
+      class="text-neutral h-9 flex items-center justify-center lowercase"
+    >
+      <Logo />
+    </a>
+  </li>
   {
-    paths.map(({ link, text, component }, i) => (
+    paths.map(({ link, text }, i) => (
       <li
         class={`
           flex items-center flex-1 border-t-1 border-b-1 border-neutral
           ${isActive(link) ? "bg-light" : "bg"}
-          ${i === 1 ? "rounded-bl-md" : ""}
+          ${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
           ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
-          ${component ? "border-none bg-transparent my-2 mr-4 logo" : ""} 
         `}
       >
         <a
@@ -50,20 +57,40 @@ const paths = [
           href={link}
           data-astro-prefetch
         >
-          {component ? <Logo /> : text}
+          {text}
         </a>
       </li>
     ))
   }
+  <li class="w-8 h-6 flex justify-right items-center h-full">
+    <ToggleTheme client:load />
+  </li>
 </ul>
 
 <style>
   ul > li.logo {
     background: none;
     flex: 0;
-    height: 34px;
     margin-left: 0px;
     --fill: #cb5a5a;
     --background-fill: none;
   }
+  /* Visually hide the jump to content button while making it accessible */
+  .skip-link {
+    position: absolute;
+    left: -9999px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  /* Make the jump to content button visible when focused */
+  .skip-link:focus {
+    position: absolute;
+    left: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
 </style>

src/components/ThemeToggle.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  let theme = writable("light");
+
+  onMount(() => {
+    theme.set(localStorage.getItem("theme") || "light");
+  });
+
+  $: if ($theme && "document" in globalThis) {
+    document.documentElement.classList.remove("light", "dark");
+    document.documentElement.classList.add($theme);
+    localStorage.setItem("theme", $theme);
+  }
+
+  function toggleTheme() {
+    console.log($theme);
+    theme.update((t) => (t === "light" ? "dark" : "light"));
+  }
+</script>
+
+<button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
+  {#if $theme === "dark"}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-sun"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+        d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
+      /><path
+        d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+      /></svg
+    >
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.25"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+        d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
+      /></svg
+    >
+  {/if}
+</button>