@jjlmoya/utils-aquarium 1.61.0 → 1.63.0

package/src/pages/[locale]/[utilities]/[categories]/[category]/[slug]/manifest.json.ts

@@ -0,0 +1,49 @@
+import type { APIRoute } from "astro";
+import { ALL_TOOLS, aquariumCategory } from "../../../../../../index";
+import type { CategoryLocaleContent, ToolLocaleContent } from "../../../../../../types";
+import { LANGUAGE_CODES, type Language } from "../../../../../../i18n/languages";
+import { getCategoryNamespace, getUtilityNamespace, getUtilityPath } from "../../../../../../mfe/routes";
+import { createUtilityManifestResponse, type UtilityManifestInput } from "../../../../../../mfe/manifest";
+
+const loadCategories = async () => Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+    language,
+    await aquariumCategory.i18n[language]!(),
+]))) as Record<Language, CategoryLocaleContent>;
+
+const loadContents = async (entry: (typeof ALL_TOOLS)[number]["entry"]) => Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => {
+    const loader = entry.i18n[language] ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing ${language} locale for ${entry.id}`);
+    return [language, await loader()];
+}))) as Record<Language, ToolLocaleContent>;
+
+const createManifestPath = (locale: Exclude<Language, "es">, category: CategoryLocaleContent, content: ToolLocaleContent, englishContent: ToolLocaleContent) => ({
+    params: {
+        locale,
+        utilities: getUtilityNamespace(locale),
+        categories: getCategoryNamespace(locale),
+        category: category.slug,
+        slug: content.slug,
+    },
+    props: {
+        title: content.title,
+        description: content.description,
+        startUrl: getUtilityPath(locale, category.slug, content.slug),
+        englishSlug: englishContent.slug,
+    },
+});
+
+export async function getStaticPaths() {
+    const categories = await loadCategories();
+    const paths = [];
+    for (const { entry } of ALL_TOOLS) {
+        const contents = await loadContents(entry);
+        for (const locale of LANGUAGE_CODES.filter((candidate) => candidate !== "es")) {
+            const content = contents[locale];
+            const category = categories[locale];
+            paths.push(createManifestPath(locale, category, content, contents.en));
+        }
+    }
+    return paths;
+}
+
+export const GET: APIRoute = ({ props }) => createUtilityManifestResponse(props as unknown as UtilityManifestInput);

package/src/pages/[locale]/[utilities]/[categories]/[category]/[slug].astro

@@ -0,0 +1,100 @@
+---
+import ProductionUtilityPage from "../../../../../layouts/ProductionUtilityPage.astro";
+import { ALL_TOOLS, aquariumCategory } from "../../../../../index";
+import { LANGUAGE_CODES, type Language } from "../../../../../i18n/languages";
+import type { CategoryLocaleContent, ToolLocaleContent } from "../../../../../types";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+import { getCategoryNamespace, getCategoryPath, getUtilityNamespace, getUtilityPath } from "../../../../../mfe/routes";
+import { getUtilityOgImage } from "../../../../../mfe/assets";
+
+type Loader<T> = () => Promise<{ default: T }>;
+type LoadedTool = ToolLocaleContent;
+
+export async function getStaticPaths() {
+    const paths = [];
+    for (const { entry, Component: componentLoader, SEOComponent: seoLoader, BibliographyComponent: bibliographyLoader } of ALL_TOOLS) {
+        const contents = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => {
+            const loader = entry.i18n[language] ?? entry.i18n.en;
+            if (!loader) throw new Error(`Missing ${language} locale for ${entry.id}`);
+            return [language, await loader()];
+        }))) as Record<Language, LoadedTool>;
+        const categories = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+            language,
+            await aquariumCategory.i18n[language]!(),
+        ]))) as Record<Language, CategoryLocaleContent>;
+        const { default: Component } = await (componentLoader as Loader<AstroComponentFactory>)();
+        const { default: SEOComponent } = await (seoLoader as Loader<AstroComponentFactory>)();
+        const { default: BibliographyComponent } = await (bibliographyLoader as Loader<AstroComponentFactory>)();
+        for (const locale of LANGUAGE_CODES.filter((candidate) => candidate !== "es")) {
+            const content = contents[locale];
+            const category = categories[locale];
+            paths.push({
+                params: {
+                    locale,
+                    utilities: getUtilityNamespace(locale),
+                    categories: getCategoryNamespace(locale),
+                    category: category.slug,
+                    slug: content.slug,
+                },
+                props: {
+                    locale,
+                    content,
+                    englishSlug: contents.en.slug,
+                    category,
+                    categorySlug: category.slug,
+                    Component,
+                    SEOComponent,
+                    BibliographyComponent,
+                    alternates: LANGUAGE_CODES.map((language) => ({
+                        language,
+                        url: getUtilityPath(language, categories[language].slug, contents[language].slug),
+                    })),
+                    image: getUtilityOgImage(contents.en.slug),
+                },
+            });
+        }
+    }
+    return paths;
+}
+
+const { locale, content, englishSlug, category, categorySlug, Component, SEOComponent, BibliographyComponent, relatedTools, alternates, image } = Astro.props as {
+    locale: Exclude<Language, "es">;
+    content: LoadedTool;
+    englishSlug: string;
+    category: CategoryLocaleContent;
+    categorySlug: string;
+    Component: AstroComponentFactory;
+    SEOComponent: AstroComponentFactory;
+    BibliographyComponent: AstroComponentFactory;
+    relatedTools?: { icon: string; title: string; description: string; href: string }[];
+    alternates: { language: Language; url: string }[];
+    image?: string;
+};
+const related = relatedTools ?? (await Promise.all(ALL_TOOLS.map(async ({ entry: relatedEntry }) => {
+    const loader = relatedEntry.i18n[locale] ?? relatedEntry.i18n.en;
+    if (!loader) return null;
+    const relatedContent = await loader();
+    if (relatedContent.slug === content.slug) return null;
+    return {
+        icon: relatedEntry.icons.fg,
+        title: relatedContent.title,
+        description: relatedContent.description,
+        href: getUtilityPath(locale, categorySlug, relatedContent.slug),
+    };
+}))).filter((tool): tool is { icon: string; title: string; description: string; href: string } => tool !== null);
+---
+
+<ProductionUtilityPage
+    {locale}
+    {content}
+    {englishSlug}
+    categoryTitle={category.title}
+    {categorySlug}
+    categoryHref={getCategoryPath(locale, categorySlug)}
+    relatedTools={related}
+    {Component}
+    {SEOComponent}
+    {BibliographyComponent}
+    {alternates}
+    {image}
+/> 

package/src/pages/[locale]/[utilities]/[categories]/[category].astro

@@ -0,0 +1,44 @@
+---
+import ProductionCategoryPage from "../../../../layouts/ProductionCategoryPage.astro";
+import { ALL_TOOLS, aquariumCategory } from "../../../../index";
+import { LANGUAGE_CODES, type Language } from "../../../../i18n/languages";
+import { getCategoryNamespace, getCategoryPath, getUtilityNamespace, getUtilityPath } from "../../../../mfe/routes";
+import { CATEGORY_OG_IMAGE } from "../../../../mfe/assets";
+
+export async function getStaticPaths() {
+    const categories = Object.fromEntries(await Promise.all(
+        LANGUAGE_CODES.map(async (language) => [language, await aquariumCategory.i18n[language]!()]),
+    ));
+    return LANGUAGE_CODES.filter((language) => language !== "es").map((locale) => {
+        const category = categories[locale]!;
+        const alternates = LANGUAGE_CODES.map((language) => ({
+            language,
+            url: getCategoryPath(language, categories[language]!.slug),
+        }));
+        return {
+            params: { locale, utilities: getUtilityNamespace(locale), categories: getCategoryNamespace(locale), category: category.slug },
+            props: { locale, category, alternates },
+        };
+    });
+}
+
+const { locale, category, alternates } = Astro.props as {
+    locale: Exclude<Language, "es">;
+    category: Awaited<ReturnType<NonNullable<(typeof aquariumCategory.i18n)[Language]>>>;
+    alternates: { language: Language; url: string }[];
+};
+const tools = await Promise.all(ALL_TOOLS.map(async ({ entry }) => {
+    const loader = entry.i18n[locale] ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing ${locale} locale for ${entry.id}`);
+    const content = await loader();
+    return {
+        id: entry.id,
+        icon: entry.icons.fg,
+        title: content.title,
+        description: content.description,
+        href: getUtilityPath(locale, category.slug, content.slug),
+    };
+}));
+---
+
+<ProductionCategoryPage locale={locale} {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

package/src/pages/index.astro

@@ -1,4 +1,4 @@
 ---
 ---
-<meta http-equiv="refresh" content="0;url=/es" />
+<meta http-equiv="refresh" content="0;url=/utilidades/categorias/acuarios/" />
 

package/src/pages/utilidades/[slug]/manifest.json.ts

@@ -0,0 +1,28 @@
+import type { APIRoute } from "astro";
+import { ALL_TOOLS, aquariumCategory } from "../../../index";
+import type { ToolLocaleContent } from "../../../types";
+import { getUtilityPath } from "../../../mfe/routes";
+import { createUtilityManifestResponse, type UtilityManifestInput } from "../../../mfe/manifest";
+
+export async function getStaticPaths() {
+    const category = await aquariumCategory.i18n.es!();
+    const paths = [];
+    for (const { entry } of ALL_TOOLS) {
+        const loader = entry.i18n.es ?? entry.i18n.en;
+        if (!loader) continue;
+        const content = await loader() as ToolLocaleContent;
+        const englishContent = await (entry.i18n.en ?? loader)() as ToolLocaleContent;
+        paths.push({
+            params: { slug: content.slug },
+            props: {
+                title: content.title,
+                description: content.description,
+                startUrl: getUtilityPath("es", category.slug, content.slug),
+                englishSlug: englishContent.slug,
+            },
+        });
+    }
+    return paths;
+}
+
+export const GET: APIRoute = ({ props }) => createUtilityManifestResponse(props as unknown as UtilityManifestInput);

package/src/pages/utilidades/[slug].astro

@@ -0,0 +1,90 @@
+---
+import ProductionUtilityPage from "../../layouts/ProductionUtilityPage.astro";
+import { ALL_TOOLS, aquariumCategory } from "../../index";
+import { LANGUAGE_CODES, type Language } from "../../i18n/languages";
+import type { CategoryLocaleContent, ToolLocaleContent } from "../../types";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+import { getCategoryPath, getUtilityPath } from "../../mfe/routes";
+import { getUtilityOgImage } from "../../mfe/assets";
+
+type Loader<T> = () => Promise<{ default: T }>;
+type LoadedTool = ToolLocaleContent;
+
+export async function getStaticPaths() {
+    const category = await aquariumCategory.i18n.es!();
+    const categories = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+        language,
+        await aquariumCategory.i18n[language]!(),
+    ]))) as Record<Language, CategoryLocaleContent>;
+    const paths = [];
+    for (const { entry, Component: componentLoader, SEOComponent: seoLoader, BibliographyComponent: bibliographyLoader } of ALL_TOOLS) {
+        const contents = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => {
+            const loader = entry.i18n[language] ?? entry.i18n.en;
+            if (!loader) throw new Error(`Missing ${language} locale for ${entry.id}`);
+            return [language, await loader()];
+        }))) as Record<Language, LoadedTool>;
+        const { default: Component } = await (componentLoader as Loader<AstroComponentFactory>)();
+        const { default: SEOComponent } = await (seoLoader as Loader<AstroComponentFactory>)();
+        const { default: BibliographyComponent } = await (bibliographyLoader as Loader<AstroComponentFactory>)();
+        paths.push({
+            params: { slug: contents.es.slug },
+            props: {
+                locale: "es",
+                content: contents.es,
+                englishSlug: contents.en.slug,
+                category,
+                categorySlug: category.slug,
+                Component,
+                SEOComponent,
+                BibliographyComponent,
+                alternates: LANGUAGE_CODES.map((language) => ({
+                    language,
+                    url: getUtilityPath(language, categories[language].slug, contents[language].slug),
+                })),
+                image: getUtilityOgImage(contents.en.slug),
+            },
+        });
+    }
+    return paths;
+}
+
+const { locale, content, englishSlug, category, categorySlug, Component, SEOComponent, BibliographyComponent, alternates, image } = Astro.props as {
+    locale: "es";
+    content: LoadedTool;
+    englishSlug: string;
+    category: CategoryLocaleContent;
+    categorySlug: string;
+    Component: AstroComponentFactory;
+    SEOComponent: AstroComponentFactory;
+    BibliographyComponent: AstroComponentFactory;
+    alternates: { language: Language; url: string }[];
+    image?: string;
+};
+const relatedTools = (await Promise.all(ALL_TOOLS.map(async ({ entry: relatedEntry }) => {
+    const loader = relatedEntry.i18n.es ?? relatedEntry.i18n.en;
+    if (!loader) return null;
+    const relatedContent = await loader();
+    if (relatedContent.slug === content.slug) return null;
+    return {
+        icon: relatedEntry.icons.fg,
+        title: relatedContent.title,
+        description: relatedContent.description,
+        href: getUtilityPath("es", categorySlug, relatedContent.slug),
+    };
+}))).filter((tool): tool is { icon: string; title: string; description: string; href: string } => tool !== null);
+---
+
+<ProductionUtilityPage
+    {locale}
+    {content}
+    {englishSlug}
+    categoryTitle={category.title}
+    {categorySlug}
+    categoryHref={getCategoryPath(locale, categorySlug)}
+    {relatedTools}
+    {Component}
+    {SEOComponent}
+    {BibliographyComponent}
+    {alternates}
+    {image}
+/> 

package/src/pages/utilidades/categorias/[category].astro

@@ -0,0 +1,38 @@
+---
+import ProductionCategoryPage from "../../../layouts/ProductionCategoryPage.astro";
+import { ALL_TOOLS, aquariumCategory } from "../../../index";
+import { LANGUAGE_CODES, type Language } from "../../../i18n/languages";
+import { getCategoryPath, getUtilityPath } from "../../../mfe/routes";
+import { CATEGORY_OG_IMAGE } from "../../../mfe/assets";
+
+export async function getStaticPaths() {
+    const categories = Object.fromEntries(await Promise.all(
+        LANGUAGE_CODES.map(async (language) => [language, await aquariumCategory.i18n[language]!()]),
+    ));
+    const category = categories.es!;
+    const alternates = LANGUAGE_CODES.map((language) => ({
+        language,
+        url: getCategoryPath(language, categories[language]!.slug),
+    }));
+    return [{ params: { category: category.slug }, props: { category, alternates } }];
+}
+
+const { category, alternates } = Astro.props as {
+    category: Awaited<ReturnType<NonNullable<(typeof aquariumCategory.i18n)[Language]>>>;
+    alternates: { language: Language; url: string }[];
+};
+const tools = await Promise.all(ALL_TOOLS.map(async ({ entry }) => {
+    const loader = entry.i18n.es ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing Spanish locale for ${entry.id}`);
+    const content = await loader();
+    return {
+        id: entry.id,
+        icon: entry.icons.fg,
+        title: content.title,
+        description: content.description,
+        href: getUtilityPath("es", category.slug, content.slug),
+    };
+}));
+---
+
+<ProductionCategoryPage locale="es" {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

package/src/tests/mfe_cache_contract.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { getCacheControl, LONG_LIVED_ASSET_CACHE } from "../worker";
+
+describe("MFE cache contract", () => {
+    it("caches versioned assets and manifests for one year", () => {
+        expect(getCacheControl("/_utilities/aquarium/images/tool.webp")).toBe(LONG_LIVED_ASSET_CACHE);
+        expect(getCacheControl("/_utilities/aquarium/styles/tool.css")).toBe(LONG_LIVED_ASSET_CACHE);
+        expect(getCacheControl("/en/utilities/categories/aquarium/tool/manifest.json")).toBe(LONG_LIVED_ASSET_CACHE);
+    });
+
+});

package/src/tests/mfe_manifest.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { createUtilityManifestResponse } from "../mfe/manifest";
+
+describe("MFE utility manifest", () => {
+    it("returns a versioned installable manifest for the current utility", async () => {
+        const response = createUtilityManifestResponse({
+            title: "Card draw odds calculator",
+            description: "Calculate card draw probabilities.",
+            startUrl: "/en/utilities/categories/aquarium/card-draw-odds-calculator/",
+            englishSlug: "card-draw-odds-calculator",
+        });
+        const manifest = await response.json() as {
+            name: string;
+            start_url: string;
+            scope: string;
+            icons: { src: string; sizes: string; type: string; purpose: string }[];
+        };
+
+        expect(response.headers.get("Content-Type")).toContain("application/manifest+json");
+        expect(response.headers.get("Cache-Control")).toContain("immutable");
+        expect(manifest.name).toBe("Card draw odds calculator");
+        expect(manifest.start_url).toBe(manifest.scope);
+        expect(manifest.icons[0]?.src).toContain("/_utilities/aquarium/images/card-draw-odds-calculator.webp?version=");
+        expect(manifest.icons[0]?.sizes).toBe("512x512");
+        expect(manifest.icons[0]?.type).toBe("image/webp");
+        expect(manifest.icons[0]?.purpose).toBe("any");
+    });
+});

package/src/types.ts

@@ -1,18 +1,16 @@
 import type { SEOSection } from '@jjlmoya/utils-shared';
+import type { UtilityLocale } from '@jjlmoya/utils-shared/routing';
 import type { WithContext, Thing } from 'schema-dts';
 
 export type { SEOSection };
 
-export type KnownLocale =
-  | 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
-  | 'fr' | 'id' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
-  | 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
+export type KnownLocale = UtilityLocale;
 
 export interface FAQItem { question: string; answer: string; }
 export interface BibliographyEntry { name: string; url: string; }
 export interface HowToStep { name: string; text: string; }
 
-export interface ToolLocaleContent<TUI extends Record<string, string> = Record<string, string>> {
+export interface ToolLocaleContent<TUI extends object = Record<string, string>> {
   slug: string;
   title: string;
   description: string;
@@ -34,7 +32,7 @@ export interface CategoryLocaleContent {
 export type LocaleLoader<T> = () => Promise<T>;
 export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
-export interface AquariumToolEntry<TUI extends Record<string, string> = Record<string, string>> {
+export interface AquariumToolEntry<TUI extends object = Record<string, string>> {
   id: string;
   icons: { bg: string; fg: string; };
   i18n: LocaleMap<ToolLocaleContent<TUI>>;

package/src/worker.ts

@@ -0,0 +1,25 @@
+interface UtilityMfeEnvironment {
+    ASSETS: { fetch(request: Request): Promise<Response> };
+}
+
+export const LONG_LIVED_ASSET_CACHE = "public, max-age=31536000, immutable";
+
+export const getCacheControl = (pathname: string): string | undefined => {
+    if (pathname.endsWith("/manifest.json")) return LONG_LIVED_ASSET_CACHE;
+    if (pathname.startsWith("/_utilities/")) {
+        return LONG_LIVED_ASSET_CACHE;
+    }
+    return undefined;
+};
+
+export default {
+    async fetch(request: Request, environment: UtilityMfeEnvironment): Promise<Response> {
+        const response = await environment.ASSETS.fetch(request);
+        const cacheControl = getCacheControl(new URL(request.url).pathname);
+        if (!cacheControl) return response;
+
+        const headers = new Headers(response.headers);
+        headers.set("Cache-Control", cacheControl);
+        return new Response(response.body, { status: response.status, headers });
+    },
+};

package/src/pages/[locale]/[slug].astro

@@ -1,65 +0,0 @@
----
-import PreviewLayout from '../../layouts/PreviewLayout.astro';
-import PreviewNavSidebar from '../../components/PreviewNavSidebar.astro';
-import { ALL_TOOLS } from '../../index';
-import { UtilityHeader, FAQSection, Bibliography, SEORenderer } from '@jjlmoya/utils-shared';
-import type { KnownLocale, ToolLocaleContent } from '../../types';
-import type { UtilitySEOContent } from '@jjlmoya/utils-shared';
-
-export async function getStaticPaths() {
-  const paths = [];
-  for (const { entry, Component: lazyComponent } of ALL_TOOLS) {
-    const { default: Component } = await lazyComponent();
-    const localeContents = await Promise.all(Object.entries(entry.i18n).map(async ([locale, loader]) => ({
-      locale: locale as KnownLocale,
-      content: await loader(),
-    })));
-    const localeUrls = Object.fromEntries(localeContents.map(({ locale, content }) => [locale, '/' + locale + '/' + content.slug]));
-    for (const { locale, content } of localeContents) {
-      const allToolsNav = (await Promise.all(ALL_TOOLS.map(async ({ entry: navEntry }) => {
-        const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
-        if (loader === undefined) return null;
-        const navContent = await loader();
-        return { id: navEntry.id, title: navContent.title, href: '/' + locale + '/' + navContent.slug, isActive: navEntry.id === entry.id };
-      }))).filter((item): item is { id: string; title: string; href: string; isActive: boolean } => item !== null);
-      const englishLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
-      const englishSlug = englishLoader === undefined ? entry.id : (await englishLoader()).slug;
-      paths.push({ params: { locale, slug: content.slug }, props: { Component, locale, content, localeUrls, allToolsNav, englishSlug } });
-    }
-  }
-  return paths;
-}
-
-const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props as {
-  Component: (_props: Record<string, unknown>) => unknown;
-  locale: KnownLocale;
-  content: ToolLocaleContent;
-  localeUrls: Partial<Record<KnownLocale, string>>;
-  allToolsNav: { id: string; title: string; href: string; isActive?: boolean }[];
-  englishSlug: string;
-};
-
-const cssFiles = import.meta.glob('../../tool/**' + '/' + '*.css', { query: '?raw', import: 'default' });
-const cssKey = Object.keys(cssFiles).find((key) => key.endsWith('/' + englishSlug + '.css'));
-const cssLoader = cssKey === undefined ? undefined : cssFiles[cssKey];
-const toolCss = cssLoader === undefined ? '' : await cssLoader() as string;
-const seoContent: UtilitySEOContent = { locale, sections: content.seo };
-const words = content.title.split(' ');
-const titleHighlight = words[0] ?? '';
-const titleBase = words.slice(1).join(' ');
----
-
-<PreviewLayout title={content.title} currentLocale={locale} localeUrls={localeUrls} hasSidebar={true}>
-  <PreviewNavSidebar slot="sidebar" categoryTitle="Aquarium tools" tools={allToolsNav} />
-  <Fragment slot="head">
-    {toolCss !== '' && <Fragment set:html={'<style is:inline>' + toolCss + '</style>'} />}
-    {content.schemas.map((schema: unknown) => <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />)}
-  </Fragment>
-  <div class="tool-page">
-    <UtilityHeader titleHighlight={titleHighlight} titleBase={titleBase} description={content.description} />
-    <section class="section-tool"><Component ui={content.ui} /></section>
-    <section class="section-seo"><SEORenderer content={seoContent} /></section>
-    <section class="section-faq"><FAQSection items={content.faq} /></section>
-    <section class="section-bibliography"><Bibliography links={content.bibliography} /></section>
-  </div>
-</PreviewLayout>

package/src/pages/[locale].astro

@@ -1,69 +0,0 @@
----
-import PreviewLayout from '../layouts/PreviewLayout.astro';
-import PreviewNavSidebar from '../components/PreviewNavSidebar.astro';
-import { aquariumCategory, ALL_TOOLS } from '../index';
-import { Icon } from 'astro-icon/components';
-import type { KnownLocale, ToolLocaleContent } from '../types';
-
-export async function getStaticPaths() {
-  const locales = ['en'] as KnownLocale[];
-  return locales.map((locale) => ({ params: { locale } }));
-}
-
-const currentLocale = (Astro.params.locale ?? 'en') as KnownLocale;
-const categoryLoader = aquariumCategory.i18n[currentLocale] ?? aquariumCategory.i18n.en;
-const categoryContent = categoryLoader === undefined ? {
-  slug: 'aquarium',
-  title: 'Aquarium Tools',
-  description: 'Aquarium volume tools',
-  seo: [],
-} : await categoryLoader();
-
-const toolsWithContent = await Promise.all(
-  ALL_TOOLS.map(async ({ entry, Component }) => {
-    const localeEntries = await Promise.all(
-      Object.entries(entry.i18n).map(async ([locale, loader]) => [locale, await loader()] as const),
-    );
-    const localeContents = Object.fromEntries(localeEntries) as Record<string, ToolLocaleContent>;
-    const locale = localeContents[currentLocale] ?? localeContents.en;
-    const availableLocales: Record<string, string> = {};
-    for (const [localeCode, content] of Object.entries(localeContents)) {
-      availableLocales[localeCode] = '/' + localeCode + '/' + content.slug;
-    }
-    return { entry, Component, locale, availableLocales };
-  }),
-);
----
-
-<PreviewLayout title={categoryContent.title} currentLocale={currentLocale} hasSidebar={true}>
-  <PreviewNavSidebar
-    slot="sidebar"
-    categoryTitle={categoryContent.title}
-    tools={toolsWithContent.map(({ entry, locale, availableLocales }) => ({
-      id: entry.id,
-      title: locale?.title ?? entry.id,
-      href: availableLocales[currentLocale] ?? '#',
-    }))}
-  />
-  <div class="dashboard">
-    <header class="preview-header">
-      <span class="badge">preview · @jjlmoya/utils-aquarium</span>
-      <h1>{categoryContent.title}</h1>
-      <p>{categoryContent.description}</p>
-    </header>
-    <div class="tool-list">
-      {toolsWithContent.map(({ entry, locale, availableLocales }) => (
-        <article class="tool-card">
-          <a href={availableLocales[currentLocale] ?? '#'} class="tool-card-link">
-            <div class="tool-icons"><div class="icon-wrapper bg"><Icon name={entry.icons.bg} /></div><div class="icon-wrapper fg"><Icon name={entry.icons.fg} /></div></div>
-            <div class="tool-card-content"><h2 class="tool-title">{locale?.title}</h2><p class="tool-description">{locale?.description}</p></div>
-            <div class="tool-card-meta"><span class="tool-id">{entry.id}</span></div>
-          </a>
-          <div class="tool-locales">
-            {Object.entries(availableLocales).map(([localeCode, url]) => <a href={url} class:list={{ active: localeCode === currentLocale }} class="locale-badge">{localeCode.toUpperCase()}</a>)}
-          </div>
-        </article>
-      ))}
-    </div>
-  </div>
-</PreviewLayout>