feat(images): enable asynchronous decoding.

Theo-Messi · Jan 18, 2025 · 8a720af · 8a720af
1 parent eba8cf7
commit 8a720af
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 1 deletion.
diff --git a/src/components/DocAsideLogo.vue b/src/components/DocAsideLogo.vue
@@ -60,6 +60,7 @@ const props = defineProps<{ Aside_Data: AsideItem[] }>()
           :src="aside.image.light"
           :alt="aside.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -68,6 +69,7 @@ const props = defineProps<{ Aside_Data: AsideItem[] }>()
           :src="aside.image.dark"
           :alt="aside.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -76,6 +78,7 @@ const props = defineProps<{ Aside_Data: AsideItem[] }>()
           :src="aside.image"
           :alt="aside.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
       </template>

diff --git a/src/components/DocBox.vue b/src/components/DocBox.vue
@@ -55,6 +55,7 @@ const props = defineProps<{ items: BoxItem[] }>()
           :src="box.image.light"
           :alt="box.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -63,6 +64,7 @@ const props = defineProps<{ items: BoxItem[] }>()
           :src="box.image.dark"
           :alt="box.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -71,6 +73,7 @@ const props = defineProps<{ items: BoxItem[] }>()
           :src="box.image"
           :alt="box.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
       </template>

diff --git a/src/components/DocBoxCube.vue b/src/components/DocBoxCube.vue
@@ -63,6 +63,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>()
           :src="boxcube.image.light"
           :alt="boxcube.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -71,6 +72,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>()
           :src="boxcube.image.dark"
           :alt="boxcube.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -79,6 +81,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>()
           :src="boxcube.image"
           :alt="boxcube.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
       </template>

diff --git a/src/components/DocLinks.vue b/src/components/DocLinks.vue
@@ -57,6 +57,7 @@ const props = defineProps<{ items: LinkItem[] }>()
           :src="link.image.light"
           :alt="link.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -65,6 +66,7 @@ const props = defineProps<{ items: LinkItem[] }>()
           :src="link.image.dark"
           :alt="link.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
         <img
@@ -73,6 +75,7 @@ const props = defineProps<{ items: LinkItem[] }>()
           :src="link.image"
           :alt="link.name"
           loading="lazy"
+          decoding="async"
           aria-hidden="true"
         />
       </template>

diff --git a/src/components/DocPill.vue b/src/components/DocPill.vue
@@ -52,6 +52,7 @@ const pill = defineProps<Pill>()
         :src="pill.image.light"
         :alt="pill.name"
         loading="lazy"
+        decoding="async"
         aria-hidden="true"
       />
       <img
@@ -60,6 +61,7 @@ const pill = defineProps<Pill>()
         :src="pill.image.dark"
         :alt="pill.name"
         loading="lazy"
+        decoding="async"
         aria-hidden="true"
       />
       <img
@@ -68,6 +70,7 @@ const pill = defineProps<Pill>()
         :src="pill.image"
         :alt="pill.name"
         loading="lazy"
+        decoding="async"
         aria-hidden="true"
       />
     </template>

diff --git a/src/components/ShareButton.vue b/src/components/ShareButton.vue
@@ -29,6 +29,7 @@ const shareLink = useShareLink()
           class="iconify"
           :icon="ShareButton.buttonIcon || 'solar:share-bold'"
           :ssr="true"
+          :inline="true"
           alt="Icon"
           aria-hidden="true"
         />
@@ -40,6 +41,7 @@ const shareLink = useShareLink()
           class="iconify"
           :icon="ShareButton.copiedIcon || 'mdi:thumbs-up'"
           :ssr="true"
+          :inline="true"
           alt="Icon"
           aria-hidden="true"
         />
@@ -111,7 +113,7 @@ const shareLink = useShareLink()
 .iconify {
   display: inline-block;
   flex-shrink: 0;
-  margin: 0 0 -0.2em 0;
+  margin: 0 0 -0.1em 0;
   color: var(--ShareButton-icon);
   font-size: 1.2em;
 }