zudoku 0.45.0 → 0.46.0

package/src/lib/authentication/providers/openid.tsx

@@ -4,10 +4,10 @@ import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
@@ -25,26 +25,10 @@ export interface OpenIdProviderData {
 
 export const OPENID_CALLBACK_PATH = "/oauth/callback";
 
-class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(private handleCallback: () => Promise<string>) {
-    super();
-  }
-  getRoutes() {
-    return [
-      ...super.getRoutes(),
-      {
-        path: OPENID_CALLBACK_PATH,
-        element: (
-          <ClientOnly>
-            <CallbackHandler handleCallback={this.handleCallback} />
-          </ClientOnly>
-        ),
-      },
-    ];
-  }
-}
-
-export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   protected client: oauth.Client;
   protected issuer: string;
   protected authorizationServer: oauth.AuthorizationServer | undefined;
@@ -72,6 +56,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     basePath,
     scopes,
   }: OpenIDAuthenticationConfig) {
+    super();
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
@@ -378,10 +363,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return redirectTo;
   };
 
-  getAuthenticationPlugin() {
-    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
-    // to remove the extra layers of abstraction.
-    return new OpenIdAuthPlugin(this.handleCallback);
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }
 

package/src/lib/authentication/providers/supabase.tsx

@@ -6,16 +6,17 @@ import {
 } from "@supabase/supabase-js";
 import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
-class SupabaseAuthPlugin extends AuthenticationPlugin {}
-
-class SupabaseAuthenticationProvider implements AuthenticationProvider {
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   private readonly client: SupabaseClient;
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
@@ -31,6 +32,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignOut,
     basePath,
   }: SupabaseAuthenticationConfig) {
+    super();
     this.provider = provider;
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
@@ -139,8 +141,6 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     });
   };
 
-  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
-
   onPageLoad = async () => {
     const { data, error } = await this.client.auth.getSession();
 

package/src/lib/components/Autocomplete.tsx

@@ -71,7 +71,7 @@ const AutocompletePopover = ({
         onMouseEnter={() => setDontClose(true)}
         onMouseLeave={() => setDontClose(false)}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
           "border-0": count === 0,
         })}
         align="start"

package/src/lib/components/Banner.tsx

@@ -31,7 +31,7 @@ export const Banner = () => {
   return (
     <div
       className={cn(
-        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
       data-pagefind-ignore="all"

package/src/lib/components/ErrorPage.tsx

@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">

package/src/lib/components/Footer.tsx

@@ -1,10 +1,10 @@
 import { ExternalLink as ExternalLinkIcon } from "lucide-react";
 import type { CSSProperties, ReactNode } from "react";
-import type { FooterSocialIcons } from "../../config/validators/common.js";
+import type { FooterSocialIcons } from "../../config/validators/validate.js";
 import { cn } from "../util/cn.js";
 import { AnchorLink } from "./AnchorLink.js";
 import { useZudoku } from "./index.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 const SocialIcon = ({
   icon,
@@ -41,7 +41,7 @@ export const Footer = () => {
             "justify-end": footer.position === "end",
           })}
         >
-          <Slotlet name="footer-before" />
+          <Slot.Target name="footer-before" />
           {footer.columns && (
             <div
               className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
@@ -59,12 +59,12 @@ export const Footer = () => {
                 >
                   <span className="text-sm font-semibold">{column.title}</span>
                   <ul className="mt-4 space-y-2">
-                    {column.links.map((link, i) => {
+                    {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 + i}>
+                        <li key={link.href + link.label}>
                           {isExternalUrl(link.href) ? (
                             <a
                               href={link.href}
@@ -76,10 +76,7 @@ export const Footer = () => {
                               <ExternalLinkIcon size={12} />
                             </a>
                           ) : (
-                            <AnchorLink
-                              to={link.href + i}
-                              className={className}
-                            >
+                            <AnchorLink to={link.href} className={className}>
                               <span>{link.label}</span>
                             </AnchorLink>
                           )}
@@ -91,7 +88,7 @@ export const Footer = () => {
               ))}
             </div>
           )}
-          <Slotlet name="footer-after" />
+          <Slot.Target name="footer-after" />
         </div>
         <div
           className={cn(

package/src/lib/components/Header.tsx

@@ -19,13 +19,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
 import { Search } from "./Search.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
@@ -58,49 +59,48 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins } = context;
+  const { page, plugins, options } = context;
 
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
     .sort((i) => i.weight ?? 0);
 
+  const logoLightSrc = page?.logo
+    ? /https?:\/\//.test(page.logo.src.light)
+      ? page.logo.src.light
+      : joinUrl(options.basePath, page.logo.src.light)
+    : undefined;
+  const logoDarkSrc = page?.logo
+    ? /https?:\/\//.test(page.logo.src.dark)
+      ? page.logo.src.dark
+      : joinUrl(options.basePath, page.logo.src.dark)
+    : undefined;
+
+  const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
+
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="border-b">
-        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
+      <div className={borderBottom}>
+        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
                 {page?.logo && (
                   <>
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.light)
-                          ? page.logo.src.light
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.light,
-                            )
-                      }
+                      src={logoLightSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10 dark:hidden"
+                      className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.dark)
-                          ? page.logo.src.dark
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.dark,
-                            )
-                      }
+                      src={logoDarkSrc}
                       alt={page.logo.alt ?? page.pageTitle}
                       style={{ width: page.logo.width }}
-                      className="h-10 hidden dark:block"
+                      className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
@@ -119,10 +119,10 @@ export const Header = memo(function HeaderInner() {
           <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
-              <Slotlet name="head-navigation-start" />
+              <Slot.Target name="head-navigation-start" />
               {isAuthEnabled && (
                 <ClientOnly
-                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
                 >
                   {!isAuthenticated ? (
                     <Button variant="ghost" onClick={() => auth.login()}>
@@ -133,7 +133,7 @@ export const Header = memo(function HeaderInner() {
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.name ?? "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
@@ -175,17 +175,17 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <Slotlet name="head-navigation-end" />
+              <Slot.Target name="head-navigation-end" />
               <ThemeSwitch />
             </div>
           </div>
         </div>
       </div>
-      <div className="border-b hidden lg:block">
+      <div className={cn("hidden lg:block", borderBottom)}>
         <div className="max-w-screen-2xl mx-auto border-transparent">
-          <Slotlet name="top-navigation-before" />
+          <Slot.Target name="top-navigation-before" />
           <TopNavigation />
-          <Slotlet name="top-navigation-after" />
+          <Slot.Target name="top-navigation-after" />
         </div>
       </div>
     </header>

package/src/lib/components/Heading.tsx

@@ -2,6 +2,8 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
+import { LinkIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
 
 const heading = cva("group relative", {
   variants: {
@@ -59,21 +61,23 @@ export const Heading = ({
 
   return (
     <Component
-      className={heading({ className, level })}
+      className={heading({
+        className: cn(className, "flex items-center gap-[0.33em]"),
+        level,
+      })}
       ref={registerSidebarAnchor ? ref : undefined}
       id={id}
     >
+      {children}
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -start-[0.8em] pe-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          {/* Zero width space */}
-          &#8203;
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
         </a>
       )}
-      {children}
     </Component>
   );
 };

package/src/lib/components/InlineCode.tsx

@@ -16,7 +16,7 @@ export const InlineCode = ({
   <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
     <code
       className={cn(
-        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
         className,
       )}
     >

package/src/lib/components/Layout.tsx

@@ -9,7 +9,7 @@ import { useZudoku } from "./context/ZudokuContext.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
@@ -48,9 +48,9 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
-      <Slotlet name="layout-before-head" />
+      <Slot.Target name="layout-before-head" />
       <Header />
-      <Slotlet name="layout-after-head" />
+      <Slot.Target name="layout-after-head" />
 
       <div
         className={cn(

package/src/lib/components/Main.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { Sidebar } from "./navigation/Sidebar.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
@@ -27,7 +27,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         />
       )}
       {hasSidebar && (
-        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 start-0 end-0 border-b">
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>
@@ -42,9 +42,9 @@ export const Main = ({ children }: PropsWithChildren) => {
           isNavigating && "animate-pulse",
         )}
       >
-        <Slotlet name="zudoku-before-content" />
+        <Slot.Target name="content-before" />
         {children}
-        <Slotlet name="zudoku-after-content" />
+        <Slot.Target name="content-after" />
       </main>
     </Drawer>
   );

package/src/lib/components/Markdown.tsx

@@ -1,5 +1,6 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { MarkdownHooks, type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -21,8 +22,17 @@ export const Markdown = memo(
     components?: Components;
   }) => {
     const { syntaxHighlighting } = useZudoku().options;
-    const rehypePlugins = createConfiguredShikiRehypePlugins(
-      syntaxHighlighting?.themes,
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+      ],
+      [syntaxHighlighting?.themes],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
     );
 
     return (
@@ -30,7 +40,7 @@ export const Markdown = memo(
         <MarkdownHooks
           remarkPlugins={remarkPlugins}
           rehypePlugins={rehypePlugins}
-          components={{ ...MdxComponents, ...components }}
+          components={mdComponents}
         >
           {content}
         </MarkdownHooks>

package/src/lib/components/MobileTopNavigation.tsx

@@ -10,9 +10,10 @@ import {
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
+import { isHiddenItem } from "./navigation/utils.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
+import { PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
   const { topNavigation, options } = useZudoku();
@@ -57,7 +58,7 @@ export const MobileTopNavigation = () => {
             </ul>
           </div>
           {options.page?.showPoweredBy !== false && (
-            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+            <PoweredByZudoku className="grow-0 justify-center gap-1" />
           )}
         </div>
       </DrawerContent>

package/src/lib/components/NotFoundPage.tsx

@@ -9,7 +9,7 @@ export const NotFoundPage = () => {
   const params = useParams();
 
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <div className={ProseClasses + " h-full pt-(--padding-content-top)"}>
       <CategoryHeading>404</CategoryHeading>
       <Heading level={1} className="flex gap-3.5 items-center">
         Page not found

package/src/lib/components/Pagination.tsx

@@ -26,10 +26,7 @@ export const Pagination = ({
       {prev && (
         <Button variant="ghost" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
-            <ArrowLeftIcon
-              className="ltr:group-hover:motion-safe:animate-bounce-x-start rtl:rotate-180"
-              size={12}
-            />
+            <ArrowLeftIcon size={12} />
             <span className="truncate">{prev.label}</span>
           </Link>
         </Button>
@@ -37,11 +34,8 @@ export const Pagination = ({
       {next && (
         <Button variant="ghost" asChild>
           <Link to={next.to} relative="path" className={linkClass}>
-            <span className="truncate ">{next.label}</span>
-            <ArrowRightIcon
-              className="ltr:group-hover:motion-safe:animate-bounce-x-end rtl:rotate-180"
-              size={12}
-            />
+            <span className="truncate">{next.label}</span>
+            <ArrowRightIcon size={12} />
           </Link>
         </Button>
       )}

package/src/lib/components/Search.tsx

@@ -43,7 +43,7 @@ export const Search = ({ className }: { className?: string }) => {
         onClick={() => setIsOpen(true)}
         className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-full sm:w-72"
       >
-        <div className="flex items-center gap-2 flex-grow">
+        <div className="flex items-center gap-2 grow">
           <SearchIcon size={14} />
           Search
         </div>