@jjlmoya/utils-science 1.53.0 → 1.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +18 -5
- package/scripts/postbuild.mjs +17 -0
- package/scripts/postinstall.mjs +2 -4
- package/src/components/ProductionBreadcrumb.astro +134 -0
- package/src/components/ProductionStructuredData.astro +46 -0
- package/src/components/ProductionWidget.astro +182 -0
- package/src/i18n/header-ui.ts +15 -0
- package/src/i18n/language-ui.ts +9 -0
- package/src/i18n/languages.ts +24 -0
- package/src/identity/brands.ts +5 -0
- package/src/layouts/ProductionCategoryPage.astro +184 -0
- package/src/layouts/ProductionPage.astro +218 -0
- package/src/layouts/ProductionUtilityPage.astro +283 -0
- package/src/mfe/assets.ts +39 -0
- package/src/mfe/category-ui.ts +34 -0
- package/src/mfe/manifest.ts +45 -0
- package/src/mfe/routes.ts +50 -0
- package/src/pages/[locale]/[utilities]/[categories]/[category]/[slug]/manifest.json.ts +49 -0
- package/src/pages/[locale]/[utilities]/[categories]/[category]/[slug].astro +100 -0
- package/src/pages/[locale]/[utilities]/[categories]/[category].astro +44 -0
- package/src/pages/index.astro +1 -2
- package/src/pages/mfe-sitemaps/[locale]/[vertical]/sitemap.xml.ts +75 -0
- package/src/pages/utilidades/[slug]/manifest.json.ts +28 -0
- package/src/pages/utilidades/[slug].astro +90 -0
- package/src/pages/utilidades/categorias/[category].astro +38 -0
- package/src/tests/diacritics_density.test.ts +1 -1
- package/src/tests/inverted_punctuation.test.ts +1 -1
- package/src/tests/mfe_cache_contract.test.ts +14 -0
- package/src/tests/mfe_manifest.test.ts +28 -0
- package/src/tests/registry_contract.test.ts +67 -0
- package/src/tests/script_density.test.ts +1 -1
- package/src/tests/seo_translation_completeness.test.ts +3 -4
- package/src/tests/translation_copy.test.ts +2 -2
- package/src/types.ts +5 -7
- package/src/worker.ts +27 -0
- package/src/pages/[locale]/[slug].astro +0 -162
- package/src/pages/[locale].astro +0 -251
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { describe, expect, it } from "vitest";
|
|
2
|
+
import { createUtilityManifestResponse } from "../mfe/manifest";
|
|
3
|
+
|
|
4
|
+
describe("MFE utility manifest", () => {
|
|
5
|
+
it("returns a versioned installable manifest for the current utility", async () => {
|
|
6
|
+
const response = createUtilityManifestResponse({
|
|
7
|
+
title: "Card draw odds calculator",
|
|
8
|
+
description: "Calculate card draw probabilities.",
|
|
9
|
+
startUrl: "/en/utilities/categories/science/card-draw-odds-calculator/",
|
|
10
|
+
englishSlug: "card-draw-odds-calculator",
|
|
11
|
+
});
|
|
12
|
+
const manifest = await response.json() as {
|
|
13
|
+
name: string;
|
|
14
|
+
start_url: string;
|
|
15
|
+
scope: string;
|
|
16
|
+
icons: { src: string; sizes: string; type: string; purpose: string }[];
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
expect(response.headers.get("Content-Type")).toContain("application/manifest+json");
|
|
20
|
+
expect(response.headers.get("Cache-Control")).toContain("immutable");
|
|
21
|
+
expect(manifest.name).toBe("Card draw odds calculator");
|
|
22
|
+
expect(manifest.start_url).toBe(manifest.scope);
|
|
23
|
+
expect(manifest.icons[0]?.src).toContain("/_utilities/science/images/card-draw-odds-calculator.webp?version=");
|
|
24
|
+
expect(manifest.icons[0]?.sizes).toBe("512x512");
|
|
25
|
+
expect(manifest.icons[0]?.type).toBe("image/webp");
|
|
26
|
+
expect(manifest.icons[0]?.purpose).toBe("any");
|
|
27
|
+
});
|
|
28
|
+
});
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { existsSync, readdirSync } from 'fs';
|
|
3
|
+
import { join } from 'path';
|
|
4
|
+
import { pathToFileURL } from 'url';
|
|
5
|
+
import { ALL_ENTRIES } from '../entries';
|
|
6
|
+
import { ALL_TOOLS } from '../tools';
|
|
7
|
+
import type { ToolDefinition } from '../types';
|
|
8
|
+
|
|
9
|
+
function isToolDefinition(value: unknown): value is ToolDefinition {
|
|
10
|
+
if (!value || typeof value !== 'object') return false;
|
|
11
|
+
|
|
12
|
+
const candidate = value as Record<string, unknown>;
|
|
13
|
+
return Boolean(
|
|
14
|
+
candidate.entry &&
|
|
15
|
+
typeof candidate.entry === 'object' &&
|
|
16
|
+
typeof candidate.Component === 'function' &&
|
|
17
|
+
typeof candidate.SEOComponent === 'function' &&
|
|
18
|
+
typeof candidate.BibliographyComponent === 'function',
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const toolRoot = join(process.cwd(), 'src', 'tool');
|
|
23
|
+
const toolDirectories = readdirSync(toolRoot, { withFileTypes: true })
|
|
24
|
+
.filter((entry) => entry.isDirectory() && existsSync(join(toolRoot, entry.name, 'index.ts')))
|
|
25
|
+
.map((entry) => entry.name)
|
|
26
|
+
.sort();
|
|
27
|
+
|
|
28
|
+
describe('Library registry contract', () => {
|
|
29
|
+
it('keeps ALL_ENTRIES and ALL_TOOLS synchronized by id', () => {
|
|
30
|
+
const entryIds = ALL_ENTRIES.map((entry) => entry.id);
|
|
31
|
+
const toolIds = ALL_TOOLS.map((tool) => tool.entry.id);
|
|
32
|
+
|
|
33
|
+
expect(new Set(entryIds).size).toBe(entryIds.length);
|
|
34
|
+
expect(new Set(toolIds).size).toBe(toolIds.length);
|
|
35
|
+
expect([...toolIds].sort()).toEqual([...entryIds].sort());
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
it('registers every tool runtime index in both public registries', async () => {
|
|
39
|
+
const failures: string[] = [];
|
|
40
|
+
|
|
41
|
+
for (const directory of toolDirectories) {
|
|
42
|
+
const runtimeModule = await import(
|
|
43
|
+
pathToFileURL(join(toolRoot, directory, 'index.ts')).href,
|
|
44
|
+
);
|
|
45
|
+
const definitions = [...new Set(Object.values(runtimeModule).filter(isToolDefinition))];
|
|
46
|
+
|
|
47
|
+
if (definitions.length !== 1) {
|
|
48
|
+
failures.push(`${directory}: expected exactly one ToolDefinition export, found ${definitions.length}`);
|
|
49
|
+
continue;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const [definition] = definitions;
|
|
53
|
+
if (!definition) {
|
|
54
|
+
failures.push(`${directory}: runtime definition is undefined`);
|
|
55
|
+
continue;
|
|
56
|
+
}
|
|
57
|
+
if (!ALL_TOOLS.some((tool) => tool.entry.id === definition.entry.id)) {
|
|
58
|
+
failures.push(`${directory}: runtime definition is missing from ALL_TOOLS`);
|
|
59
|
+
}
|
|
60
|
+
if (!ALL_ENTRIES.some((entry) => entry.id === definition.entry.id)) {
|
|
61
|
+
failures.push(`${directory}: runtime entry is missing from ALL_ENTRIES`);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
expect(failures).toEqual([]);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
@@ -73,7 +73,7 @@ describe('Native script density validation', () => {
|
|
|
73
73
|
|
|
74
74
|
const content = await loader();
|
|
75
75
|
const rule = SCRIPT_RULES[typedLocale];
|
|
76
|
-
const text = normalizeText(translatableContent(content as Record<string, unknown>));
|
|
76
|
+
const text = normalizeText(translatableContent(content as unknown as Record<string, unknown>));
|
|
77
77
|
const letters = letterCount(text);
|
|
78
78
|
const matches = scriptCount(text, typedLocale);
|
|
79
79
|
const ratio = scriptRatio(text, typedLocale);
|
|
@@ -30,11 +30,10 @@ function calculateSeoTextLength(seoSections: any[]): number {
|
|
|
30
30
|
|
|
31
31
|
function checkLocaleSeoLength(toolId: string, locale: string, localeLen: number, enLen: number): string | null {
|
|
32
32
|
const isAsian = ASIAN_LOCALES.includes(locale);
|
|
33
|
-
const minLength = Math.floor(enLen *
|
|
33
|
+
const minLength = isAsian ? 120 : Math.max(240, Math.floor(enLen * 0.35));
|
|
34
34
|
const msgType = isAsian ? 'suspiciously short' : 'truncated/lazy';
|
|
35
35
|
|
|
36
36
|
if (localeLen >= minLength) return null;
|
|
37
|
-
|
|
38
37
|
return `[LAZY SEO TRANSLATION] Tool "${toolId}" locale "${locale}" SEO text is ${msgType} (${localeLen} chars vs EN ${enLen} chars, expected min ${minLength})`;
|
|
39
38
|
}
|
|
40
39
|
|
|
@@ -57,8 +56,8 @@ describe('SEO Translation Completeness & Laziness Audit', () => {
|
|
|
57
56
|
if (!enContent.seo || !Array.isArray(enContent.seo)) return;
|
|
58
57
|
|
|
59
58
|
const enSeoLength = calculateSeoTextLength(enContent.seo);
|
|
60
|
-
|
|
61
59
|
const failures: string[] = [];
|
|
60
|
+
|
|
62
61
|
for (const [locale, loader] of Object.entries(entry.i18n)) {
|
|
63
62
|
const failure = await auditSingleLocale(entry.id, locale, loader, enSeoLength);
|
|
64
63
|
if (failure) failures.push(failure);
|
|
@@ -67,7 +66,7 @@ describe('SEO Translation Completeness & Laziness Audit', () => {
|
|
|
67
66
|
expect(
|
|
68
67
|
failures,
|
|
69
68
|
failures.length > 0
|
|
70
|
-
? `SEO translation completeness failures for "${entry.id}"
|
|
69
|
+
? `SEO translation completeness failures for "${entry.id}":\n${failures.map((failure, index) => `${index + 1}. ${failure}`).join('\n')}`
|
|
71
70
|
: undefined,
|
|
72
71
|
).toEqual([]);
|
|
73
72
|
});
|
|
@@ -106,8 +106,8 @@ describe('Locales must not copy another locale wholesale', () => {
|
|
|
106
106
|
|
|
107
107
|
for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
|
|
108
108
|
for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
|
|
109
|
-
const left = locales[leftIndex]
|
|
110
|
-
const right = locales[rightIndex]
|
|
109
|
+
const left = locales[leftIndex]!;
|
|
110
|
+
const right = locales[rightIndex]!;
|
|
111
111
|
const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
|
|
112
112
|
|
|
113
113
|
if (similarity >= COPY_THRESHOLD) {
|
package/src/types.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import type { SEOSection } from '@jjlmoya/utils-shared';
|
|
2
|
+
import type { UtilityLocale } from '@jjlmoya/utils-shared/routing';
|
|
2
3
|
import type { WithContext, Thing } from 'schema-dts';
|
|
3
4
|
|
|
4
5
|
export type { SEOSection };
|
|
5
6
|
|
|
6
|
-
export type KnownLocale =
|
|
7
|
-
| 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
|
|
8
|
-
| 'fr' | 'id' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
|
|
9
|
-
| 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
|
|
7
|
+
export type KnownLocale = UtilityLocale;
|
|
10
8
|
|
|
11
9
|
export interface FAQItem {
|
|
12
10
|
question: string;
|
|
@@ -23,7 +21,7 @@ export interface HowToStep {
|
|
|
23
21
|
text: string;
|
|
24
22
|
}
|
|
25
23
|
|
|
26
|
-
export interface ToolLocaleContent<TUI extends
|
|
24
|
+
export interface ToolLocaleContent<TUI extends object = Record<string, string>> {
|
|
27
25
|
slug: string;
|
|
28
26
|
title: string;
|
|
29
27
|
description: string;
|
|
@@ -46,7 +44,7 @@ export type LocaleLoader<T> = () => Promise<T>;
|
|
|
46
44
|
|
|
47
45
|
export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
|
|
48
46
|
|
|
49
|
-
export interface ScienceToolEntry<TUI extends
|
|
47
|
+
export interface ScienceToolEntry<TUI extends object = Record<string, string>> {
|
|
50
48
|
id: string;
|
|
51
49
|
icons: {
|
|
52
50
|
bg: string;
|
|
@@ -67,4 +65,4 @@ export interface ToolDefinition {
|
|
|
67
65
|
SEOComponent: unknown;
|
|
68
66
|
BibliographyComponent: unknown;
|
|
69
67
|
}
|
|
70
|
-
|
|
68
|
+
|
package/src/worker.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
interface UtilityMfeEnvironment {
|
|
2
|
+
ASSETS: { fetch(request: Request): Promise<Response> };
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
export const LONG_LIVED_ASSET_CACHE = "public, max-age=31536000, immutable";
|
|
6
|
+
export const SITEMAP_CACHE = "public, max-age=3600, s-maxage=3600, must-revalidate";
|
|
7
|
+
|
|
8
|
+
export const getCacheControl = (pathname: string): string | undefined => {
|
|
9
|
+
if (pathname.endsWith("/sitemap.xml")) return SITEMAP_CACHE;
|
|
10
|
+
if (pathname.endsWith("/manifest.json")) return LONG_LIVED_ASSET_CACHE;
|
|
11
|
+
if (pathname.startsWith("/_utilities/")) {
|
|
12
|
+
return LONG_LIVED_ASSET_CACHE;
|
|
13
|
+
}
|
|
14
|
+
return undefined;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
async fetch(request: Request, environment: UtilityMfeEnvironment): Promise<Response> {
|
|
19
|
+
const response = await environment.ASSETS.fetch(request);
|
|
20
|
+
const cacheControl = getCacheControl(new URL(request.url).pathname);
|
|
21
|
+
if (!cacheControl) return response;
|
|
22
|
+
|
|
23
|
+
const headers = new Headers(response.headers);
|
|
24
|
+
headers.set("Cache-Control", cacheControl);
|
|
25
|
+
return new Response(response.body, { status: response.status, headers });
|
|
26
|
+
},
|
|
27
|
+
};
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import PreviewLayout from "../../layouts/PreviewLayout.astro";
|
|
3
|
-
import PreviewNavSidebar from "../../components/PreviewNavSidebar.astro";
|
|
4
|
-
import { ALL_TOOLS } from "../../index";
|
|
5
|
-
import {
|
|
6
|
-
UtilityHeader,
|
|
7
|
-
FAQSection,
|
|
8
|
-
Bibliography,
|
|
9
|
-
SEORenderer,
|
|
10
|
-
} from "@jjlmoya/utils-shared";
|
|
11
|
-
import type { KnownLocale, ToolLocaleContent } from "../../types";
|
|
12
|
-
import type { UtilitySEOContent } from "@jjlmoya/utils-shared";
|
|
13
|
-
|
|
14
|
-
export async function getStaticPaths() {
|
|
15
|
-
const paths = [];
|
|
16
|
-
|
|
17
|
-
for (const { entry, Component: lazyComp } of ALL_TOOLS) {
|
|
18
|
-
const { default: Component } = await (lazyComp as () => Promise<{ default: unknown }>)();
|
|
19
|
-
const localeEntries = Object.entries(entry.i18n) as [
|
|
20
|
-
KnownLocale,
|
|
21
|
-
() => Promise<ToolLocaleContent>,
|
|
22
|
-
][];
|
|
23
|
-
const localeContents = await Promise.all(
|
|
24
|
-
localeEntries.map(async ([locale, loader]) => ({
|
|
25
|
-
locale,
|
|
26
|
-
content: await loader(),
|
|
27
|
-
})),
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
const localeUrls = Object.fromEntries(
|
|
31
|
-
localeContents.map(({ locale, content }) => [
|
|
32
|
-
locale,
|
|
33
|
-
`/${locale}/${content.slug}`,
|
|
34
|
-
]),
|
|
35
|
-
) as Partial<Record<KnownLocale, string>>;
|
|
36
|
-
|
|
37
|
-
const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
|
|
38
|
-
const englishSlug = firstLoader ? (await firstLoader()).slug : entry.id;
|
|
39
|
-
|
|
40
|
-
for (const { locale, content } of localeContents) {
|
|
41
|
-
const allToolsNav = (
|
|
42
|
-
await Promise.all(
|
|
43
|
-
ALL_TOOLS.map(async ({ entry: navEntry }) => {
|
|
44
|
-
const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
|
|
45
|
-
if (!loader) return null;
|
|
46
|
-
const navContent = await loader();
|
|
47
|
-
return {
|
|
48
|
-
id: navEntry.id,
|
|
49
|
-
title: navContent.title,
|
|
50
|
-
href: `/${locale}/${navContent.slug}`,
|
|
51
|
-
isActive: navEntry.id === entry.id,
|
|
52
|
-
};
|
|
53
|
-
}),
|
|
54
|
-
)
|
|
55
|
-
).filter(Boolean) as NavItem[];
|
|
56
|
-
paths.push({
|
|
57
|
-
params: { locale, slug: content.slug },
|
|
58
|
-
props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return paths;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
interface NavItem {
|
|
67
|
-
id: string;
|
|
68
|
-
title: string;
|
|
69
|
-
href: string;
|
|
70
|
-
isActive?: boolean;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
interface Props {
|
|
74
|
-
Component: unknown;
|
|
75
|
-
locale: KnownLocale;
|
|
76
|
-
content: ToolLocaleContent;
|
|
77
|
-
localeUrls: Partial<Record<KnownLocale, string>>;
|
|
78
|
-
allToolsNav: NavItem[];
|
|
79
|
-
englishSlug: string;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props as Props;
|
|
83
|
-
|
|
84
|
-
const cssFiles = import.meta.glob("../../tool/*/*.css", { query: "?raw", import: "default" });
|
|
85
|
-
const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
|
|
86
|
-
const cssLoader = cssKey ? cssFiles[cssKey] : null;
|
|
87
|
-
const toolCss = cssLoader ? await cssLoader() as string : "";
|
|
88
|
-
|
|
89
|
-
const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
|
|
90
|
-
|
|
91
|
-
const words = content.title.split(" ");
|
|
92
|
-
const titleHighlight = words[0] || "";
|
|
93
|
-
const titleBase = words.slice(1).join(" ") || "";
|
|
94
|
-
---
|
|
95
|
-
|
|
96
|
-
<PreviewLayout
|
|
97
|
-
title={content.title}
|
|
98
|
-
currentLocale={locale}
|
|
99
|
-
localeUrls={localeUrls}
|
|
100
|
-
hasSidebar={true}
|
|
101
|
-
>
|
|
102
|
-
<PreviewNavSidebar
|
|
103
|
-
slot="sidebar"
|
|
104
|
-
categoryTitle="Tools"
|
|
105
|
-
tools={allToolsNav}
|
|
106
|
-
/>
|
|
107
|
-
<Fragment slot="head">
|
|
108
|
-
{toolCss ? <Fragment set:html={`<style is:inline>${toolCss}</style>`} /> : null}
|
|
109
|
-
{
|
|
110
|
-
( content.schemas ?? []).map((schema: unknown) => (
|
|
111
|
-
<script
|
|
112
|
-
is:inline
|
|
113
|
-
type="application/ld+json"
|
|
114
|
-
set:html={JSON.stringify(schema)}
|
|
115
|
-
/>
|
|
116
|
-
))
|
|
117
|
-
}
|
|
118
|
-
</Fragment>
|
|
119
|
-
|
|
120
|
-
<div class="tool-page">
|
|
121
|
-
<UtilityHeader
|
|
122
|
-
titleHighlight={titleHighlight}
|
|
123
|
-
titleBase={titleBase}
|
|
124
|
-
description={content.description}
|
|
125
|
-
/>
|
|
126
|
-
|
|
127
|
-
<section class="section-tool">
|
|
128
|
-
<Component ui={content.ui} />
|
|
129
|
-
</section>
|
|
130
|
-
|
|
131
|
-
<section class="section-seo">
|
|
132
|
-
<SEORenderer content={seoContent} />
|
|
133
|
-
</section>
|
|
134
|
-
|
|
135
|
-
<section class="section-faq">
|
|
136
|
-
<FAQSection items={content.faq} />
|
|
137
|
-
</section>
|
|
138
|
-
|
|
139
|
-
<section class="section-bibliography">
|
|
140
|
-
<Bibliography links={content.bibliography} />
|
|
141
|
-
</section>
|
|
142
|
-
</div>
|
|
143
|
-
</PreviewLayout>
|
|
144
|
-
|
|
145
|
-
<style>
|
|
146
|
-
.tool-page {
|
|
147
|
-
display: flex;
|
|
148
|
-
flex-direction: column;
|
|
149
|
-
gap: 2rem;
|
|
150
|
-
}
|
|
151
|
-
.section-tool {
|
|
152
|
-
max-width: 1200px;
|
|
153
|
-
margin: 0 auto;
|
|
154
|
-
width: 100%;
|
|
155
|
-
}
|
|
156
|
-
.section-seo,
|
|
157
|
-
.section-faq,
|
|
158
|
-
.section-bibliography {
|
|
159
|
-
padding-top: 2rem;
|
|
160
|
-
border-top: 1px solid var(--border-color);
|
|
161
|
-
}
|
|
162
|
-
</style>
|
package/src/pages/[locale].astro
DELETED
|
@@ -1,251 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import PreviewLayout from '../layouts/PreviewLayout.astro';
|
|
3
|
-
import PreviewNavSidebar from '../components/PreviewNavSidebar.astro';
|
|
4
|
-
import { templateCategory, ALL_TOOLS } from '../index';
|
|
5
|
-
import { Icon } from 'astro-icon/components';
|
|
6
|
-
import type { KnownLocale, ToolLocaleContent } from '../types';
|
|
7
|
-
|
|
8
|
-
export async function getStaticPaths() {
|
|
9
|
-
const locales = ['en', 'es', 'fr'] as KnownLocale[];
|
|
10
|
-
return locales.map(locale => ({ params: { locale } }));
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const { locale: currentLocale } = Astro.params as { locale: KnownLocale };
|
|
14
|
-
|
|
15
|
-
const categoryContent = await templateCategory.i18n[currentLocale]!();
|
|
16
|
-
|
|
17
|
-
const tools = ALL_TOOLS || [];
|
|
18
|
-
|
|
19
|
-
const toolsWithContent = tools.length > 0
|
|
20
|
-
? await Promise.all(
|
|
21
|
-
tools.map(async ({ entry, Component }) => {
|
|
22
|
-
const languages = Object.keys(entry.i18n);
|
|
23
|
-
const localeEntries = await Promise.all(
|
|
24
|
-
languages.map(async (l) => {
|
|
25
|
-
const content = await entry.i18n[l as KnownLocale]!();
|
|
26
|
-
return [l, content];
|
|
27
|
-
})
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
const localeContents = Object.fromEntries(localeEntries) as Record<string, ToolLocaleContent<Record<string, string>>>;
|
|
31
|
-
|
|
32
|
-
const currentLocaleContent = localeContents[currentLocale] || localeContents['en'] || localeContents['es'];
|
|
33
|
-
const availableLocales: Record<string, string> = {};
|
|
34
|
-
|
|
35
|
-
for (const l of languages) {
|
|
36
|
-
const lCont = localeContents[l];
|
|
37
|
-
if (lCont) {
|
|
38
|
-
availableLocales[l] = `/${l}/${lCont.slug}`;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return { entry, Component, locale: currentLocaleContent, availableLocales };
|
|
43
|
-
})
|
|
44
|
-
)
|
|
45
|
-
: [];
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
<PreviewLayout
|
|
49
|
-
title={categoryContent.title}
|
|
50
|
-
currentLocale={currentLocale}
|
|
51
|
-
hasSidebar={true}
|
|
52
|
-
>
|
|
53
|
-
<PreviewNavSidebar
|
|
54
|
-
slot="sidebar"
|
|
55
|
-
categoryTitle={categoryContent.title}
|
|
56
|
-
tools={toolsWithContent.map(({ entry, locale, availableLocales }) => {
|
|
57
|
-
const href = availableLocales[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#');
|
|
58
|
-
return {
|
|
59
|
-
id: entry.id,
|
|
60
|
-
title: locale?.title || entry.id,
|
|
61
|
-
href: href,
|
|
62
|
-
};
|
|
63
|
-
})}
|
|
64
|
-
/>
|
|
65
|
-
<div class="dashboard">
|
|
66
|
-
<header class="preview-header">
|
|
67
|
-
<span class="badge">preview · @jjlmoya/utils-template</span>
|
|
68
|
-
<h1>{categoryContent.title}</h1>
|
|
69
|
-
<p>{categoryContent.description}</p>
|
|
70
|
-
</header>
|
|
71
|
-
|
|
72
|
-
<div class="tool-list">
|
|
73
|
-
{toolsWithContent?.map(({ entry, locale, availableLocales }) => (
|
|
74
|
-
<article class="tool-card">
|
|
75
|
-
<a href={availableLocales?.[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#')} class="tool-card-link">
|
|
76
|
-
<div class="tool-icons">
|
|
77
|
-
<div class="icon-wrapper bg">
|
|
78
|
-
<Icon name={entry.icons.bg} />
|
|
79
|
-
</div>
|
|
80
|
-
<div class="icon-wrapper fg">
|
|
81
|
-
<Icon name={entry.icons.fg} />
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
<div class="tool-card-content">
|
|
85
|
-
<h2 class="tool-title">{locale?.title}</h2>
|
|
86
|
-
<p class="tool-description">{locale?.description}</p>
|
|
87
|
-
</div>
|
|
88
|
-
<div class="tool-card-meta">
|
|
89
|
-
<span class="tool-id">{entry.id}</span>
|
|
90
|
-
</div>
|
|
91
|
-
</a>
|
|
92
|
-
|
|
93
|
-
{availableLocales && Object.keys(availableLocales).length > 1 && (
|
|
94
|
-
<div class="tool-locales">
|
|
95
|
-
{Object.entries(availableLocales).map(([l, url]) => (
|
|
96
|
-
<a href={url} class="locale-badge" title={`Ver en ${l.toUpperCase()}`} class:list={{ active: l === currentLocale }}>
|
|
97
|
-
{l.toUpperCase()}
|
|
98
|
-
</a>
|
|
99
|
-
))}
|
|
100
|
-
</div>
|
|
101
|
-
)}
|
|
102
|
-
</article>
|
|
103
|
-
))}
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</PreviewLayout>
|
|
107
|
-
|
|
108
|
-
<style>
|
|
109
|
-
.dashboard {
|
|
110
|
-
display: flex;
|
|
111
|
-
flex-direction: column;
|
|
112
|
-
gap: 5rem;
|
|
113
|
-
}
|
|
114
|
-
.preview-header {
|
|
115
|
-
text-align: center;
|
|
116
|
-
padding-bottom: 3rem;
|
|
117
|
-
border-bottom: 1px solid var(--border-color);
|
|
118
|
-
}
|
|
119
|
-
.badge {
|
|
120
|
-
display: inline-block;
|
|
121
|
-
padding: 0.25rem 0.75rem;
|
|
122
|
-
background: var(--accent);
|
|
123
|
-
border-radius: 99px;
|
|
124
|
-
font-size: 0.7rem;
|
|
125
|
-
font-weight: 800;
|
|
126
|
-
margin-bottom: 1.5rem;
|
|
127
|
-
color: var(--text-base);
|
|
128
|
-
letter-spacing: 0.05em;
|
|
129
|
-
}
|
|
130
|
-
h1 {
|
|
131
|
-
font-size: clamp(2rem, 6vw, 3.5rem);
|
|
132
|
-
font-weight: 900;
|
|
133
|
-
margin: 0 0 1rem;
|
|
134
|
-
background: linear-gradient(to bottom, var(--text-base), var(--text-muted));
|
|
135
|
-
-webkit-background-clip: text;
|
|
136
|
-
-webkit-text-fill-color: transparent;
|
|
137
|
-
background-clip: text;
|
|
138
|
-
}
|
|
139
|
-
.preview-header p {
|
|
140
|
-
color: var(--text-muted);
|
|
141
|
-
font-size: 1.1rem;
|
|
142
|
-
margin: 0;
|
|
143
|
-
}
|
|
144
|
-
.tool-list {
|
|
145
|
-
display: grid;
|
|
146
|
-
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
147
|
-
gap: 2rem;
|
|
148
|
-
}
|
|
149
|
-
.tool-card {
|
|
150
|
-
display: flex;
|
|
151
|
-
flex-direction: column;
|
|
152
|
-
gap: 1rem;
|
|
153
|
-
}
|
|
154
|
-
.tool-card-link {
|
|
155
|
-
flex: 1;
|
|
156
|
-
display: flex;
|
|
157
|
-
flex-direction: column;
|
|
158
|
-
padding: 1.5rem;
|
|
159
|
-
background: var(--bg-surface);
|
|
160
|
-
border: 1px solid var(--border-color);
|
|
161
|
-
border-radius: 0.75rem;
|
|
162
|
-
text-decoration: none;
|
|
163
|
-
transition: all 0.2s ease;
|
|
164
|
-
}
|
|
165
|
-
.tool-card-link:hover {
|
|
166
|
-
border-color: var(--accent);
|
|
167
|
-
background: rgba(244, 63, 94, 0.05);
|
|
168
|
-
transform: translateY(-2px);
|
|
169
|
-
}
|
|
170
|
-
.tool-icons {
|
|
171
|
-
display: flex;
|
|
172
|
-
align-items: center;
|
|
173
|
-
gap: 1rem;
|
|
174
|
-
margin-bottom: 1.25rem;
|
|
175
|
-
}
|
|
176
|
-
.icon-wrapper {
|
|
177
|
-
display: flex;
|
|
178
|
-
align-items: center;
|
|
179
|
-
justify-content: center;
|
|
180
|
-
width: 3rem;
|
|
181
|
-
height: 3rem;
|
|
182
|
-
border-radius: 0.5rem;
|
|
183
|
-
font-size: 1.5rem;
|
|
184
|
-
}
|
|
185
|
-
.icon-wrapper.bg {
|
|
186
|
-
background: var(--accent);
|
|
187
|
-
color: var(--text-base);
|
|
188
|
-
}
|
|
189
|
-
.icon-wrapper.fg {
|
|
190
|
-
background: var(--bg-page);
|
|
191
|
-
border: 1px solid var(--border-color);
|
|
192
|
-
color: var(--accent);
|
|
193
|
-
}
|
|
194
|
-
.tool-card-content {
|
|
195
|
-
flex: 1;
|
|
196
|
-
display: flex;
|
|
197
|
-
flex-direction: column;
|
|
198
|
-
}
|
|
199
|
-
.tool-title {
|
|
200
|
-
font-size: 1.25rem;
|
|
201
|
-
font-weight: 700;
|
|
202
|
-
margin: 0 0 0.5rem;
|
|
203
|
-
color: var(--text-base);
|
|
204
|
-
}
|
|
205
|
-
.tool-description {
|
|
206
|
-
font-size: 0.9375rem;
|
|
207
|
-
color: var(--text-muted);
|
|
208
|
-
line-height: 1.5;
|
|
209
|
-
margin: 0;
|
|
210
|
-
}
|
|
211
|
-
.tool-card-meta {
|
|
212
|
-
padding-top: 1rem;
|
|
213
|
-
border-top: 1px solid var(--border-color);
|
|
214
|
-
margin-top: 1.5rem;
|
|
215
|
-
}
|
|
216
|
-
.tool-id {
|
|
217
|
-
display: inline-block;
|
|
218
|
-
font-size: 0.7rem;
|
|
219
|
-
background: var(--bg-page);
|
|
220
|
-
border: 1px solid var(--border-color);
|
|
221
|
-
padding: 0.35rem 0.75rem;
|
|
222
|
-
border-radius: 0.4rem;
|
|
223
|
-
color: var(--accent);
|
|
224
|
-
font-weight: 600;
|
|
225
|
-
}
|
|
226
|
-
.tool-locales {
|
|
227
|
-
display: flex;
|
|
228
|
-
gap: 0.5rem;
|
|
229
|
-
flex-wrap: wrap;
|
|
230
|
-
}
|
|
231
|
-
.locale-badge {
|
|
232
|
-
display: inline-block;
|
|
233
|
-
padding: 0.4rem 0.85rem;
|
|
234
|
-
background: var(--bg-page);
|
|
235
|
-
border: 1px solid var(--border-color);
|
|
236
|
-
border-radius: 0.4rem;
|
|
237
|
-
color: var(--text-muted);
|
|
238
|
-
text-decoration: none;
|
|
239
|
-
font-size: 0.75rem;
|
|
240
|
-
font-weight: 600;
|
|
241
|
-
text-transform: uppercase;
|
|
242
|
-
letter-spacing: 0.05em;
|
|
243
|
-
transition: all 0.15s ease;
|
|
244
|
-
}
|
|
245
|
-
.locale-badge:hover,
|
|
246
|
-
.locale-badge.active {
|
|
247
|
-
color: var(--accent);
|
|
248
|
-
border-color: var(--accent);
|
|
249
|
-
background: rgba(244, 63, 94, 0.1);
|
|
250
|
-
}
|
|
251
|
-
</style>
|