Move back to signals-based implementation

jsr-io · Apr 18, 2024 · 7935dfd · 7935dfd
1 parent 189ab6d
commit 7935dfd
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
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,
@@ -61,6 +61,17 @@ export function Header({
               <Logo size="medium" class="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 $HomepageHeroParticles from "./islands/HomepageHeroParticles.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/HomepageHeroParticles.tsx": $HomepageHeroParticles,
     "./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>
+  );
+}