LeConte deployments page complete, better auto-formatting and import sorting, new inline link, popover definitions, and paragraph components, improvements to component interfaces

src/components/CustomHtmlWrappers/H3.astro

@@ -2,4 +2,4 @@
 
 ---
 
-<h3 class="my-4 font-bold md:text-lg">{Astro.props.text}</h3>
+<h3 class="mt-4 mb-2 font-bold md:text-lg">{Astro.props.text}</h3>

src/components/InlineLink.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  href: string;
+  target?: string;
+}
+
+const { href, target = "_blank" } = Astro.props;
+---
+
+<>
+  <a class="text-blue-500 hover:text-blue-300" href={href} target={target}>
+    <slot />
+  </a>
+</>

src/components/LinkButton.astro

@@ -1,11 +1,18 @@
 ---
+interface Props {
+  title: string;
 
+  href: string;
+  target?: string;
+}
+
+const { title, href, target = "_blank" } = Astro.props;
 ---
 
 <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"}
+  href={href}
+  target={target}
 >
-  {Astro.props.title}
+  {title}
 </a>

src/components/Media/CustomCarousel/custom-carousel.ts

@@ -1,7 +1,7 @@
 import {
   Carousel,
-  type CarouselItem,
   type CarouselInterface,
+  type CarouselItem,
   type CarouselOptions,
   type IndicatorItem,
   Modal,

src/components/Media/Video.astro

@@ -1,11 +1,34 @@
 ---
-import { type videoConfig } from "@interfaces/video.ts";
+interface Props {
+  videoPath: string;
+  videoType?: string;
 
-const config: videoConfig = Astro.props.videoConfig;
-console.log(config);
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+}
+
+const {
+  videoPath,
+  videoType = "video/mp4",
+
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  playsInline = false,
+} = Astro.props;
 ---
 
-<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>
+<div class="mx-auto my-auto">
+  <video
+    class="h-auto w-full"
+    controls={controls}
+    autoplay={autoPlay}
+    loop={loop}
+    playsinline={playsInline}
+  >
+    <source src={videoPath} type={videoType} />
+    Your browser does not support the video tag.
+  </video>
+</div>

src/components/Paragraph.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="">
+  <slot />
+</div>

src/components/Paragraphs.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="space-y-2">
+  <slot />
+</div>

src/components/PopoverWordDefinition.astro

@@ -0,0 +1,43 @@
+---
+import { v4 as uuidv4 } from "uuid";
+
+const popoverUUID = uuidv4();
+
+const keys: { [key: string]: string } = {
+  ADCP: "Acoustic doppler current profiler",
+  COTS: "Consumer off-the-shelf",
+  CTD: "Conductivity, temperature, and depth sensor",
+};
+
+const key: string | undefined = Astro.props.key;
+let word: string | undefined = Astro.props.word;
+let definition: string | undefined = Astro.props.definition;
+
+if (key && keys.hasOwnProperty(key)) {
+  word = key;
+  definition = keys[key];
+}
+---
+
+<>
+  <a
+    href="#"
+    class="text-fg-brand decoration-caperren-green font-medium underline decoration-dashed hover:no-underline"
+    data-popover-target={popoverUUID}>{word}</a
+  >
+  <div
+    data-popover
+    id={popoverUUID}
+    role="tooltip"
+    class="text-body border-caperren-green invisible absolute z-90 inline-block w-fit max-w-96 rounded-lg border border-dashed bg-black p-3 text-sm opacity-0 shadow-xs transition-opacity duration-300"
+  >
+    <div>
+      <h3
+        class="text-heading border-b-caperren-green-dark mb-1 border-b font-semibold"
+      >
+        {word}
+      </h3>
+      <p>{definition}</p>
+    </div>
+  </div>
+</>