@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,348 @@
+import { Search } from "lucide-react";
+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 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";
+import { ToolMcpBadge } from "./tool-mcp-badge";
+import {
+    createToolMessageTranslator,
+    loadToolMessages,
+} from "./tool-message-translator";
+
+export async function ToolPageShell({
+  spec,
+  locale,
+  heroVisual,
+  heroVariant = "split",
+  heroBackgroundImage,
+  heroBackgroundImageClassName = "object-contain object-right",
+  heroBackgroundImageFrameClassName = "inset-y-0 left-1/2 w-full max-w-[1200px] -translate-x-1/2",
+  heroBackgroundImageSizes = "(min-width: 1200px) 1200px, 100vw",
+  heroBackgroundColor = "#F7F6F2",
+  heroBackgroundAlt = "",
+  showDefaultHeader = true,
+  faqItems,
+  handoffSlot = null,
+  children,
+}: {
+  spec: ToolSpec;
+  locale: AppLocale;
+  heroVisual?: ReactNode;
+  heroVariant?: "split" | "showcase" | "immersive";
+  heroBackgroundImage?: string;
+  heroBackgroundImageClassName?: string;
+  heroBackgroundImageFrameClassName?: string;
+  heroBackgroundImageSizes?: string;
+  heroBackgroundColor?: string;
+  heroBackgroundAlt?: string;
+  /**
+   * Legacy fallback header for older Tool pages.
+   * New workspace-first Tool pages should set this to false and let ToolWorkspaceSection
+   * become the first content block after the sticky navigation.
+   */
+  showDefaultHeader?: boolean;
+  /** 直接注入 FAQ（package 工具用）；缺省时回退 toolsPages.{camelSlug}.guide.faqItems。 */
+  faqItems?: Array<{ question: string; answer: string }>;
+  /** Public SEO pages default to no activity handoff. */
+  handoffSlot?: ReactNode;
+  children: React.ReactNode;
+}) {
+  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" ? (
+        <>
+          <section
+            className="relative w-full overflow-hidden text-[#2B211A]"
+            style={{
+              minHeight: "min(72svh, 680px)",
+              background: heroBackgroundImage ? heroBackgroundColor : "#F4E6D8",
+            }}
+          >
+            {heroBackgroundImage ? (
+              <>
+                {heroBackgroundImageFrameClassName ? (
+                  <div className={`absolute ${heroBackgroundImageFrameClassName}`}>
+                    <Image
+                      src={heroBackgroundImage}
+                      alt={heroBackgroundAlt}
+                      fill
+                      priority
+                      sizes={heroBackgroundImageSizes}
+                      className={`pointer-events-none ${heroBackgroundImageClassName}`}
+                    />
+                  </div>
+                ) : (
+                  <Image
+                    src={heroBackgroundImage}
+                    alt={heroBackgroundAlt}
+                    fill
+                    priority
+                    sizes={heroBackgroundImageSizes}
+                    className={`pointer-events-none ${heroBackgroundImageClassName}`}
+                  />
+                )}
+                <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(247,246,242,0.99)_0%,rgba(247,246,242,0.94)_42%,rgba(247,246,242,0.58)_74%,rgba(247,246,242,0.22)_100%)] md:bg-[linear-gradient(90deg,rgba(247,246,242,0.98)_0%,rgba(247,246,242,0.88)_34%,rgba(247,246,242,0.36)_62%,rgba(247,246,242,0.16)_100%)]" />
+              </>
+            ) : 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="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">
+                      <Search aria-hidden className="size-4 text-[#D85435]" />
+                      {t("searchIntent")}
+                    </p>
+                    <h1 className="mt-7 text-balance text-5xl font-semibold leading-[0.96] text-[#2B211A] sm:text-6xl lg:text-7xl xl:text-8xl">
+                      {displayTitle}
+                    </h1>
+                    {copy.intro ? (
+                      <p className="mt-7 max-w-2xl text-lg leading-8 text-[#5C4A3E]">
+                        {copy.intro}
+                      </p>
+                    ) : null}
+                    {spec.mcp?.enabled ? (
+                      <div className="mt-6">
+                        <ToolMcpBadge
+                          locale={locale}
+                          label={t("mcpGuide")}
+                          slug={spec.slug}
+                        />
+                      </div>
+                    ) : null}
+                  </div>
+
+                  {heroVisual ? <div>{heroVisual}</div> : null}
+                </div>
+              </div>
+            </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">
+            {children}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="mx-auto max-w-screen-2xl px-5 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">
+                  <p className="inline-flex items-center gap-2 rounded-full border border-[#E8E4DB] bg-white px-4 py-2 text-sm font-semibold text-[#555555] shadow-[0_10px_28px_rgba(17,17,17,0.05)]">
+                    <Search aria-hidden className="size-4 text-[#111111]" />
+                    {t("searchIntent")}
+                  </p>
+                  <h1 className="mt-6 text-balance text-6xl font-semibold leading-none text-[#111111] lg:text-7xl">
+                    {displayTitle}
+                  </h1>
+                  {copy.intro ? (
+                    <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-[#4A4A4A]">
+                      {copy.intro}
+                    </p>
+                  ) : null}
+                  {spec.mcp?.enabled ? (
+                    <div className="mt-6 flex justify-center">
+                      <ToolMcpBadge
+                        locale={locale}
+                        label={t("mcpGuide")}
+                        slug={spec.slug}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+                <div className="mx-auto mt-9 max-w-4xl">{heroVisual}</div>
+              </section>
+            ) : showDefaultHeader ? (
+              <section
+                className={
+                  heroVisual
+                    ? "grid gap-10 pb-14 pt-16 md:pb-20 md:pt-20 lg:grid-cols-[0.9fr_1.1fr] lg:items-end"
+                    : "pb-14 pt-16 md:pb-20 md:pt-20"
+                }
+              >
+                <div className={heroVisual ? "" : "max-w-4xl"}>
+                  <p className="inline-flex items-center gap-2 rounded-full border border-[#E8E4DB] bg-white px-4 py-2 text-sm font-semibold text-[#555555]">
+                    <Search aria-hidden className="size-4 text-[#111111]" />
+                    {t("searchIntent")}
+                  </p>
+                  <h1 className="mt-7 text-balance text-5xl font-semibold leading-[1.04] text-[#111111] md:text-6xl lg:text-7xl">
+                    {displayTitle}
+                  </h1>
+                  {copy.intro ? (
+                    <p className="mt-6 max-w-2xl text-lg leading-8 text-[#4A4A4A]">
+                      {copy.intro}
+                    </p>
+                  ) : null}
+                  {spec.mcp?.enabled ? (
+                    <div className="mt-6">
+                      <ToolMcpBadge
+                        locale={locale}
+                        label={t("mcpGuide")}
+                        slug={spec.slug}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+
+                {heroVisual ? <div>{heroVisual}</div> : null}
+              </section>
+            ) : null}
+
+            <div className="flex flex-col gap-16 pb-20 md:gap-20 md:pb-28">{children}</div>
+          </div>
+        </>
+      )}
+      {relatedToolSlugs?.length ? (
+        <div className="mx-auto w-full max-w-screen-2xl px-5 pb-16 sm:px-8 md:pb-20">
+          <RelatedTools locale={locale} currentToolSlug={spec.slug} slugs={relatedToolSlugs} />
+        </div>
+      ) : null}
+      </main>
+      <SiteFooter locale={locale} />
+    </div>
+  );
+}

package/src/features/tools/shared/tool-standard-generation-steps.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@tomako/ui/accordion";
+
+import type { ToolStandardGenerationStep } from "./tool-standard-landing-sections";
+
+export function ToolStandardGenerationSteps({
+  steps,
+}: {
+  steps: readonly ToolStandardGenerationStep[];
+}) {
+  return (
+    <Accordion
+      className="mt-8 grid gap-4"
+      collapsible
+      defaultValue="step-0"
+      type="single"
+    >
+      {steps.map((step, index) => {
+        return (
+          <AccordionItem
+            key={step.title}
+            className="group relative border-b-0 pl-6"
+            value={`step-${index}`}
+          >
+            <span
+              aria-hidden
+              className="absolute bottom-0 left-0 top-0 w-1 rounded-full bg-[#394C60]/15 transition-colors group-data-[state=open]:bg-[#1E1E1E]"
+            />
+            <AccordionTrigger
+              className="w-full cursor-pointer rounded-sm py-0 text-xl font-semibold leading-6 text-[#0D1216] hover:no-underline focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-4 [&>svg]:mt-1 [&>svg]:text-[#0D1216]"
+            >
+              {step.title}
+            </AccordionTrigger>
+            {step.body ? (
+              <AccordionContent
+                className="max-w-xl pb-0 pt-3 text-pretty text-base leading-[26px] text-[#0D1216]"
+              >
+                {step.body}
+              </AccordionContent>
+            ) : null}
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}