render project page

Author: ZibanPirate

web-server/src/app/index.ts

@@ -1,15 +1,14 @@
 import express from "express";
-import path from "path";
+import { renderProjectPage } from "src/handler/project";
 import { generateContributionsSitemap } from "src/handler/sitemap/contributions";
 import { generateContributorsSitemap } from "src/handler/sitemap/contributors";
 import { generateProjectsSitemap } from "src/handler/sitemap/projects";
+import { validateLangOrDefault } from "src/utils/languages";
+import { indexPath, staticPath } from "src/utils/paths";
 
 const app = express();
 const port = process.env.PORT || 6060;
 
-const staticPath = path.join(__dirname, "../../../web/bundle");
-const indexPath = path.join(staticPath, "index.html");
-
 app.get("/w/contributions-sitemap.xml", async (req, res) => {
   const xml = await generateContributionsSitemap();
   res.setHeader("Content-Type", "application/xml; charset=utf-8");
@@ -29,13 +28,10 @@ app.get("/w/projects-sitemap.xml", async (req, res) => {
 });
 
 app.get(/^\/(?:([a-z]{2})\/)?projects\/(.*)$/, (req, res) => {
-  const lang = req.params[0] || "en";
+  const lang = validateLangOrDefault(req.params[0]);
   const projectId = req.params[1];
 
-  res.json({
-    lang,
-    projectId,
-  });
+  renderProjectPage(res, lang, projectId);
 });
 
 app.get(/^\/(?:([a-z]{2})\/)?contribute\/(.*)$/, (req, res) => {

web-server/src/handler/project.ts

@@ -0,0 +1,34 @@
+import { Language } from "@dzcode.io/models/dist/language";
+import { Response } from "express";
+import { plainLocalize } from "@dzcode.io/web/dist/components/locale/utils";
+import { dictionary, AllDictionaryKeys } from "@dzcode.io/web/dist/components/locale/dictionary";
+import { fetchV2Factory } from "@dzcode.io/utils/dist/fetch/factory";
+import { Endpoints } from "@dzcode.io/api/dist/app/endpoints";
+import { fullstackConfig } from "src/utils/config";
+import { getProjectURL } from "@dzcode.io/web/dist/utils/project";
+import { templateContent } from "./templates";
+import { notFoundPath } from "src/utils/paths";
+
+export const renderProjectPage = async (res: Response, lang: Language, projectId: string) => {
+  const localize = (key: AllDictionaryKeys) =>
+    plainLocalize(dictionary, lang.code, key, "NO-TRANSLATION");
+  const fetchV2 = fetchV2Factory<Endpoints>(fullstackConfig, lang.code);
+
+  try {
+    const { project } = await fetchV2("api:projects/:id/name", { params: { id: projectId } });
+    const pageTitle = `${localize("project-title-pre")} ${project.name} ${localize("project-title-post")}`;
+
+    const newData = templateContent
+      .replace(/{{template-title}}/g, pageTitle)
+      .replace(/{{template-description}}/g, localize("projects-description"))
+      .replace(/{{template-lang}}/g, lang.code)
+      .replace(/{{template-canonical}}/g, getProjectURL({ id: projectId }, lang));
+
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.status(200).send(newData);
+  } catch (error) {
+    // @TODO-ZM: log error to loki
+    console.error(error);
+    res.status(404).sendFile(notFoundPath);
+  }
+};

web-server/src/handler/templates.ts

@@ -0,0 +1,4 @@
+import { readFileSync } from "fs";
+import { templatePath } from "src/utils/paths";
+
+export const templateContent = Object.freeze(readFileSync(templatePath, "utf-8"));

web-server/src/utils/languages.ts

@@ -0,0 +1,5 @@
+import { LANGUAGES, DEFAULT_LANGUAGE } from "@dzcode.io/models/dist/language";
+
+export const validateLangOrDefault = (lang: string) => {
+  return LANGUAGES.find((l) => l.code === lang) ?? DEFAULT_LANGUAGE;
+};

web-server/src/utils/paths.ts

@@ -0,0 +1,6 @@
+import { join } from "path";
+
+export const staticPath = join(__dirname, "../../../web/bundle");
+export const indexPath = join(staticPath, "index.html");
+export const templatePath = join(staticPath, "template.html");
+export const notFoundPath = join(staticPath, "404.html");

web/package.json

@@ -62,6 +62,7 @@
   "scripts": {
     "build": "lerna run build:alone --scope=@dzcode.io/web --include-dependencies --stream",
     "build:alone": "tspc",
+    "build:alone:watch": "tspc --watch --preserveWatchOutput",
     "build:watch": "lerna run build:alone:watch --scope=@dzcode.io/web --include-dependencies --parallel",
     "bundle": "npm run build && npm run bundle:alone",
     "bundle:alone": "cross-env NODE_ENV=production rsbuild build",

web/src/utils/project.ts

@@ -1,5 +1,10 @@
+import { DEFAULT_LANGUAGE, Language } from "@dzcode.io/models/dist/language";
 import { ProjectEntity } from "@dzcode.io/models/dist/project";
 
-export function getProjectURL({ id }: Pick<ProjectEntity, "id">): string {
-  return `/projects/${id}`;
+export function getProjectURL({ id }: Pick<ProjectEntity, "id">, lang?: Language): string {
+  if (!lang) return `/projects/${id}`;
+
+  if (lang === DEFAULT_LANGUAGE) return `/projects/${id}`;
+
+  return `/${lang.code}/projects/${id}`;
 }

web/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "@dzcode.io/tooling/tsconfig.json",
   "compilerOptions": {
-    "module": "esnext",
     "outDir": "dist",
     "baseUrl": "."
   },