Started refactoring, added prettier and checks and reformatted project, added cspell and checks and custom project words, beginning of robotic oceanographic surface sampler content

2025-11-30 15:48:36 -08:00
parent 67eb549ed2
commit 4a59e44716
83 changed files with 3246 additions and 1643 deletions
--- a/src/components/CustomCarousel/CustomCarousel.astro
+++ b/src/components/CustomCarousel/CustomCarousel.astro
@@ -1,117 +0,0 @@
---
-import {Image} from 'astro:assets';
-
-import type {carouselGroup} from "@interfaces/image-carousel.ts";
-
-const groupToShow: carouselGroup = Astro.props.carouselGroup;
---
-
-<custom-carousel class="flex flex-col relative w-full"
-                 data-custom-carousel={groupToShow.animation}
-                 data-custom-carousel-interval={groupToShow.interval}>
-    <!-- Modal for fullscreen viewing -->
-    <div tabindex="-1" aria-hidden="true"
-         class="hidden fixed z-100 justify-center items-center w-full inset-0"
-         data-custom-carousel-modal>
-        <div class="relative p-4 w-full h-full">
-            <!-- Modal content -->
-            <div class="relative h-full max-h-screen max-w-screen bg-black rounded-lg shadow-sm border-2 border-caperren-green">
-                <!-- Modal header -->
-                <div class="flex items-center justify-between p-1 rounded-t">
-                    <button type="button"
-                            class="z-100 text-caperren-green bg-transparent ring-2 ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light rounded-lg text-sm size-8 ms-auto inline-flex justify-center items-center"
-                            data-custom-carousel-modal-hide>
-                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                             viewBox="0 0 14 14">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                        </svg>
-                        <span class="sr-only">Close modal</span>
-                    </button>
-                </div>
-                <!-- Modal body -->
-                <div class="flex items-center justify-center overflow-hidden h-full w-full"
-                     data-custom-carousel-modal-image/>
-            </div>
-        </div>
-    </div>
-
-    <!-- Carousel wrapper -->
-    <div class="relative overflow-hidden w-full h-56 md:h-120">
-        {
-            groupToShow.images.map((image, index) => (
-                    <div class="hidden duration-1500 ease-in-out" data-custom-carousel-item={index}>
-                        <Image src={image}
-                               class="absolute inset-0 m-auto h-full w-auto max-h-full max-w-full object-contain"
-                               alt="..."
-                               layout='constrained'
-                               loading="eager"/>
-                    </div>
-            ))
-        }
-    </div>
-
-    {(groupToShow.images.length > 1) && (
-        <!-- Slider indicators -->
-            <div class="absolute z-30 flex -translate-x-1/2 bottom-2 left-1/2 space-x-3 rounded-full">
-                {
-                    groupToShow.images.map((_, index) => (
-                            <button type="button"
-                                    class="w-3 h-3 rounded-full bg-black hover:bg-caperren-green-light"
-                                    aria-current={index ? "false" : "true"}
-                                    aria-label={index.toString()}
-                                    data-custom-carousel-slide-to={index}></button>
-                    ))
-                }
-            </div>
-        <!-- Slider controls -->
-            <button
-                    type="button"
-                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
-                    data-custom-carousel-prev
-            >
-        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
-            <svg
-                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 6 10"
-            >
-                <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 1 1 5l4 4"
-                />
-            </svg>
-            <span class="hidden">Previous</span>
-        </span>
-            </button>
-            <button
-                    type="button"
-                    class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
-                    data-custom-carousel-next
-            >
-        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
-            <svg
-                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light "
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 6 10"
-            >
-                <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m1 9 4-4-4-4"
-                />
-            </svg>
-            <span class="hidden">Next</span>
-        </span>
-            </button>
-    )}
-</custom-carousel>
-
-<script src="./custom-carousel.ts"/>
--- a/src/components/CustomCarousel/custom-carousel.ts
+++ b/src/components/CustomCarousel/custom-carousel.ts
@@ -1,100 +0,0 @@
-import {
-    Carousel,
-    type CarouselItem,
-    type CarouselInterface,
-    type CarouselOptions,
-    type IndicatorItem,
-    Modal,
-    type ModalInterface,
-} from 'flowbite';
-
-class CustomCarousel extends HTMLElement {
-    _slide: boolean;
-    _items: CarouselItem[];
-    _options: CarouselOptions;
-    _carousel: CarouselInterface;
-
-    _modalEl: HTMLElement;
-    _modal: ModalInterface;
-
-    constructor() {
-        super();
-
-        this._slide = this.getAttribute('data-custom-carousel') === 'slide';
-        this._items = this._getItems();
-        this._options = this._getOptions();
-        this._carousel = new Carousel(this, this._items, this._options);
-
-        if (this._slide && this._items.length > 0) this._carousel.cycle();
-
-        this._modalEl = this.querySelector('[data-custom-carousel-modal]') as HTMLElement || undefined;
-        this._modal = new Modal(this._modalEl);
-
-        window.addEventListener("load", this._attachHandlers);
-
-    }
-
-    _getItems = (): CarouselItem[] => {
-        let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
-
-        return Array.from(customItems).map(
-            (item): CarouselItem => {
-                return {
-                    el: item as HTMLElement,
-                    position: Number(item.getAttribute("data-custom-carousel-item"))
-                }
-            }
-        )
-    }
-
-    _getOptions = (): CarouselOptions => {
-        let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
-
-        return {
-            defaultPosition: 0,
-            interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
-
-            indicators: {
-                activeClasses: 'border-2 border-caperren-green bg-black',
-                inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
-                items: Array.from(customIndicators).map(
-                    (item, index): IndicatorItem => {
-                        return {
-                            el: item as HTMLElement,
-                            position: Number(item.getAttribute('data-custom-carousel-slide-to'))
-                        }
-                    }
-                )
-            }
-        }
-    }
-
-
-    _attachHandlers = (): void => {
-        // Carousel controls
-        this.querySelector(
-            '[data-custom-carousel-next]'
-        )?.addEventListener('click', () => this._carousel.next());
-        this.querySelector(
-            '[data-custom-carousel-prev]'
-        )?.addEventListener('click', () => this._carousel.prev());
-
-        // Close fullscreen modal
-        this._modalEl.querySelector('[data-custom-carousel-modal-hide]')?.addEventListener('click', () => this._modal.hide())
-
-        // Click to open fullscreen modal
-        this._items.forEach((item) => {
-            item.el.addEventListener('click', () => {
-                const imgCloned = item.el.querySelector('img')?.cloneNode() as Node;
-                const imageDiv = this._modalEl.querySelector('[data-custom-carousel-modal-image]') as HTMLElement || undefined;
-
-                imageDiv.innerHTML = '';
-                imageDiv?.appendChild(imgCloned);
-
-                this._modal.show();
-            })
-        })
-    }
-}
-
-customElements.define('custom-carousel', CustomCarousel)
--- a/src/components/CustomHtmlWrappers/H2.astro
+++ b/src/components/CustomHtmlWrappers/H2.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<h2 class="my-4 font-bold md:text-2xl">{Astro.props.text}</h2>
--- a/src/components/CustomHtmlWrappers/H3.astro
+++ b/src/components/CustomHtmlWrappers/H3.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+<h3 class="my-4 font-bold md:text-lg">{Astro.props.text}</h3>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,7 +1,10 @@
 ---
---

-<footer class="z-50 w-full max-w-full px-6 py-2 bg-black border-t border-t-caperren-green-dark text-caperren-green-dark text-sm flex items-center justify-between">
-    <span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
-    <span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}</span>
+---
+
+<footer
+  class="border-t-caperren-green-dark text-caperren-green-dark z-50 flex w-full max-w-full items-center justify-between border-t bg-black px-6 py-2 text-sm"
+>
+  <span>{import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"}</span>
+  <span>{import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}</span>
 </footer>
--- a/src/components/LinkButton.astro
+++ b/src/components/LinkButton.astro
@@ -0,0 +1,11 @@
+---
+
+---
+
+<a
+  class="text-caperren-green border-caperren-green hover:border-caperren-green-light hover:text-caperren-green-light rounded-2xl border-2 bg-black p-2"
+  href={Astro.props.href}
+  target={Astro.props.target || "_blank"}
+>
+  {Astro.props.title}
+</a>
--- a/src/components/Media/CustomCarousel/CustomCarousel.astro
+++ b/src/components/Media/CustomCarousel/CustomCarousel.astro
@@ -0,0 +1,145 @@
+---
+import { Image } from "astro:assets";
+
+import type { carouselGroup } from "@interfaces/image-carousel.ts";
+
+const groupToShow: carouselGroup = Astro.props.carouselGroup;
+---
+
+<custom-carousel
+  class="relative flex w-full flex-col"
+  data-custom-carousel={groupToShow.animation}
+  data-custom-carousel-interval={groupToShow.interval}
+>
+  <!-- Modal for fullscreen viewing -->
+  <div
+    tabindex="-1"
+    aria-hidden="true"
+    class="fixed inset-0 z-100 hidden w-full items-center justify-center"
+    data-custom-carousel-modal
+  >
+    <div class="relative h-full w-full p-4">
+      <!-- Modal content -->
+      <div
+        class="border-caperren-green relative h-full max-h-screen max-w-screen rounded-lg border-2 bg-black shadow-sm"
+      >
+        <!-- Modal header -->
+        <div class="flex items-center justify-between rounded-t p-1">
+          <button
+            type="button"
+            class="text-caperren-green ring-caperren-green-dark hover:ring-caperren-green-light hover:text-caperren-green-light z-100 ms-auto inline-flex size-8 items-center justify-center rounded-lg bg-transparent text-sm ring-2"
+            data-custom-carousel-modal-hide
+          >
+            <svg
+              class="h-3 w-3"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 14 14"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="flex h-full w-full items-center justify-center overflow-hidden"
+          data-custom-carousel-modal-image
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Carousel wrapper -->
+  <div class="relative h-56 w-full overflow-hidden md:h-120">
+    {
+      groupToShow.images.map((image, index) => (
+        <div
+          class="hidden duration-1500 ease-in-out"
+          data-custom-carousel-item={index}
+        >
+          <Image
+            src={image}
+            class="absolute inset-0 m-auto h-full max-h-full w-auto max-w-full object-contain"
+            alt="..."
+            layout="constrained"
+            loading="eager"
+          />
+        </div>
+      ))
+    }
+  </div>
+
+  <!-- Slider indicators -->
+  {
+    groupToShow.images.length > 1 && (
+      <div>
+        <div class="absolute bottom-2 left-1/2 z-30 flex -translate-x-1/2 space-x-3 rounded-full">
+          {groupToShow.images.map((_, index) => (
+            <button
+              type="button"
+              class="hover:bg-caperren-green-light h-3 w-3 rounded-full bg-black"
+              aria-current={index ? "false" : "true"}
+              aria-label={index.toString()}
+              data-custom-carousel-slide-to={index}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          class="group absolute start-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-prev
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M5 1 1 5l4 4"
+              />
+            </svg>
+            <span class="hidden">Previous</span>
+          </span>
+        </button>
+        <button
+          type="button"
+          class="group absolute end-0 top-0 z-30 flex h-full cursor-pointer items-center justify-center px-4 focus:outline-none"
+          data-custom-carousel-next
+        >
+          <span class="ring-caperren-green/25 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/25 ring-2 group-hover:bg-black/75">
+            <svg
+              class="text-caperren-green group-hover:text-caperren-green-light h-4 w-4"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 6 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m1 9 4-4-4-4"
+              />
+            </svg>
+            <span class="hidden">Next</span>
+          </span>
+        </button>
+      </div>
+    )
+  }
+</custom-carousel>
+
+<script src="./custom-carousel.ts"></script>
--- a/src/components/Media/CustomCarousel/custom-carousel.ts
+++ b/src/components/Media/CustomCarousel/custom-carousel.ts
@@ -0,0 +1,111 @@
+import {
+  Carousel,
+  type CarouselItem,
+  type CarouselInterface,
+  type CarouselOptions,
+  type IndicatorItem,
+  Modal,
+  type ModalInterface,
+} from "flowbite";
+
+class CustomCarousel extends HTMLElement {
+  _slide: boolean;
+  _items: CarouselItem[];
+  _options: CarouselOptions;
+  _carousel: CarouselInterface;
+
+  _modalEl: HTMLElement;
+  _modal: ModalInterface;
+
+  constructor() {
+    super();
+
+    this._slide = this.getAttribute("data-custom-carousel") === "slide";
+    this._items = this._getItems();
+    this._options = this._getOptions();
+    this._carousel = new Carousel(this, this._items, this._options);
+
+    if (this._slide && this._items.length > 0) this._carousel.cycle();
+
+    this._modalEl =
+      (this.querySelector("[data-custom-carousel-modal]") as HTMLElement) ||
+      undefined;
+    this._modal = new Modal(this._modalEl);
+
+    window.addEventListener("load", this._attachHandlers);
+  }
+
+  _getItems = (): CarouselItem[] => {
+    let customItems =
+      this.querySelectorAll("[data-custom-carousel-item]") || [];
+
+    return Array.from(customItems).map((item): CarouselItem => {
+      return {
+        el: item as HTMLElement,
+        position: Number(item.getAttribute("data-custom-carousel-item")),
+      };
+    });
+  };
+
+  _getOptions = (): CarouselOptions => {
+    let customIndicators =
+      this.querySelectorAll("[data-custom-carousel-slide-to]") || [];
+
+    return {
+      defaultPosition: 0,
+      interval: this.dataset.customCarouselInterval
+        ? Number(this.dataset.customCarouselInterval)
+        : 8000,
+
+      indicators: {
+        activeClasses: "border-2 border-caperren-green bg-black",
+        inactiveClasses: "bg-caperren-green/40 hover:bg-caperren-green-light",
+        items: Array.from(customIndicators).map(
+          (item): IndicatorItem => {
+            return {
+              el: item as HTMLElement,
+              position: Number(
+                item.getAttribute("data-custom-carousel-slide-to"),
+              ),
+            };
+          },
+        ),
+      },
+    };
+  };
+
+  _attachHandlers = (): void => {
+    // Carousel controls
+    this.querySelector("[data-custom-carousel-next]")?.addEventListener(
+      "click",
+      () => this._carousel.next(),
+    );
+    this.querySelector("[data-custom-carousel-prev]")?.addEventListener(
+      "click",
+      () => this._carousel.prev(),
+    );
+
+    // Close fullscreen modal
+    this._modalEl
+      .querySelector("[data-custom-carousel-modal-hide]")
+      ?.addEventListener("click", () => this._modal.hide());
+
+    // Click to open fullscreen modal
+    this._items.forEach((item) => {
+      item.el.addEventListener("click", () => {
+        const imgCloned = item.el.querySelector("img")?.cloneNode() as Node;
+        const imageDiv =
+          (this._modalEl.querySelector(
+            "[data-custom-carousel-modal-image]",
+          ) as HTMLElement) || undefined;
+
+        imageDiv.innerHTML = "";
+        imageDiv?.appendChild(imgCloned);
+
+        this._modal.show();
+      });
+    });
+  };
+}
+
+customElements.define("custom-carousel", CustomCarousel);
--- a/src/components/Media/PdfViewer.astro
+++ b/src/components/Media/PdfViewer.astro
@@ -0,0 +1,7 @@
+---
+
+---
+
+<iframe
+  src={Astro.props.pdf}
+  class={"w-9/10 md:w-3/5 h-7/10 md:h-4/5 " + Astro.props.class || ""}></iframe>
--- a/src/components/Media/Video.astro
+++ b/src/components/Media/Video.astro
@@ -0,0 +1,11 @@
+---
+import { type videoConfig } from "@interfaces/video.ts";
+
+const config: videoConfig = Astro.props.videoConfig;
+console.log(config);
+---
+
+<video class="h-auto w-full max-w-1/2" controls>
+  <source src={config.videoPath} type={config.videoType ?? "video/mp4"} />
+  Your browser does not support the video tag.
+</video>
--- a/src/components/Media/YtVideo.astro
+++ b/src/components/Media/YtVideo.astro
@@ -0,0 +1,13 @@
+---
+import type { videoConfig } from "@interfaces/video.ts";
+
+const config: videoConfig = Astro.props.videoConfig;
+---
+
+<iframe
+  class="h-128 w-full max-w-1/2"
+  src={config.videoPath}
+  title={config.videoTitle ?? ""}
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen></iframe>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -2,31 +2,47 @@
 import NestedNavbarEntry from "@components/NestedNavbarEntries.astro";

 import logo_title_large from "@assets/logo-title-large.png";
-import {siteLayout} from "@data/site-layout.ts";
-import {Image} from "astro:assets";
+import { siteLayout } from "@data/site-layout.ts";
+import { Image } from "astro:assets";
 ---

-
-<nav class="border-b-4 border-b-caperren-green text-caperren-green">
-    <div class="flex flex-wrap items-center justify-between mx-auto p-6">
-        <a href="/">
-            <Image src={logo_title_large}
-                   class="h-10 lg:h-14 w-auto"
-                   alt="logo title"
-                   loading="eager"
-            />
-        </a>
-        <button data-collapse-toggle="navbar-multi-level" type="button"
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm lg:hidden focus:ring-2 focus:ring-caperren-green"
-                aria-controls="navbar-multi-level" aria-expanded="false">
-            <span class="sr-only">Open main menu</span>
-            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M1 1h15M1 7h15M1 13h15"/>
-            </svg>
-        </button>
-        <div class="z-40 hidden mt-1 w-full lg:block lg:w-auto" id="navbar-multi-level">
-            <NestedNavbarEntry items={siteLayout}/>
-        </div>
+<nav class="border-b-caperren-green text-caperren-green border-b-4">
+  <div class="mx-auto flex flex-wrap items-center justify-between p-6">
+    <a href="/">
+      <Image
+        src={logo_title_large}
+        class="h-10 w-auto lg:h-14"
+        alt="logo title"
+        loading="eager"
+      />
+    </a>
+    <button
+      data-collapse-toggle="navbar-multi-level"
+      type="button"
+      class="focus:ring-caperren-green inline-flex h-10 w-10 items-center justify-center p-2 text-sm focus:ring-2 lg:hidden"
+      aria-controls="navbar-multi-level"
+      aria-expanded="false"
+    >
+      <span class="sr-only">Open main menu</span>
+      <svg
+        class="h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 17 14"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M1 1h15M1 7h15M1 13h15"></path>
+      </svg>
+    </button>
+    <div
+      class="z-40 mt-1 hidden w-full lg:block lg:w-auto"
+      id="navbar-multi-level"
+    >
+      <NestedNavbarEntry items={siteLayout} />
    </div>
+  </div>
 </nav>
--- a/src/components/NestedNavbarEntries.astro
+++ b/src/components/NestedNavbarEntries.astro
@@ -1,51 +1,78 @@
 ---
-import type {navLink} from "@interfaces/site-layout.ts";
+import type { navLink } from "@interfaces/site-layout.ts";

 const items: navLink[] = Astro.props.items;
 const depth: number = Astro.props.depth ?? 0;
 const paths: string[] = Astro.props.paths ?? [];

 const getNavLinkSuffix = (entry: navLink): string => {
-    return "-" + [...paths, entry.path].join("-")
-}
+  return "-" + [...paths, entry.path].join("-");
+};
 const getHrefPath = (entry: navLink): string => {
-    return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
-}
+  return entry.pubpath
+    ? entry.pubpath
+    : "/" +
+        (paths && paths.length ? [...paths, entry.path].join("/") : entry.path);
+};
 ---
-<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}>
-    {
-        items.map((entry) => (
-            (entry.enabled ?? true) && (
-                    <li>
-                        {Array.isArray(entry.children) && entry.children.length ? (
-                                <button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
-                                        data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
-                                        data-dropdown-placement="bottom"
-                                        class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light lg:hover:bg-transparent lg:border-0 lg:hover:text-caperren-green-light lg:p-0 ">
-                                    {entry.navText}
-                                    <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
-                                         xmlns="http://www.w3.org/2000/svg"
-                                         viewBox="0 0 10 6">
-                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                              stroke-width="2"
-                                              d="m1 1 4 4 4-4"/>
-                                    </svg>
-                                </button>

-                                <div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
-                                     class="z-10 hidden  bg-black border border-caperren-green shadow-sm w-screen lg:w-max">
-                                    <Astro.self items={entry.children} paths={[...paths, entry.path]}
-                                                depth={depth + 1}/>
-                                </div>
-
-                        ) : (
-
-                                <a href={getHrefPath(entry)}
-                                   class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark lg:p-0"
-                                   aria-current="page">{entry.navText}</a>
-
-                        )}
-                    </li>
-            )
-        ))}
-</ul>
+<ul
+  class={"flex flex-col p-4 bg-black border-caperren-green " +
+    (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}
+>
+  {
+    items.map(
+      (entry) =>
+        (entry.enabled ?? true) && (
+          <li>
+            {Array.isArray(entry.children) && entry.children.length ? (
+              <div>
+                <button
+                  id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
+                  data-dropdown-toggle={
+                    "dropdownNavbar" + getNavLinkSuffix(entry)
+                  }
+                  data-dropdown-placement="bottom"
+                  class="hover:text-caperren-green-light lg:hover:text-caperren-green-light flex w-full items-center justify-between px-3 py-2 lg:border-0 lg:p-0 lg:hover:bg-transparent"
+                >
+                  {entry.navText}
+                  <svg
+                    class="ms-2.5 h-2.5 w-2.5"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 10 6"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="m1 1 4 4 4-4"
+                    />
+                  </svg>
+                </button>
+                <div
+                  id={"dropdownNavbar" + getNavLinkSuffix(entry)}
+                  class="border-caperren-green z-10 hidden w-screen border bg-black shadow-sm lg:w-max"
+                >
+                  <Astro.self
+                    items={entry.children}
+                    paths={[...paths, entry.path]}
+                    depth={depth + 1}
+                  />
+                </div>
+              </div>
+            ) : (
+              <a
+                href={getHrefPath(entry)}
+                class="hover:text-caperren-green-light ring-caperren-green-dark block bg-transparent px-3 py-2 lg:p-0"
+                aria-current="page"
+              >
+                {entry.navText}
+              </a>
+            )}
+          </li>
+        ),
+    )
+  }
+</ul>
--- a/src/components/Table.astro
+++ b/src/components/Table.astro
@@ -1,5 +1,5 @@
 ---
-import type {tableData} from "@interfaces/table.ts";
+import type { tableData } from "@interfaces/table.ts";

 const data: tableData = Astro.props.data;
 const columnPadding: number = data.columnPadding || 2;
@@ -8,27 +8,33 @@ const paddingClasses: string = `px-${columnPadding} py-${rowPadding}`;
 ---

 <div class="relative max-w-full overflow-x-auto">
-    <table class="text-sm text-left">
-        <thead class="text-xs border-b-3 border-caperren-green uppercase bg-black">
-        <tr>
-            {data.header.map(headingText => (
-                    <th scope="col" class={paddingClasses}>
-                        {headingText}
-                    </th>
+  <table class="text-left text-sm">
+    <thead class="border-caperren-green border-b-3 bg-black text-xs uppercase">
+      <tr>
+        {
+          data.header.map((headingText) => (
+            <th scope="col" class={paddingClasses}>
+              {headingText}
+            </th>
+          ))
+        }
+      </tr>
+    </thead>
+    <tbody>
+      {
+        data.rows.map((row) => (
+          <tr class="border-caperren-green border-b dark:bg-black">
+            {row.map((rowColumnText) => (
+              <th
+                scope="row"
+                class={paddingClasses + " font-medium whitespace-nowrap"}
+              >
+                {rowColumnText}
+              </th>
            ))}
-        </tr>
-        </thead>
-        <tbody>
-        {data.rows.map(row => (
-                <tr class=" border-b dark:bg-black  border-caperren-green">
-                    {row.map(rowColumnText => (
-                            <th scope="row"
-                                class={paddingClasses + " font-medium  whitespace-nowrap"}>
-                                {rowColumnText}
-                            </th>
-                    ))}
-                </tr>
-        ))}
-        </tbody>
-    </table>
-</div>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>
--- a/src/components/Timeline/Timeline.astro
+++ b/src/components/Timeline/Timeline.astro
@@ -1,36 +1,39 @@
 ---
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";

 const timeline: timelineEntry[] = Astro.props.timeline || [];
 ---

 <custom-timeline>
-    <div class="flex flex-col w-full">
-        <div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
-             data-timeline>
-            {timeline.map((entry, index) => (
-                    <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
-                         data-timeline-node-index={index}
-                    >
-                        <h3 class="text-lg font-bold">
-                            {entry.event}
-                        </h3>
-                        <h4 class="font-semibold leading-none">
-                            {entry.eventDetail}
-                        </h4>
-                        <time class="mb-2 mt-1 text-sm italic leading-none">
-                            {entry.date}
-                        </time>
-                        {entry.description && (
-                                <p class="text-sm font-normal">
-                                    {entry.description}
-                                </p>
-                        )}
-                    </div>
-            ))}
-        </div>
-        <div class="z-0 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
+  <div class="flex w-full flex-col">
+    <div
+      class="3xl:grid-cols-6 z-10 grid max-w-full grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      data-timeline
+    >
+      {
+        timeline.map((entry, index) => (
+          <div
+            class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
+            data-timeline-node-index={index}
+          >
+            <h3 class="text-lg font-bold">{entry.event}</h3>
+            <h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
+            <time class="mt-1 mb-2 text-sm leading-none italic">
+              {entry.date}
+            </time>
+            {entry.description && (
+              <p class="text-sm font-normal">{entry.description}</p>
+            )}
+          </div>
+        ))
+      }
    </div>
+    <div
+      class="z-0 w-full max-w-full overflow-x-visible"
+      data-custom-timeline-line-wrapper
+    >
+    </div>
+  </div>
 </custom-timeline>

-<script src="./timeline.ts"/>
+<script src="./timeline.ts"></script>
--- a/src/components/Timeline/timeline.ts
+++ b/src/components/Timeline/timeline.ts
@@ -1,70 +1,80 @@
 import LeaderLine from "leader-line-new";

 class CustomTimeline extends HTMLElement {
-    _eventElements: Element[];
+  _eventElements: Element[];

-    constructor() {
-        super();
+  constructor() {
+    super();

-        this._eventElements = this._getNodeElements();
-        window.addEventListener("load", this._paintLeaderLines);
-    }
+    this._eventElements = this._getNodeElements();
+    window.addEventListener("load", this._paintLeaderLines);
+  }

-    _getNodeElements = (): Element[] =>
-        Array.from(this.querySelectorAll('[data-timeline-node-index]')).sort(
-            (elementA, elementB) =>
-                Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
-        );
-
-
-    _paintLeaderLines = () => {
-        let pairs = this._eventElements.map((entry, index) => {
-            if (index < this._eventElements.length - 1) {
-                return [entry, this._eventElements[index + 1]];
-            }
-        }).filter(pair => pair !== undefined)
-
-        let contentBodyScrolling = document.getElementById("content-body-scrolling");
-        let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;
-
-        const position = (line: LeaderLine) => {
-            wrapper.style.transform = "none";
-            let rectWrapper = wrapper.getBoundingClientRect();
-
-            wrapper.style.transform = "translate(-" +
-                (Number(rectWrapper.left)) + "px, -"
-                +
-                (Number(rectWrapper.top)) + "px)"
-
-            line.position()
+  _getNodeElements = (): Element[] =>
+    Array.from(this.querySelectorAll("[data-timeline-node-index]")).sort(
+      (elementA, elementB) =>
+        Number(elementA.getAttribute("data-timeline-node-index")) -
+        Number(elementB.getAttribute("data-timeline-node-index")),
+    );

+  _paintLeaderLines = () => {
+    let pairs = this._eventElements
+      .map((entry, index) => {
+        if (index < this._eventElements.length - 1) {
+          return [entry, this._eventElements[index + 1]];
        }
+      })
+      .filter((pair) => pair !== undefined);

-        pairs.forEach(pair => {
-            let line = new LeaderLine({
-                start: pair[0],
-                end: pair[1],
-                color: '#10ac25',
-                size: 3,
-                startSocket: "right",
-                endSocket: "left",
-                startPlug: "square",
-                endPlug: "arrow3"
-            });
+    let contentBodyScrolling = document.getElementById(
+      "content-body-scrolling",
+    );
+    let wrapper = this.querySelector(
+      "[data-custom-timeline-line-wrapper]",
+    ) as HTMLElement;

-            // Find new element by hidden id and add to wrapper div
-            const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
-            if (newLineEl) wrapper.appendChild(newLineEl);
+    const position = (line: LeaderLine) => {
+      wrapper.style.transform = "none";
+      let rectWrapper = wrapper.getBoundingClientRect();

-            // Add position updaters for scrolling and resize events
-            contentBodyScrolling?.addEventListener("scroll", () => position(line));
-            window.addEventListener("resize", () => position(line));
+      wrapper.style.transform =
+        "translate(-" +
+        Number(rectWrapper.left) +
+        "px, -" +
+        Number(rectWrapper.top) +
+        "px)";

-            // Perform the initial positioning
-            position(line);
-        });
+      line.position();
+    };

-    }
+    pairs.forEach((pair) => {
+      let line = new LeaderLine({
+        start: pair[0],
+        end: pair[1],
+        color: "#10ac25",
+        size: 3,
+        startSocket: "right",
+        endSocket: "left",
+        startPlug: "square",
+        endPlug: "arrow3",
+      });
+
+      // Find new element by hidden id and add to wrapper div
+      // noinspection TypeScriptUnresolvedReference
+      const lineId = line._id; // @ts-ignore
+      const newLineEl = document.querySelector(
+        `body .leader-line:has(path#leader-line-${lineId}-line-path)`,
+      );
+      if (newLineEl) wrapper.appendChild(newLineEl);
+
+      // Add position updaters for scrolling and resize events
+      contentBodyScrolling?.addEventListener("scroll", () => position(line));
+      window.addEventListener("resize", () => position(line));
+
+      // Perform the initial positioning
+      position(line);
+    });
+  };
 }

-customElements.define('custom-timeline', CustomTimeline)
+customElements.define("custom-timeline", CustomTimeline);
--- a/src/components/Video.astro
+++ b/src/components/Video.astro
@@ -1,12 +0,0 @@
---
-import {type videoConfig} from "@interfaces/video.ts";
-
-const config: videoConfig = Astro.props.videoConfig;
-console.log(config);
---
-
-<video class="w-full h-auto max-w-1/2" controls>
-    <source src={config.videoPath} type={config.videoType ?? "video/mp4"}/>
-    Your browser does not support the video tag.
-</video>
-
--- a/src/components/YtVideo.astro
+++ b/src/components/YtVideo.astro
@@ -1,9 +0,0 @@
---
-import type {videoConfig} from "@interfaces/video.ts";
-
-const config: videoConfig = Astro.props.videoConfig;
---
-<iframe class="h-128 w-full max-w-1/2" src={config.videoPath}
-        title={config.videoTitle ?? ""}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>