Better slugs, improvements to projects, some fixes

src/components/MDX/CodeSnippet.astro

@@ -23,19 +23,23 @@ const languageIcons: Record<string, string> = {
 const languageIcon = languageIcons[props["data-language"]];
 
 const title = meta.title;
+
+const copyID = Math.random().toString(36);
 ---
 
 <figure class="my-4 rounded-b">
   {
     title && (
       <figcaption>
-        <div class="bg-primary w-full rounded-t-md border-1 border-black px-4 py-2 text-white">
+        <div class="bg-primary w-full rounded-t-md border-1 border-gray-600 px-4 py-2 text-white">
           <div class="flex justify-between">
             <div class="flex items-center justify-between gap-2 font-bold">
               {languageIcon && <Icon name={languageIcon} />}
               <p>{title}</p>
             </div>
-            <button id="copy__code">Copy Code</button>
+            <button class="font-bold" id=`copy-${copyID}`>
+              Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
+            </button>
           </div>
         </div>
       </figcaption>
@@ -44,8 +48,7 @@ const title = meta.title;
 
   <pre
     class:list={[
-      "py-2",
-      "border-x border-b",
+      "border-x border-b border-gray-600",
       "rounded-b",
       !title ? "rounded-t border-t" : "",
       className
@@ -53,59 +56,11 @@ const title = meta.title;
     {...props}><slot /></pre>
 </figure>
 
-<style is:global>
-  .astro-code {
-    overflow-x: auto;
-  }
-
-  .astro-code code {
-    /* Define a counter for each <code> inside .astro-code */
-    counter-reset: step;
-    /* Start from zero, increment the counter */
-    counter-increment: step 0;
-
-    font-size: 14px;
-
-    width: fit-content;
-    min-width: 100%;
-    display: block;
-  }
-
-  .astro-code code .line {
-    display: inline-block;
-    width: 100%;
-    padding-right: 2rem;
-  }
-
-  .astro-code code .line::before {
-    content: counter(step);
-    counter-increment: step;
-    width: 2rem;
-    margin-right: 1.25rem;
-    display: inline-block;
-    margin-left: auto;
-    text-align: right;
-
-    /* Fix element position during horizontal scroll */
-    position: sticky;
-    left: 0;
-    z-index: 1;
-
-    /* Give a bit of space to counter on horizontal scroll */
-    padding-right: 0.25rem;
-
-    /* Illustrative purpose, please extract the value from the theme instead */
-    background-color: white;
-    color: hsla(0, 0%, 0%, 0.5);
-  }
-</style>
-
-<script define:vars={{ dataCode }}>
+<script define:vars={{ dataCode, copyID }}>
   if (typeof navigator.clipboard !== undefined) {
-    const trigger = document.querySelector("#copy__code");
+    const trigger = document.getElementById(`copy-${copyID}`);
 
     trigger.addEventListener("click", () => {
-      // Write the code to clipboard
       navigator.clipboard.writeText(dataCode);
     });
   }

src/components/MDX/H5.astro

@@ -1 +1 @@
-<h5 class="font-base text-base font-bold"><slot /></h5>
+<h5 class="text-lg font-bold"><slot /></h5>

src/components/MDX/H6.astro

@@ -1 +1 @@
-<h6 class="font-base text-base underline"><slot /></h6>
+<h6 class="text-base font-bold"><slot /></h6>

src/components/MDX/IMG.astro

@@ -0,0 +1,10 @@
+---
+import Image from "astro/components/Image.astro";
+const { src, alt } = Astro.props;
+
+import { getImageByPath } from "@lib/utils";
+
+const imageSRC = getImageByPath(src)!;
+---
+
+<Image src={imageSRC} alt={alt} />

src/components/Navbar.astro

@@ -112,10 +112,18 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 </script>
 
 <script>
-  let nav: HTMLElement;
-  let toggle: HTMLElement;
+  let nav: HTMLElement | null;
+  let toggle: HTMLElement | null;
 
   const checkScroll = () => {
+    if (!nav) {
+      nav = document.getElementById("nav");
+    }
+
+    if (!nav) {
+      return;
+    }
+
     nav.setAttribute(
       "data-transparency",
       window.scrollY === 0 && window.navbarDisplay === "transparent"
@@ -125,14 +133,19 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
   };
 
   document.addEventListener("astro:page-load", () => {
-    nav = document.getElementById("nav")!;
-    toggle = document.getElementById("menu-toggle")!;
+    nav = document.getElementById("nav");
+    toggle = document.getElementById("menu-toggle");
 
-    toggle.addEventListener("click", () => {
-      const visible = nav.getAttribute("data-mobile-menu") === "visible";
-      nav.setAttribute("data-mobile-menu", visible ? "hidden" : "visible");
-      checkScroll();
-    });
+    if (toggle) {
+      toggle.addEventListener("click", () => {
+        if (nav) {
+          const visible = nav.getAttribute("data-mobile-menu") === "visible";
+          nav.setAttribute("data-mobile-menu", visible ? "hidden" : "visible");
+        }
+
+        checkScroll();
+      });
+    }
 
     checkScroll();
   });

src/components/ProjectCard.astro

@@ -8,6 +8,8 @@ import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 
+import { slugify } from '@lib/utils';
+
 interface Props {
   project: CollectionEntry<"projects">;
   textOn?: "left" | "right";
@@ -130,7 +132,7 @@ const projectHasBody = project.body && project.body.trim().length > 0;
   >
     <span
       ><h2 class="font-header-alt inline-block text-lg font-semibold">
-        {projectHasBody && <TextLink href=`/projects/${project.id}/`>{project.data.title}</TextLink>}{!projectHasBody && project.data.title }{!project.data.ongoing && <span class="italic text-sm font-light"> ({project.data.date.getFullYear()})</span>}</h2></span
+        {projectHasBody && <TextLink href=`/projects/${slugify(project.data.type)}/${slugify(project.data.slug)}/`>{project.data.title}</TextLink>}{!projectHasBody && project.data.title }{!project.data.ongoing && <span class="italic text-sm font-light"> ({project.data.date.getFullYear()})</span>}</h2></span
     >
     <h3 class="font-header-alt font-base font-medium">
       {project.data.role}