@lukoweb/apitogo-module-landing 0.2.23 → 0.2.25

package/src/sections/FooterSection.tsx

@@ -1,161 +1,161 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { useZudoku } from "@lukoweb/apitogo/components";
-import type { ReactElement } from "react";
-
-export type FooterSectionProps = {
-  footer: NonNullable<ResolvedLandingContent["footer"]>;
-};
-
-const GitHubIcon = ({ className }: { className?: string }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    aria-hidden
-  >
-    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" />
-  </svg>
-);
-
-const XIcon = ({ className }: { className?: string }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    aria-hidden
-  >
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-  </svg>
-);
-
-const SOCIAL_ICONS: Record<
-  string,
-  (props: { className?: string }) => ReactElement
-> = {
-  github: GitHubIcon,
-  x: XIcon,
-  twitter: XIcon,
-};
-
-const FooterSocialLink = ({
-  icon,
-  href,
-  label,
-}: {
-  icon: string;
-  href: string;
-  label?: string;
-}) => {
-  const Icon = SOCIAL_ICONS[icon.toLowerCase()];
-  const accessibleLabel = label ?? icon;
-
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={accessibleLabel}
-      className="inline-flex items-center justify-center text-muted-foreground/70 transition-colors hover:text-foreground"
-    >
-      {Icon ? (
-        <Icon className="h-[1.125rem] w-[1.125rem]" />
-      ) : (
-        <span className="text-xs font-medium">{accessibleLabel}</span>
-      )}
-    </a>
-  );
-};
-
-export const FooterSection = ({ footer }: FooterSectionProps) => {
-  const { options } = useZudoku();
-  const siteTitle =
-    options.metadata?.applicationName ?? options.site?.title ?? "API ToGo";
-
-  const brandName = footer.brand?.name ?? siteTitle;
-  const tagline = footer.brand?.tagline;
-  const logoSrc = footer.brand?.logoSrc;
-  const columns = footer.columns ?? [];
-  const social = footer.social ?? [];
-  const year = new Date().getFullYear();
-  const copyright =
-    footer.copyright ?? `© ${year} ${brandName}. All rights reserved.`;
-
-  if (columns.length === 0 && !tagline && !logoSrc && social.length === 0) {
-    return null;
-  }
-
-  return (
-    <footer className="border-t bg-background">
-      <div className="mx-auto max-w-[1200px] px-6 py-12">
-        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(3,minmax(0,1fr))]">
-          <div className="sm:col-span-2 lg:col-span-1">
-            <div className="mb-3 flex items-center gap-2.5">
-              {logoSrc ? (
-                <img
-                  src={logoSrc}
-                  alt={brandName}
-                  className="h-7 w-auto object-contain"
-                />
-              ) : (
-                <span className="text-[1.125rem] font-bold tracking-[-0.02em]">
-                  {brandName.includes("API") && brandName !== "API ToGo" ? (
-                    <>
-                      {brandName.replace(/API$/, "")}
-                      <span className="text-primary">API</span>
-                    </>
-                  ) : footer.brand?.name ? (
-                    brandName
-                  ) : (
-                    <>
-                      <span className="text-primary">API</span>
-                      <span>ToGo</span>
-                    </>
-                  )}
-                </span>
-              )}
-            </div>
-            {tagline ? (
-              <p className="max-w-[280px] text-[0.875rem] leading-relaxed text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-          </div>
-
-          {columns.map((column) => (
-            <div key={column.title}>
-              <h3 className="mb-4 text-sm font-semibold">{column.title}</h3>
-              <ul className="space-y-2.5">
-                {column.links.map((link) => (
-                  <li key={`${column.title}-${link.label}`}>
-                    <a
-                      href={link.href}
-                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-
-        <div className="mt-10 flex flex-col items-center justify-between gap-4 border-t border-border pt-6 sm:flex-row">
-          <p className="text-sm text-muted-foreground/70">{copyright}</p>
-          {social.length > 0 ? (
-            <div className="flex items-center gap-4">
-              {social.map((item) => (
-                <FooterSocialLink
-                  key={`${item.icon}-${item.href}`}
-                  icon={item.icon}
-                  href={item.href}
-                  label={item.label}
-                />
-              ))}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </footer>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { useZudoku } from "@lukoweb/apitogo/components";
+import type { ReactElement } from "react";
+
+export type FooterSectionProps = {
+  footer: NonNullable<ResolvedLandingContent["footer"]>;
+};
+
+const GitHubIcon = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className={className}
+    aria-hidden
+  >
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" />
+  </svg>
+);
+
+const XIcon = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className={className}
+    aria-hidden
+  >
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+
+const SOCIAL_ICONS: Record<
+  string,
+  (props: { className?: string }) => ReactElement
+> = {
+  github: GitHubIcon,
+  x: XIcon,
+  twitter: XIcon,
+};
+
+const FooterSocialLink = ({
+  icon,
+  href,
+  label,
+}: {
+  icon: string;
+  href: string;
+  label?: string;
+}) => {
+  const Icon = SOCIAL_ICONS[icon.toLowerCase()];
+  const accessibleLabel = label ?? icon;
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={accessibleLabel}
+      className="inline-flex items-center justify-center text-muted-foreground/70 transition-colors hover:text-foreground"
+    >
+      {Icon ? (
+        <Icon className="h-[1.125rem] w-[1.125rem]" />
+      ) : (
+        <span className="text-xs font-medium">{accessibleLabel}</span>
+      )}
+    </a>
+  );
+};
+
+export const FooterSection = ({ footer }: FooterSectionProps) => {
+  const { options } = useZudoku();
+  const siteTitle =
+    options.metadata?.applicationName ?? options.site?.title ?? "API ToGo";
+
+  const brandName = footer.brand?.name ?? siteTitle;
+  const tagline = footer.brand?.tagline;
+  const logoSrc = footer.brand?.logoSrc;
+  const columns = footer.columns ?? [];
+  const social = footer.social ?? [];
+  const year = new Date().getFullYear();
+  const copyright =
+    footer.copyright ?? `© ${year} ${brandName}. All rights reserved.`;
+
+  if (columns.length === 0 && !tagline && !logoSrc && social.length === 0) {
+    return null;
+  }
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto max-w-[1200px] px-6 py-12">
+        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(3,minmax(0,1fr))]">
+          <div className="sm:col-span-2 lg:col-span-1">
+            <div className="mb-3 flex items-center gap-2.5">
+              {logoSrc ? (
+                <img
+                  src={logoSrc}
+                  alt={brandName}
+                  className="h-7 w-auto object-contain"
+                />
+              ) : (
+                <span className="text-[1.125rem] font-bold tracking-[-0.02em]">
+                  {brandName.includes("API") && brandName !== "API ToGo" ? (
+                    <>
+                      {brandName.replace(/API$/, "")}
+                      <span className="text-primary">API</span>
+                    </>
+                  ) : footer.brand?.name ? (
+                    brandName
+                  ) : (
+                    <>
+                      <span className="text-primary">API</span>
+                      <span>ToGo</span>
+                    </>
+                  )}
+                </span>
+              )}
+            </div>
+            {tagline ? (
+              <p className="max-w-[280px] text-[0.875rem] leading-relaxed text-muted-foreground">
+                {tagline}
+              </p>
+            ) : null}
+          </div>
+
+          {columns.map((column) => (
+            <div key={column.title}>
+              <h3 className="mb-4 text-sm font-semibold">{column.title}</h3>
+              <ul className="space-y-2.5">
+                {column.links.map((link) => (
+                  <li key={`${column.title}-${link.label}`}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-10 flex flex-col items-center justify-between gap-4 border-t border-border pt-6 sm:flex-row">
+          <p className="text-sm text-muted-foreground/70">{copyright}</p>
+          {social.length > 0 ? (
+            <div className="flex items-center gap-4">
+              {social.map((item) => (
+                <FooterSocialLink
+                  key={`${item.icon}-${item.href}`}
+                  icon={item.icon}
+                  href={item.href}
+                  label={item.label}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </footer>
+  );
+};

package/src/sections/HeroSection.tsx

@@ -1,135 +1,135 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { cn } from "@lukoweb/apitogo";
-import { ArrowRightIcon, BookOpenIcon, CheckIcon } from "lucide-react";
-import { CodeExampleCard } from "./CodeExampleCard.js";
-import { LandingButton } from "./LandingButtons.js";
-
-type CodeExample = NonNullable<
-  NonNullable<ResolvedLandingContent["hero"]>["codeExample"]
->;
-
-export type HeroSectionProps = {
-  hero: NonNullable<ResolvedLandingContent["hero"]>;
-  primaryAction?: ResolvedLandingContent["primaryAction"];
-  secondaryAction?: ResolvedLandingContent["secondaryAction"];
-  /** Optional stacked code cards (falls back to hero.codeExample). */
-  codeExamples?: CodeExample[];
-};
-
-export const HeroSection = ({
-  hero,
-  primaryAction,
-  secondaryAction,
-  codeExamples,
-}: HeroSectionProps) => {
-  const examples =
-    codeExamples && codeExamples.length > 0
-      ? codeExamples.filter((example) => Boolean(example.code))
-      : hero.codeExample?.code
-        ? [hero.codeExample]
-        : [];
-  const hasCodeExample = examples.length > 0;
-  const highlights = hero.highlights ?? [];
-
-  return (
-    <section className="relative overflow-hidden border-b border-border">
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(1000px_480px_at_78%_-8%,color-mix(in_oklch,var(--primary)_13%,transparent),transparent_70%)]"
-      />
-
-      <div
-        className={
-          hasCodeExample
-            ? "relative mx-auto grid max-w-[1200px] items-center gap-10 px-6 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-14 lg:px-6 lg:py-[4.75rem] lg:pb-16"
-            : "relative mx-auto flex max-w-[1200px] flex-col gap-10 px-6 py-16 lg:px-6 lg:py-24"
-        }
-      >
-        <div
-          className={cn(
-            "landing-fu flex flex-col",
-            !hasCodeExample && "mx-auto max-w-3xl items-center text-center",
-          )}
-        >
-          {(hero.badge || hero.subtitle) && (
-            <div className="mb-[1.375rem] inline-flex w-fit items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-[0.78125rem] text-muted-foreground">
-              {hero.badge ? (
-                <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[0.6875rem] font-semibold text-primary">
-                  <span
-                    className="size-1.5 rounded-full bg-primary"
-                    aria-hidden
-                  />
-                  {hero.badge}
-                </span>
-              ) : null}
-              {hero.subtitle ? <span>{hero.subtitle}</span> : null}
-            </div>
-          )}
-
-          <h1 className="mb-5 text-[2.5rem] leading-[1.02] font-bold tracking-[-0.03em] text-balance sm:text-5xl lg:text-[3.5rem]">
-            {hero.title}
-            {hero.titleAccent ? (
-              <>
-                <br />
-                <span className="text-primary">{hero.titleAccent}</span>
-              </>
-            ) : null}
-          </h1>
-
-          {hero.description ? (
-            <p className="mb-[1.875rem] max-w-[480px] text-lg leading-relaxed text-pretty text-muted-foreground">
-              {hero.description}
-            </p>
-          ) : null}
-
-          {(primaryAction || secondaryAction) && (
-            <div className="flex flex-wrap items-center gap-3">
-              {primaryAction ? (
-                <LandingButton
-                  href={primaryAction.href}
-                  label={primaryAction.label}
-                  icon={ArrowRightIcon}
-                  variant="primary"
-                />
-              ) : null}
-              {secondaryAction ? (
-                <LandingButton
-                  href={secondaryAction.href}
-                  label={secondaryAction.label}
-                  icon={BookOpenIcon}
-                  iconPosition="start"
-                  variant="secondary"
-                />
-              ) : null}
-            </div>
-          )}
-
-          {highlights.length > 0 ? (
-            <ul className="mt-[1.875rem] flex flex-wrap items-center gap-x-[1.375rem] gap-y-2 text-[0.8125rem] text-muted-foreground/70">
-              {highlights.map((item) => (
-                <li
-                  key={item}
-                  className="inline-flex items-center gap-[0.4375rem]"
-                >
-                  <CheckIcon size={15} className="text-primary" aria-hidden />
-                  {item}
-                </li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
-
-        {hasCodeExample ? (
-          <div className="landing-fu flex flex-col gap-3.5">
-            {examples.map((example) => (
-              <CodeExampleCard
-                key={`${example.filename ?? "example"}-${example.code.slice(0, 24)}`}
-                example={example}
-              />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { cn } from "@lukoweb/apitogo";
+import { ArrowRightIcon, BookOpenIcon, CheckIcon } from "lucide-react";
+import { CodeExampleCard } from "./CodeExampleCard.js";
+import { LandingButton } from "./LandingButtons.js";
+
+type CodeExample = NonNullable<
+  NonNullable<ResolvedLandingContent["hero"]>["codeExample"]
+>;
+
+export type HeroSectionProps = {
+  hero: NonNullable<ResolvedLandingContent["hero"]>;
+  primaryAction?: ResolvedLandingContent["primaryAction"];
+  secondaryAction?: ResolvedLandingContent["secondaryAction"];
+  /** Optional stacked code cards (falls back to hero.codeExample). */
+  codeExamples?: CodeExample[];
+};
+
+export const HeroSection = ({
+  hero,
+  primaryAction,
+  secondaryAction,
+  codeExamples,
+}: HeroSectionProps) => {
+  const examples =
+    codeExamples && codeExamples.length > 0
+      ? codeExamples.filter((example) => Boolean(example.code))
+      : hero.codeExample?.code
+        ? [hero.codeExample]
+        : [];
+  const hasCodeExample = examples.length > 0;
+  const highlights = hero.highlights ?? [];
+
+  return (
+    <section className="relative overflow-hidden border-b border-border">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(1000px_480px_at_78%_-8%,color-mix(in_oklch,var(--primary)_13%,transparent),transparent_70%)]"
+      />
+
+      <div
+        className={
+          hasCodeExample
+            ? "relative mx-auto grid max-w-[1200px] items-center gap-10 px-6 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-14 lg:px-6 lg:py-[4.75rem] lg:pb-16"
+            : "relative mx-auto flex max-w-[1200px] flex-col gap-10 px-6 py-16 lg:px-6 lg:py-24"
+        }
+      >
+        <div
+          className={cn(
+            "landing-fu flex flex-col",
+            !hasCodeExample && "mx-auto max-w-3xl items-center text-center",
+          )}
+        >
+          {(hero.badge || hero.subtitle) && (
+            <div className="mb-[1.375rem] inline-flex w-fit items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-[0.78125rem] text-muted-foreground">
+              {hero.badge ? (
+                <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[0.6875rem] font-semibold text-primary">
+                  <span
+                    className="size-1.5 rounded-full bg-primary"
+                    aria-hidden
+                  />
+                  {hero.badge}
+                </span>
+              ) : null}
+              {hero.subtitle ? <span>{hero.subtitle}</span> : null}
+            </div>
+          )}
+
+          <h1 className="mb-5 text-[2.5rem] leading-[1.02] font-bold tracking-[-0.03em] text-balance sm:text-5xl lg:text-[3.5rem]">
+            {hero.title}
+            {hero.titleAccent ? (
+              <>
+                <br />
+                <span className="text-primary">{hero.titleAccent}</span>
+              </>
+            ) : null}
+          </h1>
+
+          {hero.description ? (
+            <p className="mb-[1.875rem] max-w-[480px] text-lg leading-relaxed text-pretty text-muted-foreground">
+              {hero.description}
+            </p>
+          ) : null}
+
+          {(primaryAction || secondaryAction) && (
+            <div className="flex flex-wrap items-center gap-3">
+              {primaryAction ? (
+                <LandingButton
+                  href={primaryAction.href}
+                  label={primaryAction.label}
+                  icon={ArrowRightIcon}
+                  variant="primary"
+                />
+              ) : null}
+              {secondaryAction ? (
+                <LandingButton
+                  href={secondaryAction.href}
+                  label={secondaryAction.label}
+                  icon={BookOpenIcon}
+                  iconPosition="start"
+                  variant="secondary"
+                />
+              ) : null}
+            </div>
+          )}
+
+          {highlights.length > 0 ? (
+            <ul className="mt-[1.875rem] flex flex-wrap items-center gap-x-[1.375rem] gap-y-2 text-[0.8125rem] text-muted-foreground/70">
+              {highlights.map((item) => (
+                <li
+                  key={item}
+                  className="inline-flex items-center gap-[0.4375rem]"
+                >
+                  <CheckIcon size={15} className="text-primary" aria-hidden />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+
+        {hasCodeExample ? (
+          <div className="landing-fu flex flex-col gap-3.5">
+            {examples.map((example) => (
+              <CodeExampleCard
+                key={`${example.filename ?? "example"}-${example.code.slice(0, 24)}`}
+                example={example}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};