@lukoweb/apitogo-module-landing 0.2.22 → 0.2.24

package/src/landing.css

@@ -1,14 +1,14 @@
-@keyframes landing-fu {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.landing-fu {
-  animation: landing-fu 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
-}
+@keyframes landing-fu {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.landing-fu {
+  animation: landing-fu 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+}

package/src/landingModule.tsx

@@ -1,46 +1,46 @@
-import type { ResolvedLandingModule } from "@lukoweb/apitogo";
-import type { NavigationPlugin } from "@lukoweb/apitogo/plugins";
-import type { ComponentType, ReactNode } from "react";
-import { isValidElement } from "react";
-import type { RouteObject } from "react-router";
-import { DefaultLandingPage } from "./DefaultLandingPage.js";
-
-export type LandingModuleOptions = ResolvedLandingModule & {
-  component?: ComponentType | ReactNode;
-};
-
-const renderLandingElement = (options: LandingModuleOptions) => {
-  if (options.component) {
-    if (isValidElement(options.component)) {
-      return options.component;
-    }
-
-    const Component = options.component as ComponentType;
-    return <Component />;
-  }
-
-  return <DefaultLandingPage content={options.content} />;
-};
-
-export const landingModule = (
-  options: LandingModuleOptions,
-): NavigationPlugin | undefined => {
-  if (!options.enabled) {
-    return undefined;
-  }
-
-  const routes: RouteObject[] = [
-    {
-      path: options.path,
-      element: renderLandingElement(options),
-      handle: {
-        layout: options.layout,
-      },
-    },
-  ];
-
-  return {
-    getRoutes: () => routes,
-    getNavigation: async () => [],
-  };
-};
+import type { ResolvedLandingModule } from "@lukoweb/apitogo";
+import type { NavigationPlugin } from "@lukoweb/apitogo/plugins";
+import type { ComponentType, ReactNode } from "react";
+import { isValidElement } from "react";
+import type { RouteObject } from "react-router";
+import { DefaultLandingPage } from "./DefaultLandingPage.js";
+
+export type LandingModuleOptions = ResolvedLandingModule & {
+  component?: ComponentType | ReactNode;
+};
+
+const renderLandingElement = (options: LandingModuleOptions) => {
+  if (options.component) {
+    if (isValidElement(options.component)) {
+      return options.component;
+    }
+
+    const Component = options.component as ComponentType;
+    return <Component />;
+  }
+
+  return <DefaultLandingPage content={options.content} />;
+};
+
+export const landingModule = (
+  options: LandingModuleOptions,
+): NavigationPlugin | undefined => {
+  if (!options.enabled) {
+    return undefined;
+  }
+
+  const routes: RouteObject[] = [
+    {
+      path: options.path,
+      element: renderLandingElement(options),
+      handle: {
+        layout: options.layout,
+      },
+    },
+  ];
+
+  return {
+    getRoutes: () => routes,
+    getNavigation: async () => [],
+  };
+};

package/src/sections/ApiShowcaseSection.tsx

@@ -1,131 +1,131 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { cn } from "@lukoweb/apitogo";
-import { Link } from "@lukoweb/apitogo/components";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { ArrowRightIcon } from "lucide-react";
-import { LandingIcon } from "./LandingIcon.js";
-
-export type ApiShowcaseSectionProps = {
-  apiShowcase: NonNullable<ResolvedLandingContent["apiShowcase"]> & {
-    layout?: "grid" | "list";
-  };
-};
-
-const methodTone = (method?: string) => {
-  const m = (method ?? "").toUpperCase();
-  if (m === "POST" || m === "PUT" || m === "PATCH") {
-    return "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300";
-  }
-  if (m === "DELETE") {
-    return "bg-red-50 text-red-600 dark:bg-red-500/15 dark:text-red-300";
-  }
-  return "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300";
-};
-
-export const ApiShowcaseSection = ({
-  apiShowcase,
-}: ApiShowcaseSectionProps) => {
-  const items = apiShowcase.items ?? [];
-  if (items.length === 0) {
-    return null;
-  }
-
-  const browseHref = apiShowcase.browseAllHref ?? "/api";
-  const browseLabel = apiShowcase.browseAllLabel ?? "Browse all APIs";
-  const layout = apiShowcase.layout ?? "grid";
-
-  return (
-    <section className="border-y border-border bg-background">
-      <div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
-        <div className="mb-8 flex flex-wrap items-end justify-between gap-5">
-          <div>
-            {layout === "grid" ? (
-              <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
-                {"// the catalog"}
-              </p>
-            ) : null}
-            <h2 className="text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
-              {apiShowcase.title ?? "Production APIs. One key."}
-            </h2>
-            {apiShowcase.subtitle ? (
-              <p className="mt-2 text-muted-foreground">
-                {apiShowcase.subtitle}
-              </p>
-            ) : null}
-          </div>
-          <Button asChild variant="outline" size="sm">
-            <Link to={browseHref}>
-              {browseLabel}
-              <ArrowRightIcon size={15} aria-hidden />
-            </Link>
-          </Button>
-        </div>
-
-        {layout === "list" ? (
-          <div className="overflow-hidden rounded-[14px] border border-border bg-card">
-            {items.map((item, index) => {
-              const method =
-                "method" in item && typeof item.method === "string"
-                  ? item.method
-                  : undefined;
-              const description = item.summary ?? item.name;
-              return (
-                <div
-                  key={`${item.name}-${item.path}`}
-                  className={cn(
-                    "flex flex-wrap items-center gap-3.5 px-5 py-3.5",
-                    index < items.length - 1 && "border-b border-border",
-                  )}
-                >
-                  {method ? (
-                    <span
-                      className={cn(
-                        "min-w-14 rounded-[5px] px-2 py-0.5 text-center font-mono text-[11px] font-bold",
-                        methodTone(method),
-                      )}
-                    >
-                      {method.toUpperCase()}
-                    </span>
-                  ) : null}
-                  <code className="flex-1 font-mono text-[0.84375rem] text-foreground">
-                    {item.path}
-                  </code>
-                  <span className="text-[0.8125rem] text-muted-foreground">
-                    {description}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
-            {items.map((item) => (
-              <Link
-                key={`${item.name}-${item.path}`}
-                to={browseHref}
-                className="block rounded-[13px] border border-border bg-card p-[1.125rem] text-foreground no-underline transition-[border-color,transform] hover:-translate-y-0.5 hover:border-muted-foreground/30"
-              >
-                <div className="mb-3.5 flex items-center justify-between">
-                  <div className="grid size-9 place-items-center rounded-[9px] border border-border bg-muted/40 text-primary">
-                    <LandingIcon name={item.icon ?? "boxes"} size={18} />
-                  </div>
-                  {item.latency ? (
-                    <span className="rounded-md bg-primary/10 px-[0.4375rem] py-[0.1875rem] font-mono text-[0.6875rem] font-semibold text-primary">
-                      {item.latency}
-                    </span>
-                  ) : null}
-                </div>
-                <h3 className="mb-1 text-[0.9375rem] font-semibold">
-                  {item.name}
-                </h3>
-                <p className="font-mono text-[0.71875rem] text-muted-foreground/70">
-                  {item.path}
-                </p>
-              </Link>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { cn } from "@lukoweb/apitogo";
+import { Link } from "@lukoweb/apitogo/components";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { ArrowRightIcon } from "lucide-react";
+import { LandingIcon } from "./LandingIcon.js";
+
+export type ApiShowcaseSectionProps = {
+  apiShowcase: NonNullable<ResolvedLandingContent["apiShowcase"]> & {
+    layout?: "grid" | "list";
+  };
+};
+
+const methodTone = (method?: string) => {
+  const m = (method ?? "").toUpperCase();
+  if (m === "POST" || m === "PUT" || m === "PATCH") {
+    return "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300";
+  }
+  if (m === "DELETE") {
+    return "bg-red-50 text-red-600 dark:bg-red-500/15 dark:text-red-300";
+  }
+  return "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300";
+};
+
+export const ApiShowcaseSection = ({
+  apiShowcase,
+}: ApiShowcaseSectionProps) => {
+  const items = apiShowcase.items ?? [];
+  if (items.length === 0) {
+    return null;
+  }
+
+  const browseHref = apiShowcase.browseAllHref ?? "/api";
+  const browseLabel = apiShowcase.browseAllLabel ?? "Browse all APIs";
+  const layout = apiShowcase.layout ?? "grid";
+
+  return (
+    <section className="border-y border-border bg-background">
+      <div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
+        <div className="mb-8 flex flex-wrap items-end justify-between gap-5">
+          <div>
+            {layout === "grid" ? (
+              <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
+                {"// the catalog"}
+              </p>
+            ) : null}
+            <h2 className="text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
+              {apiShowcase.title ?? "Production APIs. One key."}
+            </h2>
+            {apiShowcase.subtitle ? (
+              <p className="mt-2 text-muted-foreground">
+                {apiShowcase.subtitle}
+              </p>
+            ) : null}
+          </div>
+          <Button asChild variant="outline" size="sm">
+            <Link to={browseHref}>
+              {browseLabel}
+              <ArrowRightIcon size={15} aria-hidden />
+            </Link>
+          </Button>
+        </div>
+
+        {layout === "list" ? (
+          <div className="overflow-hidden rounded-[14px] border border-border bg-card">
+            {items.map((item, index) => {
+              const method =
+                "method" in item && typeof item.method === "string"
+                  ? item.method
+                  : undefined;
+              const description = item.summary ?? item.name;
+              return (
+                <div
+                  key={`${item.name}-${item.path}`}
+                  className={cn(
+                    "flex flex-wrap items-center gap-3.5 px-5 py-3.5",
+                    index < items.length - 1 && "border-b border-border",
+                  )}
+                >
+                  {method ? (
+                    <span
+                      className={cn(
+                        "min-w-14 rounded-[5px] px-2 py-0.5 text-center font-mono text-[11px] font-bold",
+                        methodTone(method),
+                      )}
+                    >
+                      {method.toUpperCase()}
+                    </span>
+                  ) : null}
+                  <code className="flex-1 font-mono text-[0.84375rem] text-foreground">
+                    {item.path}
+                  </code>
+                  <span className="text-[0.8125rem] text-muted-foreground">
+                    {description}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+            {items.map((item) => (
+              <Link
+                key={`${item.name}-${item.path}`}
+                to={browseHref}
+                className="block rounded-[13px] border border-border bg-card p-[1.125rem] text-foreground no-underline transition-[border-color,transform] hover:-translate-y-0.5 hover:border-muted-foreground/30"
+              >
+                <div className="mb-3.5 flex items-center justify-between">
+                  <div className="grid size-9 place-items-center rounded-[9px] border border-border bg-muted/40 text-primary">
+                    <LandingIcon name={item.icon ?? "boxes"} size={18} />
+                  </div>
+                  {item.latency ? (
+                    <span className="rounded-md bg-primary/10 px-[0.4375rem] py-[0.1875rem] font-mono text-[0.6875rem] font-semibold text-primary">
+                      {item.latency}
+                    </span>
+                  ) : null}
+                </div>
+                <h3 className="mb-1 text-[0.9375rem] font-semibold">
+                  {item.name}
+                </h3>
+                <p className="font-mono text-[0.71875rem] text-muted-foreground/70">
+                  {item.path}
+                </p>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

package/src/sections/CodeExampleCard.tsx

@@ -1,37 +1,37 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { TerminalIcon } from "lucide-react";
-
-export type CodeExampleCardProps = {
-  example: NonNullable<
-    NonNullable<ResolvedLandingContent["hero"]>["codeExample"]
-  >;
-};
-
-export const CodeExampleCard = ({ example }: CodeExampleCardProps) => {
-  const filename = example.filename ?? "example.sh";
-  const language = example.language ?? "bash";
-
-  return (
-    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
-      <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3">
-        <span
-          className="size-[11px] rounded-full bg-destructive/80"
-          aria-hidden
-        />
-        <span className="size-[11px] rounded-full bg-warning" aria-hidden />
-        <span className="size-[11px] rounded-full bg-primary" aria-hidden />
-        <span className="ms-2 font-mono text-xs text-muted-foreground">
-          {filename}
-        </span>
-        <TerminalIcon
-          size={14}
-          className="ms-auto text-muted-foreground/70"
-          aria-hidden
-        />
-      </div>
-      <pre className="overflow-x-auto p-[1.125rem] font-mono text-[0.78125rem] leading-[1.85] text-foreground">
-        <code data-language={language}>{example.code}</code>
-      </pre>
-    </div>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { TerminalIcon } from "lucide-react";
+
+export type CodeExampleCardProps = {
+  example: NonNullable<
+    NonNullable<ResolvedLandingContent["hero"]>["codeExample"]
+  >;
+};
+
+export const CodeExampleCard = ({ example }: CodeExampleCardProps) => {
+  const filename = example.filename ?? "example.sh";
+  const language = example.language ?? "bash";
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
+      <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3">
+        <span
+          className="size-[11px] rounded-full bg-destructive/80"
+          aria-hidden
+        />
+        <span className="size-[11px] rounded-full bg-warning" aria-hidden />
+        <span className="size-[11px] rounded-full bg-primary" aria-hidden />
+        <span className="ms-2 font-mono text-xs text-muted-foreground">
+          {filename}
+        </span>
+        <TerminalIcon
+          size={14}
+          className="ms-auto text-muted-foreground/70"
+          aria-hidden
+        />
+      </div>
+      <pre className="overflow-x-auto p-[1.125rem] font-mono text-[0.78125rem] leading-[1.85] text-foreground">
+        <code data-language={language}>{example.code}</code>
+      </pre>
+    </div>
+  );
+};

package/src/sections/FeaturesSection.tsx

@@ -1,60 +1,60 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { LandingIcon } from "./LandingIcon.js";
-
-export type FeaturesSectionProps = {
-  features: NonNullable<ResolvedLandingContent["features"]>;
-  section?: ResolvedLandingContent["featuresSection"];
-};
-
-export const FeaturesSection = ({
-  features,
-  section,
-}: FeaturesSectionProps) => {
-  if (features.length === 0) {
-    return null;
-  }
-
-  const label = section?.label ?? "// why us";
-  const title = section?.title ?? "Everything you need to build on your API";
-  const description =
-    section?.description ??
-    "Skip the infra. Focus on your product while your developer portal handles docs, auth, and billing.";
-
-  return (
-    <section
-      id="features"
-      className="mx-auto max-w-[1200px] scroll-mt-(--top-header-height) px-6 py-10 pb-16"
-    >
-      <div className="mb-11 max-w-[640px]">
-        <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
-          {label}
-        </p>
-        <h2 className="mb-3.5 text-[2.375rem] leading-tight font-bold tracking-[-0.025em] text-balance">
-          {title}
-        </h2>
-        <p className="text-[1.0625rem] leading-relaxed text-muted-foreground">
-          {description}
-        </p>
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {features.map((feature) => (
-          <article
-            key={feature.title}
-            className="rounded-[14px] border border-border bg-card p-6 transition-colors hover:border-muted-foreground/30"
-          >
-            <div className="mb-4 grid size-[2.625rem] place-items-center rounded-[11px] bg-primary/10 text-primary">
-              <LandingIcon name={feature.icon} size={21} />
-            </div>
-            <h3 className="mb-2 text-[1.09375rem] font-semibold">
-              {feature.title}
-            </h3>
-            <p className="text-[0.90625rem] leading-relaxed text-muted-foreground">
-              {feature.description}
-            </p>
-          </article>
-        ))}
-      </div>
-    </section>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { LandingIcon } from "./LandingIcon.js";
+
+export type FeaturesSectionProps = {
+  features: NonNullable<ResolvedLandingContent["features"]>;
+  section?: ResolvedLandingContent["featuresSection"];
+};
+
+export const FeaturesSection = ({
+  features,
+  section,
+}: FeaturesSectionProps) => {
+  if (features.length === 0) {
+    return null;
+  }
+
+  const label = section?.label ?? "// why us";
+  const title = section?.title ?? "Everything you need to build on your API";
+  const description =
+    section?.description ??
+    "Skip the infra. Focus on your product while your developer portal handles docs, auth, and billing.";
+
+  return (
+    <section
+      id="features"
+      className="mx-auto max-w-[1200px] scroll-mt-(--top-header-height) px-6 py-10 pb-16"
+    >
+      <div className="mb-11 max-w-[640px]">
+        <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
+          {label}
+        </p>
+        <h2 className="mb-3.5 text-[2.375rem] leading-tight font-bold tracking-[-0.025em] text-balance">
+          {title}
+        </h2>
+        <p className="text-[1.0625rem] leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {features.map((feature) => (
+          <article
+            key={feature.title}
+            className="rounded-[14px] border border-border bg-card p-6 transition-colors hover:border-muted-foreground/30"
+          >
+            <div className="mb-4 grid size-[2.625rem] place-items-center rounded-[11px] bg-primary/10 text-primary">
+              <LandingIcon name={feature.icon} size={21} />
+            </div>
+            <h3 className="mb-2 text-[1.09375rem] font-semibold">
+              {feature.title}
+            </h3>
+            <p className="text-[0.90625rem] leading-relaxed text-muted-foreground">
+              {feature.description}
+            </p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+};