From 52d00a06545d590e0cb94099b002186e0df2f367 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 6 Jan 2023 22:08:49 +0400
Subject: [PATCH] Add canonicals and fix og:url on all pages

---
 src/layouts/BaseLayout.astro       |  8 +++++++-
 src/pages/404.astro                |  2 +-
 src/pages/[...topicId].astro       | 18 +++++++++++++-----
 src/pages/[roadmapId]/index.astro  |  1 +
 src/pages/[roadmapId]/topics.astro | 11 ++++++++---
 src/pages/about.astro              |  2 +-
 src/pages/guides/[guideId].astro   |  6 +++++-
 src/pages/guides/index.astro       |  6 +++++-
 src/pages/index.astro              |  2 +-
 src/pages/pdfs.md                  |  1 +
 src/pages/privacy.md               |  1 +
 src/pages/roadmaps.astro           | 16 ++++++++++------
 src/pages/signup.astro             |  1 +
 src/pages/terms.md                 |  1 +
 src/pages/videos/[videoId].astro   |  1 +
 src/pages/videos/index.astro       |  1 +
 16 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index f73f7520e..5b949b964 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -14,6 +14,7 @@ export interface Props {
   description?: string;
   keywords?: string[];
   noIndex?: boolean;
+  permalink?: string;
   sponsor?: SponsorType;
 }
 
@@ -22,8 +23,11 @@ const {
   description = siteConfig.description,
   keywords = siteConfig.keywords,
   noIndex = false,
+  permalink = '',
   sponsor,
 } = Astro.props;
+
+const currentPageAbsoluteUrl = `https://roadmap.sh${permalink}`;
 ---
 
 <!DOCTYPE html>
@@ -53,7 +57,9 @@ const {
     <meta property='og:title' content={title} />
     <meta property='og:description' content={description} />
     <meta property='og:type' content='website' />
-    <meta property='og:url' content='https://roadmap.sh' />
+    <meta property='og:url' content={currentPageAbsoluteUrl} />
+
+    <link rel='canonical' href={currentPageAbsoluteUrl} />
 
     <meta name='mobile-web-app-capable' content='yes' />
     <meta name='apple-mobile-web-app-capable' content='yes' />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index f6aff49a7..9737ece96 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -3,7 +3,7 @@ import Icon from '../components/Icon.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
-<BaseLayout title='Page not found'>
+<BaseLayout title='Page not found' permalink={'/404/'}>
   <div class='bg-gray-100'>
     <div
       class='py-10 md:py-32 container flex flex-col md:flex-row items-center justify-center gap-7 '
diff --git a/src/pages/[...topicId].astro b/src/pages/[...topicId].astro
index be29f46ea..3294b0dea 100644
--- a/src/pages/[...topicId].astro
+++ b/src/pages/[...topicId].astro
@@ -15,16 +15,24 @@ export async function getStaticPaths() {
 }
 
 const { topicId } = Astro.params;
-const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as TopicFileType;
+const { file, breadcrumbs, roadmapId, roadmap, heading } =
+  Astro.props as TopicFileType;
 ---
 
-<BaseLayout title={`${heading} - roadmap.sh`} description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`} noIndex={true}>
+<BaseLayout
+  title={`${heading} - roadmap.sh`}
+  description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`}
+  noIndex={true}
+  permalink={`/${topicId}/`}
+>
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
-  <div class="bg-gray-50">
+  <div class='bg-gray-50'>
     <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />
 
-    <div class="container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0">
-      <main id="main-content">
+    <div
+      class='container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'
+    >
+      <main id='main-content'>
         <file.Content />
       </main>
     </div>
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index 3089867f6..bc46cfc62 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -25,6 +25,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 ---
 
 <BaseLayout
+  permalink={`/${roadmapId}/`}
   title={roadmapData?.seo?.title}
   description={roadmapData.seo.description}
   keywords={roadmapData.seo.keywords}
diff --git a/src/pages/[roadmapId]/topics.astro b/src/pages/[roadmapId]/topics.astro
index 1c347b298..c2a903c84 100644
--- a/src/pages/[roadmapId]/topics.astro
+++ b/src/pages/[roadmapId]/topics.astro
@@ -22,7 +22,12 @@ const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
 const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 ---
 
-<BaseLayout title={`${roadmapData.title} Topics`} description={roadmapData.seo.description} keywords={roadmapData.seo.keywords}>
+<BaseLayout
+  title={`${roadmapData.title} Topics`}
+  description={roadmapData.seo.description}
+  keywords={roadmapData.seo.keywords}
+  permalink={`/${roadmapId}/topics/`}
+>
   <RoadmapHeader
     description={roadmapData.description}
     title={`${roadmapData.featuredTitle} Topics`}
@@ -31,8 +36,8 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
     hasTopics={false}
   />
 
-  <div class="bg-gray-50 pt-5 pb-8 sm:pt-10 sm:pb-16">
-    <div class="container">
+  <div class='bg-gray-50 pt-5 pb-8 sm:pt-10 sm:pb-16'>
+    <div class='container'>
       {
         topics.map((topic) => {
           // Breadcrumbs have three additional items e.g.
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 366fa1230..d9f005ca8 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -2,7 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
-<BaseLayout title='About roadmap.sh'>
+<BaseLayout title='About roadmap.sh' permalink={'/about/'}>
   <div class='bg-white border-b pt-7 pb-7 sm:pt-12 sm:pb-10'>
     <div class='container'>
       <div class='flex items-center'>
diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro
index 086fe9430..7dcc7aab5 100644
--- a/src/pages/guides/[guideId].astro
+++ b/src/pages/guides/[guideId].astro
@@ -22,7 +22,11 @@ const { guide } = Astro.props;
 const { frontmatter: guideData } = guide;
 ---
 
-<BaseLayout title={guideData.seo.title} description={guideData.seo.description}>
+<BaseLayout
+  title={guideData.seo.title}
+  description={guideData.seo.description}
+  permalink={`/guides/${guideId}/`}
+>
   <GuideHeader guide={guide} />
 
   <div class='bg-gray-50 py-5 sm:py-10'>
diff --git a/src/pages/guides/index.astro b/src/pages/guides/index.astro
index 2e009d0c7..3d3ea5d5d 100644
--- a/src/pages/guides/index.astro
+++ b/src/pages/guides/index.astro
@@ -7,7 +7,11 @@ import { getAllGuides } from '../../lib/guide';
 const guides = await getAllGuides();
 ---
 
-<BaseLayout title='Guides - roadmap.sh' description={'Detailed guides on Software Engineering Topics'}>
+<BaseLayout
+  title='Guides - roadmap.sh'
+  description={'Detailed guides on Software Engineering Topics'}
+  permalink={`/guides/`}
+>
   <SimplePageHeader
     title='Guides'
     description='Succinct graphical explanations to engineering topics.'
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d73f75398..b0ed18469 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,7 +13,7 @@ const guides = await getAllGuides();
 const videos = await getAllVideos();
 ---
 
-<BaseLayout title='Developer Roadmaps' description={"Community driven roadmaps, articles and guides for developers to grow in their career."}>
+<BaseLayout title='Developer Roadmaps' description={"Community driven roadmaps, articles and guides for developers to grow in their career."} permalink={'/'}>
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-slate-900'>
       <div
diff --git a/src/pages/pdfs.md b/src/pages/pdfs.md
index ada5ef029..5b7d612fc 100644
--- a/src/pages/pdfs.md
+++ b/src/pages/pdfs.md
@@ -15,6 +15,7 @@ Here is the list of PDF links for each of the roadmaps.
 * **QA Roadmap** - [Roadmap Link](https://roadmap.sh/qa) / [PDF Link](https://roadmap.sh/pdfs/qa.pdf)
 * **ASP.NET Core Roadmap** - [Roadmap Link](https://roadmap.sh/aspnet-core) / [PDF Link](https://roadmap.sh/pdfs/aspnet-core.pdf)
 * **Flutter Roadmap** - [Roadmap Link](https://roadmap.sh/flutter) / [PDF Link](https://roadmap.sh/pdfs/flutter.pdf)
+* **Go Roadmap** - [Roadmap Link](https://roadmap.sh/golang) / [PDF Link](https://roadmap.sh/pdfs/golang.pdf)
 * **Software Architect Roadmap** - [Roadmap Link](https://roadmap.sh/software-architect) / [PDF Link](https://roadmap.sh/pdfs/software-architect.pdf)
 * **Software Design and Architecture Roadmap** - [Roadmap Link](https://roadmap.sh/software-design-architecture) / [PDF Link](https://roadmap.sh/pdfs/software-design-architecture.pdf)
 * **JavaScript Roadmap** - [Roadmap Link](https://roadmap.sh/javascript) / [PDF Link](https://roadmap.sh/pdfs/javascript.pdf)
diff --git a/src/pages/privacy.md b/src/pages/privacy.md
index d7f45417e..7389a5648 100644
--- a/src/pages/privacy.md
+++ b/src/pages/privacy.md
@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/MarkdownLayout.astro
 title: Privacy Policy - roadmap.sh
+noIndex: true
 ---
 
 # Privacy Policy
diff --git a/src/pages/roadmaps.astro b/src/pages/roadmaps.astro
index 53b24d18b..9b0b0bf56 100644
--- a/src/pages/roadmaps.astro
+++ b/src/pages/roadmaps.astro
@@ -8,16 +8,20 @@ const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
 const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
 ---
 
-<BaseLayout title="Developer Roadmaps" description={"Step by step guides and paths to learn different tools or technologies"}>
+<BaseLayout
+  title='Developer Roadmaps'
+  description={'Step by step guides and paths to learn different tools or technologies'}
+  permalink={'/roadmaps/'}
+>
   <SimplePageHeader
-    title="Developer Roadmaps"
-    description="Step by step guides and paths to learn different tools or technologies"
+    title='Developer Roadmaps'
+    description='Step by step guides and paths to learn different tools or technologies'
     showYouTubeAlert={true}
   />
 
-  <div class="bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16">
-    <div class="container">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3">
+  <div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
+    <div class='container'>
+      <div class='grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3'>
         {
           roleRoadmaps.map((roleRoadmap) => (
             <GridRoadmapItem roadmap={roleRoadmap} />
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index de583132e..30e0645b1 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -7,6 +7,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 <BaseLayout
   title='Signup - roadmap.sh'
   description='Register yourself to receive occasional emails about new roadmaps, updates, guides and videos'
+  permalink={'/signup/'}
 >
   <div class='container'>
     <div
diff --git a/src/pages/terms.md b/src/pages/terms.md
index 830191f9d..58a02c6b8 100644
--- a/src/pages/terms.md
+++ b/src/pages/terms.md
@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/MarkdownLayout.astro
 title: Terms and Conditions - roadmap.sh
+noIndex: true
 ---
 
 # Terms of Service
diff --git a/src/pages/videos/[videoId].astro b/src/pages/videos/[videoId].astro
index 91b099a76..77dfeb203 100644
--- a/src/pages/videos/[videoId].astro
+++ b/src/pages/videos/[videoId].astro
@@ -24,6 +24,7 @@ const { video } = Astro.props;
 <BaseLayout
   title={video.frontmatter.title}
   description={video.frontmatter.description}
+  permalink={`/videos/${videoId}/`}
 >
   <VideoHeader video={video} />
 
diff --git a/src/pages/videos/index.astro b/src/pages/videos/index.astro
index eb459c7cb..2ceed40b6 100644
--- a/src/pages/videos/index.astro
+++ b/src/pages/videos/index.astro
@@ -10,6 +10,7 @@ const videos = await getAllVideos();
 <BaseLayout
   title='Illustrated Videos - roadmap.sh'
   description={'Graphical video demonstrations on software engineering topics.'}
+  permalink={`/videos/`}
 >
   <SimplePageHeader
     title='Videos'