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

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>
+</>