(feat) Img component

astro/markdoc.config.mjs

@@ -38,6 +38,10 @@ export default defineMarkdocConfig({
       render: component("./src/components/Alert/Alert.astro"),
       ...schema.tags.alert,
     },
+    img: {
+      render: component("./src/components/Img/Img.astro"),
+      ...schema.tags.img,
+    },
     tabs: {
       render: component("./src/components/Tabs/Tabs.astro"),
       ...schema.tags.tabs,

astro/markdoc.schema.mjs

@@ -21,6 +21,33 @@ export default {
         },
       },
     },
+    img: {
+      attributes: {
+        src: { type: String, required: true },
+        alt: { type: String },
+        caption: { type: String },
+        width: { type: String, default: false },
+        height: { type: String, default: false },
+        widthPercent: { type: Number },
+        video: { type: Boolean, default: false },
+        inline: { type: Boolean, default: false },
+        popup: { type: Boolean, default: true },
+      },
+      validate(node) {
+        const { width, height, widthPercent } = node.attributes;
+        if (widthPercent !== undefined && (width !== undefined || height !== undefined)) {
+          return [
+            {
+              id: "img-width-percent-conflict",
+              level: "error",
+              message:
+                "img: widthPercent can't be combined with width or height. widthPercent overrides them silently in the rendered CSS, so use one sizing approach.",
+            },
+          ];
+        }
+        return [];
+      },
+    },
     tabs: {
       attributes: {},
     },

astro/src/components/Img/Img.astro

@@ -0,0 +1,59 @@
+---
+import ImgController from "./ImgController";
+import ImgVideo from "./ImgVideo";
+import { IMAGES_URL } from "@config/images";
+
+interface Props {
+  src: string;
+  alt?: string;
+  caption?: string;
+  width?: string;
+  height?: string;
+  widthPercent?: number;
+  video?: boolean;
+  inline?: boolean;
+  popup?: boolean;
+}
+
+const {
+  src,
+  alt,
+  caption,
+  width,
+  height,
+  widthPercent,
+  video = false,
+  inline = false,
+  popup = true,
+} = Astro.props;
+
+const imageUrl = `${IMAGES_URL}/images/${src}`;
+
+const srcset = `${imageUrl}?auto=format&fit=max&w=850 1x, ${imageUrl}?auto=format&fit=max&w=850&dpr=2 2x`;
+const popupHref = `${imageUrl}?fit=max&auto=format`;
+---
+
+{
+  video ? (
+    <ImgVideo
+      client:idle
+      imageUrl={imageUrl}
+      width={width}
+      height={height}
+      widthPercent={widthPercent}
+    />
+  ) : (
+    <ImgController
+      client:idle
+      srcset={srcset}
+      popupHref={popupHref}
+      alt={alt}
+      caption={caption}
+      width={width}
+      height={height}
+      widthPercent={widthPercent}
+      inline={inline}
+      popup={popup}
+    />
+  )
+}

astro/src/components/Img/ImgController.module.css

@@ -0,0 +1,81 @@
+.img__figure {
+  margin: 0 0 1rem;
+}
+
+.img__image {
+  max-width: 100%;
+  height: auto;
+  /* matches Hugo's $ddgray (#d6d6d6); no equivalent design token exists yet */
+  border: 1px solid #d6d6d6;
+}
+
+.img__link--popup {
+  cursor: zoom-in;
+}
+
+/* Ported from hugo/layouts/partials/global-modals/global-modals.html +
+   hugo/assets/scripts/components/global-modals.js (Bootstrap 5 Modal). */
+
+.img-lightbox__overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--hugo-modal-overlay);
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-lightbox__overlay[hidden] {
+  display: none;
+}
+
+.img-lightbox__dialog {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.img-lightbox__spinner,
+.img-lightbox__spinner::after {
+  border-radius: 50%;
+  width: 5em;
+  height: 5em;
+}
+
+.img-lightbox__spinner {
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 0.55em solid rgba(234, 234, 234, 0.5);
+  border-right: 0.55em solid rgba(234, 234, 234, 0.5);
+  border-bottom: 0.55em solid rgba(234, 234, 234, 0.5);
+  border-left: 0.55em solid #ffffff;
+  transform: translateZ(0);
+  animation: img-lightbox-spin 1.1s infinite linear;
+}
+
+@keyframes img-lightbox-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.img-lightbox__image {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+}
+
+.img-lightbox__caption {
+  color: #ffffff;
+  text-align: center;
+  margin: 0.5rem 0 0;
+}