@lukoweb/apitogo 0.1.23 → 0.1.37

package/src/lib/components/LanguageIcon.tsx

@@ -1,199 +1,199 @@
-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: 20,
-  },
-  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")),
-  },
-  pnpm: {
-    pattern: /^pnp(m|x)$/,
-    icon: lazy(() => import("../assets/language-icons/pnpm.js")),
-    width: 14,
-  },
-  npm: {
-    pattern: /^np(m|x)$/,
-    icon: lazy(() => import("../assets/language-icons/npm.js")),
-  },
-  yarn: {
-    pattern: /^yarn$/,
-    icon: lazy(() => import("../assets/language-icons/yarn.js")),
-    width: 16,
-  },
-  bun: {
-    pattern: /^bun(x)?$/,
-    icon: lazy(() => import("../assets/language-icons/bun.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")),
-  },
-  zig: {
-    pattern: /^zig$/,
-    icon: lazy(() => import("../assets/language-icons/zig.js")),
-    width: 28,
-  },
-  scala: {
-    pattern: /^scala$/,
-    icon: lazy(() => import("../assets/language-icons/scala.js")),
-    width: 18,
-  },
-  dart: {
-    pattern: /^dart$/,
-    icon: lazy(() => import("../assets/language-icons/dart.js")),
-    width: 20,
-  },
-  ocaml: {
-    pattern: /^ocaml$/,
-    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
-    width: 20,
-  },
-  c: {
-    pattern: /^c$/,
-    icon: lazy(() => import("../assets/language-icons/c.js")),
-    width: 20,
-  },
-  cpp: {
-    pattern: /^(cpp|c\+\+)$/,
-    icon: lazy(() => import("../assets/language-icons/cpp.js")),
-    width: 20,
-  },
-  commonlisp: {
-    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
-    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
-    width: 18,
-  },
-  elixir: {
-    pattern: /^elixir$/,
-    icon: lazy(() => import("../assets/language-icons/elixir.js")),
-    width: 18,
-  },
-  powershell: {
-    pattern: /^(pshell|powershell|ps1)$/,
-    icon: lazy(() => import("../assets/language-icons/powershell.js")),
-    width: 18,
-  },
-};
-
-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>
-  );
-};
+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: 20,
+  },
+  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")),
+  },
+  pnpm: {
+    pattern: /^pnp(m|x)$/,
+    icon: lazy(() => import("../assets/language-icons/pnpm.js")),
+    width: 14,
+  },
+  npm: {
+    pattern: /^np(m|x)$/,
+    icon: lazy(() => import("../assets/language-icons/npm.js")),
+  },
+  yarn: {
+    pattern: /^yarn$/,
+    icon: lazy(() => import("../assets/language-icons/yarn.js")),
+    width: 16,
+  },
+  bun: {
+    pattern: /^bun(x)?$/,
+    icon: lazy(() => import("../assets/language-icons/bun.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")),
+  },
+  zig: {
+    pattern: /^zig$/,
+    icon: lazy(() => import("../assets/language-icons/zig.js")),
+    width: 28,
+  },
+  scala: {
+    pattern: /^scala$/,
+    icon: lazy(() => import("../assets/language-icons/scala.js")),
+    width: 18,
+  },
+  dart: {
+    pattern: /^dart$/,
+    icon: lazy(() => import("../assets/language-icons/dart.js")),
+    width: 20,
+  },
+  ocaml: {
+    pattern: /^ocaml$/,
+    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
+    width: 20,
+  },
+  c: {
+    pattern: /^c$/,
+    icon: lazy(() => import("../assets/language-icons/c.js")),
+    width: 20,
+  },
+  cpp: {
+    pattern: /^(cpp|c\+\+)$/,
+    icon: lazy(() => import("../assets/language-icons/cpp.js")),
+    width: 20,
+  },
+  commonlisp: {
+    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
+    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
+    width: 18,
+  },
+  elixir: {
+    pattern: /^elixir$/,
+    icon: lazy(() => import("../assets/language-icons/elixir.js")),
+    width: 18,
+  },
+  powershell: {
+    pattern: /^(pshell|powershell|ps1)$/,
+    icon: lazy(() => import("../assets/language-icons/powershell.js")),
+    width: 18,
+  },
+};
+
+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/Markdown.tsx

@@ -1,55 +1,55 @@
-import { memo, useMemo } from "react";
-import ReactMarkdown, { type Components } from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import { useHighlighter } from "../hooks/useHighlighter.js";
-import { createConfiguredShikiRehypePlugins } from "../shiki.js";
-import { MdxComponents } from "../util/MdxComponents.js";
-import { useZudoku } from "./context/ZudokuContext.js";
-import { Typography } from "./Typography.js";
-
-const remarkPlugins = [remarkGfm];
-
-export const Markdown = memo(
-  ({
-    content,
-    className,
-    components,
-  }: {
-    content: string;
-    className?: string;
-    components?: Components;
-  }) => {
-    const { syntaxHighlighting } = useZudoku().options;
-    const highlighter = useHighlighter();
-    const rehypePlugins = useMemo(
-      () => [
-        rehypeRaw,
-        ...createConfiguredShikiRehypePlugins(
-          highlighter,
-          syntaxHighlighting?.themes,
-        ),
-      ],
-      [syntaxHighlighting?.themes, highlighter],
-    );
-
-    const mdComponents = useMemo(
-      () => ({ ...MdxComponents, ...components }),
-      [components],
-    );
-
-    return (
-      <Typography className={className}>
-        <ReactMarkdown
-          remarkPlugins={remarkPlugins}
-          rehypePlugins={rehypePlugins}
-          components={mdComponents}
-        >
-          {content}
-        </ReactMarkdown>
-      </Typography>
-    );
-  },
-);
-
-Markdown.displayName = "Markdown";
+import { memo, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { useHighlighter } from "../hooks/useHighlighter.js";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
+import { MdxComponents } from "../util/MdxComponents.js";
+import { useZudoku } from "./context/ZudokuContext.js";
+import { Typography } from "./Typography.js";
+
+const remarkPlugins = [remarkGfm];
+
+export const Markdown = memo(
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const highlighter = useHighlighter();
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(
+          highlighter,
+          syntaxHighlighting?.themes,
+        ),
+      ],
+      [syntaxHighlighting?.themes, highlighter],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
+    );
+
+    return (
+      <Typography className={className}>
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={mdComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </Typography>
+    );
+  },
+);
+
+Markdown.displayName = "Markdown";

package/src/lib/components/Meta.tsx

@@ -1,46 +1,46 @@
-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 { options } = useZudoku();
-  const { metadata: meta } = options;
-  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}
-    </>
-  );
-};
+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 { options } = useZudoku();
+  const { metadata: meta } = options;
+  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}
+    </>
+  );
+};

package/src/lib/components/MobileTopNavigation.tsx

@@ -130,7 +130,13 @@ export const MobileTopNavigation = () => {
     getProfileMenuItems,
   } = context;
   const headerNavigation = header?.navigation ?? [];
-  const { isAuthenticated, profile, isAuthEnabled } = authState;
+  const {
+    isAuthenticated,
+    profile,
+    isAuthEnabled,
+    isBackendAvailable,
+    isPending,
+  } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
@@ -232,11 +238,13 @@ export const MobileTopNavigation = () => {
           </div>
           <div className="border-t shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-4 pt-3 flex flex-col gap-2">
             <div className="flex items-center justify-between">
-              {isAuthEnabled && (
+              {isAuthEnabled && isBackendAvailable && (
                 <ClientOnly
                   fallback={<Skeleton className="rounded-sm h-8 w-16" />}
                 >
-                  {isAuthenticated ? (
+                  {isPending ? (
+                    <Skeleton className="rounded-sm h-8 w-16" />
+                  ) : isAuthenticated ? (
                     <Button asChild variant="outline">
                       <Link
                         to="/signout"