feat: add contribution and contributor page rendering logic

Author: ZibanPirate

web-server/src/app/index.ts

@@ -1,4 +1,6 @@
 import express from "express";
+import { renderContributionPage } from "src/handler/contribution";
+import { renderContributorPage } from "src/handler/contributor";
 import { renderProjectPage } from "src/handler/project";
 import { generateContributionsSitemap } from "src/handler/sitemap/contributions";
 import { generateContributorsSitemap } from "src/handler/sitemap/contributors";
@@ -35,23 +37,17 @@ app.get(/^\/(?:([a-z]{2})\/)?projects\/(.*)$/, (req, res) => {
 });
 
 app.get(/^\/(?:([a-z]{2})\/)?contribute\/(.*)$/, (req, res) => {
-  const lang = req.params[0] || "en";
-  const contributionId = req.params[1];
+  const lang = validateLangOrDefault(req.params[0]);
+  const contributionId = req.params[1].split("-").slice(-2).join("-");
 
-  res.json({
-    lang,
-    contributionId,
-  });
+  renderContributionPage(res, lang, contributionId);
 });
 
 app.get(/^\/(?:([a-z]{2})\/)?team\/(.*)$/, (req, res) => {
-  const lang = req.params[0] || "en";
+  const lang = validateLangOrDefault(req.params[0]);
   const contributorId = req.params[1];
 
-  res.json({
-    lang,
-    teamId: contributorId,
-  });
+  renderContributorPage(res, lang, contributorId);
 });
 
 app.use(express.static(staticPath));

web-server/src/handler/contribution.ts

@@ -0,0 +1,43 @@
+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 { getContributionURL } from "@dzcode.io/web/dist/utils/contribution";
+import { templateContent } from "./templates";
+import { notFoundPath } from "src/utils/paths";
+
+export const renderContributionPage = async (
+  res: Response,
+  lang: Language,
+  contributionId: string,
+) => {
+  const localize = (key: AllDictionaryKeys) =>
+    plainLocalize(dictionary, lang.code, key, "NO-TRANSLATION");
+  const fetchV2 = fetchV2Factory<Endpoints>(fullstackConfig, lang.code);
+
+  try {
+    const { contribution } = await fetchV2("api:contributions/:id/title", {
+      params: { id: contributionId },
+    });
+    const pageTitle = `${localize("contribution-title-pre")} ${contribution.title} ${localize("contribution-title-post")}`;
+
+    const newData = templateContent
+      .replace(/{{template-title}}/g, pageTitle)
+      .replace(/{{template-description}}/g, localize("contribute-description"))
+      .replace(/{{template-lang}}/g, lang.code)
+      .replace(
+        /{{template-canonical}}/g,
+        getContributionURL({ id: contributionId, title: contribution.title }, 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/contributor.ts

@@ -0,0 +1,40 @@
+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 { getContributorURL } from "@dzcode.io/web/dist/utils/contributor";
+import { templateContent } from "./templates";
+import { notFoundPath } from "src/utils/paths";
+
+export const renderContributorPage = async (
+  res: Response,
+  lang: Language,
+  contributorId: string,
+) => {
+  const localize = (key: AllDictionaryKeys) =>
+    plainLocalize(dictionary, lang.code, key, "NO-TRANSLATION");
+  const fetchV2 = fetchV2Factory<Endpoints>(fullstackConfig, lang.code);
+
+  try {
+    const { contributor } = await fetchV2("api:contributors/:id/name", {
+      params: { id: contributorId },
+    });
+    const pageTitle = `${localize("contributor-title-pre")} ${contributor.name} ${localize("contributor-title-post")}`;
+
+    const newData = templateContent
+      .replace(/{{template-title}}/g, pageTitle)
+      .replace(/{{template-description}}/g, localize("team-description"))
+      .replace(/{{template-lang}}/g, lang.code)
+      .replace(/{{template-canonical}}/g, getContributorURL({ id: contributorId }, 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/src/utils/contribution.ts

@@ -1,8 +1,16 @@
 import { ContributionNoLang } from "@dzcode.io/models/dist/contribution";
+import { DEFAULT_LANGUAGE, Language } from "@dzcode.io/models/dist/language";
 
-export function getContributionURL({
-  id,
-  title,
-}: Pick<ContributionNoLang, "id" | "title">): string {
-  return `/contribute/${title.replace(/\s/g, "-")}-${id}`;
+export function getContributionURL(
+  { id, title }: Pick<ContributionNoLang, "id" | "title">,
+  lang?: Language,
+): string {
+  const escapedTitle = encodeURIComponent(title);
+  const restOfUrl = `${escapedTitle}-${id}`;
+
+  if (!lang) return `/contribute/${restOfUrl}`;
+
+  if (lang === DEFAULT_LANGUAGE) return `/contribute/${restOfUrl}`;
+
+  return `/${lang.code}/contribute/${restOfUrl}`;
 }

web/src/utils/contributor.ts

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