Split discovery into practical tool hubs

scripts/generators/generate-client-tool-lookup.js

@@ -12,7 +12,7 @@ const OUTPUT_PATH = path.join(ROOT, "src/generated/client-tool-lookup.ts")
 const TOOL_INDEX_PATH = path.join(ROOT, "src/generated/tool-index.json")
 
 const MENU_GROUP_DEF_RE = /{ key: "([^"]+)", navKey: "([^"]+)", slug: "([^"]+)", descriptionKey: "([^"]+)" }/g
-const KEY_VALUE_RE = /^\s*([a-z0-9_]+):\s*"([^"]+)",?\s*$/gm
+const FAMILY_GROUP_RE = /^\s*"([^"]+)":\s*"([^"]+)",?\s*$/gm
 const FAMILY_BY_TOOL_KEY = {
     ai_color_palette_generator: "images-media",
     asn1_der_inspector: "security-tokens",
@@ -27,6 +27,18 @@ const FAMILY_BY_TOOL_KEY = {
     color_shades_generator: "svg-css-visual",
     cron_visualizer: "devops-logs",
     crontab_generator: "devops-logs",
+    css_background_pattern_generator: "svg-css-visual",
+    css_border_radius_generator: "svg-css-visual",
+    css_box_shadow_generator: "svg-css-visual",
+    css_checkbox_generator: "svg-css-visual",
+    css_clip_path_generator: "svg-css-visual",
+    css_cubic_bezier_generator: "svg-css-visual",
+    css_glassmorphism_generator: "svg-css-visual",
+    css_gradient_generator: "svg-css-visual",
+    css_loader_generator: "svg-css-visual",
+    css_switch_generator: "svg-css-visual",
+    css_text_glitch_effect_generator: "svg-css-visual",
+    css_triangle_generator: "svg-css-visual",
     csp_parser: "security-tokens",
     csv_diff: "data-formats",
     csv_json_converter: "data-formats",
@@ -144,25 +156,27 @@ function parseMenuGroups() {
         slug: match[3],
     }))
 
-    const overridesBlock = source.match(/const OVERRIDE_GROUP_BY_TOOL_KEY: Record<string, MenuGroupKey> = {([\s\S]*?)}/)
-    if (!overridesBlock) {
-        throw new Error("Unable to parse OVERRIDE_GROUP_BY_TOOL_KEY from src/core/registry/menu-groups.ts")
+    const familyBlock = source.match(/const PRIMARY_GROUP_BY_FAMILY:[\s\S]*?=\s*{([\s\S]*?)}/)
+    if (!familyBlock) {
+        throw new Error("Unable to parse PRIMARY_GROUP_BY_FAMILY from src/core/registry/menu-groups.ts")
     }
 
-    const overrides = Object.fromEntries(
-        [...overridesBlock[1].matchAll(KEY_VALUE_RE)].map((match) => [match[1], match[2]]),
+    const primaryGroupByFamily = Object.fromEntries(
+        [...familyBlock[1].matchAll(FAMILY_GROUP_RE)].map((match) => [match[1], match[2]]),
     )
 
-    return { defs, overrides }
+    return { defs, primaryGroupByFamily }
 }
 
-function classifyToolToMenuGroup(tool, overrides) {
-    const overridden = overrides[tool.key]
-    if (overridden) return overridden
-    if (tool.category === "network-web") return "web_api"
-    if (tool.category === "formatters") return "format_validate"
-    if (tool.category === "generators") return "generators_ids"
-    return "text_content"
+function classifyToolToMenuGroup(tool, primaryGroupByFamily) {
+    const taxonomy = getToolTaxonomy(tool)
+    const familyGroup = primaryGroupByFamily[taxonomy.family]
+    if (familyGroup) return familyGroup
+
+    if (tool.category === "network-web") return "web_api_network"
+    if (tool.category === "formatters") return "data_code_formats"
+    if (tool.category === "generators") return "generators_calculators"
+    return "text_regex"
 }
 
 function fallbackFamily(tool) {
@@ -263,13 +277,13 @@ function buildClientLookupSource() {
     )
 
     const bySlug = Object.fromEntries(orderedTools.map((tool) => [tool.slug, tool.key]))
-    const { defs, overrides } = parseMenuGroups()
+    const { defs, primaryGroupByFamily } = parseMenuGroups()
     const menuGroups = defs.map((group) => ({
         key: group.key,
         navKey: group.navKey,
         hubSlug: group.slug,
         items: orderedTools
-            .filter((tool) => classifyToolToMenuGroup(tool, overrides) === group.key)
+            .filter((tool) => classifyToolToMenuGroup(tool, primaryGroupByFamily) === group.key)
             .map((tool) => ({ key: tool.key, slug: tool.slug })),
     }))
 

scripts/lib/ia-stability-lib.js

@@ -23,8 +23,11 @@ function stableSort(values) {
 
 function extractMenuGroupHubs() {
     const source = fs.readFileSync(MENU_GROUPS_PATH, "utf8")
-    const matches = [...source.matchAll(/slug:\s*"([^"]+)"/g)].map((m) => m[1])
-    return unique(matches).slice(0, 6)
+    const defsBlock = source.match(/export const MENU_GROUP_DEFS:[\s\S]*?=\s*\[([\s\S]*?)\]/)
+    if (!defsBlock) return []
+
+    const matches = [...defsBlock[1].matchAll(/slug:\s*"([^"]+)"/g)].map((m) => m[1])
+    return unique(matches)
 }
 
 function extractToolCategoryHubs() {

src/app/[lang]/data-code-formats/layout.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { buildHubMetadata } from "@/core/seo/seo"
+
+const SLUG = "data-code-formats"
+
+export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+    const t = getTranslation(lang)
+
+    return buildHubMetadata({
+        lang,
+        slug: SLUG,
+        title: t.nav.data_code_formats,
+        description: t.categories.data_code_formats_desc,
+    })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return children
+}

src/app/[lang]/data-code-formats/page.tsx

@@ -0,0 +1,12 @@
+import { MenuGroupHub } from "@/core/seo/components/menu-group-hub"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { notFound } from "next/navigation"
+
+export default async function DataCodeFormatsPage({ params }: { params: Promise<{ lang: string }> }) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+
+    return <MenuGroupHub lang={lang} groupKey="data_code_formats" />
+}

src/app/[lang]/devops-logs/layout.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { buildHubMetadata } from "@/core/seo/seo"
+
+const SLUG = "devops-logs"
+
+export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+    const t = getTranslation(lang)
+
+    return buildHubMetadata({
+        lang,
+        slug: SLUG,
+        title: t.nav.devops_logs,
+        description: t.categories.devops_logs_desc,
+    })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return children
+}

src/app/[lang]/devops-logs/page.tsx

@@ -0,0 +1,12 @@
+import { MenuGroupHub } from "@/core/seo/components/menu-group-hub"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { notFound } from "next/navigation"
+
+export default async function DevopsLogsPage({ params }: { params: Promise<{ lang: string }> }) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+
+    return <MenuGroupHub lang={lang} groupKey="devops_logs" />
+}

src/app/[lang]/encoding-crypto/layout.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { buildHubMetadata } from "@/core/seo/seo"
+
+const SLUG = "encoding-crypto"
+
+export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+    const t = getTranslation(lang)
+
+    return buildHubMetadata({
+        lang,
+        slug: SLUG,
+        title: t.nav.encoding_crypto,
+        description: t.categories.encoding_crypto_desc,
+    })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return children
+}

src/app/[lang]/encoding-crypto/page.tsx

@@ -0,0 +1,12 @@
+import { MenuGroupHub } from "@/core/seo/components/menu-group-hub"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { notFound } from "next/navigation"
+
+export default async function EncodingCryptoPage({ params }: { params: Promise<{ lang: string }> }) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+
+    return <MenuGroupHub lang={lang} groupKey="encoding_crypto" />
+}

src/app/[lang]/generators-calculators/layout.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { buildHubMetadata } from "@/core/seo/seo"
+
+const SLUG = "generators-calculators"
+
+export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+    const t = getTranslation(lang)
+
+    return buildHubMetadata({
+        lang,
+        slug: SLUG,
+        title: t.nav.generators_calculators,
+        description: t.categories.generators_calculators_desc,
+    })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return children
+}

src/app/[lang]/generators-calculators/page.tsx

@@ -0,0 +1,12 @@
+import { MenuGroupHub } from "@/core/seo/components/menu-group-hub"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { notFound } from "next/navigation"
+
+export default async function GeneratorsCalculatorsPage({ params }: { params: Promise<{ lang: string }> }) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+
+    return <MenuGroupHub lang={lang} groupKey="generators_calculators" />
+}

src/app/[lang]/images-svg-css/layout.tsx

@@ -0,0 +1,26 @@
+import { notFound } from "next/navigation"
+import type { Metadata } from "next"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { getTranslation } from "@/core/i18n/translations/catalog"
+import { buildHubMetadata } from "@/core/seo/seo"
+
+const SLUG = "images-svg-css"
+
+export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+    const t = getTranslation(lang)
+
+    return buildHubMetadata({
+        lang,
+        slug: SLUG,
+        title: t.nav.images_svg_css,
+        description: t.categories.images_svg_css_desc,
+    })
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return children
+}

src/app/[lang]/images-svg-css/page.tsx

@@ -0,0 +1,12 @@
+import { MenuGroupHub } from "@/core/seo/components/menu-group-hub"
+import { isValidLocale } from "@/core/i18n/i18n"
+import { notFound } from "next/navigation"
+
+export default async function ImagesSvgCssPage({ params }: { params: Promise<{ lang: string }> }) {
+    const { lang } = await params
+    if (!isValidLocale(lang)) {
+        notFound()
+    }
+
+    return <MenuGroupHub lang={lang} groupKey="images_svg_css" />
+}

src/app/[lang]/page.tsx

@@ -4,19 +4,21 @@ import {
   ShieldCheck,
   Zap,
   Compass,
-  Puzzle,
-  Braces,
-  Languages,
-  FileText,
-  Globe2,
-  KeyRound,
-  Palette,
-} from "lucide-react"
+  Puzzle,
+  Braces,
+  KeyRound,
+  Palette,
+  Network,
+  TerminalSquare,
+  Regex,
+  Calculator,
+  Share2,
+} from "lucide-react"
 import { notFound } from "next/navigation"
 import { LOCALES, isValidLocale, requireTranslationValue } from "@/core/i18n/i18n"
 import { SearchButton } from "./search-button"
 import { getTranslation } from "@/core/i18n/translations/catalog"
-import { getMenuGroups } from "@/core/registry/menu-groups"
+import { MENU_GROUP_DEFS, getMenuGroups } from "@/core/registry/menu-groups"
 import { PopularToolsSection } from "@/features/home/components/popular-tools-section"
 import { HomeCategoryPreview } from "@/features/home/components/home-category-preview"
 import { ALL_TOOLS_SECTION_ID } from "@/core/routing/all-tools-route"
@@ -66,14 +68,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
   const commonLabels = t.common
   const installAppLinkLabel = requireTranslationValue(commonLabels.install_as_app, "common.install_as_app")
 
-  const categoryLinks = [
-    { key: "format_validate", slug: "format-validate" },
-    { key: "convert_encode", slug: "convert-encode" },
-    { key: "text_content", slug: "text-content" },
-    { key: "web_api", slug: "web-api" },
-    { key: "generators_ids", slug: "generators-ids" },
-    { key: "design_media", slug: "design-media" },
-  ] as const
+  const categoryLinks = MENU_GROUP_DEFS
 
   const featureCards: FeatureCard[] = [
     {
@@ -112,29 +107,33 @@ export default async function Home({ params }: { params: Promise<{ lang: string
   const categoryToolCounts = Object.fromEntries(
     menuGroups.map((group) => [group.key, group.items.length])
   ) as Record<string, number>
-  const categoryIcons = {
-    format_validate: Braces,
-    convert_encode: Languages,
-    text_content: FileText,
-    web_api: Globe2,
-    generators_ids: KeyRound,
-    design_media: Palette,
-  } as const
-  const categoryIconClass = {
-    format_validate: "border-cyan-500/30 bg-cyan-500/12 text-cyan-400",
-    convert_encode: "border-blue-500/30 bg-blue-500/12 text-blue-400",
-    text_content: "border-emerald-500/30 bg-emerald-500/12 text-emerald-400",
-    web_api: "border-indigo-500/30 bg-indigo-500/12 text-indigo-400",
-    generators_ids: "border-amber-500/30 bg-amber-500/12 text-amber-400",
-    design_media: "border-pink-500/30 bg-pink-500/12 text-pink-400",
-  } as const
+  const categoryIcons = {
+    data_code_formats: Braces,
+    encoding_crypto: KeyRound,
+    web_api_network: Network,
+    devops_logs: TerminalSquare,
+    text_regex: Regex,
+    images_svg_css: Palette,
+    generators_calculators: Calculator,
+    social_metadata: Share2,
+  } as const
+  const categoryIconClass = {
+    data_code_formats: "border-cyan-500/30 bg-cyan-500/12 text-cyan-400",
+    encoding_crypto: "border-blue-500/30 bg-blue-500/12 text-blue-400",
+    web_api_network: "border-indigo-500/30 bg-indigo-500/12 text-indigo-400",
+    devops_logs: "border-emerald-500/30 bg-emerald-500/12 text-emerald-400",
+    text_regex: "border-violet-500/30 bg-violet-500/12 text-violet-400",
+    images_svg_css: "border-pink-500/30 bg-pink-500/12 text-pink-400",
+    generators_calculators: "border-amber-500/30 bg-amber-500/12 text-amber-400",
+    social_metadata: "border-rose-500/30 bg-rose-500/12 text-rose-400",
+  } as const
   const heroCategoryLinks = categoryLinks.map((item) => ({
     ...item,
     toolCount: categoryToolCounts[item.key] ?? 0,
   }))
   const categoryNavLabels = Object.fromEntries(
-    categoryLinks.map((item) => [item.key, requireTranslationValue(t.nav[item.key], `nav.${item.key}`)])
-  ) as Record<(typeof categoryLinks)[number]["key"], string>
+    categoryLinks.map((item) => [item.key, requireTranslationValue(t.nav[item.key], `nav.${item.key}`)])
+  ) as Record<(typeof MENU_GROUP_DEFS)[number]["key"], string>
   const getLocalizedToolTitle = (toolKey: string) =>
     requireTranslationValue(localizedTools[toolKey]?.title, `tools.${toolKey}.title`)
   const getLocalizedToolDescription = (toolKey: string) =>