Merge pull request #247 from datazip-inc/canonical-changes

Akshay-datazip · web-flow · commit 850ff33684b5 · 2025-11-11T12:41:56.000+05:30
Ensure canonical URLs include trailing slash
diff --git a/src/pages/community/contributor-program/index.tsx b/src/pages/community/contributor-program/index.tsx
@@ -25,11 +25,27 @@ import FeatureCard from '../../../components/community/improved/FeatureCard'
 // import StatCard from '../../../components/community/improved/StatCard'
 import SectionLayout from '../../../components/community/SectionLayout'
 
+const stripTrailingSlash = (value?: string) => {
+  if (!value) {
+    return ''
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value
+}
+
+const ensureTrailingSlash = (value: string) => {
+  if (!value) {
+    return '/'
+  }
+
+  return value.endsWith('/') ? value : `${value}/`
+}
+
 const ContributorProgramPage = () => {
   const { siteConfig } = useDocusaurusContext()
   const location = useLocation()
-  const siteUrl = siteConfig?.url || 'https://olake.io'
-  const canonicalUrl = `${siteUrl}${location.pathname}`
+  const siteUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io')
+  const canonicalUrl = ensureTrailingSlash(`${siteUrl}${location.pathname || '/'}`)
 
   const contributionTypes = [
     {
diff --git a/src/pages/community/contributors/index.tsx b/src/pages/community/contributors/index.tsx
@@ -24,11 +24,27 @@ import PageHeader from '../../../components/community/improved/PageHeader'
 import SectionHeader from '../../../components/community/improved/SectionHeader'
 
 import clsx from 'clsx'
+
+const stripTrailingSlash = (value?: string) => {
+  if (!value) {
+    return ''
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value
+}
+
+const ensureTrailingSlash = (value: string) => {
+  if (!value) {
+    return '/'
+  }
+
+  return value.endsWith('/') ? value : `${value}/`
+}
 const ContributorsPage = () => {
   const { siteConfig } = useDocusaurusContext()
   const location = useLocation()
-  const siteUrl = siteConfig?.url || 'https://olake.io'
-  const canonicalUrl = `${siteUrl}${location.pathname}`
+  const siteUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io')
+  const canonicalUrl = ensureTrailingSlash(`${siteUrl}${location.pathname || '/'}`)
   const [contributors, setContributors] = useState<ContributorProps[]>([])
 
 
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
@@ -30,11 +30,27 @@ import LazyComponent from '../../components/LazyComponent'
 import SectionLayout from '../../components/community/SectionLayout'
 import StatCard from '@site/src/components/community/improved/StatCard'
 
+const stripTrailingSlash = (value?: string) => {
+  if (!value) {
+    return ''
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value
+}
+
+const ensureTrailingSlash = (value: string) => {
+  if (!value) {
+    return '/'
+  }
+
+  return value.endsWith('/') ? value : `${value}/`
+}
+
 const CommunityPage = () => {
   const { siteConfig } = useDocusaurusContext()
   const location = useLocation()
-  const siteUrl = siteConfig?.url || 'https://olake.io'
-  const canonicalUrl = `${siteUrl}${location.pathname}`
+  const siteUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io')
+  const canonicalUrl = ensureTrailingSlash(`${siteUrl}${location.pathname || '/'}`)
 
   const communityMeets = [
     {
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -10,11 +10,27 @@ import WorkflowSection from '../components/site/WorkflowSection'
 import Footer from '@theme/DocItem/Footer'
 import LazyComponent from '../components/LazyComponent'
 
+const stripTrailingSlash = (value) => {
+  if (!value) {
+    return ''
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value
+}
+
+const ensureTrailingSlash = (value) => {
+  if (!value) {
+    return '/'
+  }
+
+  return value.endsWith('/') ? value : `${value}/`
+}
+
 export default function New3Page() {
   const { siteConfig } = useDocusaurusContext()
   const location = useLocation()
-  const siteUrl = siteConfig?.url || 'https://olake.io'
-  const canonicalUrl = `${siteUrl}${location.pathname || '/'}`
+  const siteUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io')
+  const canonicalUrl = ensureTrailingSlash(`${siteUrl}${location.pathname || '/'}`)
   const ogTitle = 'Fastest Open Source Data Replication Tool'
   const ogDescription = 'Fastest open-source tool for replicating Databases to Data Lake in Open Table Formats like Apache Iceberg. Efficient, quick and scalable data ingestion for real-time analytics. Supporting Postgres, MongoDB, MySQL, Oracle and Kafka with 5-500x faster than alternatives.'
   const ogImage = 'https://olake.io/img/logo/olake-blue.webp'
diff --git a/src/pages/webinar/index.tsx b/src/pages/webinar/index.tsx
@@ -8,6 +8,22 @@ import LazyComponent from '../../components/LazyComponent'
 import WebinarGrid from '../../components/webinars/WebinarGrid';
 import { FaFileVideo, FaVideo, FaPlay, FaUsers, FaCalendarAlt, FaBroadcastTower } from 'react-icons/fa';
 
+const stripTrailingSlash = (value?: string) => {
+  if (!value) {
+    return '';
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value;
+};
+
+const ensureTrailingSlash = (value: string) => {
+  if (!value) {
+    return '/';
+  }
+
+  return value.endsWith('/') ? value : `${value}/`;
+};
+
 // Custom hook for dynamic iframe height
 const useDynamicIframeHeight = (src) => {
   const [height, setHeight] = useState(200);
@@ -81,8 +97,8 @@ const useDynamicIframeHeight = (src) => {
 const WebinarsPage = () => {
   const { siteConfig } = useDocusaurusContext()
   const location = useLocation()
-  const siteUrl = siteConfig?.url || 'https://olake.io'
-  const canonicalUrl = `${siteUrl}${location.pathname}`
+  const siteUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io')
+  const canonicalUrl = ensureTrailingSlash(`${siteUrl}${location.pathname || '/'}`)
   // Use the dynamic iframe height hook
   const { height: iframeHeight, iframeRef } = useDynamicIframeHeight('https://app.livestorm.co/datazip-inc/upcoming?limit=2');
   
diff --git a/src/theme/BlogPostPage/index.js b/src/theme/BlogPostPage/index.js
@@ -3,6 +3,22 @@ import BlogPostPage from '@theme-original/BlogPostPage';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
+const ensureTrailingSlash = (value) => {
+  if (!value) {
+    return value;
+  }
+
+  return value.endsWith('/') ? value : `${value}/`;
+};
+
+const stripTrailingSlash = (value) => {
+  if (!value) {
+    return value;
+  }
+
+  return value.endsWith('/') ? value.slice(0, -1) : value;
+};
+
 export default function BlogPostPageWrapper(props) {
   const { content: BlogPostContent } = props;
   const { metadata } = BlogPostContent;
@@ -11,17 +27,16 @@ export default function BlogPostPageWrapper(props) {
   // Extract author name and reading time
   const authorName = metadata.authors?.[0]?.name || 'OLake Team';
   const readingTime = metadata.readingTime || '5 minutes';
-  
-  // Strip trailing slashes from permalink for canonical URL
-  const cleanPermalink = metadata.permalink?.replace(/\/$/, '') || metadata.permalink;
-  const canonicalUrl = cleanPermalink ? `${siteConfig.url}${cleanPermalink}` : null;
+
+  const baseUrl = stripTrailingSlash(siteConfig?.url || 'https://olake.io');
+  const permalink = metadata.permalink || '';
+  const canonicalUrl = permalink ? ensureTrailingSlash(`${baseUrl}${permalink}`) : null;
   
   return (
     <>
       <Head>
-        {/* Fix canonical URL to not have trailing slash */}
         {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
-        {cleanPermalink && <meta property="og:url" content={canonicalUrl} />}
+        {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
         
         {/* Enhanced Open Graph for Blog Posts */}
         <meta property="og:image:type" content="image/webp" />
diff --git a/src/theme/DocItem/DocContent.js b/src/theme/DocItem/DocContent.js
@@ -17,6 +17,22 @@ import DocsRating from "./DocsRating";
 import DocBreadcrumbs from "@theme/DocBreadcrumbs";
 import DocsFooter from "../../../docs/shared/DocsFooter.mdx";
 
+const stripTrailingSlash = (value) => {
+  if (!value) {
+    return value;
+  }
+
+  return value.endsWith("/") ? value.slice(0, -1) : value;
+};
+
+const ensureTrailingSlash = (value) => {
+  if (!value) {
+    return value;
+  }
+
+  return value.endsWith("/") ? value : `${value}/`;
+};
+
 export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
   const { siteConfig } = useDocusaurusContext();
   const { pluginId } = useActivePlugin({ failfast: true });
@@ -31,7 +47,7 @@ export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
     toc,
   } = useDoc();
 
-  const { url: siteUrl } = siteConfig;
+  const baseUrl = stripTrailingSlash(siteConfig?.url || "https://olake.io");
   const versionMetadata = useDocsVersion();
   const { description, title, permalink, editUrl, lastUpdatedAt, lastUpdatedBy, unversionedId } =
     metadata;
@@ -44,9 +60,8 @@ export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
     absolute: true,
   });
 
-  // Strip trailing slashes from permalink for canonical URL
-  const cleanPermalink = permalink?.replace(/\/$/, '') || permalink;
-  const canonicalUrl = cleanPermalink ? siteUrl + cleanPermalink : null;
+  const canonicalPath = ensureTrailingSlash(permalink);
+  const canonicalUrl = canonicalPath ? `${baseUrl}${canonicalPath}` : null;
 
   return (
     <>
@@ -60,7 +75,7 @@ export const DocContent = ({ Content, contentRef, readingTimeInWords }) => {
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
         {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && <meta name="twitter:image:alt" content={`Image for ${title}`} />}
-        {cleanPermalink && <meta property="og:url" content={canonicalUrl} />}
+        {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
         <meta property="og:site_name" content="OLake" />
         <meta property="og:locale" content="en_US" />
         {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
