From bea18cb5c479e5302c18d0499927eb84f2f3b599 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:46:08 +0800
Subject: [PATCH 1/4] Add loading placeholder for article thumbnails

---
 src/partials/ArticleItemPartial.vue | 72 ++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index e5ee8d32..638cadb7 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -1,8 +1,38 @@
 <template>
-	<article v-if="item" class="py-5 border-b border-slate-100 dark:border-slate-800">
-		<div class="flex items-start">
-			<img class="rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] object-cover mr-6" :src="item.cover_image_url" width="88" height="88" :alt="item.title" decoding="async" fetchpriority="high" />
-			<div>
+        <article v-if="item" class="py-5 border-b border-slate-100 dark:border-slate-800">
+                <div class="flex items-start">
+                        <div
+                                class="relative rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] mr-6 overflow-hidden bg-slate-200 dark:bg-slate-800"
+                                :class="imageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'"
+                        >
+                                <img
+                                        v-if="!imageError"
+                                        class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
+                                        :class="imageLoaded ? 'opacity-100' : 'opacity-0'"
+                                        :src="item.cover_image_url"
+                                        width="88"
+                                        height="88"
+                                        :alt="item.title"
+                                        decoding="async"
+                                        loading="lazy"
+                                        @load="handleImageLoad"
+                                        @error="handleImageError"
+                                />
+                                <div v-if="showSkeleton" class="absolute inset-0 flex items-center justify-center">
+                                        <svg
+                                                v-if="imageError"
+                                                class="w-6 h-6 text-slate-400 dark:text-slate-600"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                stroke-width="1.5"
+                                                stroke="currentColor"
+                                        >
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                                        </svg>
+                                </div>
+                        </div>
+                        <div>
 				<div class="text-xs text-slate-700 uppercase mb-1 dark:text-slate-500">
 					{{ date().format(new Date(item.published_at)) }}
 				</div>
@@ -36,10 +66,40 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import { date } from '@/public.ts';
 import type { PostResponse } from '@api/response/index.ts';
 
-defineProps<{
-	item: PostResponse;
+const props = defineProps<{
+        item: PostResponse;
 }>();
+
+const imageLoaded = ref(false);
+const imageError = ref(false);
+
+const handleImageLoad = () => {
+        imageLoaded.value = true;
+};
+
+const handleImageError = () => {
+        imageError.value = true;
+        imageLoaded.value = true;
+};
+
+const showSkeleton = computed(() => !imageLoaded.value || imageError.value);
+
+watch(
+        () => props.item?.cover_image_url,
+        (newSrc) => {
+                if (!newSrc) {
+                        imageLoaded.value = true;
+                        imageError.value = true;
+                        return;
+                }
+
+                imageLoaded.value = false;
+                imageError.value = false;
+        },
+        { immediate: true },
+);
 </script>

From 5050e02eb974ca488fc630ba50a30903036cedbf Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:53:33 +0800
Subject: [PATCH 2/4] Refine article thumbnail image status handling

---
 src/partials/ArticleItemPartial.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index 638cadb7..dded12e1 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -3,12 +3,12 @@
                 <div class="flex items-start">
                         <div
                                 class="relative rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] mr-6 overflow-hidden bg-slate-200 dark:bg-slate-800"
-                                :class="imageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'"
+                                :class="isImageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'"
                         >
                                 <img
-                                        v-if="!imageError"
+                                        v-if="!isImageError"
                                         class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
-                                        :class="imageLoaded ? 'opacity-100' : 'opacity-0'"
+                                        :class="isImageLoaded ? 'opacity-100' : 'opacity-0'"
                                         :src="item.cover_image_url"
                                         width="88"
                                         height="88"
@@ -20,7 +20,7 @@
                                 />
                                 <div v-if="showSkeleton" class="absolute inset-0 flex items-center justify-center">
                                         <svg
-                                                v-if="imageError"
+                                                v-if="isImageError"
                                                 class="w-6 h-6 text-slate-400 dark:text-slate-600"
                                                 xmlns="http://www.w3.org/2000/svg"
                                                 fill="none"
@@ -74,31 +74,31 @@ const props = defineProps<{
         item: PostResponse;
 }>();
 
-const imageLoaded = ref(false);
-const imageError = ref(false);
+type ImageStatus = 'loading' | 'loaded' | 'error';
+
+const imageStatus = ref<ImageStatus>('loading');
 
 const handleImageLoad = () => {
-        imageLoaded.value = true;
+        imageStatus.value = 'loaded';
 };
 
 const handleImageError = () => {
-        imageError.value = true;
-        imageLoaded.value = true;
+        imageStatus.value = 'error';
 };
 
-const showSkeleton = computed(() => !imageLoaded.value || imageError.value);
+const isImageError = computed(() => imageStatus.value === 'error');
+const isImageLoaded = computed(() => imageStatus.value === 'loaded');
+const showSkeleton = computed(() => imageStatus.value !== 'loaded');
 
 watch(
         () => props.item?.cover_image_url,
         (newSrc) => {
                 if (!newSrc) {
-                        imageLoaded.value = true;
-                        imageError.value = true;
+                        imageStatus.value = 'error';
                         return;
                 }
 
-                imageLoaded.value = false;
-                imageError.value = false;
+                imageStatus.value = 'loading';
         },
         { immediate: true },
 );

From a01854f31708ec5a47e307a9e8d711c3b1baa5ff Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:56:30 +0800
Subject: [PATCH 3/4] Use broken image icon for thumbnail errors

---
 src/partials/ArticleItemPartial.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index dded12e1..bcf3d036 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -28,7 +28,22 @@
                                                 stroke-width="1.5"
                                                 stroke="currentColor"
                                         >
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                                                <path
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        d="M3 4.5A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15Z"
+                                                />
+                                                <path
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        d="m3 14.25 3.955-3.955a2.25 2.25 0 0 1 3.182 0L15 15.75"
+                                                />
+                                                <path
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        d="m13.5 12 1.955-1.955a2.25 2.25 0 0 1 3.182 0L21 13.5"
+                                                />
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 8.25h.008v.008H8.25z" />
                                         </svg>
                                 </div>
                         </div>

From 11040796be02774466885457570122035a73a0c0 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Tue, 30 Sep 2025 15:58:09 +0800
Subject: [PATCH 4/4] fotmat

---
 src/partials/ArticleItemPartial.vue | 112 +++++++++++++---------------
 1 file changed, 50 insertions(+), 62 deletions(-)

diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index bcf3d036..ab5b089f 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -1,53 +1,41 @@
 <template>
-        <article v-if="item" class="py-5 border-b border-slate-100 dark:border-slate-800">
-                <div class="flex items-start">
-                        <div
-                                class="relative rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] mr-6 overflow-hidden bg-slate-200 dark:bg-slate-800"
-                                :class="isImageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'"
-                        >
-                                <img
-                                        v-if="!isImageError"
-                                        class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
-                                        :class="isImageLoaded ? 'opacity-100' : 'opacity-0'"
-                                        :src="item.cover_image_url"
-                                        width="88"
-                                        height="88"
-                                        :alt="item.title"
-                                        decoding="async"
-                                        loading="lazy"
-                                        @load="handleImageLoad"
-                                        @error="handleImageError"
-                                />
-                                <div v-if="showSkeleton" class="absolute inset-0 flex items-center justify-center">
-                                        <svg
-                                                v-if="isImageError"
-                                                class="w-6 h-6 text-slate-400 dark:text-slate-600"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                fill="none"
-                                                viewBox="0 0 24 24"
-                                                stroke-width="1.5"
-                                                stroke="currentColor"
-                                        >
-                                                <path
-                                                        stroke-linecap="round"
-                                                        stroke-linejoin="round"
-                                                        d="M3 4.5A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15Z"
-                                                />
-                                                <path
-                                                        stroke-linecap="round"
-                                                        stroke-linejoin="round"
-                                                        d="m3 14.25 3.955-3.955a2.25 2.25 0 0 1 3.182 0L15 15.75"
-                                                />
-                                                <path
-                                                        stroke-linecap="round"
-                                                        stroke-linejoin="round"
-                                                        d="m13.5 12 1.955-1.955a2.25 2.25 0 0 1 3.182 0L21 13.5"
-                                                />
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 8.25h.008v.008H8.25z" />
-                                        </svg>
-                                </div>
-                        </div>
-                        <div>
+	<article v-if="item" class="py-5 border-b border-slate-100 dark:border-slate-800">
+		<div class="flex items-start">
+			<div
+				class="relative rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] mr-6 overflow-hidden bg-slate-200 dark:bg-slate-800"
+				:class="isImageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'"
+			>
+				<img
+					v-if="!isImageError"
+					class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
+					:class="isImageLoaded ? 'opacity-100' : 'opacity-0'"
+					:src="item.cover_image_url"
+					width="88"
+					height="88"
+					:alt="item.title"
+					decoding="async"
+					loading="lazy"
+					@load="handleImageLoad"
+					@error="handleImageError"
+				/>
+				<div v-if="showSkeleton" class="absolute inset-0 flex items-center justify-center">
+					<svg
+						v-if="isImageError"
+						class="w-6 h-6 text-slate-400 dark:text-slate-600"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15Z" />
+						<path stroke-linecap="round" stroke-linejoin="round" d="m3 14.25 3.955-3.955a2.25 2.25 0 0 1 3.182 0L15 15.75" />
+						<path stroke-linecap="round" stroke-linejoin="round" d="m13.5 12 1.955-1.955a2.25 2.25 0 0 1 3.182 0L21 13.5" />
+						<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 8.25h.008v.008H8.25z" />
+					</svg>
+				</div>
+			</div>
+			<div>
 				<div class="text-xs text-slate-700 uppercase mb-1 dark:text-slate-500">
 					{{ date().format(new Date(item.published_at)) }}
 				</div>
@@ -81,12 +69,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
 import { date } from '@/public.ts';
+import { computed, ref, watch } from 'vue';
 import type { PostResponse } from '@api/response/index.ts';
 
 const props = defineProps<{
-        item: PostResponse;
+	item: PostResponse;
 }>();
 
 type ImageStatus = 'loading' | 'loaded' | 'error';
@@ -94,11 +82,11 @@ type ImageStatus = 'loading' | 'loaded' | 'error';
 const imageStatus = ref<ImageStatus>('loading');
 
 const handleImageLoad = () => {
-        imageStatus.value = 'loaded';
+	imageStatus.value = 'loaded';
 };
 
 const handleImageError = () => {
-        imageStatus.value = 'error';
+	imageStatus.value = 'error';
 };
 
 const isImageError = computed(() => imageStatus.value === 'error');
@@ -106,15 +94,15 @@ const isImageLoaded = computed(() => imageStatus.value === 'loaded');
 const showSkeleton = computed(() => imageStatus.value !== 'loaded');
 
 watch(
-        () => props.item?.cover_image_url,
-        (newSrc) => {
-                if (!newSrc) {
-                        imageStatus.value = 'error';
-                        return;
-                }
+	() => props.item?.cover_image_url,
+	(newSrc) => {
+		if (!newSrc) {
+			imageStatus.value = 'error';
+			return;
+		}
 
-                imageStatus.value = 'loading';
-        },
-        { immediate: true },
+		imageStatus.value = 'loading';
+	},
+	{ immediate: true },
 );
 </script>