feat: add table of content element

src/components/ImageSlider.svelte

@@ -55,7 +55,7 @@
 </script>
 
 <div
-  class="wrapper grid overflow-hidden rounded-xl border border-light"
+  class="wrapper grid overflow-hidden rounded-xl border border-neutral"
   class:title
   class:not-loaded={!loaded}
   class:loaded

src/components/Max.astro

@@ -10,7 +10,7 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
   <div
     class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
@@ -55,6 +55,21 @@ const t = useTranslations(Astro.url);
     bottom: 0;
     background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
   }
+  .image {
+    filter: brightness(1.1) contrast(0.9);
+  }
+
+  :global(.dark) .image {
+    filter: brightness(0.9);
+  }
+
+  :global(.dark) .image::before {
+    background: linear-gradient(
+      -12deg,
+      var(--background-dark) 0%,
+      transparent 50%
+    );
+  }
 
   .image > :global(img) {
     height: 100%;

src/components/TOC.astro

@@ -0,0 +1,36 @@
+---
+import { useTranslations } from "@i18n/utils";
+import type { MarkdownHeading } from "astro";
+const t = useTranslations(Astro.url);
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+const { headings } = Astro.props;
+---
+
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+  <details
+    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+  >
+    <summary class="text-lg cursor-pointer select-none"
+      >{t("toc.title")}</summary
+    >
+    <div class="flex flex-col gap-[2px] my-2">
+      {
+        headings.map((heading) => {
+          return (
+            <a
+              href={`#${heading.slug}`}
+              style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
+              class={`block text my-0`}
+            >
+              {heading.text}
+            </a>
+          );
+        })
+      }
+    </div>
+  </details>
+</div>