Merge pull request #15 from kjloveless/updates

add navbar
kjloveless · Oct 11, 2024 · 46c29f1 · 46c29f1
2 parents 024a25c + 8530439
commit 46c29f1
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 39 deletions.
diff --git a/components/icons.tsx b/components/icons.tsx
@@ -0,0 +1,17 @@
+import { LuAtSign, LuMoon, LuSunMedium } from "@preact-icons/lu";
+import { IconBaseProps } from "@preact-icons/common";
+
+export const Icons = {
+  sun: LuSunMedium,
+  moon: LuMoon,
+  logo: LuAtSign,
+  gitHub: (props: IconBaseProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      >
+      </path>
+    </svg>
+  ),
+};
diff --git a/islands/main-nav.tsx → components/main-nav.tsx b/islands/main-nav.tsx → components/main-nav.tsx
@@ -1,30 +1,21 @@
-import { IS_BROWSER } from "$fresh/runtime.ts";
-
 import { Link } from "../islands/link.tsx";
 
 import { NavItem } from "../types/nav.ts";
 
 import { cn } from "../util/mod.ts";
 
-// import { Icons } from "@/components/icons";
+import { Icons } from "../components/icons.tsx";
 
 interface MainNavProps {
   title: string;
   items?: NavItem[];
 }
 
-export function MainNav({ title, items }: MainNavProps) {
-  let prefix = "";
-  if (IS_BROWSER) {
-    const base = typeof window !== "undefined" ? globalThis.location.host : "";
-    const isLocalhost = base.includes("localhost");
-    prefix = isLocalhost ? "/deno.social" : "";
-  }
-
+export default function MainNav({ title, items }: MainNavProps) {
   return (
     <div className="flex gap-6 lg:gap-10">
-      <Link href={prefix + "/"} className="flex items-center space-x-2">
-        {/* <Icons.logo className="size-6" /> */}
+      <Link href={"/"} className="flex items-center space-x-2">
+        <Icons.logo className="size-6" />
         <span className="inline-block font-bold">{title}</span>
       </Link>
       {items?.length
@@ -35,7 +26,7 @@ export function MainNav({ title, items }: MainNavProps) {
                 item.href && (
                   <Link
                     key={index}
-                    href={prefix + item.href}
+                    href={item.href}
                     className={cn(
                       "flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
                       item.disabled && "cursor-not-allowed opacity-80",

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
@@ -1,12 +1,59 @@
 import { JSX } from "preact";
-import { IS_BROWSER } from "$fresh/runtime.ts";
-
-export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      className="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
-      ref={props.ref}
-      {...props}
-    />
-  );
+import { forwardRef } from "preact/compat";
+
+import { Slot } from "@radix-ui/react-slot";
+
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../util/mod.ts";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps extends
+  VariantProps<typeof buttonVariants>,
+  Omit<
+    JSX.HTMLAttributes<HTMLButtonElement>,
+    keyof VariantProps<typeof buttonVariants>
+  > {
+  asChild?: boolean;
 }
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
diff --git a/deno.json b/deno.json
@@ -24,11 +24,16 @@
     "$fresh/": "https://deno.land/x/[email protected]/",
     "$std/": "https://deno.land/[email protected]/",
     "@atproto/api": "npm:@atproto/api@^0.13.11",
+    "@preact-icons/common": "jsr:@preact-icons/common@^1.0.12",
+    "@preact-icons/lu": "jsr:@preact-icons/lu@^1.0.12",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "@radix-ui/react-slot": "npm:@radix-ui/react-slot@^1.1.0",
+    "class-variance-authority": "npm:class-variance-authority@^0.7.0",
     "clsx": "npm:clsx@^2.1.1",
-    "preact": "https://esm.sh/[email protected]",
-    "preact/": "https://esm.sh/[email protected]/",
+    "preact": "npm:[email protected]",
+    "preact/hooks": "npm:[email protected]/hooks",
+    "preact/jsx-runtime": "npm:[email protected]/jsx-runtime",
     "tailwind-merge": "npm:tailwind-merge@^2.5.3",
     "tailwindcss": "npm:[email protected]",
     "tailwindcss/": "npm:/[email protected]/",

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -10,7 +10,7 @@ import * as $community_index from "./routes/community/index.tsx";
 import * as $create_your_own from "./routes/create-your-own.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $link from "./islands/link.tsx";
-import * as $main_nav from "./islands/main-nav.tsx";
+import * as $site_header from "./islands/site-header.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -26,7 +26,7 @@ const manifest = {
   },
   islands: {
     "./islands/link.tsx": $link,
-    "./islands/main-nav.tsx": $main_nav,
+    "./islands/site-header.tsx": $site_header,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

diff --git a/islands/link.tsx b/islands/link.tsx
@@ -1,21 +1,21 @@
 import { JSX } from "preact";
 import { IS_BROWSER } from "$fresh/runtime.ts";
 
-import { getDomain } from "../util/mod.ts";
+// import { getDomain } from "../util/mod.ts";  fix this shit breaking the nacbar when it fails
 
 export function Link(
   { href, ...props }: JSX.HTMLAttributes<HTMLAnchorElement>,
 ) {
   if (
     IS_BROWSER && typeof href === "string" && typeof window !== "undefined"
   ) {
-    const { subdomain, domain } = getDomain(window.location.hostname);
-    console.log(subdomain, domain);
-    if (subdomain) {
-      return <a href={`https://${domain}${href}`} {...props} />;
-    } else {
-      return <a href={href} {...props} />;
-    }
+    // const { subdomain, domain } = getDomain(window.location.hostname);
+    // console.log(subdomain, domain);
+    // if (subdomain) {
+    //   return <a href={`https://${domain}${href}`} {...props} />;
+    // } else {
+    return <a href={href} {...props} />;
+    // }
   } else {
     return <a href={href} {...props} />;
   }

diff --git a/islands/site-header.tsx b/islands/site-header.tsx
@@ -0,0 +1,102 @@
+import { ComponentChildren } from "preact";
+
+import { useState } from "preact/hooks";
+import { LuMenu, LuX } from "@preact-icons/lu";
+
+import { type NavItem } from "../types/nav.ts";
+import { siteConfig } from "../config/site.ts";
+import { cn } from "../util/mod.ts";
+import { buttonVariants } from "../components/ui/Button.tsx";
+import { Icons } from "../components/icons.tsx";
+import { Link } from "../islands/link.tsx";
+// import { ThemeToggle } from "@/components/theme-toggle";
+
+interface Props {
+  children?: ComponentChildren;
+  items?: NavItem[];
+}
+
+export default function SiteHeader({ children }: Props) {
+  const [showMenu, setShowMenu] = useState(false);
+
+  const MenuIcon = showMenu ? LuX : LuMenu;
+
+  const links = (
+    <nav className="flex items-center gap-4 md:gap-1">
+      <Link href={siteConfig.links.github} target="_blank" rel="noreferrer">
+        <div
+          className={buttonVariants({
+            size: "sm",
+            variant: "ghost",
+          })}
+        >
+          <Icons.gitHub className="size-5" />
+          <span className="sr-only">GitHub</span>
+        </div>
+      </Link>
+      {/* <ThemeToggle /> */}
+    </nav>
+  );
+
+  return (
+    <>
+      <header className="sticky top-0 z-40 w-full border-b bg-background">
+        <div className="container flex h-16 items-center justify-between space-x-4 sm:space-x-0">
+          {children}
+          <div>
+            <div className="block md:hidden">
+              <MenuIcon
+                aria-label="Menu"
+                className="cursor-pointer"
+                size={24}
+                onClick={() => setShowMenu((m) => !m)}
+              />
+            </div>
+            <div className="hidden flex-1 items-center justify-end space-x-4 md:flex">
+              {links}
+            </div>
+          </div>
+        </div>
+      </header>
+      <div
+        className={cn(
+          "fixed top-16 z-30 w-full overflow-hidden border-b bg-background/80 transition-transform duration-500 md:hidden",
+          showMenu ? "translate-y-1px" : "-translate-y-full",
+        )}
+        aria-hidden={!showMenu}
+      >
+        <div className="container flex h-full flex-col items-center justify-stretch px-4 pb-2">
+          <nav className="mb-2 flex w-full flex-col items-stretch gap-1 border-b py-2">
+            {siteConfig.mainNav.map(
+              (item, index) =>
+                item.href && (
+                  <Link
+                    key={index}
+                    href={item.href}
+                    className={buttonVariants({
+                      variant: "ghost",
+                      className:
+                        "w-full !justify-start text-left font-semibold text-muted-foreground",
+                    })}
+                    onClick={() => setShowMenu(false)}
+                  >
+                    {item.title}
+                  </Link>
+                ),
+            )}
+          </nav>
+          {links}
+        </div>
+      </div>
+      {/* Backdrop */}
+      <div
+        aria-hidden
+        className={cn(
+          "fixed inset-0 z-20 transition-all duration-700 md:hidden",
+          showMenu ? "backdrop-blur-md" : "pointer-events-none",
+        )}
+        onClick={() => setShowMenu(false)}
+      />
+    </>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -2,7 +2,8 @@ import { type PageProps } from "$fresh/server.ts";
 
 import { siteConfig } from "../config/site.ts";
 
-import { MainNav } from "../islands/main-nav.tsx";
+import MainNav from "../components/main-nav.tsx";
+import SiteHeader from "../islands/site-header.tsx";
 
 export default function App({ Component, url }: PageProps) {
   return (
@@ -15,7 +16,12 @@ export default function App({ Component, url }: PageProps) {
       </head>
       <body className="min-h-screen font-sans antialiased">
         <div className="relative flex min-h-screen flex-col">
-          <MainNav title={url.hostname} items={siteConfig.mainNav} />
+          <SiteHeader items={siteConfig.mainNav}>
+            <MainNav
+              title={url.hostname}
+              items={siteConfig.mainNav}
+            />
+          </SiteHeader>
           <Component />
         </div>
       </body>

diff --git a/types/nav.ts b/types/nav.ts
@@ -1,6 +1,6 @@
 export interface NavItem {
   title: string;
-  href?: string;
+  href: string;
   disabled?: boolean;
   external?: boolean;
 }