Begin styling projects page

src/components/MDX/A.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {}
+
+import Link from "@components/Link.astro";
+
+const { href, ...attrs } = Astro.props as Props;
+---
+
+<Link href={href} {...attrs}><slot /></Link>

src/components/MDX/Blockquote.astro

@@ -0,0 +1,7 @@
+<div class="flex w-full items-center">
+  <blockquote
+    class="border-primary mx-auto my-8 max-w-xl border-l-6 py-2 pl-4 italic"
+  >
+    <p class="text-lg font-light"><slot /></p>
+  </blockquote>
+</div>

src/components/MDX/CodeSnippet.astro

@@ -0,0 +1,112 @@
+---
+import { Icon } from "astro-icon/components";
+
+const meta: Record<string, string> = {};
+const {
+  "data-meta": dataMeta,
+  "data-code": dataCode,
+  class: className,
+  ...props
+} = Astro.props;
+
+if (dataMeta) {
+  dataMeta.split(",").forEach((prop: string) => {
+    const tokens = prop.split("=");
+    meta[tokens[0].trim()] = tokens[1];
+  });
+}
+
+const languageIcons: Record<string, string> = {
+  javascript: "mdi:language-javascript"
+};
+
+const languageIcon = languageIcons[props["data-language"]];
+
+const title = meta.title;
+---
+
+<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="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>
+          </div>
+        </div>
+      </figcaption>
+    )
+  }
+
+  <pre
+    class:list={[
+      "py-2",
+      "border-x border-b",
+      "rounded-b",
+      !title ? "rounded-t border-t" : "",
+      className
+    ]}
+    {...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 }}>
+  if (typeof navigator.clipboard !== undefined) {
+    const trigger = document.querySelector("#copy__code");
+
+    trigger.addEventListener("click", () => {
+      // Write the code to clipboard
+      navigator.clipboard.writeText(dataCode);
+    });
+  }
+</script>

src/components/MDX/H1.astro

@@ -0,0 +1 @@
+<h1 class="font-header text-3xl"><slot /></h1>

src/components/MDX/H2.astro

@@ -0,0 +1 @@
+<h2 class="font-header text-2xl"><slot /></h2>

src/components/MDX/H3.astro

@@ -0,0 +1 @@
+<h3 class="font-header text-xl"><slot /></h3>

src/components/MDX/H4.astro

@@ -0,0 +1 @@
+<h4 class="font-header text-lg"><slot /></h4>

src/components/MDX/H5.astro

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

src/components/MDX/H6.astro

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

src/components/MDX/P.astro

@@ -0,0 +1,10 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import Paragraph from "../Paragraph.astro";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { ...attrs } = Astro.props as Props;
+---
+
+<Paragraph className="my-4" {...attrs}><slot /></Paragraph>

src/pages/projects/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import ImageCarousel from "@components/ImageCarousel.astro";
-import SectionTitle from "@components/SectionTitle.astro";
 import MainLayout from "@layouts/MainLayout.astro";
 
 import { getCollection, render } from "astro:content";
@@ -35,6 +34,17 @@ const seoImage: SiteImage = {
   width: hero.width,
   height: hero.height
 };
+
+import A from "@components/MDX/A.astro";
+import Blockquote from "@components/MDX/Blockquote.astro";
+import CodeSnippet from "@components/MDX/CodeSnippet.astro";
+import H1 from "@components/MDX/H1.astro";
+import H2 from "@components/MDX/H2.astro";
+import H3 from "@components/MDX/H3.astro";
+import H4 from "@components/MDX/H4.astro";
+import H5 from "@components/MDX/H5.astro";
+import H6 from "@components/MDX/H6.astro";
+import P from "@components/MDX/P.astro";
 ---
 
 <MainLayout
@@ -61,10 +71,21 @@ const seoImage: SiteImage = {
       </div>
     </section>
     <section id="projects" class="bg-white dark:bg-gray-950">
-      <div <div class="mx-auto max-w-4xl px-8 py-16 text-center">
+      <div <div class="mx-auto max-w-4xl px-8 py-16 text-justify md:text-left">
-        <SectionTitle>{project.data.title}</SectionTitle>
+        <Content
-
+          components={{
-        <Content />
+            p: P,
+            a: A,
+            h1: H1,
+            h2: H2,
+            h3: H3,
+            h4: H4,
+            h5: H5,
+            h6: H6,
+            blockquote: Blockquote,
+            pre: CodeSnippet
+          }}
+        />
       </div>
     </section>
   </div>