@jjlmoya/utils-games-development 1.46.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 +67 -0
- package/scripts/postinstall.mjs +27 -0
- package/src/category/GamesCategorySEO.astro +19 -0
- package/src/category/i18n/de.ts +15 -0
- package/src/category/i18n/en.ts +15 -0
- package/src/category/i18n/es.ts +15 -0
- package/src/category/i18n/fr.ts +15 -0
- package/src/category/i18n/id.ts +10 -0
- package/src/category/i18n/it.ts +10 -0
- package/src/category/i18n/ja.ts +10 -0
- package/src/category/i18n/ko.ts +10 -0
- package/src/category/i18n/nl.ts +10 -0
- package/src/category/i18n/pl.ts +10 -0
- package/src/category/i18n/pt.ts +10 -0
- package/src/category/i18n/ru.ts +10 -0
- package/src/category/i18n/sv.ts +10 -0
- package/src/category/i18n/tr.ts +10 -0
- package/src/category/i18n/zh.ts +10 -0
- package/src/category/index.ts +24 -0
- package/src/category/seo.astro +15 -0
- package/src/components/PreviewNavSidebar.astro +116 -0
- package/src/components/PreviewToolbar.astro +143 -0
- package/src/data.ts +11 -0
- package/src/entries.ts +5 -0
- package/src/env.d.ts +5 -0
- package/src/index.ts +21 -0
- package/src/layouts/PreviewLayout.astro +122 -0
- package/src/pages/[locale]/[slug].astro +165 -0
- package/src/pages/[locale].astro +251 -0
- package/src/pages/index.astro +4 -0
- package/src/tests/diacritics_density.test.ts +118 -0
- package/src/tests/faq_count.test.ts +19 -0
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tests/inverted_punctuation.test.ts +84 -0
- package/src/tests/locale_completeness.test.ts +27 -0
- package/src/tests/mocks/astro_mock.js +2 -0
- package/src/tests/no_en_dash.test.ts +70 -0
- package/src/tests/no_h1_in_components.test.ts +48 -0
- package/src/tests/pagespeed_best_practices.test.ts +198 -0
- package/src/tests/qa-test-helpers.ts +32 -0
- package/src/tests/qa_bibliography_links.test.ts +41 -0
- package/src/tests/qa_claim_evidence.test.ts +69 -0
- package/src/tests/qa_logic_reference_coverage.test.ts +46 -0
- package/src/tests/qa_runtime_i18n.test.ts +100 -0
- package/src/tests/schemas_fulfillment.test.ts +23 -0
- package/src/tests/script_density.test.ts +94 -0
- package/src/tests/seo_length.test.ts +23 -0
- package/src/tests/slug_language_code_format.test.ts +23 -0
- package/src/tests/slug_uniqueness.test.ts +81 -0
- package/src/tests/title_quality.test.ts +56 -0
- package/src/tests/tool_validation.test.ts +17 -0
- package/src/tool/steamCapsuleGenerator/bibliography.astro +6 -0
- package/src/tool/steamCapsuleGenerator/bibliography.ts +6 -0
- package/src/tool/steamCapsuleGenerator/component.astro +289 -0
- package/src/tool/steamCapsuleGenerator/components/SteamLibraryGridMockup.astro +51 -0
- package/src/tool/steamCapsuleGenerator/components/SteamLibraryMockup.astro +64 -0
- package/src/tool/steamCapsuleGenerator/components/SteamMasterControls.astro +2 -0
- package/src/tool/steamCapsuleGenerator/components/SteamStoreMockup.astro +90 -0
- package/src/tool/steamCapsuleGenerator/entry.ts +28 -0
- package/src/tool/steamCapsuleGenerator/i18n/de.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/en.ts +243 -0
- package/src/tool/steamCapsuleGenerator/i18n/es.ts +243 -0
- package/src/tool/steamCapsuleGenerator/i18n/fr.ts +165 -0
- package/src/tool/steamCapsuleGenerator/i18n/id.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/it.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ja.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ko.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/nl.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/pl.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/pt.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/ru.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/shared.ts +46 -0
- package/src/tool/steamCapsuleGenerator/i18n/sv.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/tr.ts +144 -0
- package/src/tool/steamCapsuleGenerator/i18n/zh.ts +144 -0
- package/src/tool/steamCapsuleGenerator/index.ts +9 -0
- package/src/tool/steamCapsuleGenerator/logic.test.ts +72 -0
- package/src/tool/steamCapsuleGenerator/logic.ts +259 -0
- package/src/tool/steamCapsuleGenerator/seo.astro +15 -0
- package/src/tool/steamCapsuleGenerator/steam-capsule-generator.css +697 -0
- package/src/tool/steamCapsuleGenerator/ui.ts +23 -0
- package/src/tool/steamCapsuleGenerator/validation.ts +22 -0
- package/src/tools.ts +8 -0
- package/src/types.ts +72 -0
package/src/env.d.ts
ADDED
package/src/index.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export { gamesCategory } from './category';
|
|
2
|
+
export const GamesCategorySEO = () => import('./category/GamesCategorySEO.astro').then((m) => m.default);
|
|
3
|
+
|
|
4
|
+
export type {
|
|
5
|
+
KnownLocale,
|
|
6
|
+
FAQItem,
|
|
7
|
+
BibliographyEntry,
|
|
8
|
+
HowToStep,
|
|
9
|
+
ToolLocaleContent,
|
|
10
|
+
CategoryLocaleContent,
|
|
11
|
+
LocaleLoader,
|
|
12
|
+
LocaleMap,
|
|
13
|
+
GamesToolEntry,
|
|
14
|
+
GamesCategoryEntry,
|
|
15
|
+
ToolDefinition,
|
|
16
|
+
} from './types';
|
|
17
|
+
|
|
18
|
+
export { ALL_ENTRIES, ALL_TOOLS } from './tools';
|
|
19
|
+
export { STEAM_CAPSULE_GENERATOR_TOOL, steamCapsuleGenerator } from './tool/steamCapsuleGenerator';
|
|
20
|
+
|
|
21
|
+
export type { ToolLocaleContent as GamesToolLocaleContent } from './types';
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
import "@jjlmoya/utils-shared/theme.css";
|
|
3
|
+
import PreviewToolbar from "../components/PreviewToolbar.astro";
|
|
4
|
+
import type { KnownLocale } from "../types";
|
|
5
|
+
|
|
6
|
+
interface Props {
|
|
7
|
+
title: string;
|
|
8
|
+
currentLocale?: KnownLocale;
|
|
9
|
+
localeUrls?: Partial<Record<KnownLocale, string>>;
|
|
10
|
+
hasSidebar?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
title,
|
|
15
|
+
currentLocale = "es",
|
|
16
|
+
localeUrls = {},
|
|
17
|
+
hasSidebar = false,
|
|
18
|
+
} = Astro.props;
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
<!doctype html>
|
|
22
|
+
<html lang={currentLocale}>
|
|
23
|
+
<head>
|
|
24
|
+
<meta charset="UTF-8" />
|
|
25
|
+
<meta name="viewport" content="width=device-width" />
|
|
26
|
+
<title>{title} · preview</title>
|
|
27
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
28
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
29
|
+
<link
|
|
30
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
|
|
31
|
+
rel="stylesheet"
|
|
32
|
+
/>
|
|
33
|
+
|
|
34
|
+
<script is:inline>
|
|
35
|
+
(function () {
|
|
36
|
+
const saved = localStorage.getItem("theme") || "theme-dark";
|
|
37
|
+
document.documentElement.classList.add(saved);
|
|
38
|
+
})();
|
|
39
|
+
</script>
|
|
40
|
+
<slot name="head" />
|
|
41
|
+
</head>
|
|
42
|
+
<body>
|
|
43
|
+
<PreviewToolbar currentLocale={currentLocale} localeUrls={localeUrls} />
|
|
44
|
+
<div class:list={["page-wrapper", { "with-sidebar": hasSidebar }]}>
|
|
45
|
+
{
|
|
46
|
+
hasSidebar && (
|
|
47
|
+
<aside class="sidebar-area">
|
|
48
|
+
<slot name="sidebar" />
|
|
49
|
+
</aside>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
<main>
|
|
53
|
+
<slot />
|
|
54
|
+
</main>
|
|
55
|
+
</div>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
58
|
+
|
|
59
|
+
<style is:global>
|
|
60
|
+
:root {
|
|
61
|
+
--accent: #f43f5e;
|
|
62
|
+
--primary-base: #9f1239;
|
|
63
|
+
--cyan: #06b6d4;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.theme-dark,
|
|
67
|
+
.theme-light {
|
|
68
|
+
--text-main: var(--text-base);
|
|
69
|
+
--border-color: var(--border-base);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
*,
|
|
73
|
+
*::before,
|
|
74
|
+
*::after {
|
|
75
|
+
box-sizing: border-box;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
body {
|
|
79
|
+
background-color: var(--bg-page);
|
|
80
|
+
color: var(--text-base);
|
|
81
|
+
margin: 0;
|
|
82
|
+
min-height: 100vh;
|
|
83
|
+
transition:
|
|
84
|
+
background-color 0.3s ease,
|
|
85
|
+
color 0.3s ease;
|
|
86
|
+
font-family: Inter, sans-serif;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
main {
|
|
90
|
+
padding: 0 2rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.page-wrapper {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.page-wrapper.with-sidebar {
|
|
99
|
+
display: grid;
|
|
100
|
+
grid-template-columns: 240px 1fr;
|
|
101
|
+
min-height: 100vh;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.sidebar-area {
|
|
105
|
+
position: sticky;
|
|
106
|
+
top: 0;
|
|
107
|
+
height: 100vh;
|
|
108
|
+
overflow-y: auto;
|
|
109
|
+
border-right: 1px solid var(--border-color);
|
|
110
|
+
background: var(--bg-page);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (max-width: 768px) {
|
|
114
|
+
.page-wrapper.with-sidebar {
|
|
115
|
+
grid-template-columns: 1fr;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sidebar-area {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
</style>
|
|
@@ -0,0 +1,165 @@
|
|
|
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
|
+
import type { AstroComponentFactory } from "astro/runtime/server/index.js";
|
|
14
|
+
|
|
15
|
+
export async function getStaticPaths() {
|
|
16
|
+
const paths = [];
|
|
17
|
+
|
|
18
|
+
for (const { entry, Component: lazyComp } of ALL_TOOLS) {
|
|
19
|
+
const { default: Component } = await (lazyComp as () => Promise<{ default: AstroComponentFactory }>)();
|
|
20
|
+
const localeEntries = Object.entries(entry.i18n) as [
|
|
21
|
+
KnownLocale,
|
|
22
|
+
() => Promise<ToolLocaleContent>,
|
|
23
|
+
][];
|
|
24
|
+
const localeContents = await Promise.all(
|
|
25
|
+
localeEntries.map(async ([locale, loader]) => ({
|
|
26
|
+
locale,
|
|
27
|
+
content: await loader(),
|
|
28
|
+
})),
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const localeUrls = Object.fromEntries(
|
|
32
|
+
localeContents.map(({ locale, content }) => [
|
|
33
|
+
locale,
|
|
34
|
+
`/${locale}/${content.slug}`,
|
|
35
|
+
]),
|
|
36
|
+
) as Partial<Record<KnownLocale, string>>;
|
|
37
|
+
|
|
38
|
+
const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
|
|
39
|
+
const englishSlug = firstLoader ? (await firstLoader()).slug : entry.id;
|
|
40
|
+
|
|
41
|
+
for (const { locale, content } of localeContents) {
|
|
42
|
+
const allToolsNav = (
|
|
43
|
+
await Promise.all(
|
|
44
|
+
ALL_TOOLS.map(async ({ entry: navEntry }) => {
|
|
45
|
+
const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
|
|
46
|
+
if (!loader) return null;
|
|
47
|
+
const navContent = await loader();
|
|
48
|
+
return {
|
|
49
|
+
id: navEntry.id,
|
|
50
|
+
title: navContent.title,
|
|
51
|
+
href: `/${locale}/${navContent.slug}`,
|
|
52
|
+
isActive: navEntry.id === entry.id,
|
|
53
|
+
};
|
|
54
|
+
}),
|
|
55
|
+
)
|
|
56
|
+
).filter(Boolean) as NavItem[];
|
|
57
|
+
paths.push({
|
|
58
|
+
params: { locale, slug: content.slug },
|
|
59
|
+
props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return paths;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
interface Props {
|
|
68
|
+
Component: AstroComponentFactory;
|
|
69
|
+
locale: KnownLocale;
|
|
70
|
+
content: ToolLocaleContent;
|
|
71
|
+
localeUrls: Partial<Record<KnownLocale, string>>;
|
|
72
|
+
allToolsNav: NavItem[];
|
|
73
|
+
englishSlug: string;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
interface NavItem {
|
|
77
|
+
id: string;
|
|
78
|
+
title: string;
|
|
79
|
+
href: string;
|
|
80
|
+
isActive?: boolean;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props as Props;
|
|
84
|
+
|
|
85
|
+
const cssFiles = import.meta.glob("../../tool/**/*.css", { query: "?raw", import: "default" });
|
|
86
|
+
const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
|
|
87
|
+
const toolCssLoader = cssKey ? cssFiles[cssKey] : undefined;
|
|
88
|
+
const toolCss = toolCssLoader ? await toolCssLoader() as string : "";
|
|
89
|
+
|
|
90
|
+
const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
|
|
91
|
+
|
|
92
|
+
const words = content.title.split(" ");
|
|
93
|
+
const titleHighlight = words[0] || "";
|
|
94
|
+
const titleBase = words.slice(1).join(" ") || "";
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
<PreviewLayout
|
|
98
|
+
title={content.title}
|
|
99
|
+
currentLocale={locale}
|
|
100
|
+
localeUrls={localeUrls}
|
|
101
|
+
hasSidebar={true}
|
|
102
|
+
>
|
|
103
|
+
<PreviewNavSidebar
|
|
104
|
+
slot="sidebar"
|
|
105
|
+
categoryTitle="Tools"
|
|
106
|
+
tools={allToolsNav}
|
|
107
|
+
/>
|
|
108
|
+
<Fragment slot="head">
|
|
109
|
+
{toolCss && <style set:html={toolCss} />}
|
|
110
|
+
{
|
|
111
|
+
( content.schemas ?? []).map((schema) => (
|
|
112
|
+
<script
|
|
113
|
+
is:inline
|
|
114
|
+
type="application/ld+json"
|
|
115
|
+
set:html={JSON.stringify(schema)}
|
|
116
|
+
/>
|
|
117
|
+
))
|
|
118
|
+
}
|
|
119
|
+
</Fragment>
|
|
120
|
+
|
|
121
|
+
<div class="tool-page">
|
|
122
|
+
<UtilityHeader
|
|
123
|
+
titleHighlight={titleHighlight}
|
|
124
|
+
titleBase={titleBase}
|
|
125
|
+
description={content.description}
|
|
126
|
+
/>
|
|
127
|
+
|
|
128
|
+
<section class="section-tool">
|
|
129
|
+
<Component ui={content.ui} />
|
|
130
|
+
</section>
|
|
131
|
+
|
|
132
|
+
<section class="section-seo">
|
|
133
|
+
<SEORenderer content={seoContent} />
|
|
134
|
+
</section>
|
|
135
|
+
|
|
136
|
+
<section class="section-faq">
|
|
137
|
+
<FAQSection items={content.faq} />
|
|
138
|
+
</section>
|
|
139
|
+
|
|
140
|
+
<section class="section-bibliography">
|
|
141
|
+
<Bibliography links={content.bibliography} />
|
|
142
|
+
</section>
|
|
143
|
+
</div>
|
|
144
|
+
</PreviewLayout>
|
|
145
|
+
|
|
146
|
+
<style>
|
|
147
|
+
.tool-page {
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
gap: 2rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.section-tool {
|
|
154
|
+
max-width: 1200px;
|
|
155
|
+
margin: 0 auto;
|
|
156
|
+
width: 100%;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.section-seo,
|
|
160
|
+
.section-faq,
|
|
161
|
+
.section-bibliography {
|
|
162
|
+
padding-top: 2rem;
|
|
163
|
+
border-top: 1px solid var(--border-color);
|
|
164
|
+
}
|
|
165
|
+
</style>
|
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
---
|
|
2
|
+
import PreviewLayout from '../layouts/PreviewLayout.astro';
|
|
3
|
+
import PreviewNavSidebar from '../components/PreviewNavSidebar.astro';
|
|
4
|
+
import { gamesCategory, 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 = ['de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh'] 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 gamesCategory.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-games-development</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>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { ALL_TOOLS } from '../tools';
|
|
3
|
+
|
|
4
|
+
type LocaleWithDiacritics = keyof typeof DIACRITIC_RULES;
|
|
5
|
+
|
|
6
|
+
const DIACRITIC_RULES = {
|
|
7
|
+
de: {
|
|
8
|
+
language: 'German',
|
|
9
|
+
expectedCharacters: 'ä ö ü ß',
|
|
10
|
+
characters: /[äöüÄÖÜß]/g,
|
|
11
|
+
minPerThousandLetters: 0.1,
|
|
12
|
+
},
|
|
13
|
+
es: {
|
|
14
|
+
language: 'Spanish',
|
|
15
|
+
expectedCharacters: 'á é í ó ú ü ñ',
|
|
16
|
+
characters: /[áéíóúüñÁÉÍÓÚÜÑ]/g,
|
|
17
|
+
minPerThousandLetters: 0.1,
|
|
18
|
+
},
|
|
19
|
+
fr: {
|
|
20
|
+
language: 'French',
|
|
21
|
+
expectedCharacters: 'à â æ ç é è ê ë î ï ô œ ù û ü ÿ',
|
|
22
|
+
characters: /[àâæçéèêëîïôœùûüÿÀÂÆÇÉÈÊËÎÏÔŒÙÛÜŸ]/g,
|
|
23
|
+
minPerThousandLetters: 0.1,
|
|
24
|
+
},
|
|
25
|
+
it: {
|
|
26
|
+
language: 'Italian',
|
|
27
|
+
expectedCharacters: 'à è é ì í î ò ó ù ú',
|
|
28
|
+
characters: /[àèéìíîòóùúÀÈÉÌÍÎÒÓÙÚ]/g,
|
|
29
|
+
minPerThousandLetters: 0.1,
|
|
30
|
+
},
|
|
31
|
+
pl: {
|
|
32
|
+
language: 'Polish',
|
|
33
|
+
expectedCharacters: 'ą ć ę ł ń ó ś ź ż',
|
|
34
|
+
characters: /[ąćęłńóśźżĄĆĘŁŃÓŚŹŻ]/g,
|
|
35
|
+
minPerThousandLetters: 0.1,
|
|
36
|
+
},
|
|
37
|
+
pt: {
|
|
38
|
+
language: 'Portuguese',
|
|
39
|
+
expectedCharacters: 'á â ã à ç é ê í ó ô õ ú ü',
|
|
40
|
+
characters: /[áâãàçéêíóôõúüÁÂÃÀÇÉÊÍÓÔÕÚÜ]/g,
|
|
41
|
+
minPerThousandLetters: 0.1,
|
|
42
|
+
},
|
|
43
|
+
sv: {
|
|
44
|
+
language: 'Swedish',
|
|
45
|
+
expectedCharacters: 'å ä ö',
|
|
46
|
+
characters: /[åäöÅÄÖ]/g,
|
|
47
|
+
minPerThousandLetters: 0.1,
|
|
48
|
+
},
|
|
49
|
+
tr: {
|
|
50
|
+
language: 'Turkish',
|
|
51
|
+
expectedCharacters: 'ç ğ ı İ ö ş ü',
|
|
52
|
+
characters: /[çğıöşüÇĞİÖŞÜ]/g,
|
|
53
|
+
minPerThousandLetters: 0.1,
|
|
54
|
+
},
|
|
55
|
+
} as const;
|
|
56
|
+
|
|
57
|
+
const LETTERS = /\p{L}/gu;
|
|
58
|
+
const TRANSLATABLE_KEYS = ['title', 'description', 'ui', 'seo', 'faq', 'howTo'] as const;
|
|
59
|
+
|
|
60
|
+
function collectStrings(value: unknown): string[] {
|
|
61
|
+
if (typeof value === 'string') return [value];
|
|
62
|
+
if (!value || typeof value !== 'object') return [];
|
|
63
|
+
if (Array.isArray(value)) return value.flatMap(collectStrings);
|
|
64
|
+
return Object.values(value).flatMap(collectStrings);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function normalizeText(value: unknown): string {
|
|
68
|
+
return collectStrings(value).join(' ').normalize('NFC');
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function translatableContent(content: Record<string, unknown>) {
|
|
72
|
+
return TRANSLATABLE_KEYS.map((key) => content[key]);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function letterCount(text: string): number {
|
|
76
|
+
return text.match(LETTERS)?.length ?? 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
function diacriticCount(text: string, locale: LocaleWithDiacritics): number {
|
|
80
|
+
return text.match(DIACRITIC_RULES[locale].characters)?.length ?? 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function diacriticsPerThousandLetters(text: string, locale: LocaleWithDiacritics): number {
|
|
84
|
+
const letters = letterCount(text);
|
|
85
|
+
if (letters === 0) return 0;
|
|
86
|
+
return diacriticCount(text, locale) / letters * 1000;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
describe('Diacritics density validation', () => {
|
|
90
|
+
ALL_TOOLS.forEach((tool) => {
|
|
91
|
+
describe(`Tool: ${tool.entry.id}`, () => {
|
|
92
|
+
Object.keys(DIACRITIC_RULES).forEach((locale) => {
|
|
93
|
+
it(`${locale} keeps the expected accent and special-letter set`, async () => {
|
|
94
|
+
const typedLocale = locale as LocaleWithDiacritics;
|
|
95
|
+
const loader = tool.entry.i18n[typedLocale];
|
|
96
|
+
if (!loader) return;
|
|
97
|
+
|
|
98
|
+
const content = await loader();
|
|
99
|
+
const text = normalizeText(translatableContent(content as unknown as Record<string, unknown>));
|
|
100
|
+
const rule = DIACRITIC_RULES[typedLocale];
|
|
101
|
+
const letters = letterCount(text);
|
|
102
|
+
const matches = diacriticCount(text, typedLocale);
|
|
103
|
+
const density = diacriticsPerThousandLetters(text, typedLocale);
|
|
104
|
+
|
|
105
|
+
expect(
|
|
106
|
+
density,
|
|
107
|
+
[
|
|
108
|
+
`Possible spelling or encoding issue detected in ${tool.entry.id}/${typedLocale} (${rule.language}).`,
|
|
109
|
+
`The text has ${matches} special characters (${density.toFixed(2)} per 1000 letters, ${letters} letters analyzed).`,
|
|
110
|
+
`This locale should include some of these characters: ${rule.expectedCharacters}.`,
|
|
111
|
+
'If the count is 0 or near 0, accents, tildes, or special letters were probably stripped by encoding or normalization.',
|
|
112
|
+
].join(' '),
|
|
113
|
+
).toBeGreaterThanOrEqual(rule.minPerThousandLetters);
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import type * as DATA from '../data';
|
|
3
|
+
|
|
4
|
+
const TOOLS: typeof DATA.gamesCategory[] = [];
|
|
5
|
+
|
|
6
|
+
describe('FAQ Content Validation', () => {
|
|
7
|
+
TOOLS.forEach((entry) => {
|
|
8
|
+
describe(`Tool: ${entry.icon}`, () => {
|
|
9
|
+
it('placeholder', () => {
|
|
10
|
+
expect(true).toBe(true);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('no tools registered yet', () => {
|
|
16
|
+
expect(TOOLS.length).toBe(0);
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|