@tomako/tools-runtime 0.1.0 → 0.1.2

package/src/features/tools/shared/create-standard-landing-container.tsx

@@ -3,9 +3,11 @@ import type { ComponentType } from "react";
 
 import type {
     ToolStandardFaqItem,
+    ToolStandardEditorialSection,
     ToolStandardGenerationStep,
     ToolStandardImageTextSection,
     ToolStandardNarrativeSection,
+    ToolStandardReferenceTable,
     ToolStandardReportPreview,
     ToolStandardSectionId,
 } from "../../../features/tools/shared/tool-standard-landing-sections";
@@ -33,6 +35,10 @@ export type StandardLandingCopyKeys = {
   reportPreview?: string;
   /** Optional answer-first sections for decision and strategy tools. */
   narrativeSections?: string;
+  /** Optional structured reading sections for rules, limits, and next actions. */
+  editorialSections?: string;
+  /** Optional searchable specifications table. */
+  referenceTable?: string;
 };
 
 export type StandardLandingContainerConfig = {
@@ -50,6 +56,14 @@ export type StandardLandingContainerConfig = {
   passFaqToShell?: boolean;
   /** A content CTA may navigate to a real, cost-free action. */
   contentCtaHref?: string;
+  /** Hide repeated content CTAs when the primary action is already the workspace above. */
+  showContentCtas?: boolean;
+  /** Some tools have a useful step list but no extra illustration to repeat it. */
+  showGenerationImage?: boolean;
+  /** Only render a standalone guide when the tool has a real sequential workflow. */
+  showGeneration?: boolean;
+  /** Use less vertical padding and a grouped benefit list below mobile breakpoints. */
+  compactMobileSections?: boolean;
   /** Override the default section sequence when the tool archetype needs a different reading flow. */
   sectionOrder?: readonly ToolStandardSectionId[];
 };
@@ -73,6 +87,10 @@ export function createStandardLandingContainer(
     workspaceHeadingLevel = "h1",
     passFaqToShell = true,
     contentCtaHref,
+    showContentCtas = true,
+    showGenerationImage = true,
+    showGeneration = true,
+    compactMobileSections = false,
     sectionOrder,
   } = config;
 
@@ -96,9 +114,12 @@ export function createStandardLandingContainer(
     const narrativeSections = copyKeys?.narrativeSections
       ? (t.raw(copyKeys.narrativeSections) as readonly ToolStandardNarrativeSection[])
       : [];
-    const generationSteps = t.raw(
-      "standard.generation.steps",
-    ) as readonly ToolStandardGenerationStep[];
+    const editorialSections = copyKeys?.editorialSections
+      ? (t.raw(copyKeys.editorialSections) as readonly ToolStandardEditorialSection[])
+      : [];
+    const generationSteps = showGeneration
+      ? (t.raw("standard.generation.steps") as readonly ToolStandardGenerationStep[])
+      : [];
     const faqRaw = t.raw("faqItems");
     const faqItems = (
       Array.isArray(faqRaw) ? faqRaw : []
@@ -106,6 +127,9 @@ export function createStandardLandingContainer(
     const reportPreview = copyKeys?.reportPreview
       ? (t.raw(copyKeys.reportPreview) as ToolStandardReportPreview)
       : undefined;
+    const referenceTable = copyKeys?.referenceTable
+      ? (t.raw(copyKeys.referenceTable) as ToolStandardReferenceTable)
+      : undefined;
     const shellFaq = faqItems.filter(
       (item): item is { question: string; answer: string } =>
         typeof item.answer === "string",
@@ -137,7 +161,8 @@ export function createStandardLandingContainer(
           }}
           imageTextSections={imageTextSections}
           narrativeSections={narrativeSections}
-          generation={{
+          editorialSections={editorialSections}
+          generation={showGeneration ? {
             title: t("standard.generation.title"),
             image: {
               src: generationImageSrc,
@@ -146,15 +171,20 @@ export function createStandardLandingContainer(
             steps: generationSteps,
             ctaLabel: t("standard.generation.ctaLabel"),
             ctaHref: contentCtaHref,
-          }}
+            showCta: showContentCtas,
+            showImage: showGenerationImage,
+          } : undefined}
           reportPreview={reportPreview}
+          referenceTable={referenceTable}
           faq={{
             title: t(faqTitleKey),
             intro: t("standard.faqIntro"),
             ctaLabel: t("standard.faqCtaLabel"),
             ctaHref: contentCtaHref,
+            showCta: showContentCtas,
             items: faqItems,
           }}
+          mobileDensity={compactMobileSections ? "compact" : "default"}
           sectionOrder={sectionOrder}
         />
       </ToolPageShell>

package/src/features/tools/shared/tool-page-shell.tsx

@@ -3,18 +3,8 @@ import Image from "next/image";
 import type { ReactNode } from "react";
 
 import { relatedToolSlugsByTool } from "../../../constants/related-tools";
-import {
-  RelatedTools,
-  SiteFooter,
-  SiteNavigation,
-  getAuthClientMessages,
-  siteConfig,
-  type SiteNavigationCopy,
-} from "../../../host/server";
-import { bcp47ByLocale } from "../../../i18n/locale-fallback";
+import { RelatedTools } from "../../../host/server";
 import type { AppLocale } from "../../../i18n/locale";
-import { localizedPath } from "../../../lib/routing/locale-paths";
-import { serializeJsonLd } from "../../../lib/seo-meta";
 import { resolveToolLocaleCopy } from "../../../lib/tools/resolve-tool-locale-copy";
 
 import type { ToolSpec } from "../types";
@@ -62,136 +52,20 @@ export async function ToolPageShell({
   handoffSlot?: ReactNode;
   children: React.ReactNode;
 }) {
+  // ToolMarketingShell 在 SEO route 层输出 JSON-LD / 导航 / 页脚；
+  // runtime 仅保留 hero / 内容 / related tools 的布局。
+  void faqItems;
+  void handoffSlot;
+
   const copy = resolveToolLocaleCopy(spec, locale);
   const relatedToolSlugs = relatedToolSlugsByTool[spec.slug];
   const displayTitle = copy.displayTitle ?? copy.title;
   // Full messages: public getRequestConfig omits toolsPages; client tools layout alone is not enough for RSC.
   const messages = await loadToolMessages(locale);
   const t = createToolMessageTranslator(locale, messages, "toolsPages.shared");
-  const navT = createToolMessageTranslator(locale, messages, "page.landing.hero");
-  const navigationCopy: SiteNavigationCopy = {
-    languageLabel: navT("languageLabel"),
-    productCapabilities: navT.raw("atomicCapabilities") as SiteNavigationCopy["productCapabilities"],
-    nav: {
-      tools: navT("nav.tools"),
-      viewAllTools: navT("nav.viewAllTools"),
-      pricing: navT("nav.pricing"),
-      blog: navT("nav.blog"),
-      skills: navT("nav.skills"),
-    },
-  };
-  const authMessages = await getAuthClientMessages(locale);
-  const toolUrl = new URL(
-    localizedPath(locale, `tools/${spec.slug}`),
-    siteConfig.url,
-  ).href;
-  const toolJsonLd = {
-    "@context": "https://schema.org",
-    "@type": "WebApplication",
-    name: copy.title,
-    description: copy.description,
-    url: toolUrl,
-    applicationCategory: "BusinessApplication",
-    operatingSystem: "Web",
-    inLanguage: bcp47ByLocale[locale],
-    isAccessibleForFree: true,
-    offers: {
-      "@type": "Offer",
-      price: "0",
-      priceCurrency: "USD",
-    },
-  };
-
-  const breadcrumbJsonLd = {
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    itemListElement: [
-      {
-        "@type": "ListItem",
-        position: 1,
-        name: siteConfig.name,
-        item: new URL(localizedPath(locale), siteConfig.url).href,
-      },
-      {
-        "@type": "ListItem",
-        position: 2,
-        name: t("breadcrumbTools"),
-        item: new URL(localizedPath(locale, "tools"), siteConfig.url).href,
-      },
-      {
-        "@type": "ListItem",
-        position: 3,
-        name: copy.title,
-        item: toolUrl,
-      },
-    ],
-  };
-
-  // FAQ 来源优先级：显式 faqItems（package 工具）→ toolsPages.{camelSlug}.guide.faqItems；都缺失时不输出 FAQPage
-  let resolvedFaqItems: Array<{ question: string; answer: string }> =
-    faqItems ?? [];
-  if (resolvedFaqItems.length === 0) {
-    const camelSlug = spec.slug.replace(/-([a-z0-9])/g, (_, char: string) =>
-      char.toUpperCase(),
-    );
-    try {
-      const guideT = createToolMessageTranslator(
-        locale,
-        messages,
-        `toolsPages.${camelSlug}.guide`,
-      );
-      const rawFaqItems = guideT.raw("faqItems") as unknown;
-      resolvedFaqItems = Array.isArray(rawFaqItems)
-        ? rawFaqItems.filter(
-            (item): item is { question: string; answer: string } =>
-              typeof item?.question === "string" &&
-              typeof item?.answer === "string",
-          )
-        : [];
-    } catch {
-      resolvedFaqItems = [];
-    }
-  }
-  const faqJsonLd: Record<string, unknown> | null =
-    resolvedFaqItems.length > 0
-      ? {
-          "@context": "https://schema.org",
-          "@type": "FAQPage",
-          mainEntity: resolvedFaqItems.map((item) => ({
-            "@type": "Question",
-            name: item.question,
-            acceptedAnswer: {
-              "@type": "Answer",
-              text: item.answer,
-            },
-          })),
-        }
-      : null;
 
   return (
     <div className="min-h-screen overflow-x-clip bg-white text-[#111111]">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(toolJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-      {faqJsonLd ? (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: serializeJsonLd(faqJsonLd) }}
-        />
-      ) : null}
-      <SiteNavigation
-        locale={locale}
-        copy={navigationCopy}
-        authMessages={authMessages}
-        surface="solid"
-        className="sticky top-0 z-50 border-t-0"
-      />
-      {handoffSlot}
       <main className="overflow-x-clip">
       {heroVariant === "immersive" ? (
         <>
@@ -230,7 +104,7 @@ export async function ToolPageShell({
             ) : null}
 
             <div className="relative z-10 flex min-h-[min(72svh,680px)] flex-col">
-              <div className="mx-auto flex w-full max-w-screen-2xl flex-1 flex-col justify-center gap-10 px-5 pb-8 pt-8 sm:px-8 md:px-12 lg:px-16 lg:pt-12">
+              <div className="mx-auto flex w-full max-w-[76rem] flex-1 flex-col justify-center gap-10 px-4 pb-8 pt-8 sm:px-8 lg:pt-12">
                 <div className="grid flex-1 gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
                   <div className="max-w-4xl">
                     <p className="inline-flex items-center gap-2 rounded-full border border-[#2B211A]/14 bg-[#FFF8EA]/45 px-4 py-2 text-sm font-semibold text-[#4C3C31] shadow-[0_12px_36px_rgba(83,48,28,0.08)] backdrop-blur">
@@ -262,13 +136,13 @@ export async function ToolPageShell({
             </div>
           </section>
 
-          <div className="mx-auto flex max-w-screen-2xl flex-col gap-16 px-5 py-16 sm:px-8 md:gap-20 md:py-24">
+          <div className="mx-auto flex max-w-[76rem] flex-col gap-16 px-4 py-16 sm:px-8 md:gap-20 md:py-24">
             {children}
           </div>
         </>
       ) : (
         <>
-          <div className="mx-auto max-w-screen-2xl px-5 py-5 sm:px-8">
+          <div className="mx-auto max-w-[76rem] px-4 py-5 sm:px-8">
             {heroVariant === "showcase" && heroVisual ? (
               <section className="pb-14 pt-14 md:pb-16 md:pt-16">
                 <div className="mx-auto max-w-4xl text-center">
@@ -337,12 +211,11 @@ export async function ToolPageShell({
         </>
       )}
       {relatedToolSlugs?.length ? (
-        <div className="mx-auto w-full max-w-screen-2xl px-5 pb-16 sm:px-8 md:pb-20">
+        <div className="mx-auto w-full max-w-[76rem] px-4 pb-16 sm:px-8 md:pb-20">
           <RelatedTools locale={locale} currentToolSlug={spec.slug} slugs={relatedToolSlugs} />
         </div>
       ) : null}
       </main>
-      <SiteFooter locale={locale} />
     </div>
   );
 }