fix: add title tags to homepage icons (#74)

* fix: add title tags to homepage icons * fix: use new vite api for glob image import
tconbeer · Apr 19, 2024 · 0010453 · 0010453
1 parent fd4988d
commit 0010453
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/src/lib/assets/themes/harlequin.svg b/src/lib/assets/themes/harlequin.svg
diff --git a/src/lib/components/lazy_image.svelte b/src/lib/components/lazy_image.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   export let src = "";
+  export let title = "";
   export let alt = "";
   export let className = "";
 
@@ -17,6 +18,6 @@
 
 <IntersectionObserver once={true} let:intersecting>
   {#if intersecting || nativeLoading}
-    <img {src} {alt} class={className} loading="lazy" />
+    <img {src} {title} {alt} class={className} loading="lazy" />
   {/if}
 </IntersectionObserver>
diff --git a/src/routes/databases.svelte b/src/routes/databases.svelte
@@ -1,7 +1,7 @@
 <script>
   import LazyImage from "$lib/components/lazy_image.svelte";
   const databases = import.meta.glob("$lib/assets/databases/*.{svg,png}", {
-    as: "url",
+    query: "?url",
     eager: true,
   });
 </script>
@@ -26,11 +26,12 @@
   >.
 </p>
 <ul class="my-4 flex flex-wrap justify-center gap-2 md:px-16">
-  {#each Object.values(databases) as database}
+  {#each Object.entries(databases) as [db_url, db]}
     <li class="h-[50px] w-[50px]">
       <LazyImage
-        src={database}
-        alt={database.split("/").pop()?.split(".")[0]}
+        src={db.default}
+        title={db_url.split("/").pop()?.split(".")[0]}
+        alt={db_url.split("/").pop()?.split(".")[0]}
         className="object-fit grayscale"
       />
     </li>

diff --git a/src/routes/platforms.svelte b/src/routes/platforms.svelte
@@ -14,31 +14,32 @@
   import iterm from "$lib/assets/platforms/iterm2.png";
   import tmux from "$lib/assets/platforms/tmux.png";
 
-  const platforms = [
-    windows,
-    mac,
-    linux,
-    bash,
-    zsh,
-    fish,
-    cmd,
-    powershell,
-    terminal,
-    iterm,
-    tmux,
-  ];
+  const platforms = {
+    windows: windows,
+    mac: mac,
+    linux: linux,
+    bash: bash,
+    zsh: zsh,
+    fish: fish,
+    cmd: cmd,
+    powershell: powershell,
+    terminal: terminal,
+    iterm: iterm,
+    tmux: tmux,
+  };
 </script>
 
 <p class="text-center">
   Any shell, any terminal, any machine. Fish in tmux on Alpine over SSH? Sure.
   Windows cmd? Yep.
 </p>
 <ul class="my-4 flex flex-wrap justify-between gap-2 md:px-16">
-  {#each platforms as platform}
+  {#each Object.entries(platforms) as [platform_name, img_src]}
     <li class="h-[50px] w-[50px]">
       <LazyImage
-        src={platform}
-        alt="Icon for an OS, Shell, or Terminal."
+        src={img_src}
+        title={platform_name}
+        alt="Icon for a {platform_name}."
         className="object-fit grayscale"
       />
     </li>