feat: add canonical link setup (#266)

## Why? This pull request automates the addition of the canonical meta tag to every page within the website using the `<link/>` tag. ## How? - For the docs pages, make sure the slugs passed down to the layout code to ensure appropriation of the URLs. - Used the custom function ` generateCanonicalUrl(baseUrl: string, slug?: string)` to handle canonical URLs for the base layouts ## Tickets? - [Self-referencing Canonical tags](https://linear.app/fleekxyz/issue/MKTG-234/self-referencing-canonical-tags) ## Contribution checklist? - [x] The commit messages are detailed - [x] The `build` command runs locally - [x] Assets or static content are linked and stored in the project - [x] Document filename is named after the slug - [x] You've reviewed spelling using a grammar checker - [x] For documentation, guides or references, you've tested the commands and steps - [x] You've done enough research before writing ## Security checklist? - [x] Sensitive data has been identified and is being protected properly - [x] Injection has been prevented (parameterized queries, no eval or system calls) - [x] The Components are escaping output (to prevent XSS) --------- Co-authored-by: Helder Oliveira <[email protected]>
fleek-platform · Oct 16, 2024 · eb1205e · eb1205e
1 parent e0c7cd1
commit eb1205e
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 2 deletions.
diff --git a/src/layouts/BaseHtml.astro b/src/layouts/BaseHtml.astro
@@ -9,6 +9,7 @@ import { Announcement } from '@components/Announcement';
 import Footer from '@components/Footer';
 import { Navbar } from '@components/Navbar';
 import SupportMenu from '@components/Support/SupportMenu';
+import { generateCanonicalUrl } from '@utils/generateCanonicalUrl';
 
 interface Props {
   title: string;
@@ -23,6 +24,9 @@ interface Props {
 const { ogMeta } = Astro.props;
 const baseUrl = getSiteUrl();
 const hasSecondaryMenu = hasSecondaryMenuItem(Astro.url.pathname);
+
+const contentSlug = ogMeta?.slug || Astro.url.pathname;
+const canonicalUrl = generateCanonicalUrl(contentSlug);
 ---
 
 <!doctype html>
@@ -31,6 +35,7 @@ const hasSecondaryMenu = hasSecondaryMenuItem(Astro.url.pathname);
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="canonical" href={`${canonicalUrl}`} />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link
       rel="preload"

diff --git a/src/layouts/DocPage.astro b/src/layouts/DocPage.astro
@@ -27,12 +27,15 @@ import { Announcement } from '@components/Announcement';
 type Props = {
   title: string;
   description: string;
+  pageSlug: string;
   headings: MarkdownHeading[];
   prevItem: DocsLink | null;
   nextItem: DocsLink | null;
 };
 
-const { title, description, headings, prevItem, nextItem } = Astro.props;
+const { title, description, headings, prevItem, nextItem, pageSlug } =
+  Astro.props;
+
 const {
   collection,
   id,
@@ -76,9 +79,11 @@ const indexNameDocs = import.meta.env.PUBLIC_MEILISEARCH_INDEX_DOCS;
 // TODO: Fails after prod build
 const isHome = Astro.url.pathname === '/docs';
 
+const isDocsHomepage = data.slug === 'index' && pageSlug === 'index';
+
 const slug = generateFullSlug({
   basePath: settings.site.metadata.docs.slug,
-  slug: data.slug === 'index' ? '' : data.slug,
+  slug: isDocsHomepage ? '' : pageSlug,
 });
 
 const image = settings.site.metadata.docs.image;

diff --git a/src/layouts/DocsHtml.astro b/src/layouts/DocsHtml.astro
@@ -5,6 +5,7 @@ import settings from '@base/settings.json';
 import { Toaster } from 'react-hot-toast';
 import { Navbar } from '@components/Navbar';
 import PostHog from '@components/PostHog.astro';
+import { generateCanonicalUrl } from '@utils/generateCanonicalUrl';
 
 interface Props {
   title: string;
@@ -18,6 +19,8 @@ interface Props {
 
 const { ogMeta } = Astro.props;
 const baseUrl = getSiteUrl();
+const docsPageSlug = ogMeta?.slug || Astro.url.pathname;
+const canonicalUrl = generateCanonicalUrl(docsPageSlug);
 ---
 
 <!doctype html>
@@ -27,6 +30,7 @@ const baseUrl = getSiteUrl();
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="canonical" href={`${canonicalUrl}`} />
     <link
       rel="preload"
       href="/fonts/atyp/AtypDisplay-Regular.woff2"

diff --git a/src/layouts/LandingPageHtml.astro b/src/layouts/LandingPageHtml.astro
@@ -3,7 +3,10 @@ import '@styles/globals.css';
 import { getSiteUrl } from '@utils/url';
 import settings from '@base/settings.json';
 import PostHog from '@components/PostHog.astro';
+import { generateCanonicalUrl } from '@utils/generateCanonicalUrl';
+
 const baseUrl = getSiteUrl();
+const canonicalUrl = generateCanonicalUrl();
 ---
 
 <!doctype html>
@@ -14,6 +17,7 @@ const baseUrl = getSiteUrl();
       name="viewport"
       content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover"
     />
+    <link rel="canonical" href={`${canonicalUrl}`} />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link

diff --git a/src/pages/docs/[...slug].astro b/src/pages/docs/[...slug].astro
@@ -67,6 +67,7 @@ export async function getStaticPaths() {
 const { entry, prevItem, nextItem, currentCategory } = Astro.props;
 const { Content, headings } = await entry.render();
 const title = handlePageTitle('Docs');
+const pageSlug = entry.slug;
 
 function handlePageTitle(collection: string) {
   if (entry.data.title && currentCategory !== 'root') {
@@ -81,6 +82,7 @@ function handlePageTitle(collection: string) {
 <DocPageLayout
   title={title}
   description={entry.data.desc || ''}
+  pageSlug={pageSlug}
   headings={headings}
   prevItem={prevItem}
   nextItem={nextItem}

diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
@@ -22,13 +22,15 @@ const { Content, headings } = await entry.render();
 
 const title = entry.data.title || settings.site.metadata.docs.title;
 const description = entry.data.desc || settings.site.metadata.docs.description;
+const pageSlug = entry.slug;
 ---
 
 <Layout
   title={title}
   description={description}
   headings={headings}
   prevItem={null}
+  pageSlug={pageSlug}
   nextItem={nextItem}
 >
   <Content />

diff --git a/src/utils/generateCanonicalUrl.ts b/src/utils/generateCanonicalUrl.ts
@@ -0,0 +1,15 @@
+import { getSiteUrl } from './url';
+
+const BASE_URL = getSiteUrl();
+
+export function generateCanonicalUrl(slug?: string) {
+  if (!slug) return `${BASE_URL}/`;
+
+  const sanitizedSlug = slug
+    .trim()
+    .split('/')
+    .filter((item) => item)
+    .join('/');
+
+  return `${BASE_URL}/${sanitizedSlug}/`;
+}