v1.2.9: 라이브 에디터·홈 피드·메인 커버 개선

라이브 모드 코드/콜아웃/토글 편집, 슬래시 명령, 홈 Latest List·Compact·Cards 보기,
사이트 설정 메인 화면 커버(720px) 및 HomeHero 반영.

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/admin/settings/index.vue

@@ -8,10 +8,13 @@ const router = useRouter()
 const savingTitleDesc = ref(false)
 const savingMisc = ref(false)
 const savingPost = ref(false)
+const savingHomeCover = ref(false)
 const uploadingLogo = ref(false)
+const uploadingHomeCover = ref(false)
 const errorMessage = ref('')
 const toast = ref(null)
 const logoInputRef = ref(null)
+const homeCoverInputRef = ref(null)
 const mainScrollRef = ref(null)
 const navSearchQuery = ref('')
 const activeSectionId = ref('admin-settings-section-title')
@@ -22,6 +25,8 @@ const editTitleDesc = ref(false)
 const editMisc = ref(false)
 /** POST 설정 카드 편집 모드 여부 */
 const editPost = ref(false)
+/** 메인 화면 커버 카드 편집 모드 여부 */
+const editHomeCover = ref(false)
 /** 편집 시작 시점의 제목·설명(취소 시 복원용) */
 const titleDescSnapshot = reactive({
   title: '',
@@ -39,6 +44,12 @@ const miscSnapshot = reactive({
 const postSnapshot = reactive({
   showPostUpdatedAt: false
 })
+/** 편집 시작 시점의 메인 화면 커버(취소 시 복원용) */
+const homeCoverSnapshot = reactive({
+  homeCoverImageUrl: '',
+  homeCoverTitle: '',
+  homeCoverText: ''
+})
 let toastTimer = null
 let scrollSpyFrame = null
 
@@ -52,7 +63,10 @@ const form = reactive({
   logoUrl: settings.value?.logoUrl || '',
   faviconUrl: settings.value?.faviconUrl || '',
   copyrightText: settings.value?.copyrightText || '©2026 sori.studio',
-  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt)
+  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt),
+  homeCoverImageUrl: settings.value?.homeCoverImageUrl || '',
+  homeCoverTitle: settings.value?.homeCoverTitle || '',
+  homeCoverText: settings.value?.homeCoverText || ''
 })
 
 /**
@@ -83,6 +97,16 @@ const hasMiscChanges = computed(() => editMisc.value && (
 const hasPostChanges = computed(() => editPost.value
   && form.showPostUpdatedAt !== postSnapshot.showPostUpdatedAt)
 
+/**
+ * 메인 화면 커버 변경 여부
+ * @returns {boolean} 변경 여부
+ */
+const hasHomeCoverChanges = computed(() => editHomeCover.value && (
+  form.homeCoverImageUrl !== homeCoverSnapshot.homeCoverImageUrl
+  || form.homeCoverTitle !== homeCoverSnapshot.homeCoverTitle
+  || form.homeCoverText !== homeCoverSnapshot.homeCoverText
+))
+
 /**
  * 수정일 표시 라벨
  * @returns {string} 표시 문구
@@ -111,6 +135,7 @@ const settingsNavGroups = [
   {
     heading: '사이트',
     items: [
+      { id: 'admin-settings-section-home-cover', label: '메인 화면', keywords: 'home cover hero banner image' },
       { id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice' }
     ]
   },
@@ -308,7 +333,10 @@ const buildSiteSettingsPayload = () => ({
   logoUrl: form.logoUrl,
   faviconUrl: form.faviconUrl,
   copyrightText: form.copyrightText,
-  showPostUpdatedAt: Boolean(form.showPostUpdatedAt)
+  showPostUpdatedAt: Boolean(form.showPostUpdatedAt),
+  homeCoverImageUrl: form.homeCoverImageUrl || '',
+  homeCoverTitle: form.homeCoverTitle || '',
+  homeCoverText: form.homeCoverText || ''
 })
 
 /**
@@ -466,6 +494,108 @@ const savePostSection = async () => {
   }
 }
 
+/**
+ * 메인 화면 커버 파일 선택 창을 연다.
+ * @returns {void}
+ */
+const openHomeCoverFilePicker = () => {
+  if (uploadingHomeCover.value) {
+    return
+  }
+
+  homeCoverInputRef.value?.click()
+}
+
+/**
+ * 메인 화면 커버 이미지를 업로드한다.
+ * @param {Event} event - 파일 선택 이벤트
+ * @returns {Promise<void>}
+ */
+const uploadHomeCover = async (event) => {
+  const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
+  const file = target?.files?.[0]
+
+  if (!file || uploadingHomeCover.value) {
+    return
+  }
+
+  uploadingHomeCover.value = true
+  errorMessage.value = ''
+  showToast('info', '커버 이미지를 업로드하는 중입니다.')
+
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    const updatedSettings = await $fetch('/admin/api/settings/home-cover', {
+      method: 'POST',
+      body: formData
+    })
+    Object.assign(form, updatedSettings)
+    homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
+    showToast('success', '커버 이미지가 등록되었습니다.')
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '커버 이미지 업로드에 실패했습니다.'
+    showToast('error', errorMessage.value)
+  } finally {
+    uploadingHomeCover.value = false
+    if (target) {
+      target.value = ''
+    }
+  }
+}
+
+/**
+ * 메인 화면 커버 이미지를 제거한다.
+ * @returns {void}
+ */
+const clearHomeCoverImage = () => {
+  form.homeCoverImageUrl = ''
+}
+
+/**
+ * 메인 화면 커버 편집 모드 진입
+ * @returns {void}
+ */
+const beginEditHomeCover = () => {
+  homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
+  homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
+  homeCoverSnapshot.homeCoverText = form.homeCoverText
+  editHomeCover.value = true
+}
+
+/**
+ * 메인 화면 커버 편집 취소
+ * @returns {void}
+ */
+const cancelEditHomeCover = () => {
+  form.homeCoverImageUrl = homeCoverSnapshot.homeCoverImageUrl
+  form.homeCoverTitle = homeCoverSnapshot.homeCoverTitle
+  form.homeCoverText = homeCoverSnapshot.homeCoverText
+  editHomeCover.value = false
+}
+
+/**
+ * 메인 화면 커버 저장
+ * @returns {Promise<void>}
+ */
+const saveHomeCoverSection = async () => {
+  if (!hasHomeCoverChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: '메인 화면 설정이 저장되었습니다.',
+    savingFlag: savingHomeCover
+  })
+
+  if (ok) {
+    homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
+    homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
+    homeCoverSnapshot.homeCoverText = form.homeCoverText
+    editHomeCover.value = false
+  }
+}
+
 /**
  * Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
  * @param {KeyboardEvent} event - 키보드 이벤트
@@ -982,6 +1112,150 @@ onBeforeUnmount(() => {
           <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
             사이트
           </h2>
+          <section
+            id="admin-settings-section-home-cover"
+            class="admin-settings-screen__card admin-settings-screen__card--home-cover relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
+          >
+            <div class="flex items-start justify-between gap-4">
+              <div class="min-w-0 flex-1">
+                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
+                  메인 화면
+                </h2>
+                <p
+                  v-if="!editHomeCover"
+                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+                >
+                  홈 상단에 720px 너비 커버 이미지를 표시합니다. 제목·짧은 문구는 이미지 왼쪽 하단에 겹쳐 보입니다.
+                </p>
+              </div>
+              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+                <template v-if="!editHomeCover">
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
+                    type="button"
+                    @click="beginEditHomeCover"
+                  >
+                    편집
+                  </button>
+                </template>
+                <template v-else>
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
+                    type="button"
+                    :disabled="savingHomeCover"
+                    @click="cancelEditHomeCover"
+                  >
+                    취소
+                  </button>
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
+                    type="button"
+                    :disabled="savingHomeCover || !hasHomeCoverChanges"
+                    @click="saveHomeCoverSection"
+                  >
+                    {{ savingHomeCover ? '저장 중' : '저장' }}
+                  </button>
+                </template>
+              </div>
+            </div>
+
+            <div
+              v-if="!editHomeCover"
+              class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
+            >
+              <div v-if="form.homeCoverImageUrl" class="overflow-hidden rounded-lg border border-[#e6e8eb]">
+                <img
+                  class="aspect-[720/215] w-full max-w-[360px] object-cover"
+                  :src="form.homeCoverImageUrl"
+                  alt="메인 화면 커버 미리보기"
+                >
+              </div>
+              <p v-else class="text-[#657080]">
+                등록된 커버 이미지가 없습니다. 홈 상단 배너는 표시되지 않습니다.
+              </p>
+              <div v-if="form.homeCoverTitle || form.homeCoverText" class="grid gap-1">
+                <p v-if="form.homeCoverTitle" class="font-semibold text-[#15171a]">
+                  {{ form.homeCoverTitle }}
+                </p>
+                <p v-if="form.homeCoverText" class="text-[#657080]">
+                  {{ form.homeCoverText }}
+                </p>
+              </div>
+            </div>
+
+            <div v-else class="admin-settings-screen__home-cover-edit grid gap-6 border-t border-[#eceff2] pt-5">
+              <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                <div class="min-w-0 flex-1">
+                  <h3 class="text-sm font-medium text-[#3f4650]">
+                    커버 이미지
+                  </h3>
+                  <p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
+                    가로 720px 기준으로 저장됩니다. JPG·PNG·WebP를 사용할 수 있습니다.
+                  </p>
+                  <div
+                    v-if="form.homeCoverImageUrl"
+                    class="mt-3 overflow-hidden rounded-lg border border-[#e6e8eb]"
+                  >
+                    <img
+                      class="aspect-[720/215] w-full max-w-[360px] object-cover"
+                      :src="form.homeCoverImageUrl"
+                      alt="커버 미리보기"
+                    >
+                  </div>
+                </div>
+                <div class="flex shrink-0 flex-wrap gap-2">
+                  <button
+                    class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
+                    type="button"
+                    :disabled="uploadingHomeCover"
+                    @click="openHomeCoverFilePicker"
+                  >
+                    {{ uploadingHomeCover ? '업로드 중' : form.homeCoverImageUrl ? '이미지 변경' : '이미지 등록' }}
+                  </button>
+                  <button
+                    v-if="form.homeCoverImageUrl"
+                    class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
+                    type="button"
+                    :disabled="uploadingHomeCover"
+                    @click="clearHomeCoverImage"
+                  >
+                    이미지 제거
+                  </button>
+                </div>
+                <input
+                  ref="homeCoverInputRef"
+                  class="hidden"
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp"
+                  :disabled="uploadingHomeCover"
+                  @change="uploadHomeCover"
+                >
+              </div>
+
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">오버레이 제목</span>
+                <input
+                  v-model="form.homeCoverTitle"
+                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  type="text"
+                  maxlength="120"
+                  placeholder="선택 사항"
+                >
+              </label>
+
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">오버레이 본문</span>
+                <textarea
+                  v-model="form.homeCoverText"
+                  class="min-h-[4.5rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  maxlength="280"
+                  rows="3"
+                  placeholder="짧은 소개 문구 (선택 사항)"
+                />
+              </label>
+            </div>
+          </section>
+
           <section
             id="admin-settings-section-announcement"
             class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"

pages/index.vue

@@ -7,24 +7,97 @@ const { data: tags } = await useFetch('/api/tags', {
   default: () => []
 })
 
+const { data: siteSettings } = await useFetch('/api/site-settings', {
+  default: () => ({})
+})
+
 const postFeedStyleStorageKey = 'POST_FEED_STYLE'
 
 const postFeedStyleOpen = ref(false)
 const postFeedStyle = ref('compact')
 
+/** @typedef {'list' | 'compact' | 'cards'} PostFeedStyle */
+
+/**
+ * 저장·표시용 피드 보기 방식을 정규화한다.
+ * @param {string|null|undefined} value - 원본 값
+ * @returns {PostFeedStyle}
+ */
+const normalizePostFeedStyle = (value) => {
+  if (value === 'list' || value === 'cards') {
+    return value
+  }
+
+  return 'compact'
+}
+
 /**
  * Latest 피드 보기 방식을 저장한다.
  * @param {'list' | 'compact' | 'cards' | 'articles'} value - 보기 방식
  * @returns {void}
  */
 const setPostFeedStyle = (value) => {
-  postFeedStyle.value = value
+  const nextStyle = normalizePostFeedStyle(value === 'articles' ? 'compact' : value)
+  postFeedStyle.value = nextStyle
 
   if (import.meta.client) {
-    localStorage.setItem(postFeedStyleStorageKey, value)
+    localStorage.setItem(postFeedStyleStorageKey, nextStyle)
   }
 }
 
+/** @type {import('vue').ComputedRef<boolean>} */
+const isPostFeedCards = computed(() => postFeedStyle.value === 'cards')
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const showPostFeedMedia = computed(() => postFeedStyle.value === 'list' || postFeedStyle.value === 'cards')
+
+/**
+ * Latest 피드 컨테이너 클래스
+ * @param {PostFeedStyle} style - 보기 방식
+ * @returns {string}
+ */
+const getPostFeedContainerClass = (style) => {
+  if (style === 'cards') {
+    return 'post-feed post-feed--cards mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2'
+  }
+
+  return 'post-feed post-feed--stack flex flex-col divide-y divide-[var(--site-line)]'
+}
+
+/**
+ * Latest 게시물 카드 클래스
+ * @param {PostFeedStyle} style - 보기 방식
+ * @returns {string}
+ */
+const getPostFeedArticleClass = (style) => {
+  if (style === 'cards') {
+    return 'post-feed__card group relative flex flex-col rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-3'
+  }
+
+  if (style === 'compact') {
+    return 'post-feed__item post-feed__item--compact group relative flex flex-row gap-3 py-3'
+  }
+
+  return 'post-feed__item post-feed__item--list group relative flex flex-row gap-3 py-4'
+}
+
+/**
+ * 요약 줄 수 클래스
+ * @param {PostFeedStyle} style - 보기 방식
+ * @returns {string}
+ */
+const getPostFeedExcerptClass = (style) => {
+  if (style === 'list') {
+    return 'line-clamp-3'
+  }
+
+  if (style === 'compact') {
+    return 'line-clamp-1'
+  }
+
+  return 'line-clamp-2'
+}
+
 const closePostFeedStyleMenu = () => {
   postFeedStyleOpen.value = false
 }
@@ -163,9 +236,7 @@ onMounted(() => {
   }
 
   const storedStyle = localStorage.getItem(postFeedStyleStorageKey)
-  if (storedStyle === 'list' || storedStyle === 'compact' || storedStyle === 'cards' || storedStyle === 'articles') {
-    postFeedStyle.value = storedStyle
-  }
+  postFeedStyle.value = normalizePostFeedStyle(storedStyle)
 
   document.addEventListener('pointerdown', onDocumentPointerDown)
 })
@@ -211,26 +282,12 @@ const scrollFeatured = (direction) => {
 
 <template>
   <MainColumn>
-    <section class="py-6 px-6 md:py-8">
-      <div class="mx-auto flex max-w-[720px] flex-col-reverse gap-6">
-        <div class="z-[2] flex flex-col items-center justify-center gap-2 text-center">
-          <h1 class="text-xl font-semibold leading-[1.125] md:text-2xl">
-            Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
-          </h1>
-          <p class="max-w-md text-base leading-snug site-muted">
-            A modern Ghost theme for curated, community-driven publishing, where members join the conversation.
-          </p>
-          <form class="group relative mt-1 flex w-full max-w-xs flex-col items-start">
-            <fieldset class="flex w-full flex-wrap gap-2 text-sm">
-              <legend class="sr-only">Personal information</legend>
-              <input class="site-input flex-[2] rounded-[10px] px-3 py-1.5 text-sm" type="email" placeholder="Your email" aria-label="Your email">
-              <button class="site-button flex-1 cursor-pointer rounded-[10px] border border-[var(--site-invert)] bg-gradient-to-b from-[rgba(17,17,17,0.75)] to-[rgba(17,17,17,0.95)] px-3 py-1.5 font-medium text-[var(--site-invert-text)] hover:opacity-90" type="button">
-                Subscribe
-              </button>
-            </fieldset>
-          </form>
-        </div>
-      </div>
+    <section v-if="siteSettings?.homeCoverImageUrl" class="home-page__hero px-6 pb-2 pt-6 md:pt-8">
+      <HomeHero
+        :image-url="siteSettings.homeCoverImageUrl"
+        :title="siteSettings.homeCoverTitle"
+        :text="siteSettings.homeCoverText"
+      />
     </section>
 
     <section v-if="featuredPosts.length" class="py-4 px-6">
@@ -326,13 +383,6 @@ const scrollFeatured = (direction) => {
                   <path d="M4 16a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" />
                 </svg>
               </span>
-              <span class="pointer-events-none" v-show="postFeedStyle === 'articles'">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M3.06 13a9 9 0 1 0 .49-4.087" />
-                  <path d="M3 4.001v5h5" />
-                  <path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-                </svg>
-              </span>
               <span class="pointer-events-none opacity-75">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                   <path d="m6 9 6 6 6-6" />
@@ -386,7 +436,7 @@ const scrollFeatured = (direction) => {
                 </button>
               </li>
               <li class="w-full">
-                <button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('articles'); closePostFeedStyleMenu()">
+                <button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('compact'); closePostFeedStyleMenu()">
                   <span class="pointer-events-none">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                       <path d="M3.06 13a9 9 0 1 0 .49-4.087" />
@@ -400,47 +450,33 @@ const scrollFeatured = (direction) => {
             </menu>
           </div>
         </div>
-        <div class="mb-8 flex flex-col">
+        <div class="post-feed-section mb-8 flex flex-col">
           <div
-            class="flex flex-col divide-y divide-[var(--site-line)]"
-            :class="postFeedStyle === 'cards' ? 'divide-y-0 gap-4 sm:grid sm:grid-cols-2 sm:gap-4' : ''"
+            class="post-feed-section__list"
+            data-post-feed="latest"
+            :class="getPostFeedContainerClass(postFeedStyle)"
           >
             <article
               v-for="post in latestPosts"
               :key="post.to"
-              class="group relative overflow-hidden"
-              :class="postFeedStyle === 'cards' ? 'rounded-[10px] border border-[var(--site-line)] p-3' : 'flex flex-row gap-3 py-4'"
+              data-post-card
+              :data-featured="post.isFeatured ? '' : undefined"
+              :class="getPostFeedArticleClass(postFeedStyle)"
             >
-              <NuxtLink
+              <PostCardMedia
+                v-if="showPostFeedMedia"
                 :to="post.to"
-                class="relative flex-1"
-                :class="postFeedStyle === 'cards' ? 'mb-3 block aspect-video w-full' : 'aspect-square min-w-16 sm:aspect-video'"
-              >
-                <figure class="overflow-hidden rounded-[10px]">
-                  <img
-                    v-if="post.featuredImage"
-                    :src="post.featuredImage"
-                    :alt="post.title"
-                    class="w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
-                    :class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
-                    loading="lazy"
-                  >
-                  <div
-                    v-else
-                    class="w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)]"
-                    :class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
-                  />
-                </figure>
-              </NuxtLink>
+                :title="post.title"
+                :featured-image="post.featuredImage"
+                :link-class="isPostFeedCards ? 'post-feed__media post-feed__media--cards mb-3 block aspect-video w-full' : 'post-feed__media post-feed__media--list relative flex-1 aspect-square min-w-16 sm:aspect-video'"
+                :aspect-class="isPostFeedCards ? 'aspect-video' : 'aspect-square sm:aspect-video'"
+              />
 
               <div
-                class="relative"
-                :class="postFeedStyle === 'cards' ? '' : 'flex-[3] md:flex-[4]'"
+                class="post-feed__content relative min-w-0"
+                :class="isPostFeedCards ? 'flex flex-col' : 'flex flex-[3] flex-col gap-1.5 md:flex-[4]'"
               >
-                <div
-                  class="flex h-full flex-col gap-1.5"
-                  :class="postFeedStyle === 'cards' ? '' : ''"
-                >
+                <div class="post-feed__content-inner flex min-h-0 flex-1 flex-col gap-1.5">
                   <h2 class="max-w-[90%] text-sm font-medium leading-tight">
                     <NuxtLink :to="post.to" class="flex items-center transition-opacity duration-200 hover:opacity-75">
                       <span v-if="post.isFeatured" class="post-feed__featured-icon mr-1 inline-flex h-4 w-4 items-center justify-center text-[var(--site-accent)]">
@@ -453,8 +489,8 @@ const scrollFeatured = (direction) => {
                   </h2>
 
                   <p
-                    class="flex-1 text-[0.8rem] leading-tight site-muted"
-                    :class="postFeedStyle === 'list' ? 'line-clamp-3' : postFeedStyle === 'articles' ? 'line-clamp-4' : 'line-clamp-2'"
+                    class="flex-1 text-[0.8rem] leading-tight site-muted text-[#6E6661]"
+                    :class="getPostFeedExcerptClass(postFeedStyle)"
                   >
                     {{ post.excerpt }}
                   </p>
@@ -482,7 +518,7 @@ const scrollFeatured = (direction) => {
 
                 <button
                   class="absolute top-0 right-0 flex cursor-pointer items-center gap-1 hover:opacity-75"
-                  :class="postFeedStyle === 'cards' ? '' : 'md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100'"
+                  :class="isPostFeedCards ? '' : 'md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100'"
                   type="button"
                   aria-label="Share this post"
                 >

pages/tag/[slug].vue

@@ -52,24 +52,13 @@ const tagPosts = computed(() => posts.value
             class="tag-posts-list__item site-section site-panel-hover group relative text-[var(--site-text)]"
           >
             <div class="tag-posts-list__body site-section-body flex flex-row gap-3">
-              <NuxtLink
+              <PostCardMedia
                 :to="post.to"
-                class="relative aspect-square min-w-16 flex-1 sm:aspect-video"
-              >
-                <figure class="overflow-hidden rounded-[10px]">
-                  <img
-                    v-if="post.featuredImage"
-                    :src="post.featuredImage"
-                    :alt="post.title"
-                    class="aspect-square w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90 sm:aspect-video"
-                    loading="lazy"
-                  >
-                  <div
-                    v-else
-                    class="aspect-square w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)] sm:aspect-video"
-                  />
-                </figure>
-              </NuxtLink>
+                :title="post.title"
+                :featured-image="post.featuredImage"
+                link-class="relative aspect-square min-w-16 flex-1 sm:aspect-video"
+                aspect-class="aspect-square w-full sm:aspect-video"
+              />
 
               <div class="relative flex-[3] md:flex-[4]">
                 <div class="flex h-full flex-col gap-1.5">