refactor: dedupe embed core across platform wrappers

src/module.ts

@@ -65,12 +65,8 @@ export default defineNuxtModule<ModuleOptions>({
         from: resolver.resolve('./runtime/composables/useYouTubePlayer'),
       },
       {
-        name: 'useInstagramEmbed',
-        from: resolver.resolve('./runtime/composables/useInstagramEmbed'),
-      },
-      {
-        name: 'useTikTokEmbed',
-        from: resolver.resolve('./runtime/composables/useTikTokEmbed'),
+        name: 'useYouTubeMedia',
+        from: resolver.resolve('./runtime/composables/useYouTubeMedia'),
       },
       {
         name: 'useEmbedMetadata',

src/runtime/components/BaseCarousel.vue

@@ -134,24 +134,11 @@
 
 <script setup lang="ts">
 import { computed, onMounted, provide, useId, watch } from 'vue'
-import type { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
 import { useCarousel } from '../composables/useCarousel'
 import { buildSlidesCss, resolveBaseSlides } from '../utils/slides'
-import type { SlidesPerView } from '../types'
-
-interface Props {
-  options?: EmblaOptionsType
-  plugins?: EmblaPluginType[]
-  slidesPerView?: SlidesPerView
-  showArrows?: boolean
-  showDots?: boolean
-  arrowPosition?: 'sides' | 'below'
-  layout?: 'stacked' | 'aside'
-  asidePosition?: 'left' | 'right'
-  title?: string
-  description?: string
-  ariaLabel?: string
-}
+import type { CarouselSharedProps } from '../types'
+
+type Props = CarouselSharedProps
 
 const props = withDefaults(defineProps<Props>(), {
   options: () => ({}),

src/runtime/components/CarouselActiveCaption.vue

@@ -0,0 +1,34 @@
+<template>
+  <!-- Keying CarouselCaption inside the Transition swaps the block with a
+       fade-out/fade-in (mode="out-in") whenever the active slide changes. -->
+  <Transition
+    name="weburz-fade"
+    mode="out-in"
+  >
+    <CarouselCaption
+      :key="activeKey"
+      variant="active"
+      :title="title"
+      :href="href"
+      :description="description"
+    />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import CarouselCaption from './CarouselCaption.vue'
+
+interface Props {
+  /** Changes with the active slide so the fade animation re-triggers. */
+  activeKey: string | number
+  title?: string
+  href?: string
+  description?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: undefined,
+  href: undefined,
+  description: undefined,
+})
+</script>

src/runtime/components/CarouselCaption.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="variant === 'active' ? 'weburz-active-caption' : 'weburz-caption'">
+    <h3
+      v-if="title"
+      class="weburz-caption__title"
+    >
+      <a
+        v-if="href"
+        :href="href"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ title }}</a>
+      <template v-else>
+        {{ title }}
+      </template>
+    </h3>
+    <p
+      v-if="description"
+      class="weburz-caption__description"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string
+  /** Optional link target for the title. Renders plain text when omitted. */
+  href?: string
+  description?: string
+  /** 'below' sits under a slide; 'active' is the heading-area block. */
+  variant?: 'below' | 'active'
+}
+
+withDefaults(defineProps<Props>(), {
+  title: undefined,
+  href: undefined,
+  description: undefined,
+  variant: 'below',
+})
+</script>
+
+<style scoped>
+.weburz-caption {
+  margin-top: var(--weburz-carousel-caption-gap, 0.75rem);
+  text-align: var(--weburz-carousel-caption-align, center);
+}
+
+/* Active captions live in the carousel heading (aside layout), so they align
+   to the reading start rather than the slide center. */
+.weburz-active-caption {
+  text-align: var(--weburz-carousel-active-caption-align, start);
+}
+
+.weburz-caption__title,
+.weburz-active-caption__title {
+  margin: 0;
+  font-size: var(--weburz-carousel-caption-title-size, 1rem);
+  font-weight: var(--weburz-carousel-caption-title-weight, 600);
+}
+
+.weburz-caption__title a,
+.weburz-active-caption__title a {
+  color: var(--weburz-carousel-caption-title-color, inherit);
+  text-decoration: none;
+}
+
+.weburz-caption__title a:hover,
+.weburz-active-caption__title a:hover {
+  text-decoration: underline;
+}
+
+.weburz-caption__description,
+.weburz-active-caption__description {
+  margin: 0.25rem 0 0;
+  font-size: var(--weburz-carousel-caption-description-size, 0.875rem);
+  color: var(--weburz-carousel-caption-description-color, inherit);
+  opacity: var(--weburz-carousel-caption-description-opacity, 0.7);
+}
+
+.weburz-fade-enter-active,
+.weburz-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.weburz-fade-enter-from {
+  opacity: 0;
+  transform: translateY(0.25rem);
+}
+
+.weburz-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-0.25rem);
+}
+</style>

src/runtime/components/InstagramCarousel.vue

@@ -25,32 +25,12 @@
           name="heading"
           v-bind="headingProps"
         >
-          <Transition
-            name="weburz-fade"
-            mode="out-in"
-          >
-            <div
-              :key="activeIndex"
-              class="weburz-active-caption"
-            >
-              <h3
-                v-if="activePost?.title"
-                class="weburz-caption__title"
-              >
-                <a
-                  :href="activePost.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >{{ activePost.title }}</a>
-              </h3>
-              <p
-                v-if="activePost?.description"
-                class="weburz-caption__description"
-              >
-                {{ activePost.description }}
-              </p>
-            </div>
-          </Transition>
+          <CarouselActiveCaption
+            :active-key="activeIndex"
+            :title="activeTitle"
+            :href="activeHref"
+            :description="activeDescription"
+          />
         </slot>
       </template>
       <template
@@ -73,7 +53,7 @@
           <iframe
             :ref="(el: unknown) => bindIframe(el, index)"
             class="weburz-instagram-embed"
-            :src="buildEmbedUrl(post.url)"
+            :src="embedUrl(post.url)"
             :title="post.title ?? `Instagram post ${index + 1}`"
             loading="lazy"
             frameborder="0"
@@ -89,40 +69,27 @@
             @click="unlock(index)"
           />
         </div>
-        <div
+        <CarouselCaption
           v-if="captions === 'per-slide' && (post.title || post.description)"
-          class="weburz-caption"
-        >
-          <h3
-            v-if="post.title"
-            class="weburz-caption__title"
-          >
-            <a
-              :href="post.url"
-              target="_blank"
-              rel="noopener noreferrer"
-            >{{ post.title }}</a>
-          </h3>
-          <p
-            v-if="post.description"
-            class="weburz-caption__description"
-          >
-            {{ post.description }}
-          </p>
-        </div>
+          :title="post.title"
+          :href="post.url"
+          :description="post.description"
+        />
       </BaseSlide>
     </BaseCarousel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
-import type { InstagramPost, SlidesPerView } from '../types'
+import type { CarouselSharedProps, InstagramPost } from '../types'
 import { useFrameRegistry } from '../composables/useFrameRegistry'
 import { useScrollAwayHandler } from '../composables/useScrollAwayHandler'
+import { buildInstagramEmbedUrl } from '../utils/embeds'
+import CarouselActiveCaption from './CarouselActiveCaption.vue'
+import CarouselCaption from './CarouselCaption.vue'
 
-interface Props {
+interface Props extends CarouselSharedProps {
   posts: InstagramPost[]
   pauseOnLeave?: boolean
   onScrollAway?: 'pause' | 'none'
@@ -141,17 +108,6 @@ interface Props {
    * has no public metadata API to auto-fetch from.
    */
   captions?: 'none' | 'per-slide' | 'active'
-  options?: EmblaOptionsType
-  plugins?: EmblaPluginType[]
-  slidesPerView?: SlidesPerView
-  showArrows?: boolean
-  showDots?: boolean
-  arrowPosition?: 'sides' | 'below'
-  layout?: 'stacked' | 'aside'
-  asidePosition?: 'left' | 'right'
-  title?: string
-  description?: string
-  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -179,32 +135,20 @@ const props = withDefaults(defineProps<Props>(), {
 const rootEl = ref<HTMLElement | null>(null)
 const activeIndex = ref(0)
 const activePost = computed(() => props.posts[activeIndex.value])
-
-const { bind: bindIframe, park, restore, parkAll, restoreAll } = useFrameRegistry<number>()
+const activeTitle = computed(() => activePost.value?.title)
+const activeHref = computed(() => activePost.value?.url)
+const activeDescription = computed(() => activePost.value?.description)
 
 // Instagram's direct embed URL bypasses embed.js entirely — works even when
-// content blockers drop instagram.com/embed.js. We use /embed/captioned/ rather
-// than /embed/ because the captionless variant responds with
-// X-Frame-Options: DENY (refuses to render inside iframes), while the captioned
-// variant has no such header. This is the same URL IG's own embed.js resolves to.
-const buildEmbedUrl = (url: string): string => {
-  // Share links carry query trackers (?igsh=…, ?utm_source=…) that would end up
-  // mid-path if we appended to the raw string — rebuild from origin + pathname.
-  try {
-    const { origin, pathname } = new URL(url)
-    const base = pathname.endsWith('/') ? pathname : `${pathname}/`
-    return `${origin}${base}embed/captioned/`
-  }
-  catch {
-    const trimmed = url.endsWith('/') ? url : `${url}/`
-    return `${trimmed}embed/captioned/`
-  }
-}
+// content blockers drop instagram.com/embed.js (see buildInstagramEmbedUrl).
+const embedUrl = (url: string) => buildInstagramEmbedUrl(url)
 
 // IG has no postMessage control API, so pause = park the iframe (src → about:blank).
 // On scroll-back / swipe-back the original src is restored, which causes a brief
 // reload of the embed. Acceptable trade-off; opt out via prop if it bothers you.
 
+const { bind: bindIframe, park, restore, parkAll, restoreAll } = useFrameRegistry<number>()
+
 // Embla cancels the click that follows a drag, so dragging across the overlay
 // never accidentally unlocks a post.
 const unlockedIndex = ref<number | null>(null)
@@ -274,50 +218,4 @@ useScrollAwayHandler(
   outline: 2px solid var(--weburz-carousel-accent, currentColor);
   outline-offset: 2px;
 }
-
-.weburz-caption {
-  margin-top: var(--weburz-carousel-caption-gap, 0.75rem);
-  text-align: var(--weburz-carousel-caption-align, center);
-}
-
-.weburz-active-caption {
-  text-align: var(--weburz-carousel-active-caption-align, start);
-}
-
-.weburz-fade-enter-active,
-.weburz-fade-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.weburz-fade-enter-from {
-  opacity: 0;
-  transform: translateY(0.25rem);
-}
-
-.weburz-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-0.25rem);
-}
-
-.weburz-caption__title {
-  margin: 0;
-  font-size: var(--weburz-carousel-caption-title-size, 1rem);
-  font-weight: var(--weburz-carousel-caption-title-weight, 600);
-}
-
-.weburz-caption__title a {
-  color: var(--weburz-carousel-caption-title-color, inherit);
-  text-decoration: none;
-}
-
-.weburz-caption__title a:hover {
-  text-decoration: underline;
-}
-
-.weburz-caption__description {
-  margin: 0.25rem 0 0;
-  font-size: var(--weburz-carousel-caption-description-size, 0.875rem);
-  color: var(--weburz-carousel-caption-description-color, inherit);
-  opacity: var(--weburz-carousel-caption-description-opacity, 0.7);
-}
 </style>