fleek-platform · tobySolutions · Oct 16, 2024 · Sep 13, 2024 · Sep 16, 2024 · Sep 16, 2024
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}/`;
+}