Remove semicolons

.eslintrc.js

@@ -20,4 +20,4 @@ module.exports = {
       rules: {},
     },
   ],
-};
+}

.prettierrc

@@ -1,6 +1,6 @@
 {
   "arrowParens": "avoid",
-  "semi": true,
+  "semi": false,
   "tabWidth": 2,
   "printWidth": 80,
   "singleQuote": false,

astro.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
-import react from "@astrojs/react";
-import remarkToc from "remark-toc";
-import remarkCollapse from "remark-collapse";
-import sitemap from "@astrojs/sitemap";
-import { SITE } from "./src/config";
+import { defineConfig } from "astro/config"
+import tailwind from "@astrojs/tailwind"
+import react from "@astrojs/react"
+import remarkToc from "remark-toc"
+import remarkCollapse from "remark-collapse"
+import sitemap from "@astrojs/sitemap"
+import { SITE } from "./src/config"
 
 // https://astro.build/config
 export default defineConfig({
@@ -37,4 +37,4 @@ export default defineConfig({
     },
   },
   scopedStyleStrategy: "where",
-});
+})

public/toggle-theme.js

@@ -1,76 +1,76 @@
-const primaryColorScheme = ""; // "light" | "dark"
+const primaryColorScheme = "" // "light" | "dark"
 
 // Get theme data from local storage
-const currentTheme = localStorage.getItem("theme");
+const currentTheme = localStorage.getItem("theme")
 
 function getPreferTheme() {
   // return theme value in local storage if it is set
-  if (currentTheme) return currentTheme;
+  if (currentTheme) return currentTheme
 
   // return primary color scheme if it is set
-  if (primaryColorScheme) return primaryColorScheme;
+  if (primaryColorScheme) return primaryColorScheme
 
   // return user device's prefer color scheme
   return window.matchMedia("(prefers-color-scheme: dark)").matches
     ? "dark"
-    : "light";
+    : "light"
 }
 
-let themeValue = getPreferTheme();
+let themeValue = getPreferTheme()
 
 function setPreference() {
-  localStorage.setItem("theme", themeValue);
-  reflectPreference();
+  localStorage.setItem("theme", themeValue)
+  reflectPreference()
 }
 
 function reflectPreference() {
-  document.firstElementChild.setAttribute("data-theme", themeValue);
+  document.firstElementChild.setAttribute("data-theme", themeValue)
 
-  document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
+  document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue)
 
   // Get a reference to the body element
-  const body = document.body;
+  const body = document.body
 
   // Check if the body element exists before using getComputedStyle
   if (body) {
     // Get the computed styles for the body element
-    const computedStyles = window.getComputedStyle(body);
+    const computedStyles = window.getComputedStyle(body)
 
     // Get the background color property
-    const bgColor = computedStyles.backgroundColor;
+    const bgColor = computedStyles.backgroundColor
 
     // Set the background color in <meta theme-color ... />
     document
       .querySelector("meta[name='theme-color']")
-      ?.setAttribute("content", bgColor);
+      ?.setAttribute("content", bgColor)
   }
 }
 
 // set early so no page flashes / CSS is made aware
-reflectPreference();
+reflectPreference()
 
 window.onload = () => {
   function setThemeFeature() {
     // set on load so screen readers can get the latest value on the button
-    reflectPreference();
+    reflectPreference()
 
     // now this script can find and listen for clicks on the control
     document.querySelector("#theme-btn")?.addEventListener("click", () => {
-      themeValue = themeValue === "light" ? "dark" : "light";
-      setPreference();
-    });
+      themeValue = themeValue === "light" ? "dark" : "light"
+      setPreference()
+    })
   }
 
-  setThemeFeature();
+  setThemeFeature()
 
   // Runs on view transitions navigation
-  document.addEventListener("astro:after-swap", setThemeFeature);
-};
+  document.addEventListener("astro:after-swap", setThemeFeature)
+}
 
 // sync with system changes
 window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", ({ matches: isDark }) => {
-    themeValue = isDark ? "dark" : "light";
-    setPreference();
-  });
+    themeValue = isDark ? "dark" : "light"
+    setPreference()
+  })

src/assets/socialIcons.ts

@@ -217,6 +217,6 @@ const socialIcons = {
   q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
   q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z" />
   </svg>`,
-};
+}
 
-export default socialIcons;
+export default socialIcons

src/components/Breadcrumbs.astro

@@ -1,15 +1,15 @@
 ---
 // Remove current url path and remove trailing slash if exists
-const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
+const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "")
 
 // Get url array from path
 // eg: /tags/tailwindcss => ['tags', 'tailwindcss']
-const breadcrumbList = currentUrlPath.split("/").slice(1);
+const breadcrumbList = currentUrlPath.split("/").slice(1)
 
 // if breadcrumb is Home > blog > 1 <etc>
 // replace blog with blog (page number)
 breadcrumbList[0] === "blog" &&
-  breadcrumbList.splice(0, 2, `blog (page ${breadcrumbList[1] || 1})`);
+  breadcrumbList.splice(0, 2, `blog (page ${breadcrumbList[1] || 1})`)
 
 // if breadcrumb is Home > Tags > [tag] > [page] <etc>
 // replace [tag] > [page] with [tag] (page number)
@@ -21,7 +21,7 @@ breadcrumbList[0] === "tags" &&
     `${breadcrumbList[1]} ${
       Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"
     }`
-  );
+  )
 ---
 
 <nav class="breadcrumb" aria-label="breadcrumb">

src/components/Card.tsx

@@ -1,20 +1,20 @@
-import { slugifyStr } from "@utils/slugify";
-import Datetime from "./Datetime";
-import type { CollectionEntry } from "astro:content";
+import { slugifyStr } from "@utils/slugify"
+import Datetime from "./Datetime"
+import type { CollectionEntry } from "astro:content"
 
 export interface Props {
-  href?: string;
-  frontmatter: CollectionEntry<"blog">["data"];
-  secHeading?: boolean;
+  href?: string
+  frontmatter: CollectionEntry<"blog">["data"]
+  secHeading?: boolean
 }
 
 export default function Card({ href, frontmatter, secHeading = true }: Props) {
-  const { title, pubDatetime, modDatetime, description } = frontmatter;
+  const { title, pubDatetime, modDatetime, description } = frontmatter
 
   const headerProps = {
     style: { viewTransitionName: slugifyStr(title) },
     className: "text-xl font-medium decoration-dashed hover:underline",
-  };
+  }
 
   return (
     <li className="my-6">
@@ -30,5 +30,5 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
       </a>
       <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
     </li>
-  );
+  )
 }

src/components/Datetime.tsx

@@ -1,13 +1,13 @@
-import { LOCALE } from "@config";
+import { LOCALE } from "@config"
 
 interface DatetimesProps {
-  pubDatetime: string | Date;
-  modDatetime: string | Date | undefined | null;
+  pubDatetime: string | Date
+  modDatetime: string | Date | undefined | null
 }
 
 interface Props extends DatetimesProps {
-  size?: "sm" | "lg";
-  className?: string;
+  size?: "sm" | "lg"
+  className?: string
 }
 
 export default function Datetime({
@@ -42,24 +42,24 @@ export default function Datetime({
         />
       </span>
     </div>
-  );
+  )
 }
 
 const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
   const myDatetime = new Date(
     modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
-  );
+  )
 
   const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
     year: "numeric",
     month: "short",
     day: "numeric",
-  });
+  })
 
   const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
     hour: "2-digit",
     minute: "2-digit",
-  });
+  })
 
   return (
     <>
@@ -68,5 +68,5 @@ const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
       <span className="sr-only">&nbsp;at&nbsp;</span> */}
       {/* <span className="text-nowrap">{time}</span> */}
     </>
-  );
-};
+  )
+}

src/components/Footer.astro

@@ -1,12 +1,12 @@
 ---
-import Hr from "./Hr.astro";
-import Socials from "./Socials.astro";
+import Hr from "./Hr.astro"
+import Socials from "./Socials.astro"
 
 export interface Props {
-  noMarginTop?: boolean;
+  noMarginTop?: boolean
 }
 
-const { noMarginTop = false } = Astro.props;
+const { noMarginTop = false } = Astro.props
 ---
 
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>

src/components/Header.astro

@@ -1,13 +1,13 @@
 ---
-import { LOGO_IMAGE, SITE } from "@config";
-import Hr from "./Hr.astro";
-import LinkButton from "./LinkButton.astro";
+import { LOGO_IMAGE, SITE } from "@config"
+import Hr from "./Hr.astro"
+import LinkButton from "./LinkButton.astro"
 
 export interface Props {
-  activeNav?: "blog" | "tags" | "about" | "search" | "talks";
+  activeNav?: "blog" | "tags" | "about" | "search" | "talks"
 }
 
-const { activeNav } = Astro.props;
+const { activeNav } = Astro.props
 ---
 
 <header>
@@ -241,24 +241,24 @@ const { activeNav } = Astro.props;
 <script>
   function toggleNav() {
     // Toggle menu
-    const menuBtn = document.querySelector(".hamburger-menu");
-    const menuIcon = document.querySelector(".menu-icon");
-    const menuItems = document.querySelector("#menu-items");
+    const menuBtn = document.querySelector(".hamburger-menu")
+    const menuIcon = document.querySelector(".menu-icon")
+    const menuItems = document.querySelector("#menu-items")
 
     menuBtn?.addEventListener("click", () => {
-      const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
-      menuIcon?.classList.toggle("is-active");
-      menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
+      const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true"
+      menuIcon?.classList.toggle("is-active")
+      menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true")
       menuBtn.setAttribute(
         "aria-label",
         menuExpanded ? "Open Menu" : "Close Menu"
-      );
-      menuItems?.classList.toggle("display-none");
-    });
+      )
+      menuItems?.classList.toggle("display-none")
+    })
   }
 
-  toggleNav();
+  toggleNav()
 
   // Runs on view transitions navigation
-  document.addEventListener("astro:after-swap", toggleNav);
+  document.addEventListener("astro:after-swap", toggleNav)
 </script>

src/components/Hr.astro

@@ -1,10 +1,10 @@
 ---
 export interface Props {
-  noPadding?: boolean;
-  ariaHidden?: boolean;
+  noPadding?: boolean
+  ariaHidden?: boolean
 }
 
-const { noPadding = false, ariaHidden = true } = Astro.props;
+const { noPadding = false, ariaHidden = true } = Astro.props
 ---
 
 <div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>

src/components/LinkButton.astro

@@ -1,13 +1,13 @@
 ---
 export interface Props {
-  href: string;
-  className?: string;
-  ariaLabel?: string;
-  title?: string;
-  disabled?: boolean;
+  href: string
+  className?: string
+  ariaLabel?: string
+  title?: string
+  disabled?: boolean
 }
 
-const { href, className, ariaLabel, title, disabled = false } = Astro.props;
+const { href, className, ariaLabel, title, disabled = false } = Astro.props
 ---
 
 {