SEO for contributor page

Author: ZibanPirate

api/src/app/endpoints.ts

@@ -1,5 +1,9 @@
 import { GetContributionsResponse } from "src/contribution/types";
-import { GetContributorResponse, GetContributorsResponse } from "src/contributor/types";
+import {
+  GetContributorNameResponse,
+  GetContributorResponse,
+  GetContributorsResponse,
+} from "src/contributor/types";
 import { GetMilestonesResponse } from "src/milestone/types";
 import {
   GetProjectNameResponse,
@@ -35,6 +39,10 @@ export interface Endpoints {
     response: GetContributorResponse;
     params: { id: string };
   };
+  "api:contributors/:id/name": {
+    response: GetContributorNameResponse;
+    params: { id: string };
+  };
   "api:MileStones/dzcode": {
     response: GetMilestonesResponse;
   };

api/src/contributor/controller.ts

@@ -2,7 +2,11 @@ import { Controller, Get, NotFoundError, Param } from "routing-controllers";
 import { Service } from "typedi";
 
 import { ContributorRepository } from "./repository";
-import { GetContributorResponse, GetContributorsResponse } from "./types";
+import {
+  GetContributorNameResponse,
+  GetContributorResponse,
+  GetContributorsResponse,
+} from "./types";
 import { ProjectRepository } from "src/project/repository";
 import { ContributionRepository } from "src/contribution/repository";
 
@@ -42,4 +46,15 @@ export class ContributorController {
       },
     };
   }
+
+  @Get("/:id/name")
+  public async getContributorName(@Param("id") id: string): Promise<GetContributorNameResponse> {
+    const contributor = await this.contributorRepository.findName(id);
+
+    if (!contributor) throw new NotFoundError("Contributor not found");
+
+    return {
+      contributor,
+    };
+  }
 }

api/src/contributor/repository.ts

@@ -16,6 +16,28 @@ import {
 export class ContributorRepository {
   constructor(private readonly postgresService: PostgresService) {}
 
+  public async findName(contributorId: string) {
+    const statement = sql`
+    SELECT
+      ${contributorsTable.id},
+      ${contributorsTable.name}
+    FROM
+      ${contributorsTable}
+    WHERE
+      ${contributorsTable.id} = ${contributorId}
+    `;
+
+    const raw = await this.postgresService.db.execute(statement);
+    const entries = Array.from(raw);
+    const entry = entries[0];
+
+    if (!entry) return null;
+
+    const unStringifiedRaw = unStringifyDeep(entry);
+    const camelCased = camelCaseObject(unStringifiedRaw);
+    return camelCased;
+  }
+
   public async findForProject(projectId: string) {
     const statement = sql`
     SELECT

api/src/contributor/types.ts

@@ -29,3 +29,7 @@ export interface GetContributorResponse extends GeneralResponse {
     contributions: Array<Pick<ContributionEntity, "id" | "title" | "type">>;
   };
 }
+
+export interface GetContributorNameResponse extends GeneralResponse {
+  contributor: Pick<ContributorEntity, "name">;
+}

web/cloudflare/functions/ar/team/[slug].ts

@@ -0,0 +1,3 @@
+import { Env, handleContributorRequest } from "handler/contributor";
+
+export const onRequest: PagesFunction<Env> = handleContributorRequest;

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

@@ -0,0 +1,3 @@
+import { Env, handleContributorRequest } from "handler/contributor";
+
+export const onRequest: PagesFunction<Env> = handleContributorRequest;

web/cloudflare/handler/contributor.ts

@@ -0,0 +1,70 @@
+declare const htmlTemplate: string; // @ts-expect-error cloudflare converts this to a string using esbuild
+import htmlTemplate from "../public/template.html";
+declare const notFoundEn: string; // @ts-expect-error cloudflare converts this to a string using esbuild
+import notFoundEn from "../public/404.html";
+declare const notFoundAr: string; // @ts-expect-error cloudflare converts this to a string using esbuild
+import notFoundAr from "../public/ar/404.html";
+
+import { Environment, environments } from "@dzcode.io/utils/dist/config/environment";
+import { fsConfig } from "@dzcode.io/utils/dist/config";
+import { plainLocalize } from "@dzcode.io/web/dist/components/locale/utils";
+import { dictionary, AllDictionaryKeys } from "@dzcode.io/web/dist/components/locale/dictionary";
+import { LanguageEntity } from "@dzcode.io/models/dist/language";
+import { fetchV2Factory } from "@dzcode.io/utils/dist/fetch/factory";
+import { Endpoints } from "@dzcode.io/api/dist/app/endpoints";
+
+export interface Env {
+  STAGE: Environment;
+}
+
+export const handleContributorRequest: PagesFunction<Env> = async (context) => {
+  let stage = context.env.STAGE;
+  if (!environments.includes(stage)) {
+    console.log(`⚠️  No STAGE provided, falling back to "development"`);
+    stage = "development";
+  }
+
+  const pathName = new URL(context.request.url).pathname;
+
+  const languageRegex = /^\/(ar|en)\//i;
+  const language = (pathName?.match(languageRegex)?.[1]?.toLowerCase() ||
+    "en") as LanguageEntity["code"];
+  const notFound = language === "ar" ? notFoundAr : notFoundEn;
+
+  const contributorIdRegex = /team\/(.*)/;
+  const contributorId = pathName?.match(contributorIdRegex)?.[1];
+
+  if (!contributorId)
+    return new Response(notFound, {
+      headers: { "content-type": "text/html; charset=utf-8" },
+      status: 404,
+    });
+
+  const localize = (key: AllDictionaryKeys) =>
+    plainLocalize(dictionary, language, key, "NO-TRANSLATION");
+
+  const fullstackConfig = fsConfig(stage);
+  const fetchV2 = fetchV2Factory<Endpoints>(fullstackConfig);
+
+  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 = htmlTemplate
+      .replace(/{{template-title}}/g, pageTitle)
+      .replace(/{{template-description}}/g, localize("team-description"))
+      .replace(/{{template-lang}}/g, language);
+
+    return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
+  } catch (error) {
+    // @TODO-ZM: log error to sentry
+    console.error(error);
+
+    return new Response(notFound, {
+      headers: { "content-type": "text/html; charset=utf-8" },
+      status: 404,
+    });
+  }
+};

web/cloudflare/package.json

@@ -17,7 +17,7 @@
     "build": "lerna run build:alone [email protected]/web --include-dependencies --stream",
     "deploy:prd": "npm run generate:config -- production && wrangler pages deploy --branch main",
     "deploy:stg": "npm run generate:config -- staging && wrangler pages deploy --branch main",
-    "dev": "npm run build && wrangler pages dev . --port 8080",
+    "dev": "npm run build && wrangler pages dev . --port 8081",
     "dev:prepare": "npm run build && cd .. && npm run bundle && npm run pre-deploy",
     "generate:config": "npx tsx scripts/generate-config.ts",
     "lint:eslint": "eslint --config ../../packages/tooling/eslint.config.mjs",