initial commit

src/components/Section.astro

@@ -0,0 +1,83 @@
+---
+import { slugify } from "../utils";
+interface Props {
+  title: string;
+  hasBorder?: boolean;
+}
+
+const { title, hasBorder } = Astro.props;
+---
+
+<astro-section id={slugify(title)} class="group">
+  <abbr title="Press to open">
+    <h2
+      class="text-lg md:text-xl text-white lowercase transition-colors opacity-60 hover:text-secondary hover:cursor-pointer hover:opacity-80 group-[.open]:text-secondary group-[.open]:underline group-[.open]:opacity-100"
+    >
+      {title}
+    </h2>
+  </abbr>
+
+  <div
+    class={`text-white h-full max-h-0 overflow-hidden transition-max-height duration-300 ease-in-out ${
+      hasBorder ? "md:border-l-4 md:pl-4" : ""
+    }`}
+  >
+    <slot />
+  </div>
+</astro-section>
+
+<script>
+  class Section extends HTMLElement {
+    container: HTMLElement;
+
+    constructor() {
+      super();
+
+      const container = this.querySelector("div");
+      if (!container) {
+        throw new Error("No container found");
+      }
+
+      this.container = container;
+
+      const trigger = this.querySelector("h2");
+
+      if (!trigger) {
+        throw new Error("No trigger found");
+      }
+
+      trigger.addEventListener("click", () => {
+        // Close all other sections
+        document
+          .querySelectorAll(`astro-section:not(#${this.id})`)
+          .forEach((section) => {
+            const container = section.querySelector("div");
+            if (!container) {
+              throw new Error("No container found");
+            }
+
+            this.collapse(section, container);
+          });
+
+        // Check if the section is open
+        if (this.classList.contains("open")) {
+          this.collapse(this, this.container);
+        } else {
+          this.extend(this, this.container);
+        }
+      });
+    }
+
+    extend(section: Element, container: HTMLElement) {
+      container.style.maxHeight = "1000vh";
+      section.classList.add("open");
+    }
+
+    collapse(section: Element, container: HTMLElement) {
+      container.style.maxHeight = "0";
+      section.classList.remove("open");
+    }
+  }
+
+  customElements.define("astro-section", Section);
+</script>