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} />