Add GitHub ribbon component with star count and animation

Author: DuskyElf

src/components/GithubRibbon.tsx

@@ -0,0 +1,50 @@
+import { createResource } from "solid-js";
+
+export default function GithubRibbon() {
+  const [stars] = createResource(async () => {
+    const res = await fetch(
+      "https://api.github.com/repos/Segfault-Club/segfault-club.github.io",
+    );
+    const data = await res.json();
+    return data.stargazers_count;
+  });
+
+  return (
+    <a
+      href="https://github.com/Segfault-Club/segfault-club.github.io"
+      target="_blank"
+      class="group absolute top-0 right-0"
+      aria-label="View source on GitHub"
+    >
+      <div class="absolute top-1/2 -left-6 flex scale-0 items-center gap-1 rounded bg-black p-1 text-white transition group-hover:scale-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          class="inline size-5"
+        >
+          <path d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+        </svg>
+        {stars() ? stars() : "Star us"}
+      </div>
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        class="group fill-slate-200 text-slate-950 transition hover:fill-white"
+        aria-hidden="true"
+      >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          class="group-hover:animate-wave [transform-origin:130px_106px]"
+        />
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  );
+}

src/index.css

@@ -2,6 +2,22 @@
 
 @theme {
   --font-logo: "Asimovian", sans-serif;
+  --animate-wave: wave 560ms ease-in-out;
+
+  @keyframes wave {
+    0%,
+    100% {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
 }
 
 @layer base {

src/index.tsx

@@ -2,12 +2,14 @@ import { render } from "solid-js/web";
 import "./index.css";
 
 import Background from "./components/Background";
+import GithubRibbon from "./components/GithubRibbon";
 import Main from "./sections/Main";
 import Members from "./sections/Members";
 
 const App = () => (
   <>
     <Background src="/assets/Linux-user-Room.webp" />
+    <GithubRibbon />
     <Main className="h-[80vh]" />
     <Members />
   </>