@tomako/tools-runtime 0.1.0

package/src/host/server.ts

@@ -0,0 +1,119 @@
+import { createElement, type ComponentType, type ReactNode } from "react";
+
+import type { ToolStatus } from "../features/tools/types";
+import type { AppLocale } from "../i18n/locale";
+
+export type ToolOpsRecord = {
+  slug: string;
+  status: ToolStatus;
+  showOnIndex: boolean;
+  indexSort: number;
+  featured: boolean;
+  categoryZh: string | null;
+  categoryEn: string | null;
+  publishedAt: string | null;
+  updatedAt: string;
+  publishedBy: string | null;
+  notes: string | null;
+};
+
+export type SiteNavigationCopy = {
+  languageLabel: string;
+  productCapabilities: Array<{ label: string; icon: string }>;
+  nav: {
+    tools: string;
+    viewAllTools: string;
+    skills: string;
+    pricing: string;
+    blog: string;
+  };
+};
+
+type RelatedToolItem = { slug: string; title: string; description: string };
+
+export type ToolsRuntimeHostServer = {
+  SiteFooter: (props: {
+    locale: AppLocale;
+    className?: string;
+    showWordmark?: boolean;
+  }) => ReactNode | Promise<ReactNode>;
+  SiteNavigation: ComponentType<any>;
+  RelatedTools: (props: {
+    locale: AppLocale;
+    slugs?: readonly string[];
+    currentToolSlug?: string;
+  }) => ReactNode | Promise<ReactNode>;
+  getAuthClientMessages: (locale: AppLocale) => Promise<Record<string, unknown>>;
+  getFullMessages: (locale: AppLocale) => Promise<Record<string, unknown>>;
+  siteConfig: { name: string; url: string };
+  listToolItems: (locale: string) => Promise<RelatedToolItem[]>;
+  fetchToolOpsCatalogFromPortal: () => Promise<ToolOpsRecord[]>;
+};
+
+let host: ToolsRuntimeHostServer | null = null;
+
+export function registerToolsRuntimeHostServer(next: ToolsRuntimeHostServer) {
+  host = next;
+}
+
+function getHost(): ToolsRuntimeHostServer {
+  if (!host) {
+    throw new Error("registerToolsRuntimeHostServer() was not called");
+  }
+  return host;
+}
+
+export async function SiteFooter(props: {
+  locale: AppLocale;
+  className?: string;
+  showWordmark?: boolean;
+}) {
+  return getHost().SiteFooter(props);
+}
+
+export function SiteNavigation(props: {
+  locale: AppLocale;
+  copy: SiteNavigationCopy;
+  authMessages?: Record<string, unknown>;
+  className?: string;
+  surface?: string;
+  solidBackground?: string;
+  logoHref?: string;
+}) {
+  return createElement(
+    getHost().SiteNavigation as ComponentType<typeof props>,
+    props,
+  );
+}
+
+export async function RelatedTools(props: {
+  locale: AppLocale;
+  slugs?: readonly string[];
+  currentToolSlug?: string;
+}) {
+  return getHost().RelatedTools(props);
+}
+
+export function getAuthClientMessages(locale: AppLocale) {
+  return getHost().getAuthClientMessages(locale);
+}
+
+export function getFullMessages(locale: AppLocale) {
+  return getHost().getFullMessages(locale);
+}
+
+export const siteConfig = new Proxy({} as ToolsRuntimeHostServer["siteConfig"], {
+  get(_t, prop) {
+    return Reflect.get(getHost().siteConfig, prop);
+  },
+});
+
+export function listToolItems(locale: string) {
+  return getHost().listToolItems(locale);
+}
+
+export function fetchToolOpsCatalogFromPortal() {
+  return getHost().fetchToolOpsCatalogFromPortal();
+}
+
+export const fetchToolOpsCatalog = fetchToolOpsCatalogFromPortal;

package/src/i18n/client.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import { useLocale as useNextIntlLocale, useTranslations } from "next-intl";
+
+import type { AppLocale } from "./locale";
+
+export { useTranslations };
+
+export function useLocale(): AppLocale {
+  return useNextIntlLocale() as AppLocale;
+}

package/src/i18n/locale-fallback.ts

@@ -0,0 +1,38 @@
+import { APP_LOCALES, localeDetails, type AppLocale } from "./locale";
+
+/** 双语内容键（ToolSpec、messages 目录等），与路由 locale 解耦 */
+export type PrimaryLocale = "zh" | "en";
+
+const ZH_ROUTE_LOCALES = new Set<AppLocale>(["zh", "zh-tw"]);
+
+/** 路由 locale 是否为中文（简/繁） */
+export function isZhRouteLocale(locale: AppLocale): boolean {
+  return ZH_ROUTE_LOCALES.has(locale);
+}
+
+/** zh / zh-tw → zh，其余 → en（与 request.ts 未完成语种回退一致） */
+export function resolvePrimaryLocale(locale: AppLocale): PrimaryLocale {
+  return isZhRouteLocale(locale) ? "zh" : "en";
+}
+
+/** 路由 locale 可选覆盖；zh / en 为必填回退键 */
+export type PartialLocaleRecord<T> = Partial<Record<AppLocale, T>> & Record<PrimaryLocale, T>;
+
+export function pickLocaleCopy<R extends { zh: unknown; en: unknown }>(
+  record: R,
+  locale: AppLocale,
+): R["zh"] | R["en"] {
+  const localized = record[locale as keyof R];
+  if (localized != null) {
+    return localized as R["zh"] | R["en"];
+  }
+  return record[resolvePrimaryLocale(locale)];
+}
+
+/** BCP 47 标签，供 Intl / 结构化数据；en 用 en-US 以匹配 OG 区域变体 */
+export const bcp47ByLocale: Record<AppLocale, string> = Object.fromEntries(
+  APP_LOCALES.map((locale) => [
+    locale,
+    locale === "en" ? "en-US" : localeDetails[locale].htmlLang,
+  ]),
+) as Record<AppLocale, string>;

package/src/i18n/locale.ts

@@ -0,0 +1,18 @@
+export const APP_LOCALES = ["zh", "zh-tw", "en"] as const;
+export type AppLocale = (typeof APP_LOCALES)[number];
+export const DEFAULT_LOCALE: AppLocale = "en";
+
+export const routing = {
+  locales: APP_LOCALES,
+  defaultLocale: DEFAULT_LOCALE,
+  localePrefix: "as-needed" as const,
+};
+
+export const localeDetails: Record<
+  AppLocale,
+  { htmlLang: string; openGraphLocale: string }
+> = {
+  zh: { htmlLang: "zh-CN", openGraphLocale: "zh_CN" },
+  "zh-tw": { htmlLang: "zh-TW", openGraphLocale: "zh_TW" },
+  en: { htmlLang: "en-US", openGraphLocale: "en_US" },
+};

package/src/i18n/messages/en/page/tools.ts

@@ -0,0 +1,124 @@
+const tools = {
+  meta: {
+    title: "Free Online Tools for Product, Marketing, and Content",
+    description:
+      "Free online tools for naming products, researching markets, creating App Store visuals, and preparing social content.",
+  },
+  eyebrow: "All tools",
+  title: "Free tools for product, marketing, and content",
+  heroTitle: "Run the GTM work before launch with tools that produce answers",
+  description:
+    "Name your product, research your market, create App Store visuals, and prepare social content—all in one place.",
+  toolsCount: "{count} tools available to use for free",
+  filters: {
+    all: "All tools",
+    build: "Build & launch",
+    research: "Research & plan",
+    promote: "Promote & create",
+    utilities: "Utilities",
+    fun: "Just for fun",
+    other: "Other tools",
+  },
+  primaryCta: "View featured tool",
+  secondaryCta: "Browse all tools",
+  navLabel: "Tools",
+  navAll: "All tools",
+  navFeatured: "Featured",
+  navCategories: "Categories",
+  featuredLabel: "Featured tool",
+  featuredHint: "From inputs to usable output",
+  openTool: "Use tool",
+  allIntro: "Pick the tool that matches the job: name it, check readiness, then close gaps in store visuals and social assets.",
+  all: "All tools",
+  stats: {
+    tools: "Available tools",
+    categories: "Tool categories",
+    updated: "Latest update",
+  },
+  updated: "Updated",
+  readingTime: "Reading time",
+  types: {
+    calculator: "Calculator",
+    downloader: "Downloader",
+    generator: "Generator",
+    analyzer: "Analyzer",
+    tester: "Tester",
+  },
+  workflowEyebrow: "From task to next step",
+  workflowTitle: "Each tool connects inputs, output, and what to do next",
+  workflowDescription:
+    "Confirm the job in front of you, then use a workbench that returns something you can copy, download, review, or carry into the next launch step.",
+  workflowSteps: [
+    {
+      title: "Confirm the current job",
+      body: "Each tool explains when to use it, what to enter, and when the task is outside its supported range.",
+    },
+    {
+      title: "Enter the workbench fast",
+      body: "Inputs, action buttons, and result states sit at the center so you can get useful output quickly.",
+    },
+    {
+      title: "Carry the result forward",
+      body: "Naming, readiness checks, store visuals, and social assets can become one pre-launch preparation path.",
+    },
+  ],
+  chooserTitle: "Not sure which tool to open first?",
+  chooserIntro:
+    "Choose by the blocker in front of you, not by a feature name. Each tool explains what to enter, what you get back, and how to use the result next.",
+  chooserItems: [
+    {
+      title: "You have not settled on a product name",
+      body: "Start with the product name generator to turn your idea, audience, and domain preference into comparable name candidates.",
+    },
+    {
+      title: "You are about to promote the product",
+      body: "Use the GTM readiness checklist to inspect positioning, channels, assets, and metrics before launch gaps become public.",
+    },
+    {
+      title: "You need app store visuals",
+      body: "Upload a product URL or UI screenshot to draft App Store or Google Play listing images before final design polish.",
+    },
+    {
+      title: "You need to save social media motion",
+      body: "Paste a public X/Twitter link to convert embedded animated media into a GIF or keep the MP4 source file.",
+    },
+  ],
+  standardsEyebrow: "Why choose Tomako",
+  standardsTitle: "Good tools do not stack templates; they turn the current job into usable output",
+  standardsIntro:
+    "Tomako tool pages explain who the tool is for, what to enter, what you get back, and how to use the result next. That keeps you from bouncing between articles, scripts, plugins, and one-off templates.",
+  standardItems: [
+    {
+      title: "Clear input boundaries",
+      body: "Each tool explains the supported links, text, screenshots, or product details, plus the cases where the tool is not the right fit.",
+    },
+    {
+      title: "Results you can carry forward",
+      body: "Outputs are shaped to be copied, downloaded, previewed, or reviewed instead of ending as generic advice.",
+    },
+    {
+      title: "Failures and risks stay visible",
+      body: "Download, conversion, generation, and analysis tasks call out likely failure reasons, platform limits, rights/privacy boundaries, or review needs.",
+    },
+  ],
+  faqTitle: "Questions before using the free GTM tools",
+  faqItems: [
+    {
+      question: "What stage are these tools for?",
+      answer:
+        "They are most useful when a product is moving from idea to launch: naming, readiness checks, store assets, social media material, and growth prep. Each page solves one concrete task instead of acting as a generic marketing template.",
+    },
+    {
+      question: "Do I need to sign in or pay?",
+      answer:
+        "The public tool pages can be opened directly. Some generation or analysis tools may take a moment to return results; download, conversion, and checklist tools keep the flow as immediate as possible.",
+    },
+    {
+      question: "Can I publish the results as-is?",
+      answer:
+        "Use the results as launch drafts, checklists, or asset starting points. For brand, compliance, app store review, or third-party platform content, review the output against your product facts and platform rules before publishing.",
+    },
+  ],
+} as const;
+
+export default tools;

package/src/i18n/messages/en/tools/app-icon-resizer.ts

@@ -0,0 +1,244 @@
+const appIconResizer = {
+  meta: {
+    title: "App Icon Resizer for iOS & Android",
+    description:
+      "Resize one app icon into iOS AppIcon.appiconset, App Store 1024, Google Play 512, and Android launcher PNGs—then download a ZIP locally.",
+    intro:
+      "Prepare app submission and engineering icon assets. Upload a 1024px+ square source icon, choose Apple, Google Play, or both, and keep processing local in your browser.",
+    category: "App submission tools",
+    keywords: [
+      "app icon resizer",
+      "App Store icon",
+      "Google Play icon",
+      "iOS AppIcon",
+      "Android mipmap",
+    ],
+    inputSignal: "PNG, JPG, or WebP source icon",
+    outputSignal: "AppIcon.appiconset, App Store 1024, Google Play 512, Android mipmap, README, ZIP",
+    boundarySignal:
+      "Local browser processing; no adaptive icon output; review latest platform rules and brand rights",
+  },
+  guide: {
+    heroVisualAlt:
+      "App icon asset package visual showing one source icon exported into store submission, Xcode, and Android launcher files.",
+    workspaceHeading: "App icon resizer",
+    workspaceHint:
+      "Upload one source icon and generate store plus brand icon ZIPs locally.",
+    workspaceBadge: "PNG + ZIP",
+    standard: {
+      benefits: {
+        title: "What the App Icon Resizer gives you",
+        cards: [
+          {
+            title: "One source for every target",
+            body: "Generate Xcode AppIcon, App Store 1024, Google Play 512, and Android mipmap assets in one pass.",
+          },
+          {
+            title: "Organized sizes and folders",
+            body: "Group, name, and package files by Apple, Google Play, or both so design and engineering get the right assets.",
+          },
+          {
+            title: "Local generation with review",
+            body: "Keep the source in your browser, inspect crops, edges, transparency, and file-size risks, then download PNGs or a ZIP.",
+          },
+        ],
+      },
+      imageTextSections: [
+        {
+          id: "icon-package",
+          title: "Turn one source icon\ninto a complete package",
+          body: [
+            "App icon resizing usually fails when sizes, folders, and filenames get mixed. This tool groups iOS AppIcon.appiconset, App Store 1024, Google Play 512, and Android mipmap outputs into clear folders.",
+            "Your source icon is read locally in the browser. After generation, download the full ZIP or filter by platform and inspect individual PNG files.",
+          ],
+          image: {
+            src: "/tools/app-icon-resizer-section-primary-8bit-v3.webp",
+            alt: "8bit scene showing one app icon source turning into platform icon asset packages.",
+          },
+          imageFirst: true,
+        },
+        {
+          id: "platform-scope",
+          title: "Choose platform scope\nwithout mixing file roles",
+          body: [
+            "Apple, Google Play, and Android brand resources are not the same file. Apple assets belong in Xcode, Google Play needs a 512 x 512 listing icon, and Android launcher assets are grouped by density.",
+            "Once you choose a package scope, the result panel can filter by platform so design, engineering, and ASO teammates can take the right files.",
+          ],
+          image: {
+            src: "/tools/app-icon-resizer-section-variation-8bit-v3.webp",
+            alt: "8bit scene showing neutral package choices for app icon platform outputs.",
+          },
+        },
+        {
+          id: "handoff-review",
+          title: "Preview before download\nto avoid release-week fixes",
+          body: [
+            "The result grid previews each PNG on a transparency checkerboard, so transparent pixels are not mistaken for a gray background. Non-square sources are center-cropped, and undersized sources are blocked.",
+            "The downloaded README explains where each folder is used and reminds you to review corners, shadows, adaptive icons, copyright, and the latest platform rules.",
+          ],
+          image: {
+            src: "/tools/app-icon-resizer-section-support-8bit-v3.webp",
+            alt: "8bit scene showing app icon preview review and ZIP download handoff.",
+          },
+          imageFirst: true,
+        },
+      ],
+      generation: {
+        title: "App icon\nresizing workflow",
+        imageAlt: "8bit workflow scene showing upload, package scope, resize preview, and ZIP export.",
+        ctaLabel: "Generate icon package",
+        steps: [
+          {
+            title: "Upload one source icon",
+            body: "Export square full-bleed artwork from the design source when possible. Apple or dual-platform packages need at least 1024px on the shortest side.",
+          },
+          {
+            title: "Choose the platform scope",
+            body: "Pick Apple, Google Play, or both. The tool maps that choice to the right size list and folder structure.",
+          },
+          {
+            title: "Generate PNGs and README",
+            body: "The browser resizes, crops, preserves transparency, and writes the README locally without uploading your source file.",
+          },
+          {
+            title: "Review and download the ZIP",
+            body: "Filter the result grid, check transparency and file-size warnings, then download the full ZIP or a single PNG.",
+          },
+        ],
+      },
+      faqIntro:
+        "These answers help you decide whether your source icon is ready, how the files should be used, and which platform rules still need manual review.",
+      faqCtaLabel: "Review boundaries",
+    },
+    whatYouGetHeading: "What you get after generation",
+    valueVisualAlt: "Organized app icon package with Xcode assets, store upload icons, Android brand folders, and a downloadable zip.",
+    whatYouGetItems: [
+      {
+        title: "Xcode AppIcon.appiconset",
+        body: "Generate common iPhone, iPad, and ios-marketing slots with Contents.json so the folder can be dropped into an Xcode asset catalog.",
+      },
+      {
+        title: "App Store 1024 PNG",
+        body: "Export a standalone 1024 x 1024 PNG so the team can review subject placement, padding, edges, and brand consistency before release.",
+      },
+      {
+        title: "Google Play 512 icon",
+        body: "Create the 512 x 512 Play Console store listing icon and surface a warning if the generated PNG is over 1024KB.",
+      },
+      {
+        title: "Android launcher mipmap",
+        body: "Export mdpi through xxxhdpi legacy launcher PNGs for Android brand resources or design handoff folders.",
+      },
+      {
+        title: "ZIP plus single PNG downloads",
+        body: "Download the full ZIP, or filter Apple and Google Play results and download a specific PNG size from the result grid.",
+      },
+    ],
+    standardsHeading: "Platform boundaries to know before upload",
+    supportVisualAlt: "App icon size support visual showing Apple, Google Play, and Android launcher file groups.",
+    standardsBody: [
+      "Apple does not expect you to upload every app icon size one by one in App Store Connect. The official path is to prepare the app icon in an Xcode asset catalog, then upload the build to App Store Connect.",
+      "This tool generates Apple/AppIcon.appiconset plus Apple/AppStoreIcon-1024.png. Use the appiconset for implementation, and use the standalone 1024 PNG for release review and handoff.",
+      "Google Play Console store listing icons are 512 x 512, 32-bit PNG, sRGB, max 1024KB, and should follow Google Play icon design specs. This tool creates GooglePlay/app-icon-512.png and warns on file size risk.",
+      "Android launcher mipmap files are brand resources, not the same thing as the Google Play listing icon. This version exports legacy launcher PNGs, not adaptive icon foreground/background XML pairs.",
+      "Do not pre-round the icon or add an outer shadow. Apple, Google Play, and Android launchers apply platform masks, corner treatment, or shadows where needed, and pre-processing can cause double clipping.",
+      "The safest source is a square full-bleed icon at 1024 x 1024 or larger. Non-square files are center-cropped; transparency is preserved, but final submissions should be reviewed on multiple backgrounds.",
+    ],
+    comparisonHeading: "What makes a good app icon resizer",
+    comparisonItems: [
+      {
+        standard: "Accurate sizes",
+        manual: "Manual export lists can miss Xcode slots or mix up the Google Play listing icon with Android launcher resources.",
+        tomako: "Apple, Google Play, and Android outputs are grouped into fixed folders, and the result grid can be filtered by platform.",
+      },
+      {
+        standard: "Easy handoff",
+        manual: "Creating artboards, exporting, and renaming files by hand often leads to repeated release-week fixes.",
+        tomako: "One upload creates the ZIP, individual PNG downloads, and README notes for design, engineering, and ASO handoff.",
+      },
+      {
+        standard: "Reviewable quality",
+        manual: "Small sources may be upscaled silently, and stretched or off-center artwork may only show up later in stores or device previews.",
+        tomako: "The tool blocks undersized sources, center-crops non-square files without stretching, and previews every PNG on a transparency grid.",
+      },
+      {
+        standard: "Clear boundaries",
+        manual: "Many tools only say “App Store sizes” without explaining the difference between Apple, Google Play, and Android brand assets.",
+        tomako: "The page and ZIP notes identify where each file is used, and call out adaptive icons, corners, copyright, and latest platform-rule checks.",
+      },
+      {
+        standard: "Local processing",
+        manual: "Online batch resizers may upload unreleased brand assets, which is hard to review for confidential launches.",
+        tomako: "This version reads, resizes, and packages the source app icon locally in the browser instead of uploading it to a server.",
+      },
+    ],
+    resultGuidanceHeading: "How to use the downloaded icon files",
+    workflowVisualAlt: "App icon result workflow visual showing ZIP download, Xcode asset catalog, and store console upload.",
+    resultGuidanceBody: [
+      "iOS brands: import or replace Apple/AppIcon.appiconset in the Xcode asset catalog, then upload the build to App Store Connect.",
+      "App Store review: use Apple/AppStoreIcon-1024.png to check subject placement, padding, background, edges, and recognition at smaller sizes.",
+      "Google Play: upload GooglePlay/app-icon-512.png to the Play Console store listing App icon field, and confirm the file stays within the platform size limit.",
+      "Android brands: hand off Android/res/mipmap-*/ic_launcher.png as legacy launcher resources. If the app needs adaptive icons, configure those separately in the Android brand.",
+      "If the icon looks too small, off-center, or clipped, adjust the source canvas and padding in the design file, then regenerate the package.",
+      "Before final submission, review the latest platform rules, trademark and copyright rights, transparency, light/dark background contrast, and brand guidelines.",
+    ],
+    useCasesHeading: "Use cases",
+    useCaseItems: [
+      "Indie developers preparing app icon packages before App Store Connect and Google Play Console submission.",
+      "Designers handing one final app icon to iOS, Android, ASO, or agency teammates without chasing missing sizes.",
+      "Growth teams testing new icon directions and quickly producing reviewable, upload-ready candidates.",
+      "Product teams checking that brand icons, store icons, and listing screenshots use the same visual version.",
+      "Remote or outsourced teams using fixed folders and filenames to reduce implementation friction.",
+      "Early-stage products resizing confidential brand assets locally without uploading the source icon.",
+    ],
+    faqHeading: "FAQ",
+    faqItems: [
+      {
+        question: "Are uploaded app icons stored on a server?",
+        answer:
+          "No. This tool reads the image, renders canvas outputs, and builds the PNG ZIP locally in the browser. Refreshing the page clears the file state, and the source icon is not uploaded to a server.",
+      },
+      {
+        question: "Can I upload the generated files directly to App Store and Google Play?",
+        answer:
+          "GooglePlay/app-icon-512.png targets the Play Console App icon upload requirement. For Apple, the more accurate path is to place AppIcon.appiconset in Xcode and submit it with your build to App Store Connect.",
+      },
+      {
+        question: "What size and format should the source icon be?",
+        answer:
+          "Use a 1024 x 1024 or larger square PNG when possible. JPG and WebP are supported, but final handoff is safest when you export full-bleed square artwork from the design source.",
+      },
+      {
+        question: "Why does the tool not add rounded corners or shadows?",
+        answer:
+          "Stores and operating systems apply their own masks, corners, or shadows. Pre-rounding the artwork can cause double clipping, uneven edges, or platform rejection.",
+      },
+      {
+        question: "What if my source image is not square?",
+        answer:
+          "The tool center-crops it to a square without stretching. For final delivery, export square full-bleed artwork from the design source to avoid shifted subjects or clipped edges.",
+      },
+      {
+        question: "How are transparent icons handled?",
+        answer:
+          "Transparency is preserved, and the result preview uses a transparency grid. Before final submission, review the icon on light, dark, and platform-masked backgrounds.",
+      },
+      {
+        question: "Does this generate Android adaptive icons?",
+        answer:
+          "No. It exports Google Play 512 and legacy launcher mipmap PNGs, but it does not generate adaptive icon foreground/background XML pairs.",
+      },
+      {
+        question: "What happens if the image is too small?",
+        answer:
+          "Apple or dual-platform packages require 1024px or larger on the shortest side. Google Play / Android packages require at least 512px. The tool also warns when the Google Play 512 PNG exceeds 1024KB.",
+      },
+    ],
+    ctaPrimary: "Create store screenshots",
+    ctaSecondary: "Back to all tools",
+    ctaHint:
+      "After icon assets are ready, the next step is usually App Store and Google Play listing screenshots with the same visual language.",
+  },
+} as const;
+
+export default appIconResizer;