zudoku 0.0.0-efc60ba6 → 0.0.0-efe3cd16

package/src/lib/assets/language-icons/xml.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+const XmlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>XML</title>
+    <path
+      className="fill-foreground"
+      d="m12.89 3 1.96.4L11.11 21l-1.96-.4L12.89 3m6.7 9L16 8.41V5.58L22.42 12 16 18.41v-2.83L19.59 12M1.58 12 8 5.58v2.83L4.41 12 8 15.58v2.83L1.58 12Z"
+    />
+  </svg>
+);
+
+export default XmlIcon;

package/src/lib/assets/language-icons/yaml.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from "react";
+
+const YamlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>YAML</title>
+    <path
+      fill="#cb171e"
+      d="M20.06 12.73H14.5l-1.13 2.73H10.9l5.22-12.3h2.52l5 12.3H21l-.94-2.73zm-.92-2.46-1.71-4.51-1.9 4.51z"
+    />
+    <path
+      className="fill-foreground"
+      d="M30 28.82v-2.57h-6.36v-9.44H21v12zm-15.87-2.68 2.8-5.78v8.5h2.48V16.82H16l-3 5.46-2.86-5.46H6.8v12.06h2.58v-8.32l2.71 5.6zM2 3.14h3.46L8.5 7.97l3.07-4.85h3.31l-5.02 7.53v4.77H6.8v-4.77z"
+    />
+  </svg>
+);
+
+export default YamlIcon;

package/src/lib/auth/issuer.test.ts

@@ -109,6 +109,7 @@ describe("getIssuer", () => {
   it("should throw error for unsupported authentication type", async () => {
     const config = {
       authentication: {
+        // biome-ignore lint/suspicious/noExplicitAny: Allow any type
         type: "unsupported" as any,
       },
     } as ZudokuConfig;

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,8 +1,8 @@
 import { LogOutIcon } from "lucide-react";
-import {
-  type CommonPlugin,
-  type NavigationPlugin,
-  type ProfileMenuPlugin,
+import type {
+  CommonPlugin,
+  NavigationPlugin,
+  ProfileMenuPlugin,
 } from "../core/plugins.js";
 import { SignIn } from "./components/SignIn.js";
 import { SignOut } from "./components/SignOut.js";

package/src/lib/authentication/authentication.ts

@@ -8,6 +8,6 @@ export interface AuthenticationPlugin {
   signRequest(request: Request): Promise<Request>;
 }
 
-export interface AuthenticationProviderInitializer<TConfig> {
-  (config: TConfig): AuthenticationPlugin;
-}
+export type AuthenticationProviderInitializer<TConfig> = (
+  config: TConfig,
+) => AuthenticationPlugin;

package/src/lib/authentication/components/OAuthErrorPage.tsx

@@ -72,7 +72,7 @@ const errorDetailsMap: Record<string, { message: string }> = {
   },
 };
 
-export function OAuthErrorPage({ error }: { error: any }) {
+export function OAuthErrorPage({ error }: { error: unknown }) {
   const { login } = useAuth();
 
   if (!(error instanceof OAuthAuthorizationError)) {

package/src/lib/authentication/components/SignOut.tsx

@@ -8,7 +8,7 @@ export const SignOut = () => {
 
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, []);
+  }, [context.authentication, navigate]);
 
   return null;
 };

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

@@ -1,7 +1,7 @@
-import { type Auth0AuthenticationConfig } from "../../../config/config.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
+import type { Auth0AuthenticationConfig } from "../../../config/config.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
@@ -64,7 +64,7 @@ class Auth0AuthenticationProvider
 
       // window.location.href = logoutUrl.toString();
     } else {
-      const logoutUrl = new URL(
+      const _logoutUrl = new URL(
         `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
       );
       // window.location.href = logoutUrl.toString();

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

@@ -1,14 +1,14 @@
 import type { AuthenticationResult, EventMessage } from "@azure/msal-browser";
 import { EventType, PublicClientApplication } from "@azure/msal-browser";
 import { ErrorBoundary } from "react-error-boundary";
-import { type AzureB2CAuthenticationConfig } from "../../../config/config.js";
+import type { AzureB2CAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
-} from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError } from "../errors.js";

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

@@ -1,10 +1,10 @@
 import type { Clerk } from "@clerk/clerk-js";
 import { LogOutIcon } from "lucide-react";
-import { type ZudokuPlugin } from "zudoku/plugins";
-import { type ClerkAuthenticationConfig } from "../../../config/config.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
+import type { ZudokuPlugin } from "zudoku/plugins";
+import type { ClerkAuthenticationConfig } from "../../../config/config.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { SignIn } from "../components/SignIn.js";
 import { SignOut } from "../components/SignOut.js";

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

@@ -1,18 +1,18 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { ErrorBoundary } from "react-error-boundary";
-import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
+import type { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
-} from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, type UserProfile } from "../state.js";
+import { type UserProfile, useAuthState } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 const STATE_KEY = "oauth-state";

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

@@ -4,14 +4,14 @@ import {
   type Session,
   type SupabaseClient,
 } from "@supabase/supabase-js";
-import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
-import {
-  type AuthenticationPlugin,
-  type AuthenticationProviderInitializer,
-} from "../authentication.js";
+import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import type {
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
 import { AuthorizationError } from "../errors.js";
-import { useAuthState, type UserProfile } from "../state.js";
+import { type UserProfile, useAuthState } from "../state.js";
 
 class SupabaseAuthenticationProvider
   extends CoreAuthenticationPlugin
@@ -21,6 +21,7 @@ class SupabaseAuthenticationProvider
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
   private readonly redirectToAfterSignIn: string;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Keep around
   private readonly redirectToAfterSignOut: string;
 
   constructor({

package/src/lib/authentication/use-broadcast/LICENSE.md

@@ -2,8 +2,17 @@ MIT License
 
 Copyright (c) 2023 Romain
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/src/lib/authentication/use-broadcast/shared.ts

@@ -1,6 +1,6 @@
 // https://github.com/Romainlg29/use-broadcast/
 
-import { StateCreator, StoreMutatorIdentifier } from "zustand";
+import type { StateCreator, StoreMutatorIdentifier } from "zustand";
 
 export type SharedOptions = {
   /**
@@ -71,7 +71,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
       self instanceof WorkerGlobalScope
     )
   ) {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.warn(
       "BroadcastChannel is not supported in this environment. The store will not be shared.",
     );
@@ -82,7 +82,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
    * If BroadcastChannel is not supported, return the basic store
    */
   if (typeof BroadcastChannel === "undefined") {
-    // eslint-disable-next-line no-console
+    // biome-ignore lint/suspicious/noConsole: Logging allowed here
     console.warn(
       "BroadcastChannel is not supported in this browser. The store will not be shared.",
     );
@@ -220,7 +220,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
       /**
        * Set the new tab / window id
        */
-      const new_id = tabs[tabs.length - 1]! + 1;
+      const new_id = (tabs[tabs.length - 1] ?? 0) + 1;
       tabs.push(new_id);
 
       options?.onTabsChange?.(tabs);

package/src/lib/authentication/use-broadcast/useBroadcast.ts

@@ -93,13 +93,13 @@ export const useBroadcast = <T>(
      * If BroadcastChannel is not supported, we log an error and return
      */
     if (typeof window === "undefined") {
-      // eslint-disable-next-line no-console
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
       console.error("Window is undefined!");
       return;
     }
 
     if (!window.BroadcastChannel) {
-      // eslint-disable-next-line no-console
+      // biome-ignore lint/suspicious/noConsole: Logging allowed here
       console.error("BroadcastChannel is not supported!");
       return;
     }

package/src/lib/components/AnchorLink.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
 import { useScrollToHash } from "../util/useScrollToAnchor.js";
 

package/src/lib/components/Autocomplete.tsx

@@ -1,6 +1,6 @@
 import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useCommandState } from "cmdk";
-import { useRef, useState, type KeyboardEvent, type Ref } from "react";
+import { type KeyboardEvent, type Ref, useRef, useState } from "react";
 import {
   Command,
   CommandInlineInput,

package/src/lib/components/Bootstrap.tsx

@@ -32,6 +32,7 @@ const Bootstrap = ({
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
+      {/* biome-ignore lint/suspicious/noExplicitAny: Allow any type */}
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
         <BypassProtectedRoutesContext value={false}>
           <HelmetProvider>

package/src/lib/components/BuildCheck.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
-import { z } from "zod/v4";
+import { useEffect } from "react";
+import { z } from "zod";
 import { Button } from "../ui/Button.js";
 
 const BuildStatusSchema = z.object({
@@ -32,6 +33,16 @@ export const BuildCheck = ({
         .then((data) => BuildStatusSchema.parse(data)),
   });
 
+  useEffect(() => {
+    if (
+      buildStatusQuery.data?.status === "success" &&
+      buildStatusQuery.data.buildId
+    ) {
+      // biome-ignore lint/suspicious/noDocumentCookie: CookieStore too new to use
+      document.cookie = `zuplo-build=${buildStatusQuery.data.buildId}; path=/; max-age=300; secure; SameSite=None`;
+    }
+  }, [buildStatusQuery.data]);
+
   if (
     buildStatusQuery.isError ||
     !buildStatusQuery.data ||

package/src/lib/components/Header.tsx

@@ -37,9 +37,8 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
       <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent>
-          {item.children.map((item, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <RecursiveMenu key={i} item={item} />
+          {item.children.map((child) => (
+            <RecursiveMenu key={child.label} item={child} />
           ))}
         </DropdownMenuSubContent>
       </DropdownMenuPortal>
@@ -92,7 +91,7 @@ export const Header = memo(function HeaderInner() {
           <div className="flex">
             <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {site?.logo && (
+                {site?.logo ? (
                   <>
                     <img
                       src={logoLightSrc}
@@ -109,8 +108,9 @@ export const Header = memo(function HeaderInner() {
                       loading="lazy"
                     />
                   </>
+                ) : (
+                  <span className="font-semibold text-2xl">{site?.title}</span>
                 )}
-                <span className="font-semibold text-2xl">{site?.title}</span>
               </div>
             </Link>
           </div>

package/src/lib/components/Heading.tsx

@@ -1,9 +1,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 type { HTMLAttributes, ReactNode } from "react";
 import { cn } from "../util/cn.js";
+import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 const heading = cva("group relative", {
   variants: {

package/src/lib/components/LanguageIcon.tsx

@@ -0,0 +1,136 @@
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  lazy,
+  Suspense,
+  type SVGProps,
+} from "react";
+
+type Language = {
+  pattern: RegExp;
+  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
+  width?: number;
+};
+
+const Languages: Record<string, Language> = {
+  typescript: {
+    pattern: /^(ts|typescript)$/,
+    icon: lazy(() => import("../assets/language-icons/typescript.js")),
+    width: 15,
+  },
+  javascript: {
+    pattern: /^(js|javascript)$/,
+    icon: lazy(() => import("../assets/language-icons/javascript.js")),
+  },
+  react: {
+    pattern: /^(react|tsx|jsx)$/,
+    icon: lazy(() => import("../assets/language-icons/react.js")),
+    width: 22,
+  },
+  markdown: {
+    pattern: /^(md|markdown)$/,
+    icon: lazy(() => import("../assets/language-icons/markdown.js")),
+    width: 22,
+  },
+  mdx: {
+    pattern: /^mdx$/,
+    icon: lazy(() => import("../assets/language-icons/mdx.js")),
+    width: 28,
+  },
+  java: {
+    pattern: /^(java)$/,
+    icon: lazy(() => import("../assets/language-icons/java.js")),
+    width: 22,
+  },
+  json: {
+    pattern: /^jsonc?$/,
+    icon: lazy(() => import("../assets/language-icons/json.js")),
+  },
+  yaml: {
+    pattern: /^yaml$/,
+    icon: lazy(() => import("../assets/language-icons/yaml.js")),
+  },
+  toml: {
+    pattern: /^toml$/,
+    icon: lazy(() => import("../assets/language-icons/toml.js")),
+  },
+  shell: {
+    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
+    icon: lazy(() => import("../assets/language-icons/shell.js")),
+  },
+  python: {
+    pattern: /^(py|python)$/,
+    icon: lazy(() => import("../assets/language-icons/python.js")),
+  },
+  csharp: {
+    pattern: /^(cs|csharp|vb)$/,
+    icon: lazy(() => import("../assets/language-icons/csharp.js")),
+    width: 20,
+  },
+  rust: {
+    pattern: /^(rs|rust)$/,
+    icon: lazy(() => import("../assets/language-icons/rust.js")),
+    width: 20,
+  },
+  ruby: {
+    pattern: /^(rb|ruby)$/,
+    icon: lazy(() => import("../assets/language-icons/ruby.js")),
+  },
+  php: {
+    pattern: /^php$/,
+    icon: lazy(() => import("../assets/language-icons/php.js")),
+    width: 24,
+  },
+  html: {
+    pattern: /^html?$/,
+    icon: lazy(() => import("../assets/language-icons/html.js")),
+    width: 15,
+  },
+  css: {
+    pattern: /^css$/,
+    icon: lazy(() => import("../assets/language-icons/css.js")),
+  },
+  objectivec: {
+    pattern: /^(objc|objectivec)$/,
+    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
+    width: 16,
+  },
+  swift: {
+    pattern: /^swift$/,
+    icon: lazy(() => import("../assets/language-icons/swift.js")),
+  },
+  go: {
+    pattern: /^go$/,
+    icon: lazy(() => import("../assets/language-icons/go.js")),
+    width: 28,
+  },
+  xml: {
+    pattern: /^xml$/,
+    icon: lazy(() => import("../assets/language-icons/xml.js")),
+  },
+  kotlin: {
+    pattern: /^(kt|kotlin)$/,
+    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
+    width: 14,
+  },
+  graphql: {
+    pattern: /^(gql|graphql)$/,
+    icon: lazy(() => import("../assets/language-icons/graphql.js")),
+  },
+};
+
+export const LanguageIcon = ({ language }: { language?: string }) => {
+  if (!language) return null;
+
+  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
+
+  if (!Lang) return null;
+
+  const size = Lang.width ?? 18;
+
+  return (
+    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
+      <Lang.icon className="h-auto" style={{ width: size }} />
+    </Suspense>
+  );
+};

package/src/lib/components/Layout.tsx

@@ -1,8 +1,6 @@
-import { Helmet } from "@zudoku/react-helmet-async";
-import { Suspense, useEffect, type ReactNode } from "react";
-import { Outlet, useLocation } from "react-router";
+import { type ReactNode, Suspense, useEffect } from "react";
+import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
-import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useZudoku } from "./context/ZudokuContext.js";
@@ -19,8 +17,7 @@ const LoadingFallback = () => (
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
-  const { meta, authentication, options } = useZudoku();
-  const location = useLocation();
+  const { authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
@@ -32,22 +29,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
   return (
     <>
-      <Helmet titleTemplate={meta?.title}>
-        {options.canonicalUrlOrigin && (
-          <link
-            rel="canonical"
-            href={joinUrl(
-              options.canonicalUrlOrigin,
-              options.basePath,
-              location.pathname,
-            )}
-          />
-        )}
-        {meta?.description && (
-          <meta name="description" content={meta.description} />
-        )}
-        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
-      </Helmet>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />

package/src/lib/components/Markdown.tsx

@@ -23,9 +23,12 @@ export const Markdown = memo(
     const rehypePlugins = useMemo(
       () => [
         rehypeRaw,
-        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+        ...createConfiguredShikiRehypePlugins(
+          syntaxHighlighting?.themes,
+          syntaxHighlighting?.highlighter,
+        ),
       ],
-      [syntaxHighlighting?.themes],
+      [syntaxHighlighting?.themes, syntaxHighlighting?.highlighter],
     );
 
     const mdComponents = useMemo(

package/src/lib/components/Meta.tsx

@@ -0,0 +1,45 @@
+import { Helmet } from "@zudoku/react-helmet-async";
+import type { PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+
+export const Meta = ({ children }: PropsWithChildren) => {
+  const { meta, options } = useZudoku();
+  const location = useLocation();
+
+  return (
+    <>
+      <Helmet titleTemplate={meta?.title} defaultTitle={meta?.defaultTitle}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
+        {meta?.description && (
+          <meta name="description" content={meta.description} />
+        )}
+        {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+        {meta?.generator && <meta name="generator" content={meta.generator} />}
+        {meta?.applicationName && (
+          <meta name="application-name" content={meta.applicationName} />
+        )}
+        {meta?.referrer && <meta name="referrer" content={meta.referrer} />}
+        {meta?.keywords && meta.keywords.length > 0 && (
+          <meta name="keywords" content={meta.keywords.join(", ")} />
+        )}
+        {meta?.authors?.map((author) => (
+          <meta key={author} name="author" content={author} />
+        ))}
+        {meta?.creator && <meta name="creator" content={meta.creator} />}
+        {meta?.publisher && <meta name="publisher" content={meta.publisher} />}
+      </Helmet>
+      {children}
+    </>
+  );
+};