add prose img component

2026-10-19 01:07:39 +00:00 · 2026-08-25 22:09:08 -05:00
parent b537017d51
commit 6a34a90d11
6 changed files with 179 additions and 3 deletions
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo';
+import ImageComponent from '#build/mdc-image-component.mjs';
+
+const props = defineProps<{
+    src?: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    title?: string;
+    caption?: string;
+}>();
+
+const refinedSrc = computed(() => {
+    if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+        const base = withLeadingSlash(
+            withTrailingSlash(useRuntimeConfig().app.baseURL),
+        );
+        if (base !== '/' && !props.src.startsWith(base)) {
+            return joinURL(base, props.src);
+        }
+    }
+    return props.src ?? '';
+});
+
+const caption = computed(() => {
+    const value = props.caption || props.title;
+    return value?.trim() ? value : '';
+});
+</script>
+
+<template>
+    <figure class="article-figure">
+        <component
+            :is="ImageComponent"
+            :src="refinedSrc"
+            :alt="props.alt ?? ''"
+            :width="props.width"
+            :height="props.height"
+        />
+        <figcaption v-if="caption">{{ caption }}</figcaption>
+    </figure>
+</template>
+
+<style scoped>
+.article-figure {
+    display: block;
+    width: fit-content;
+    max-width: 100%;
+    margin: 1.25rem 0;
+}
+
+.article-figure :deep(img) {
+    display: block;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+    background: var(--img-matte);
+}
+
+.article-figure figcaption {
+    position: relative;
+    width: 0;
+    min-width: 100%;
+    margin: 0 0 0 1rem;
+    padding: 0.5rem 0 0 2rem;
+    color: var(--muted);
+    font-size: 0.8rem;
+    font-style: italic;
+    line-height: 1.4;
+}
+
+.article-figure figcaption::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0.4rem;
+    width: 0.75rem;
+    height: 0.95rem;
+    border-left: 1px solid var(--muted);
+    border-bottom: 1px solid var(--muted);
+    border-bottom-left-radius: 0.5rem;
+    pointer-events: none;
+}
+</style>