@jjlmoya/utils-games-development 1.66.0 → 1.68.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 -67
- package/scripts/postinstall.mjs +27 -27
- package/src/category/GamesCategorySEO.astro +19 -19
- package/src/category/i18n/de.ts +15 -15
- package/src/category/i18n/en.ts +15 -15
- package/src/category/i18n/es.ts +15 -15
- package/src/category/i18n/fr.ts +15 -15
- package/src/category/i18n/id.ts +10 -10
- package/src/category/i18n/it.ts +10 -10
- package/src/category/i18n/ja.ts +10 -10
- package/src/category/i18n/ko.ts +10 -10
- package/src/category/i18n/nl.ts +10 -10
- package/src/category/i18n/pl.ts +10 -10
- package/src/category/i18n/pt.ts +10 -10
- package/src/category/i18n/ru.ts +10 -10
- package/src/category/i18n/sv.ts +10 -10
- package/src/category/i18n/tr.ts +10 -10
- package/src/category/i18n/zh.ts +10 -10
- package/src/category/seo.astro +15 -15
- package/src/components/PreviewNavSidebar.astro +116 -116
- package/src/components/PreviewToolbar.astro +143 -143
- package/src/data.ts +11 -11
- package/src/env.d.ts +5 -5
- package/src/index.ts +20 -20
- package/src/layouts/PreviewLayout.astro +122 -122
- package/src/pages/[locale]/[slug].astro +165 -165
- package/src/pages/[locale].astro +250 -250
- package/src/pages/index.astro +4 -4
- package/src/tests/category_seo_quality.test.ts +74 -0
- package/src/tests/diacritics_density.test.ts +118 -118
- package/src/tests/faq_count.test.ts +19 -19
- package/src/tests/i18n_coverage.test.ts +36 -36
- package/src/tests/inverted_punctuation.test.ts +84 -84
- package/src/tests/mocks/astro_mock.js +2 -2
- package/src/tests/no_en_dash.test.ts +70 -70
- package/src/tests/no_h1_in_components.test.ts +48 -48
- package/src/tests/pagespeed_best_practices.test.ts +198 -198
- package/src/tests/qa-test-helpers.ts +32 -32
- package/src/tests/qa_bibliography_links.test.ts +41 -41
- package/src/tests/qa_claim_evidence.test.ts +69 -69
- package/src/tests/qa_logic_reference_coverage.test.ts +46 -46
- package/src/tests/qa_runtime_i18n.test.ts +100 -100
- package/src/tests/schemas_fulfillment.test.ts +23 -23
- package/src/tests/script_density.test.ts +94 -94
- package/src/tests/seo_length.test.ts +23 -23
- package/src/tests/seo_translation_completeness.test.ts +18 -12
- package/src/tests/slug_language_code_format.test.ts +23 -23
- package/src/tests/slug_uniqueness.test.ts +80 -80
- package/src/tests/title_quality.test.ts +56 -56
- package/src/tool/audioLoopPointFinder/audio-loop-point-finder.css +322 -322
- package/src/tool/audioLoopPointFinder/client.ts +262 -262
- package/src/tool/hitboxHurtboxAnimator/hitbox-hurtbox-animator.css +614 -614
- package/src/tool/saveFileEditor/component.astro +351 -351
- package/src/tool/saveFileEditor/game-save-file-editor.css +250 -250
- package/src/tool/spriteSheetPacker/app-client.ts +248 -248
- package/src/tool/spriteSheetPacker/bibliography.ts +12 -12
- package/src/tool/spriteSheetPacker/component.astro +229 -229
- package/src/tool/spriteSheetPacker/dropzone-client.ts +55 -55
- package/src/tool/spriteSheetPacker/entry.ts +28 -28
- package/src/tool/spriteSheetPacker/exporter.ts +116 -116
- package/src/tool/spriteSheetPacker/extractor-client.ts +127 -127
- package/src/tool/spriteSheetPacker/flipbook-client.ts +60 -60
- package/src/tool/spriteSheetPacker/logic.test.ts +155 -155
- package/src/tool/spriteSheetPacker/logic.ts +32 -32
- package/src/tool/spriteSheetPacker/packer-core.ts +121 -121
- package/src/tool/spriteSheetPacker/packer-ui.ts +86 -86
- package/src/tool/spriteSheetPacker/sprite-sheet-packer.css +578 -578
- package/src/tool/spriteSheetPacker/types.ts +89 -89
- package/src/tool/spriteSheetPacker/ui.ts +42 -42
- package/src/tool/steamCapsuleGenerator/index.ts +9 -9
- package/src/tool/steamCapsuleGenerator/validation.ts +14 -14
- package/src/types.ts +72 -72
package/src/index.ts
CHANGED
|
@@ -1,21 +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';
|
|
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
19
|
export { STEAM_CAPSULE_GENERATOR_TOOL, steamCapsuleGenerator } from './tool/steamCapsuleGenerator';
|
|
20
20
|
export { STEAM_BBCODE_TRANSLATOR_TOOL, steamBbcodeTranslator } from './tool/steamBbcodeTranslator';
|
|
21
21
|
export { RETRO_SFX_GENERATOR_TOOL, retroSfxGenerator } from './tool/retroSfxGenerator';
|
|
@@ -23,5 +23,5 @@ export { PIXEL_ART_PALETTE_SWAPPER_TOOL, pixelArtPaletteSwapper } from './tool/p
|
|
|
23
23
|
export { GAME_UI_ACCESSIBILITY_TESTER_TOOL, gameUiAccessibilityTester } from './tool/gameUIAccessibilityTester';
|
|
24
24
|
export { HITBOX_HURTBOX_ANIMATOR_TOOL, hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator';
|
|
25
25
|
export { DAMAGE_FORMULA_LAB_TOOL, damageFormulaLab } from './tool/damageFormulaLab';
|
|
26
|
-
|
|
27
|
-
export type { ToolLocaleContent as GamesToolLocaleContent } from './types';
|
|
26
|
+
|
|
27
|
+
export type { ToolLocaleContent as GamesToolLocaleContent } from './types';
|
|
@@ -1,122 +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>
|
|
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>
|
|
@@ -1,165 +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>
|
|
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>
|