feat(app): add Github star count

content/1-reactivity/2-update-state/react/Name.jsx

@@ -3,7 +3,9 @@ import { useEffect, useState } from "react";
 export default function Name() {
   const [name, setName] = useState("John");
 
-  useEffect(() => setName("Jane"), []);
+  useEffect(() => {
+    setName("Jane");
+  }, []);
 
   return <h1>Hello {name}</h1>;
-}
+}

index.html

@@ -57,6 +57,7 @@
       :root {
         /* bg-gray-900 */
         --bg-color: rgb(17 24 39);
+        color-scheme: dark;
       }
 
       html {

src/app.css

@@ -1,7 +1,3 @@
-:root {
-  color-scheme: dark;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/components/GithubStarButton.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from "svelte";
+  import createLocaleStorage from "../lib/createLocaleStorage";
+  import GithubIcon from "./GithubIcon.svelte";
+
+  const REPOSITORY_PATH = "matschik/component-party.dev";
+  const starCountStorage = createLocaleStorage("github-star-count");
+
+  let starCount = null;
+
+  async function getRepoStarCount() {
+    const starCountStorageData = starCountStorage.getJSON();
+    if (
+      starCountStorageData &&
+      starCountStorageData.fetchedAt > Date.now() - 1000 * 60 * 5
+    ) {
+      starCount = starCountStorageData.value;
+      return;
+    }
+
+    const data = await fetch(
+      `https://api.github.com/repos/${REPOSITORY_PATH}`,
+      {
+        headers: {
+          Accept: "application/vnd.github.v3.star+json",
+          Authorization: "",
+        },
+      }
+    ).then((r) => r.json());
+
+    starCount = data.stargazers_count;
+    starCountStorage.setJSON({
+      value: starCount,
+      fetchedAt: Date.now(),
+    });
+  }
+
+  onMount(() => {
+    getRepoStarCount();
+  });
+
+  function onButtonClick() {
+    starCountStorage.remove();
+  }
+</script>
+
+<a
+  class="bg-[#21262d] text-[#c9d1d9] border border-[#373b43] py-1 rounded flex items-center text-sm shadow-inner hover:opacity-90"
+  href={`https://github.com/${REPOSITORY_PATH}`}
+  target="_blank"
+  aria-label={`Star ${REPOSITORY_PATH} on GitHub`}
+  on:click={onButtonClick}
+>
+  <span
+    class="space-x-2 flex items-center border-r border-[#373b43] font-medium px-2"
+  >
+    <GithubIcon class="w-[1.1rem] h-[1.1rem]" />
+    <span class="mt-px">Star</span>
+  </span>
+  {#if starCount !== null}
+    <div class="h-full flex justify-center items-center pl-3 pr-3 font-medium">
+      <span class="mt-px">{starCount}</span>
+    </div>
+  {/if}
+</a>

src/components/Header.svelte

@@ -1,5 +1,5 @@
 <script>
-  import GithubIcon from "./GithubIcon.svelte";
+  import GithubStarButton from "./GithubStarButton.svelte";
 </script>
 
 <header class="backdrop-blur bg-gray-900/80 border-b border-gray-700">
@@ -9,18 +9,7 @@
         <img src="/popper.svg" alt="logo" class="w-5 h-5" />
         <span>Component party</span>
       </a>
-
-      <div>
-        <a
-          href="https://github.com/matschik/component-party"
-          title="Contribute on Github"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <GithubIcon class="h-6 w-6" />
-          <span class="sr-only">github</span>
-        </a>
-      </div>
+      <GithubStarButton />
     </div>
   </div>
 </header>