localized project page description in cloudflare worker

Author: ZibanPirate

web/cloudflare/functions/projects/[slug].ts

@@ -5,7 +5,7 @@ import htmlTemplate from "../../public/template.html";
 import { fsConfig } from "@dzcode.io/utils/dist/config";
 import { Environment, environments } from "@dzcode.io/utils/dist/config/environment";
 import { plainLocalize } from "@dzcode.io/web/dist/components/locale/utils";
-import { dictionary } from "@dzcode.io/web/dist/components/locale/dictionary";
+import { dictionary, AllDictionaryKeys } from "@dzcode.io/web/dist/components/locale/dictionary";
 
 // @TODO-ZM: pass envs during deployment
 export interface Env {
@@ -32,15 +32,18 @@ export const onRequest: PagesFunction<Env> = async (context) => {
 
   // @TODO-ZM: get language from request url
   const language = "en";
-  const localize = (key: string) => plainLocalize(dictionary, language, key, "NO-TRANSLATION");
+  const localize = (key: AllDictionaryKeys) =>
+    plainLocalize(dictionary, language, key, "NO-TRANSLATION");
 
   // @TODO-ZM: use fetchV2
   const projectResponse = await fetch(`${apiUrl}/Projects/${projectId}/name`);
   const projectData = await projectResponse.json();
   // @ts-expect-error @TODO-ZM: import @dzcode.io/api
   const pageTitle = `${localize("project-title-pre")} ${projectData.project.name} ${localize("project-title-post")}`;
 
-  const newData = htmlTemplate.replace(/{{template-title}}/g, pageTitle);
+  const newData = htmlTemplate
+    .replace(/{{template-title}}/g, pageTitle)
+    .replace(/{{template-description}}/g, localize("projects-description"));
 
   return new Response(newData, {
     headers: {

web/cloudflare/package.json

@@ -16,7 +16,7 @@
     "deploy:prd": "wrangler pages deploy --project-name dzcode-dot-io --directory=./public --branch main",
     "deploy:stg": "wrangler pages deploy --project-name stage-dot-dzcode-dot-io --directory=./public --branch main",
     "dev": "npm run build && wrangler pages dev . --port 8080",
-    "generate:htmls": "cd .. && npm run bundle && npm run pre-deploy",
+    "dev:prepare": "npm run build && cd .. && npm run bundle && npm run pre-deploy",
     "lint:eslint": "eslint --config ../../packages/tooling/eslint.config.mjs",
     "lint:prettier": "prettier  --config ../../packages/tooling/.prettierrc --ignore-path ../../packages/tooling/.prettierignore --log-level warn"
   }

web/src/_build/pages/static-pages.ts

@@ -1,10 +1,10 @@
 import { allLanguages } from "@dzcode.io/models/dist/language";
 import { plainLocalize } from "../../components/locale/utils";
-import { dictionary } from "../../components/locale/dictionary";
+import { dictionary, AllDictionaryKeys } from "../../components/locale/dictionary";
 
 import { PageInfo, PageInfoWithLocalKeys } from ".";
 
-const localize = (key: string, language: string) =>
+const localize = (key: AllDictionaryKeys, language: string) =>
   plainLocalize(dictionary, language, key, "NO-TRANSLATION");
 
 const staticURLs: PageInfoWithLocalKeys[] = [

web/src/components/locale/utils.ts

@@ -1,9 +1,9 @@
 import type { BaseDictionary } from "./types";
 
-export function plainLocalize(
-  dictionary: BaseDictionary,
+export function plainLocalize<T extends BaseDictionary>(
+  dictionary: T,
   languageCode: string,
-  key: string,
+  key: keyof T,
   fallbackText: string,
 ) {
   return dictionary[key]?.[languageCode] || fallbackText;