Abstract theme components to theme folder (#7)

* Move components to theme

* Abstract underlying page layout

* Fix types on web components

* Move search plugin into theme

* Remove console.log

* Move remark plugin config into theme

* Move post components out of theme

These are very site-specific components, so they shouldn't exist in the theme.

Author: jakebellacera

astro.config.mjs

@@ -1,7 +1,6 @@
 import sitemap from "@astrojs/sitemap";
 import { defineConfig, envField } from "astro/config";
-import { remarkCustomDirectives } from "./lib/remarkCustomDirectives";
-import { deltaTheme } from "./lib/delta-theme";
+import { deltaTheme, remarkPlugins } from "./lib/delta-theme";
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,7 +13,7 @@ export default defineConfig({
     validateSecrets: true,
   },
   markdown: {
-    remarkPlugins: [...remarkCustomDirectives],
+    remarkPlugins,
   },
   image: {
     domains: [],

src/components/Button.astro lib/delta-theme/components/Button.astrosrc/components/Button.astro renamed to lib/delta-theme/components/Button.astro

@@ -22,17 +22,24 @@ const { label, toggleClassName } = Astro.props;
 </dropdown-container>
 <script>
   class Dropdown extends HTMLElement {
-    connectedCallback() {
-      const button = this.querySelector("[data-toggle]");
-      const container = this.querySelector("[data-container]");
+    #button: HTMLButtonElement | null = null;
+    #container: HTMLElement | null = null;
+
+    constructor() {
+      super();
 
-      button?.addEventListener("click", () => {
-        if (button.getAttribute("aria-expanded") === "true") {
-          button.setAttribute("aria-expanded", "false");
-          container?.classList.replace("block", "hidden");
+      this.#button = this.querySelector("[data-toggle]");
+      this.#container = this.querySelector("[data-container]");
+    }
+
+    connectedCallback() {
+      this.#button?.addEventListener("click", () => {
+        if (this.#button?.getAttribute("aria-expanded") === "true") {
+          this.#button?.setAttribute("aria-expanded", "false");
+          this.#container?.classList.replace("block", "hidden");
         } else {
-          button.setAttribute("aria-expanded", "true");
-          container?.classList.replace("hidden", "block");
+          this.#button?.setAttribute("aria-expanded", "true");
+          this.#container?.classList.replace("hidden", "block");
         }
       });
     }

src/components/Container.astro …b/delta-theme/components/Container.astrosrc/components/Container.astro renamed to lib/delta-theme/components/Container.astro src/components/Container.astro renamed to lib/delta-theme/components/Container.astro

@@ -2,9 +2,9 @@
 import { site } from "@config/site";
 import type { MenuItem } from "./Menu";
 import { Menu } from "./Menu";
-import Grid from "@components/Grid.astro";
-import Section from "@components/Section.astro";
-import Typography from "@components/Typography.astro";
+import Grid from "./Grid.astro";
+import Section from "./Section.astro";
+import Typography from "./Typography.astro";
 import DeltaLogo from "./assets/delta-lake-logo.svg";
 import LinuxFoundationLogo from "./assets/the-linux-foundation-projects.svg";
 import { Image } from "astro:assets";

src/components/Dropdown.astro lib/delta-theme/components/Dropdown.astrosrc/components/Dropdown.astro renamed to lib/delta-theme/components/Dropdown.astro

@@ -1,7 +1,7 @@
 ---
 import clsx from "clsx";
 import type { ComponentProps } from "astro/types";
-import Icon from "@components/Icon.astro";
+import Icon from "./Icon.astro";
 
 type IconType = ComponentProps<typeof Icon>["icon"];
 

src/components/Footer.astro lib/delta-theme/components/Footer.astrosrc/components/Footer.astro renamed to lib/delta-theme/components/Footer.astro

@@ -1,12 +1,12 @@
 ---
 import { site } from "@config/site";
-import Section from "@components/Section.astro";
-import Icon from "@components/Icon.astro";
+import Section from "../Section.astro";
+import Icon from "../Icon.astro";
 import { Menu } from "../Menu";
 import HeaderButton from "./HeaderButton.astro";
 import Search from "./Search.astro";
-import DeltaLogo from "@components/assets/delta-lake-logo.svg";
-import LinuxFoundationLogo from "@components/assets/the-linux-foundation-projects.svg";
+import DeltaLogo from "../assets/delta-lake-logo.svg";
+import LinuxFoundationLogo from "../assets/the-linux-foundation-projects.svg";
 import { Image } from "astro:assets";
 ---
 
@@ -136,18 +136,20 @@ import { Image } from "astro:assets";
     }
 
     connectedCallback() {
-      this.#openButton.addEventListener("click", () => this.#toggleMenu());
-      this.#closeButton.addEventListener("click", () => this.#toggleMenu());
-      this.#backdrop.addEventListener("click", () => this.#toggleMenu());
+      this.#openButton?.addEventListener("click", () => this.#toggleMenu());
+      this.#closeButton?.addEventListener("click", () => this.#toggleMenu());
+      this.#backdrop?.addEventListener("click", () => this.#toggleMenu());
     }
 
     #toggleMenu() {
-      const state = this.#menuWrapper.dataset.toggled;
+      if (this.#menuWrapper) {
+        const state = this.#menuWrapper.dataset.toggled;
 
-      if (state === "true") {
-        this.#menuWrapper.dataset.toggled = "false";
-      } else {
-        this.#menuWrapper.dataset.toggled = "true";
+        if (state === "true") {
+          this.#menuWrapper.dataset.toggled = "false";
+        } else {
+          this.#menuWrapper.dataset.toggled = "true";
+        }
       }
     }
   }

src/components/FormField.astro …b/delta-theme/components/FormField.astrosrc/components/FormField.astro renamed to lib/delta-theme/components/FormField.astro src/components/FormField.astro renamed to lib/delta-theme/components/FormField.astro

@@ -1,8 +1,8 @@
 ---
 import "@pagefind/default-ui/css/ui.css";
-import Icon from "@components/Icon.astro";
-import Modal from "@components/Modal.astro";
-import Typography from "@components/Typography.astro";
+import Icon from "../Icon.astro";
+import Modal from "../Modal.astro";
+import Typography from "../Typography.astro";
 import HeaderButton from "./HeaderButton.astro";
 ---
 
@@ -145,31 +145,31 @@ import HeaderButton from "./HeaderButton.astro";
 </script>
 <script>
   class SearchContainer extends HTMLElement {
-    isModalOpen() {
+    #modal: HTMLDialogElement | null = null;
+    #button: HTMLButtonElement | null = null;
+
+    constructor() {
+      super();
+
       const modalId = this.dataset.modalId;
-      const modal = this.querySelector(`#${modalId}`);
+      this.#modal = this.querySelector(`#${modalId}`);
+      this.#button = this.querySelector(".header-open-search-modal");
+    }
 
-      return modal.open;
+    isModalOpen() {
+      return this.#modal?.open;
     }
 
     openModal() {
-      const modalId = this.dataset.modalId;
-      const modal = this.querySelector(`#${modalId}`);
-
-      modal.showModal();
+      this.#modal?.showModal();
     }
 
     closeModal() {
-      const modalId = this.dataset.modalId;
-      const modal = this.querySelector(`#${modalId}`);
-
-      modal.close();
+      this.#modal?.close();
     }
 
     connectedCallback() {
-      const button = this.querySelector(".header-open-search-modal");
-
-      button.addEventListener("click", () => {
+      this.#button?.addEventListener("click", () => {
         this.openModal();
       });