@vigilkids/section-renderer-vue 0.5.3 → 0.6.0

package/dist/interactions/vigilkids.d.ts

@@ -2,7 +2,7 @@
  * vigilkids 产品专属 DOM 交互
  *
  * 使用场景：
- * - admin preview-host：走 Vue 组件渲染路径，不调用本模块
+ * - admin preview-host：预览渲染完成后激活 DOM 交互
  * - marketing 站点（Nuxt）：innerHTML 直出 HTML 后 onMounted 激活交互
  *
  * 设计要点：

package/dist/interactions/vigilkids.mjs

@@ -4,27 +4,26 @@ let emblaCarouselPromise = null;
 let faqDelegateBound = false;
 function loadEmblaCarousel() {
   if (!emblaCarouselPromise)
-    emblaCarouselPromise = import("embla-carousel").then(({ default: EmblaCarousel }) => EmblaCarousel);
+    emblaCarouselPromise = import("embla-carousel").then(
+      ({ default: EmblaCarousel }) => EmblaCarousel
+    );
   return emblaCarouselPromise;
 }
 function addMediaQueryListener(mediaQuery, handler) {
   if ("addEventListener" in mediaQuery)
     mediaQuery.addEventListener("change", handler);
-  else
-    mediaQuery.addListener(handler);
+  else mediaQuery.addListener(handler);
 }
 function removeMediaQueryListener(mediaQuery, handler) {
   if ("removeEventListener" in mediaQuery)
     mediaQuery.removeEventListener("change", handler);
-  else
-    mediaQuery.removeListener(handler);
+  else mediaQuery.removeListener(handler);
 }
 function shouldActivateCarousel(cardCount, isMobile) {
   return isMobile ? cardCount > 1 : cardCount > 3;
 }
 function clearDotHandlers(binding) {
-  if (!binding)
-    return;
+  if (!binding) return;
   binding.dotHandlers.forEach((handler, dot) => {
     dot.removeEventListener("click", handler);
   });
@@ -33,14 +32,13 @@ function clearDotHandlers(binding) {
 function setCarouselActive(el, active) {
   el.dataset.carouselActive = active ? "1" : "0";
 }
-function resetCarouselState(el, viewport, binding) {
+function resetCarouselState(el, binding) {
   const embla = emblaInstances.get(el);
   if (embla) {
     embla.destroy();
     emblaInstances.delete(el);
   }
   clearDotHandlers(binding);
-  viewport.classList.remove("recommend-slider-ready");
   setCarouselActive(el, false);
   el.querySelectorAll(".recommend-card").forEach((card) => {
     card.classList.remove("is-active");
@@ -63,21 +61,27 @@ function syncCarouselState(el, embla, snapCount) {
     card.classList.toggle("is-active", index === activeIndex);
   });
 }
-function refreshCarousel(el, viewport, binding) {
+function refreshCarousel(el, container, binding) {
   binding.revision += 1;
   const revision = binding.revision;
   const isMobile = binding.mediaQuery.matches;
-  const cardCount = el.querySelectorAll(".recommend-card").length;
-  resetCarouselState(el, viewport, binding);
-  if (!shouldActivateCarousel(cardCount, isMobile))
-    return;
+  const viewport = el.querySelector(".recommend-viewport");
+  if (!viewport) return;
+  const slides = Array.from(container.children).filter(
+    (node) => node instanceof HTMLElement && node.classList.contains("recommend-card")
+  );
+  const cardCount = slides.length;
+  resetCarouselState(el, binding);
+  if (!shouldActivateCarousel(cardCount, isMobile)) return;
   void loadEmblaCarousel().then((EmblaCarousel) => {
-    if (carouselBindings.get(el) !== binding || binding.revision !== revision)
-      return;
-    const currentCardCount = el.querySelectorAll(".recommend-card").length;
+    if (carouselBindings.get(el) !== binding || binding.revision !== revision) return;
+    const currentSlides = Array.from(container.children).filter(
+      (node) => node instanceof HTMLElement && node.classList.contains("recommend-card")
+    );
+    const currentCardCount = currentSlides.length;
     const currentIsMobile = binding.mediaQuery.matches;
-    if (!shouldActivateCarousel(currentCardCount, currentIsMobile))
-      return;
+    if (!shouldActivateCarousel(currentCardCount, currentIsMobile)) return;
+    setCarouselActive(el, true);
     const embla = EmblaCarousel(viewport, {
       loop: false,
       align: "start",
@@ -86,18 +90,16 @@ function refreshCarousel(el, viewport, binding) {
     const snapCount = embla.scrollSnapList().length;
     if (snapCount < 2) {
       embla.destroy();
+      setCarouselActive(el, false);
       return;
     }
     emblaInstances.set(el, embla);
-    viewport.classList.add("recommend-slider-ready");
-    setCarouselActive(el, true);
     const dots = el.querySelectorAll(".recommend-dot");
     dots.forEach((dot, index) => {
       const visible = index < snapCount;
       dot.hidden = !visible;
       dot.classList.toggle("active", visible && index === 0);
-      if (!visible)
-        return;
+      if (!visible) return;
       const clickHandler = () => {
         embla.scrollTo(index);
       };
@@ -114,16 +116,13 @@ function refreshCarousel(el, viewport, binding) {
   });
 }
 function setupFaqAccordion() {
-  if (faqDelegateBound)
-    return;
+  if (faqDelegateBound) return;
   faqDelegateBound = true;
   document.addEventListener("click", (e) => {
     const faqTitle = e.target.closest?.(".faq-item-title");
-    if (!faqTitle)
-      return;
+    if (!faqTitle) return;
     const faqItem = faqTitle.closest(".faq-item");
-    if (!faqItem)
-      return;
+    if (!faqItem) return;
     const faqList = faqItem.closest(".faq-list");
     const isActive = faqItem.classList.contains("active");
     if (faqList) {
@@ -131,29 +130,27 @@ function setupFaqAccordion() {
         if (item !== faqItem) {
           item.classList.remove("active");
           const body2 = item.querySelector(".faq-item-answer");
-          if (body2)
-            body2.style.maxHeight = "0";
+          if (body2) body2.style.maxHeight = "0";
         }
       });
     }
     faqItem.classList.toggle("active", !isActive);
     const body = faqItem.querySelector(".faq-item-answer");
-    if (body)
-      body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
+    if (body) body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
   });
 }
 export function setupCarousel(root = document) {
   const els = root.querySelectorAll('[data-component="related-articles-carousel"]');
   els.forEach((el) => {
-    if (carouselBindings.has(el))
-      return;
-    const viewport = el.querySelector(".recommend-grid");
-    if (!viewport)
-      return;
+    if (carouselBindings.has(el)) return;
+    const viewport = el.querySelector(".recommend-viewport");
+    if (!viewport) return;
+    const container = el.querySelector(".recommend-grid");
+    if (!container) return;
     const mediaQuery = window.matchMedia("(max-width: 1024px)");
     let binding;
     const mediaQueryHandler = () => {
-      refreshCarousel(el, viewport, binding);
+      refreshCarousel(el, container, binding);
     };
     binding = {
       dotHandlers: /* @__PURE__ */ new Map(),
@@ -170,18 +167,15 @@ export function setupRetentionBanner(root = document) {
   const els = root.querySelectorAll('[data-component="retention-banner"]');
   els.forEach((el) => {
     const key = el.dataset.dismissKey;
-    if (!key)
-      return;
+    if (!key) return;
     const storageKey = `retention-banner-dismissed:${key}`;
     if (localStorage.getItem(storageKey)) {
       el.style.display = "none";
       return;
     }
     const closeBtn = el.querySelector(".retention-banner-close");
-    if (!closeBtn)
-      return;
-    if (closeBtn.dataset.bound === "1")
-      return;
+    if (!closeBtn) return;
+    if (closeBtn.dataset.bound === "1") return;
     closeBtn.dataset.bound = "1";
     closeBtn.addEventListener("click", () => {
       localStorage.setItem(storageKey, "1");
@@ -195,24 +189,22 @@ export function setupInteractions(root = document) {
   setupRetentionBanner(root);
 }
 export function destroyInteractions(root = document) {
-  const carousels = root.querySelectorAll('[data-component="related-articles-carousel"]');
+  const carousels = root.querySelectorAll(
+    '[data-component="related-articles-carousel"]'
+  );
   carousels.forEach((el) => {
-    const viewport = el.querySelector(".recommend-grid");
-    if (!viewport)
-      return;
     const binding = carouselBindings.get(el);
     if (binding) {
       binding.revision += 1;
       removeMediaQueryListener(binding.mediaQuery, binding.mediaQueryHandler);
       carouselBindings.delete(el);
     }
-    resetCarouselState(el, viewport, binding);
+    resetCarouselState(el, binding);
   });
   const banners = root.querySelectorAll('[data-component="retention-banner"]');
   banners.forEach((el) => {
     el.style.display = "";
     const closeBtn = el.querySelector(".retention-banner-close");
-    if (closeBtn)
-      delete closeBtn.dataset.bound;
+    if (closeBtn) delete closeBtn.dataset.bound;
   });
 }

package/dist/preview/createPreviewApp.mjs

@@ -1,5 +1,5 @@
 import { detectUndoRedo, isEditableTarget, isModKey } from "@vigilkids/section-core";
-import { createApp, h, provide, ref } from "vue";
+import { createApp, h, nextTick, provide, ref } from "vue";
 import { resolveContentVariables } from "../utils/content-variables.mjs";
 import { SectionRendererPlugin } from "../plugin.mjs";
 import SectionRenderer from "../renderer/SectionRenderer.vue";
@@ -9,26 +9,44 @@ const productCSSLoaders = {
   visiva: () => import("../styles/products/visiva.css")
 };
 async function loadProductCSS(productCode) {
-  if (loadedProducts.has(productCode))
-    return;
+  if (loadedProducts.has(productCode)) return;
   const loader = productCSSLoaders[productCode];
   if (loader) {
     await loader();
     loadedProducts.add(productCode);
   }
 }
-const loadedInteractions = /* @__PURE__ */ new Set();
+const productInteractionModules = /* @__PURE__ */ new Map();
 const productInteractionLoaders = {
-  vigilkids: () => import("../interactions/vigilkids.mjs").then((m) => m.setupInteractions())
+  vigilkids: () => import("../interactions/vigilkids.mjs")
 };
-async function loadProductInteractions(productCode) {
-  if (loadedInteractions.has(productCode))
-    return;
+async function loadProductInteractionModule(productCode) {
   const loader = productInteractionLoaders[productCode];
-  if (loader) {
-    await loader();
-    loadedInteractions.add(productCode);
-  }
+  if (!loader) return null;
+  if (!productInteractionModules.has(productCode))
+    productInteractionModules.set(productCode, loader());
+  return await productInteractionModules.get(productCode);
+}
+function getPreviewRoot(selector) {
+  return document.querySelector(selector) ?? document;
+}
+async function refreshProductInteractions(selector, productCode) {
+  const module = await loadProductInteractionModule(productCode);
+  if (!module) return;
+  const root = getPreviewRoot(selector);
+  module.destroyInteractions?.(root);
+  await nextTick();
+  module.setupInteractions(root);
+}
+function createInteractionRefreshScheduler(selector, getProductCode) {
+  let timer = null;
+  return () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      void refreshProductInteractions(selector, getProductCode());
+    }, 0);
+  };
 }
 export function createPreviewApp(selector, options) {
   const sectionsData = ref({
@@ -40,6 +58,10 @@ export function createPreviewApp(selector, options) {
   const rawHtmlContent = ref(null);
   const currentProduct = ref("");
   const inlineEditingField = ref(null);
+  const scheduleInteractionRefresh = createInteractionRefreshScheduler(
+    selector,
+    () => currentProduct.value || "vigilkids"
+  );
   const app = createApp({
     setup() {
       provide("currentProduct", currentProduct);
@@ -54,12 +76,12 @@ export function createPreviewApp(selector, options) {
           }
         }
         sectionsData.value = data;
+        scheduleInteractionRefresh();
       });
       options.bridge.on("html:preview", (payload) => {
         const data = payload;
         rawHtmlContent.value = resolveContentVariables(data.html);
-        const product = currentProduct.value || "vigilkids";
-        loadProductInteractions(product);
+        scheduleInteractionRefresh();
       });
       options.bridge.on("section:select", (payload) => {
         const data = payload;
@@ -94,8 +116,8 @@ export function createPreviewApp(selector, options) {
         }
         if (data.productCode) {
           currentProduct.value = data.productCode;
-          loadProductCSS(data.productCode);
-          loadProductInteractions(data.productCode);
+          void loadProductCSS(data.productCode);
+          scheduleInteractionRefresh();
         }
       });
       function handleSectionClick(sectionId) {
@@ -104,47 +126,65 @@ export function createPreviewApp(selector, options) {
       return () => rawHtmlContent.value !== null ? h("div", {
         class: `article-content article-content--${currentProduct.value || "vigilkids"}`,
         innerHTML: rawHtmlContent.value
-      }) : h("div", {
-        class: `article-content article-content--${currentProduct.value || "vigilkids"}`
-      }, [h(SectionRenderer, {
-        sectionsData: sectionsData.value,
-        editorMode: true,
-        selectedSectionId: selectedSectionId.value,
-        allSectionsSelected: allSectionsSelected.value,
-        productCode: currentProduct.value || void 0,
-        onSectionClick: handleSectionClick,
-        onSettingUpdate: (sectionId, key, value) => {
-          options.bridge.send({
-            type: "inline-edit:update",
-            payload: { sectionId, key, value }
-          });
+      }) : h(
+        "div",
+        {
+          class: `article-content article-content--${currentProduct.value || "vigilkids"}`
         },
-        onBlockSettingUpdate: (sectionId, blockId, key, value) => {
-          options.bridge.send({
-            type: "inline-edit:block-update",
-            payload: { sectionId, blockId, key, value }
-          });
-        },
-        onInlineEditStart: (sectionId, key) => {
-          inlineEditingField.value = { sectionId, key };
-          options.bridge.send({ type: "inline-edit:start", payload: { sectionId, key } });
-        },
-        onInlineEditEnd: () => {
-          inlineEditingField.value = null;
-          options.bridge.send({ type: "inline-edit:end" });
-        },
-        onInlineEditUndoRedo: (action) => {
-          options.bridge.send({ type: action === "undo" ? "shortcut:undo" : "shortcut:redo" });
-        }
-      })]);
+        [
+          h(SectionRenderer, {
+            sectionsData: sectionsData.value,
+            editorMode: true,
+            selectedSectionId: selectedSectionId.value,
+            allSectionsSelected: allSectionsSelected.value,
+            productCode: currentProduct.value || void 0,
+            onSectionClick: handleSectionClick,
+            onSettingUpdate: (sectionId, key, value) => {
+              options.bridge.send({
+                type: "inline-edit:update",
+                payload: { sectionId, key, value }
+              });
+            },
+            onBlockSettingUpdate: (sectionId, blockId, key, value) => {
+              options.bridge.send({
+                type: "inline-edit:block-update",
+                payload: { sectionId, blockId, key, value }
+              });
+            },
+            onInlineEditStart: (sectionId, key) => {
+              inlineEditingField.value = { sectionId, key };
+              options.bridge.send({ type: "inline-edit:start", payload: { sectionId, key } });
+            },
+            onInlineEditEnd: () => {
+              inlineEditingField.value = null;
+              options.bridge.send({ type: "inline-edit:end" });
+            },
+            onInlineEditUndoRedo: (action) => {
+              options.bridge.send({
+                type: action === "undo" ? "shortcut:undo" : "shortcut:redo"
+              });
+            }
+          })
+        ]
+      );
     }
   });
   app.use(SectionRendererPlugin);
   app.mount(selector);
+  const previewRoot = getPreviewRoot(selector);
+  if (previewRoot instanceof HTMLElement) {
+    const observer = new MutationObserver((records) => {
+      const hasChildMutation = records.some((record) => record.type === "childList");
+      if (hasChildMutation) scheduleInteractionRefresh();
+    });
+    observer.observe(previewRoot, {
+      childList: true,
+      subtree: true
+    });
+  }
   import("../interactions/common.mjs").then((m) => m.setupCommonInteractions());
   document.addEventListener("keydown", (e) => {
-    if (isEditableTarget(e))
-      return;
+    if (isEditableTarget(e)) return;
     const undoRedoAction = detectUndoRedo(e);
     if (undoRedoAction) {
       e.preventDefault();

package/dist/sections/article/shared/ArticleCustomHtml.vue

@@ -2,9 +2,13 @@
 import type { BlockData } from '@vigilkids/section-core'
 import type { Ref } from 'vue'
 
-import { computed, inject } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { renderContent } from '../prosemirror'
+import {
+  applyArticleImageInlineStyle,
+  normalizeArticleImageDimension,
+} from '../../../utils/article-image'
 import { resolveContentVariables } from '../../../utils/content-variables'
 
 const props = defineProps<{
@@ -27,6 +31,36 @@ const htmlContent = computed(() => {
   return resolveContentVariables(renderContent(raw))
 })
 
+const contentRef = ref<HTMLElement | null>(null)
+
+function normalizeSizedImages() {
+  const root = contentRef.value
+  if (!root) return
+
+  root
+    .querySelectorAll<HTMLImageElement>('img[width], img[height]')
+    .forEach((image) => {
+      if (image.classList.contains('hot-icon') || image.classList.contains('icon')) return
+
+      const width = normalizeArticleImageDimension(image.getAttribute('width'))
+      const height = normalizeArticleImageDimension(image.getAttribute('height'))
+      applyArticleImageInlineStyle(image, width, height)
+    })
+}
+
+async function syncSizedImages() {
+  await nextTick()
+  normalizeSizedImages()
+}
+
+onMounted(() => {
+  void syncSizedImages()
+})
+
+watch(htmlContent, () => {
+  void syncSizedImages()
+}, { flush: 'post' })
+
 // ── v-html 内容的交互处理 ──
 // SectionWrapper 的 @click.stop 阻止事件冒泡到 document，
 // document 级事件委托无法捕获 v-html 内的点击，
@@ -74,5 +108,11 @@ function handleFaqToggle(faqTitle: Element) {
 </script>
 
 <template>
-  <div class="article-custom-html article-content" :class="[productClass]" v-html="htmlContent" @click="handleContentClick" />
+  <div
+    ref="contentRef"
+    class="article-custom-html article-content"
+    :class="[productClass]"
+    v-html="htmlContent"
+    @click="handleContentClick"
+  />
 </template>

package/dist/sections/article/shared/ArticleImage.vue

@@ -5,6 +5,10 @@ import { safeUrl } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../composables/useInlineEdit'
+import {
+  buildArticleImageInlineStyle,
+  normalizeArticleImageDimension,
+} from '../../../utils/article-image'
 
 const props = defineProps<{
   blockOrder: string[]
@@ -23,31 +27,73 @@ const emit = defineEmits<{
 
 const s = computed(() => props.settings)
 
+const allowedAlignments = ['left', 'center', 'right'] as const
+const allowedSizeModes = ['standard', 'wide', 'full', 'custom'] as const
+const allowedFits = ['contain', 'cover'] as const
+const allowedCornerRadii = ['none', 'sm', 'md', 'lg', 'xl'] as const
+
+function normalizeOption<T extends string>(value: unknown, allowed: readonly T[], fallback: T): T {
+  const normalized = typeof value === 'string' ? value : ''
+  return (allowed as readonly string[]).includes(normalized) ? (normalized as T) : fallback
+}
+
+const alignment = computed(() => normalizeOption(s.value.alignment, allowedAlignments, 'center'))
+const sizeMode = computed(() => normalizeOption(s.value.size_mode, allowedSizeModes, 'standard'))
+const fit = computed(() => normalizeOption(s.value.fit, allowedFits, 'contain'))
+const cornerRadius = computed(() =>
+  normalizeOption(s.value.corner_radius, allowedCornerRadii, 'lg'),
+)
+const src = computed(() => (typeof s.value.src === 'string' ? String(s.value.src).trim() : ''))
+const alt = computed(() => (typeof s.value.alt === 'string' ? String(s.value.alt) : ''))
+const caption = computed(() =>
+  typeof s.value.caption === 'string' ? String(s.value.caption).trim() : '',
+)
+const customWidth = computed(() =>
+  sizeMode.value === 'custom' ? normalizeArticleImageDimension(s.value.custom_width) : undefined,
+)
+const customHeight = computed(() =>
+  sizeMode.value === 'custom' ? normalizeArticleImageDimension(s.value.custom_height) : undefined,
+)
+const figureClass = computed(() => [
+  'article-image',
+  `article-image--align-${alignment.value}`,
+  `article-image--size-${sizeMode.value}`,
+  `article-image--fit-${fit.value}`,
+  `article-image--radius-${cornerRadius.value}`,
+])
+const imageAttrs = computed(() => ({
+  width: customWidth.value,
+  height: customHeight.value,
+}))
+const imageStyle = computed(() =>
+  sizeMode.value === 'custom'
+    ? buildArticleImageInlineStyle(customWidth.value, customHeight.value)
+    : {},
+)
+
 const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: key => emit('inline-edit-start', key),
+  onEditStart: (key) => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: action => emit('undo-redo', action),
+  onUndoRedo: (action) => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<figure class="article-image">
+  <figure :class="figureClass">
     <img
-      v-if="s.src"
-      :alt="String(s.alt || '')"
-      :src="safeUrl(String(s.src))"
+      v-if="src"
+      :alt="alt"
+      :src="safeUrl(src)"
+      :style="imageStyle"
       class="article-image__img"
       loading="lazy"
-    >
-    <figcaption v-if="s.caption" class="article-image__caption" v-bind="editableAttrs('caption')">
-      {{ s.caption }}
+      v-bind="imageAttrs"
+    />
+    <figcaption v-if="caption" class="article-image__caption" v-bind="editableAttrs('caption')">
+      {{ caption }}
     </figcaption>
   </figure>
 </template>
-
-<style scoped>
-.article-image{text-align:center}.article-image__img{height:auto;margin:10px auto 30px;max-width:500px;-o-object-fit:cover;object-fit:cover;width:auto}.article-image__caption{color:#999;font-size:14px;margin-bottom:10px;margin-top:-20px;text-align:center}@media (max-width:515px){.article-image__img{max-width:100%;width:auto}}
-</style>

package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue

@@ -24,7 +24,7 @@ const s = computed(() => props.settings)
 
 const items = computed(() =>
   props.blockOrder
-    .filter(id => props.blocks[id]?.type === 'related_item')
+    .filter((id) => props.blocks[id]?.type === 'related_item')
     .map((id) => {
       const block = props.blocks[id]!
       const article = block.settings.article as ArticleReferenceSnapshot | null | undefined
@@ -50,35 +50,34 @@ const { editableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
-  onEditStart: key => emit('inline-edit-start', key),
+  onEditStart: (key) => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: action => emit('undo-redo', action),
+  onUndoRedo: (action) => emit('undo-redo', action),
 })
 </script>
 
 <template>
   <section class="article-recommend" data-component="related-articles-carousel">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <h2 v-if="s.title" class="article-recommend-title" v-bind="editableAttrs('title')" v-html="s.title" />
-    <div class="recommend-grid">
-      <a
-        v-for="(item, i) in items"
-        :key="item.id"
-        :href="item.href"
-        class="recommend-card"
-      >
-        <div class="recommend-card-image">
-          <img
-            :src="item.imageURL"
-            :alt="item.imageAlt"
-          >
-        </div>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <p class="recommend-card-title" v-html="item.title" />
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <p class="recommend-card-desc" v-html="item.description" />
-        <span class="sr-only">{{ i + 1 }}</span>
-      </a>
+    <h2
+      v-if="s.title"
+      class="article-recommend-title"
+      v-bind="editableAttrs('title')"
+      v-html="s.title"
+    />
+    <div class="recommend-viewport">
+      <div class="recommend-grid">
+        <a v-for="(item, i) in items" :key="item.id" :href="item.href" class="recommend-card">
+          <div class="recommend-card-image">
+            <img :src="item.imageURL" :alt="item.imageAlt" />
+          </div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <p class="recommend-card-title" v-html="item.title" />
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <p class="recommend-card-desc" v-html="item.description" />
+          <span class="sr-only">{{ i + 1 }}</span>
+        </a>
+      </div>
     </div>
     <div v-if="showDots && items.length > 1" class="recommend-dots">
       <span