npm - @lukoweb/apitogo-module-landing - Versions diffs - 0.1.58 → 0.1.59 - Mend

@lukoweb/apitogo-module-landing 0.1.58 → 0.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json +2 -2
package/src/DefaultLandingPage.tsx +1 -0
package/src/LandingFooterSlot.tsx +26 -0
package/src/LandingShell.tsx +26 -3
package/src/index.tsx +4 -0
package/src/landing.css +4 -0
package/src/sections/FooterSection.tsx +152 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-landing",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx"
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@lukoweb/apitogo": "0.1.58",
+    "@lukoweb/apitogo": "0.1.59",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "5.9.3"

package/src/DefaultLandingPage.tsx CHANGED Viewed

@@ -45,6 +45,7 @@ export const DefaultLandingPage = ({ content }: DefaultLandingPageProps) => {
       {content.pricingCta ? (
         <PricingCtaSection pricingCta={content.pricingCta} />
       ) : null}
+      {/* content.footer renders portal-wide via the layout "footer" slot. */}
     </LandingShell>
   );
 };

package/src/LandingFooterSlot.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import type { ComponentType } from "react";
+import { FooterSection } from "./sections/FooterSection.js";
+import "./landing.css";
+export type LandingFooterSlotConfig = ResolvedLandingContent["footer"];
+/**
+ * Builds a component for the layout "footer" slot so the landing footer
+ * renders on every page (home, docs, API reference, pricing, auth).
+ */
+export const createLandingFooterSlot = (
+  footer: LandingFooterSlotConfig,
+): ComponentType | undefined => {
+  if (!footer || footer.enabled === false) {
+    return undefined;
+  }
+  const LandingFooterSlot = () => (
+    <div className="apitogo-landing">
+      <FooterSection footer={footer} />
+    </div>
+  );
+  return LandingFooterSlot;
+};

package/src/LandingShell.tsx CHANGED Viewed

@@ -1,15 +1,37 @@
 import { cn } from "@lukoweb/apitogo";
 import { Head, useZudoku } from "@lukoweb/apitogo/components";
-import type { ReactNode } from "react";
+import { Children, isValidElement, type ReactNode } from "react";
+import { FooterSection } from "./sections/FooterSection.js";
 import "./landing.css";
+/**
+ * Detects a composed `FooterSection` in the element tree so the
+ * "Built with APIToGo" line can be replaced by the real footer.
+ */
+const containsFooterSection = (node: ReactNode): boolean =>
+  Children.toArray(node).some((child) => {
+    if (!isValidElement(child)) {
+      return false;
+    }
+    if (child.type === FooterSection) {
+      return true;
+    }
+    const { children } = child.props as { children?: ReactNode };
+    return children ? containsFooterSection(children) : false;
+  });
 export type LandingShellProps = {
   children: ReactNode;
   /** Page title for `<Head>`. Defaults to site title from config. */
   title?: string;
   /** Meta description for `<Head>`. */
   description?: string;
-  /** Show "Built with APIToGo" footer. Defaults to true. */
+  /**
+   * Show the "Built with APIToGo" line. Defaults to true.
+   * Automatically hidden when a `FooterSection` is composed as a child.
+   */
   showPoweredBy?: boolean;
 };
@@ -23,6 +45,7 @@ export const LandingShell = ({
   const siteTitle =
     options.metadata?.applicationName ?? options.site?.title ?? "APIToGo";
   const pageTitle = title ?? siteTitle;
+  const hasFooter = containsFooterSection(children);
   return (
     <div className="apitogo-landing relative overflow-hidden">
@@ -43,7 +66,7 @@ export const LandingShell = ({
       {children}
-      {showPoweredBy ? (
+      {showPoweredBy && !hasFooter ? (
         <div
           className={cn(
             "landing-powered-by py-6 text-center text-xs",

package/src/index.tsx CHANGED Viewed

@@ -4,6 +4,8 @@ export { LandingShell } from "./LandingShell.js";
 export type { LandingShellProps } from "./LandingShell.js";
 export { landingModule } from "./landingModule.js";
 export type { LandingModuleOptions } from "./landingModule.js";
+export { createLandingFooterSlot } from "./LandingFooterSlot.js";
+export type { LandingFooterSlotConfig } from "./LandingFooterSlot.js";
 export { HeroSection } from "./sections/HeroSection.js";
 export type { HeroSectionProps } from "./sections/HeroSection.js";
 export { TrustSection } from "./sections/TrustSection.js";
@@ -14,5 +16,7 @@ export { ApiShowcaseSection } from "./sections/ApiShowcaseSection.js";
 export type { ApiShowcaseSectionProps } from "./sections/ApiShowcaseSection.js";
 export { PricingCtaSection } from "./sections/PricingCtaSection.js";
 export type { PricingCtaSectionProps } from "./sections/PricingCtaSection.js";
+export { FooterSection } from "./sections/FooterSection.js";
+export type { FooterSectionProps } from "./sections/FooterSection.js";
 export { CodeExampleCard } from "./sections/CodeExampleCard.js";
 export type { CodeExampleCardProps } from "./sections/CodeExampleCard.js";

package/src/landing.css CHANGED Viewed

@@ -263,3 +263,7 @@
   border-top: 1px solid var(--landing-border);
   color: var(--landing-text-3);
 }
+.apitogo-landing .landing-footer-social-link {
+  color: var(--landing-text-3);
+}

package/src/sections/FooterSection.tsx ADDED Viewed

@@ -0,0 +1,152 @@
+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="landing-footer-social-link landing-muted-3 inline-flex items-center justify-center transition-colors hover:text-[var(--landing-text)]"
+    >
+      {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 ?? "APIToGo";
+  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="landing-footer border-t border-[var(--landing-border)] bg-[var(--landing-bg-2)]">
+      <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="landing-display text-[1.125rem] font-bold tracking-[-0.02em]">
+                  <span className="text-[var(--landing-peri)]">API</span>
+                  <span>ToGo</span>
+                </span>
+              )}
+            </div>
+            {tagline ? (
+              <p className="landing-muted max-w-[280px] text-[0.875rem] leading-relaxed">
+                {tagline}
+              </p>
+            ) : null}
+          </div>
+          {columns.map((column) => (
+            <div key={column.title}>
+              <h3 className="mb-4 text-[0.875rem] font-semibold text-[var(--landing-text)]">
+                {column.title}
+              </h3>
+              <ul className="space-y-2.5">
+                {column.links.map((link) => (
+                  <li key={`${column.title}-${link.label}`}>
+                    <a
+                      href={link.href}
+                      className="landing-muted text-[0.875rem] transition-colors hover:text-[var(--landing-text)]"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="landing-footer-bar mt-10 flex flex-col items-center justify-between gap-4 border-t border-[var(--landing-border)] pt-6 sm:flex-row">
+          <p className="landing-muted-3 text-[0.8125rem]">{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>
+  );
+};