@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/components/Footer.tsx

@@ -1,140 +1,140 @@
-import { ExternalLink as ExternalLinkIcon } from "lucide-react";
-import type { CSSProperties, ReactNode } from "react";
-import type { FooterSocialIcons } from "../../config/validators/ZudokuConfig.js";
-import { cn } from "../util/cn.js";
-import { AnchorLink } from "./AnchorLink.js";
-import { useZudoku } from "./index.js";
-import { Slot } from "./Slot.js";
-
-const SocialIcon = ({
-  icon,
-}: {
-  icon: (typeof FooterSocialIcons)[number] | ReactNode;
-}) => {
-  if (typeof icon === "string") {
-    return (
-      <img
-        src={`https://cdn.simpleicons.org/${icon}/000000/ffffff`}
-        className="size-5"
-        alt={icon}
-        loading="lazy"
-      />
-    );
-  }
-  return icon;
-};
-
-const isExternalUrl = (href: string) => /^https?:/.test(href);
-
-export const Footer = () => {
-  const { options } = useZudoku();
-  const { site } = options;
-  const footer = site?.footer;
-
-  if (!footer) return null;
-
-  return (
-    <footer className="border-t bg-background">
-      <div className="mx-auto max-w-screen-2xl px-4 lg:px-8 py-8 pt-20">
-        <div
-          className={cn("flex flex-row gap-8", {
-            "justify-center": !footer.position || footer.position === "center",
-            "justify-start": footer.position === "start",
-            "justify-end": footer.position === "end",
-          })}
-        >
-          <Slot.Target name="footer-before" />
-          {footer.columns && (
-            <div
-              className="w-full md:max-w-3xl grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
-              style={{ "--columns": footer.columns.length } as CSSProperties}
-            >
-              {footer.columns.map((column) => (
-                <div
-                  className={cn({
-                    "justify-self-center":
-                      !column.position || column.position === "center",
-                    "justify-self-start": column.position === "start",
-                    "justify-self-end": column.position === "end",
-                  })}
-                  key={column.title}
-                >
-                  <span className="text-sm font-semibold">{column.title}</span>
-                  <ul className="mt-4 space-y-2">
-                    {column.links.map((link) => {
-                      const className =
-                        "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
-
-                      return (
-                        <li key={link.href + link.label}>
-                          {isExternalUrl(link.href) ? (
-                            <a
-                              href={link.href}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className={className}
-                            >
-                              <span>{link.label}</span>
-                              <ExternalLinkIcon size={12} />
-                            </a>
-                          ) : (
-                            <AnchorLink to={link.href} className={className}>
-                              <span>{link.label}</span>
-                            </AnchorLink>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          )}
-          <Slot.Target name="footer-after" />
-        </div>
-        <div
-          className={cn(
-            "flex items-center justify-between",
-            footer.columns && "border-t mt-8 pt-8",
-          )}
-        >
-          {footer.logo && (
-            <>
-              <img
-                src={footer.logo.src.light}
-                alt={footer.logo.alt}
-                className="w-8 dark:hidden"
-                style={{ width: footer.logo.width }}
-                loading="lazy"
-              />
-              <img
-                src={footer.logo.src.dark}
-                alt={footer.logo.alt}
-                className="w-8 hidden dark:block"
-                loading="lazy"
-                style={{ width: footer.logo.width }}
-              />
-            </>
-          )}
-          {footer.copyright && (
-            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
-          )}
-          <div className="flex items-center gap-2">
-            {footer.social?.map((social) => (
-              <a
-                key={social.href}
-                href={social.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="w-auto gap-2 flex text-muted-foreground hover:text-accent-foreground"
-              >
-                <SocialIcon icon={social.icon} />
-                {social.label}
-              </a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+import type { FooterSocialIcons } from "../../config/validators/ZudokuConfig.js";
+import { cn } from "../util/cn.js";
+import { AnchorLink } from "./AnchorLink.js";
+import { useZudoku } from "./index.js";
+import { Slot } from "./Slot.js";
+
+const SocialIcon = ({
+  icon,
+}: {
+  icon: (typeof FooterSocialIcons)[number] | ReactNode;
+}) => {
+  if (typeof icon === "string") {
+    return (
+      <img
+        src={`https://cdn.simpleicons.org/${icon}/000000/ffffff`}
+        className="size-5"
+        alt={icon}
+        loading="lazy"
+      />
+    );
+  }
+  return icon;
+};
+
+const isExternalUrl = (href: string) => /^https?:/.test(href);
+
+export const Footer = () => {
+  const { options } = useZudoku();
+  const { site } = options;
+  const footer = site?.footer;
+
+  if (!footer) return null;
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto max-w-screen-2xl px-4 lg:px-8 py-8 pt-20">
+        <div
+          className={cn("flex flex-row gap-8", {
+            "justify-center": !footer.position || footer.position === "center",
+            "justify-start": footer.position === "start",
+            "justify-end": footer.position === "end",
+          })}
+        >
+          <Slot.Target name="footer-before" />
+          {footer.columns && (
+            <div
+              className="w-full md:max-w-3xl grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
+              style={{ "--columns": footer.columns.length } as CSSProperties}
+            >
+              {footer.columns.map((column) => (
+                <div
+                  className={cn({
+                    "justify-self-center":
+                      !column.position || column.position === "center",
+                    "justify-self-start": column.position === "start",
+                    "justify-self-end": column.position === "end",
+                  })}
+                  key={column.title}
+                >
+                  <span className="text-sm font-semibold">{column.title}</span>
+                  <ul className="mt-4 space-y-2">
+                    {column.links.map((link) => {
+                      const className =
+                        "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
+
+                      return (
+                        <li key={link.href + link.label}>
+                          {isExternalUrl(link.href) ? (
+                            <a
+                              href={link.href}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={className}
+                            >
+                              <span>{link.label}</span>
+                              <ExternalLinkIcon size={12} />
+                            </a>
+                          ) : (
+                            <AnchorLink to={link.href} className={className}>
+                              <span>{link.label}</span>
+                            </AnchorLink>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+          <Slot.Target name="footer-after" />
+        </div>
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            footer.columns && "border-t mt-8 pt-8",
+          )}
+        >
+          {footer.logo && (
+            <>
+              <img
+                src={footer.logo.src.light}
+                alt={footer.logo.alt}
+                className="w-8 dark:hidden"
+                style={{ width: footer.logo.width }}
+                loading="lazy"
+              />
+              <img
+                src={footer.logo.src.dark}
+                alt={footer.logo.alt}
+                className="w-8 hidden dark:block"
+                loading="lazy"
+                style={{ width: footer.logo.width }}
+              />
+            </>
+          )}
+          {footer.copyright && (
+            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
+          )}
+          <div className="flex items-center gap-2">
+            {footer.social?.map((social) => (
+              <a
+                key={social.href}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-auto gap-2 flex text-muted-foreground hover:text-accent-foreground"
+              >
+                <SocialIcon icon={social.icon} />
+                {social.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

package/src/lib/components/Framed.tsx

@@ -1,51 +1,51 @@
-import { cva } from "class-variance-authority";
-import type { PropsWithChildren } from "react";
-import { cn } from "../util/cn.js";
-
-const frameVariants = cva("", {
-  variants: {
-    size: {
-      sm: "max-w-sm",
-      md: "max-w-md",
-      lg: "max-w-lg",
-      xl: "max-w-xl",
-      "2xl": "max-w-2xl",
-      full: "max-w-full",
-    },
-    align: {
-      center: "mx-auto",
-      start: "me-auto",
-      end: "ms-auto",
-    },
-  },
-  defaultVariants: {
-    size: "xl",
-    align: "center",
-  },
-});
-
-export const Framed = ({
-  caption,
-  className,
-  size = "xl",
-  align = "center",
-  children,
-}: PropsWithChildren<{
-  caption?: string;
-  className?: string;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-  align?: "center" | "start" | "end";
-}>) => (
-  <figure className={cn(frameVariants({ size, align }), className)}>
-    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
-      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
-        {children}
-      </div>
-    </div>
-    {caption && (
-      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
-        {caption}
-      </figcaption>
-    )}
-  </figure>
-);
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);

package/src/lib/components/Header.tsx

@@ -73,13 +73,21 @@ const ProfileMenu = () => {
   const context = useZudoku();
   const profileItems = context.getProfileMenuItems();
   const auth = useAuth();
-  const { isAuthEnabled, isAuthenticated, profile } = auth;
+  const {
+    isAuthEnabled,
+    isAuthenticated,
+    isPending,
+    profile,
+    isBackendAvailable,
+  } = auth;
 
-  if (!isAuthEnabled) return null;
+  if (!isAuthEnabled || !isBackendAvailable) return null;
 
   return (
     <ClientOnly fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}>
-      {!isAuthenticated ? (
+      {isPending ? (
+        <Skeleton className="rounded-sm h-9 w-24" />
+      ) : !isAuthenticated ? (
         <Button size="lg" variant="ghost" onClick={() => auth.login()}>
           Login
         </Button>