Move back to signals-based implementation

jsr-io · Mar 29, 2024 · 38a0f60 · 38a0f60
1 parent 01dc968
commit 38a0f60
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -3,9 +3,9 @@
 import { FullUser } from "../utils/api_types.ts";
 import { GlobalSearch } from "../islands/GlobalSearch.tsx";
 import { UserMenu } from "../islands/UserMenu.tsx";
-import { Logo } from "./Logo.tsx";
 import { GitHub } from "./icons/GitHub.tsx";
 import { SearchKind } from "../util.ts";
+import { HeaderLogo } from "../islands/HeaderLogo.tsx";
 
 export function Header({
   user,
@@ -52,15 +52,17 @@ export function Header({
         }`}
       >
         <div class="flex justify-between items-center text-base md:text-lg flex-wrap gap-4 lg:gap-8 h-full">
-          {isHomepage ? <div></div> : (
-            <a
-              href="/"
-              class="outline-none focus-visible:ring-2 ring-cyan-700"
-            >
-              <span className="sr-only">JSR home</span>
-              <Logo class="h-8 flex-none hover:animate-flip-rotate" />
-            </a>
-          )}
+          <div>
+            {!isHomepage && (
+              <a
+                href="/"
+                class="outline-none focus-visible:ring-2 ring-cyan-700"
+              >
+                <span className="sr-only">JSR home</span>
+                <HeaderLogo class="h-8 flex-none" />
+              </a>
+            )}
+          </div>
           <div class="hidden sm:block grow-1 flex-1">
             {!isHomepage && (
               <GlobalSearch

diff --git a/frontend/fresh.gen.ts b/frontend/fresh.gen.ts
@@ -52,6 +52,7 @@ import * as $DevelopmentLogin from "./islands/DevelopmentLogin.tsx";
 import * as $GitHubActionsLink from "./islands/GitHubActionsLink.tsx";
 import * as $GithubUserLink from "./islands/GithubUserLink.tsx";
 import * as $GlobalSearch from "./islands/GlobalSearch.tsx";
+import * as $HeaderLogo from "./islands/HeaderLogo.tsx";
 import * as $HomepageHero from "./islands/HomepageHero.tsx";
 import * as $PublishingTaskRequeue from "./islands/PublishingTaskRequeue.tsx";
 import * as $UserManageScopeInvite from "./islands/UserManageScopeInvite.tsx";
@@ -122,6 +123,7 @@ const manifest = {
     "./islands/GitHubActionsLink.tsx": $GitHubActionsLink,
     "./islands/GithubUserLink.tsx": $GithubUserLink,
     "./islands/GlobalSearch.tsx": $GlobalSearch,
+    "./islands/HeaderLogo.tsx": $HeaderLogo,
     "./islands/HomepageHero.tsx": $HomepageHero,
     "./islands/PublishingTaskRequeue.tsx": $PublishingTaskRequeue,
     "./islands/UserManageScopeInvite.tsx": $UserManageScopeInvite,

diff --git a/frontend/islands/HeaderLogo.tsx b/frontend/islands/HeaderLogo.tsx
@@ -0,0 +1,38 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { signal } from "@preact/signals";
+
+const rotationDegrees = signal(0);
+const isAnimating = signal(false);
+
+export function HeaderLogo(props: { class?: string }) {
+  return (
+    <div
+      onMouseEnter={() => {
+        if (isAnimating.value) return;
+        isAnimating.value = true;
+        rotationDegrees.value += 180;
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 638 343"
+        fill="none"
+        class={`transition-transform duration-300 ${props.class}`}
+        style={`transform: rotate(${rotationDegrees.value}deg)`}
+        aria-hidden="true"
+        onTransitionEnd={() => isAnimating.value = false}
+      >
+        <g fill-rule="evenodd">
+          <path
+            fill="#083344"
+            d="M637.272 49v196h-98v98h-343v-49h-196V98h98V0h343v49h196Z"
+          />
+          <path
+            fill="#F7DF1E"
+            d="M100.101 196h47.171V49h49v196H51.102v-98H100.1v49ZM588.272 98v98h-49v-49h-49v147h-49V98h147ZM294.272 98v49h98v147h-147v-49h98v-49h-98V49h147v49h-98Z"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}