From 5b11664a3f51c573aeccab015a3dc5fe991ba651 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Sun, 7 Apr 2024 03:23:50 +0200
Subject: [PATCH] feat: add some icon

---
 public/projects/karl/favicon.png    |  3 ++
 src/components/ImageSlider.svelte   |  5 ++-
 src/components/Thumbhash.astro      | 55 -----------------------------
 src/content/projects/karl/index.mdx |  1 +
 src/pages/tag/[tag].astro           | 13 ++++---
 5 files changed, 14 insertions(+), 63 deletions(-)
 create mode 100644 public/projects/karl/favicon.png
 delete mode 100644 src/components/Thumbhash.astro

diff --git a/public/projects/karl/favicon.png b/public/projects/karl/favicon.png
new file mode 100644
index 0000000..f3a25cd
--- /dev/null
+++ b/public/projects/karl/favicon.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c34e79393092247650dba4d24163003495f353e68babd090691d5153d3f6edc
+size 1672
diff --git a/src/components/ImageSlider.svelte b/src/components/ImageSlider.svelte
index c2f00d5..0b9f649 100644
--- a/src/components/ImageSlider.svelte
+++ b/src/components/ImageSlider.svelte
@@ -19,7 +19,6 @@
     _img.addEventListener("load", () => {
       img.classList.remove("thumb-loading");
       _img.style.opacity = "1";
-      console.log("loaded");
     });
     if (_img?.alt) altText = _img.alt;
     else altText = "";
@@ -128,6 +127,10 @@
     display: none;
   }
 
+  .images :global(.thumb-loading)::before {
+    opacity: 0;
+  }
+
   .images :global(.active) {
     position: relative;
     display: block !important;
diff --git a/src/components/Thumbhash.astro b/src/components/Thumbhash.astro
deleted file mode 100644
index ff2900f..0000000
--- a/src/components/Thumbhash.astro
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import { thumbHashToRGBA, rgbaToDataURL } from "thumbhash";
-
-  function show(img: HTMLImageElement) {
-    img.style.opacity = "1";
-    img.style.filter = "blur(0px)";
-    setTimeout(() => {
-      if (img.parentNode) {
-        (img.parentNode as HTMLPictureElement).style.background = "";
-      }
-    }, 600);
-  }
-
-  console.log("Thumbhash script loaded");
-
-  document.querySelectorAll("[data-thumbhash]").forEach((entry) => {
-    const parent = entry?.parentNode as HTMLPictureElement;
-    const img = entry as HTMLImageElement;
-
-    if (parent?.nodeName !== "PICTURE") return;
-
-    const hash = img.getAttribute("data-thumbhash");
-    if (!hash) return;
-
-    // its only browser, why you have to be mad
-    const decodedString = window.atob(hash);
-
-    // Create Uint8Array from decoded string
-    const buffer = new Uint8Array(decodedString.length);
-    for (let i = 0; i < decodedString.length; i++) {
-      buffer[i] = decodedString.charCodeAt(i);
-    }
-
-    const image = thumbHashToRGBA(buffer);
-    const dataURL = rgbaToDataURL(image.w, image.h, image.rgba);
-
-    parent.style.background = `url(${dataURL})`;
-    parent.style.backgroundSize = "cover";
-
-    if (img.complete) {
-      return;
-    }
-
-    img.style.opacity = "0";
-    img.style.filter = "blur(5px)";
-    img.style.transition = "opacity 0.6s ease, filter 0.8s ease";
-
-    const sources = parent.querySelectorAll("source");
-
-    img.onload = () => show(img);
-    for (const source of sources) {
-      source.addEventListener("load", () => show(img));
-    }
-  });
-</script>
diff --git a/src/content/projects/karl/index.mdx b/src/content/projects/karl/index.mdx
index 1915ed6..d8aec1e 100644
--- a/src/content/projects/karl/index.mdx
+++ b/src/content/projects/karl/index.mdx
@@ -5,6 +5,7 @@ cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
 featured: true
 toc: true
+icon: /projects/karl/favicon.png
 links:
   [
     ["live", "https://max-richter.dev/karl"],
diff --git a/src/pages/tag/[tag].astro b/src/pages/tag/[tag].astro
index f3aca84..a85d04e 100644
--- a/src/pages/tag/[tag].astro
+++ b/src/pages/tag/[tag].astro
@@ -2,6 +2,8 @@
 import Layout from "@layouts/Layout.astro";
 import { getCollection } from "astro:content";
 import { useTranslatedPath } from "@i18n/utils";
+import SmallCard from "@components/SmallCard.astro";
+import SmallGrid from "@components/SmallGrid.astro";
 
 const collections = ["blog", "photos", "projects"] as const;
 
@@ -48,18 +50,15 @@ const posts = allPosts.filter((post) => {
 
 <Layout title="Max Richter">
   <article>
-    <h1>Tags</h1>
-    {posts.length}
-    <div class="flex flex-col gap-2">
+    <h1>Tag: {tag}</h1>
+    <SmallGrid>
       {
         posts.map((post) => {
           return (
-            <a href={tp("/" + post.collection + "/" + post.slug)}>
-              {post.slug}
-            </a>
+            <SmallCard post={post} />
           );
         })
       }
-    </div>
+    </SmallGrid>
   </article>
 </Layout>