From 6edd8ba2cf2208aefdd5d3f581ebc87de59c303c Mon Sep 17 00:00:00 2001
From: Mikkel Svartveit <mikkel.svartveit@gmail.com>
Date: Mon, 13 May 2024 00:54:46 -0700
Subject: [PATCH] Add fade animation to view counter

---
 src/components/ArticleViewCounter.svelte | 36 +++++++++++++-----------
 src/pages/articles/[article].astro       |  2 +-
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/ArticleViewCounter.svelte b/src/components/ArticleViewCounter.svelte
index 122f3b2..af96efd 100644
--- a/src/components/ArticleViewCounter.svelte
+++ b/src/components/ArticleViewCounter.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { actions } from "astro:actions";
   import { onMount } from "svelte";
+  import { expoIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
 
   export let articleSlug: string;
 
@@ -13,23 +15,23 @@
   });
 </script>
 
-{#if counter !== null}
-  <span class="px-2">⋅</span>
+<span class="inline-flex items-center space-x-1">
+  <span class="px-1">⋅</span>
 
-  <span class="inline-flex items-center space-x-1">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="12">
-      <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-      <style>
-        svg {
-          fill: currentColor;
-        }
-      </style>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="12">
+    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+    <style>
+      svg {
+        fill: currentColor;
+      }
+    </style>
 
-      <path
-        d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
-      />
-    </svg>
+    <path
+      d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
+    />
+  </svg>
 
-    <span>{counter}</span>
-  </span>
-{/if}
+  {#if counter !== null}
+    <span transition:fade={{ duration: 200, easing: expoIn }}>{counter}</span>
+  {/if}
+</span>
diff --git a/src/pages/articles/[article].astro b/src/pages/articles/[article].astro
index 854627e..3350919 100644
--- a/src/pages/articles/[article].astro
+++ b/src/pages/articles/[article].astro
@@ -37,7 +37,7 @@ const title = headings[0].text;
           }
         </span>
 
-        <ArticleViewCounter articleSlug={project.slug} client:only="svelte" />
+        <ArticleViewCounter articleSlug={project.slug} client:load />
       </p>
 
       <ProseLayout>