Merge pull request #631 from dzcode-io/fix/canonical-url

Author: ZibanPirate

web/cloudflare/handler/contribution.ts

@@ -56,7 +56,8 @@ export const handleContributionRequest: PagesFunction<Env> = async (context) =>
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("contribute-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {

web/cloudflare/handler/contributor.ts

@@ -55,7 +55,8 @@ export const handleContributorRequest: PagesFunction<Env> = async (context) => {
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("team-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {

web/cloudflare/handler/project.ts

@@ -53,7 +53,8 @@ export const handleProjectRequest: PagesFunction<Env> = async (context) => {
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("projects-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {

web/src/_build/gen-multiple-htmls.ts

@@ -7,13 +7,15 @@ import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { allPages } from "./pages";
 import { Environment, environments } from "@dzcode.io/utils/dist/config/environment";
 import { SENTRY_ORIGIN } from "../../src/utils/sentry-origin";
+import { fsConfig } from "@dzcode.io/utils/dist/config";
 
 let stage = process.env.STAGE as Environment;
 if (!environments.includes(stage)) {
   console.log(`⚠️  No STAGE provided, falling back to "development"`);
   stage = "development";
 }
 
+const config = fsConfig(stage);
 const distFolder = "./bundle";
 
 const indexHtmlPath = join(distFolder, "index.html");
@@ -56,6 +58,10 @@ allPages.forEach((pageInfo) => {
   newHtml = newHtml.replace(/{{keywords}}/g, pageInfo.keywords);
   newHtml = newHtml.replace(/{{title}}/g, pageInfo.title);
   newHtml = newHtml.replace(/{{description}}/g, pageInfo.description);
+  newHtml = newHtml.replace(
+    /{{canonical}}/g,
+    pageInfo.canonicalUrl || `${config.web.url}${pageInfo.uri}`,
+  );
   newHtml = newHtml.replace(/{{ogImage}}/g, pageInfo.ogImage);
   newHtml = newHtml.replace(/{{sentryOrigin}}/g, `https://${SENTRY_ORIGIN}`);
 

web/src/_build/pages/index.ts

@@ -6,6 +6,7 @@ import { templatePages } from "./template-pages";
 
 export interface PageInfo {
   uri: string;
+  canonicalUrl?: string;
   title: string;
   description: string;
   ogImage: string;

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

@@ -9,5 +9,6 @@ export const templatePages: PageInfo[] = [
       "https://images.unsplash.com/photo-1527285341945-715b98b98ea2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&h=627&q=80",
     keywords: "open-source, algeria, dzcode",
     lang: "{{template-lang}}" as unknown as PageInfo["lang"],
+    canonicalUrl: "{{template-canonical}}",
   },
 ];

web/src/_entry/index.html

@@ -16,6 +16,9 @@
     <title>{{title}}</title>
     <meta name="description" content="{{description}}" />
 
+    <!-- SEO -->
+    <link rel="canonical" href="{{canonical}}" />
+
     <!-- Facebook Meta Tags -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{title}}" />

web/src/pages/contribute/contribution/index.tsx

@@ -41,7 +41,6 @@ export default function Page(): JSX.Element {
             {localize("contribution-title-post")}
           </title>
           <meta name="description" content={localize("contribute-description")} />
-          {/* @TODO-ZM: add canonical url on all pages */}
           <link rel="canonical" href={getContributionURL(contribution)} />
         </Helmet>
       ) : null}

web/src/pages/contribute/index.tsx

@@ -18,7 +18,6 @@ export default function Page(): JSX.Element {
     dispatch(fetchContributionsListAction());
   }, [dispatch]);
 
-  // @TODO-ZM: add filters and search
   return (
     <main className="flex flex-col self-center">
       <Helmet>

web/src/pages/projects/project/index.tsx

@@ -49,7 +49,6 @@ export default function Page(): JSX.Element {
             {localize("project-title-pre")} {project.name} {localize("project-title-post")}
           </title>
           <meta name="description" content={localize("projects-description")} />
-          {/* @TODO-ZM: add canonical url on all pages */}
           <link rel="canonical" href={getProjectURL(project)} />
         </Helmet>
       ) : null}

web/src/utils/contribution.ts

@@ -4,6 +4,5 @@ export function getContributionURL({
   id,
   title,
 }: Pick<ContributionEntity, "id" | "title">): string {
-  // @TODO-ZM: use slug instead
   return `/contribute/${title.replace(/\s/g, "-")}-${id}`;
 }