feat: add slotlets for GitHub and Discord links in header (#588)

zuplo · Jan 24, 2025 · 60ba652 · 60ba652
1 parent 754932b
commit 60ba652
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 16 deletions.
diff --git a/docs/src/DiscordIcon.tsx b/docs/src/DiscordIcon.tsx
@@ -0,0 +1,6 @@
+const DiscordIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" {...props}>
+    <path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z" />
+  </svg>
+);
+export default DiscordIcon;
diff --git a/docs/src/GithubIcon.tsx b/docs/src/GithubIcon.tsx
@@ -0,0 +1,6 @@
+const GithubIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" {...props}>
+    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+  </svg>
+);
+export default GithubIcon;
diff --git a/docs/zudoku.config.tsx b/docs/zudoku.config.tsx
@@ -1,5 +1,8 @@
 import type { ZudokuConfig } from "zudoku";
+import { Button } from "zudoku/ui/Button.js";
+import DiscordIcon from "./src/DiscordIcon";
 import { DocusaurusDocsLicense } from "./src/DocusaurusDocsLicense";
+import GithubIcon from "./src/GithubIcon";
 import PreviewBanner from "./src/PreviewBanner";
 
 const config: ZudokuConfig = {
@@ -115,6 +118,22 @@ const config: ZudokuConfig = {
       },
     ],
   },
+  UNSAFE_slotlets: {
+    "head-navigation-end": () => (
+      <div className="flex items-center border-r pr-2">
+        <Button variant="ghost" size="icon" asChild>
+          <a href="https://github.com/zuplo/zudoku">
+            <GithubIcon className="w-4 h-4 dark:invert" />
+          </a>
+        </Button>
+        <Button variant="ghost" size="icon" asChild>
+          <a href="https://discord.gg/stPRhjbA55">
+            <DiscordIcon className="w-5 h-5 dark:invert" />
+          </a>
+        </Button>
+      </div>
+    ),
+  },
 };
 
 export default config;
diff --git a/packages/zudoku/src/lib/components/Header.tsx b/packages/zudoku/src/lib/components/Header.tsx
@@ -171,8 +171,8 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <ThemeSwitch />
               <Slotlet name="head-navigation-end" />
+              <ThemeSwitch />
             </div>
           </div>
         </div>

diff --git a/packages/zudoku/src/lib/components/ThemeSwitch.tsx b/packages/zudoku/src/lib/components/ThemeSwitch.tsx
@@ -1,26 +1,25 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "zudoku/ui/Button.js";
-import { ClientOnly } from "./ClientOnly.js";
+import { cn } from "../util/cn.js";
 
 export const ThemeSwitch = () => {
   const { resolvedTheme, setTheme } = useTheme();
   const ThemeIcon = resolvedTheme === "dark" ? MoonStarIcon : SunIcon;
 
   return (
-    <ClientOnly>
-      <Button
-        variant="ghost"
-        aria-label={
-          resolvedTheme === "dark"
-            ? "Switch to light mode"
-            : "Switch to dark mode"
-        }
-        className="p-2.5 -m-2.5 rounded-full"
-        onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-      >
-        <ThemeIcon size={18} />
-      </Button>
-    </ClientOnly>
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={
+        resolvedTheme === "dark"
+          ? "Switch to light mode"
+          : "Switch to dark mode"
+      }
+      className={cn(!resolvedTheme && "opacity-0")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <ThemeIcon size={18} />
+    </Button>
   );
 };