NEW: Add canonical link for v3

src/components/Layout.tsx

@@ -2,6 +2,7 @@ import React, { StatelessComponent, useState, ReactNode } from "react";
 import Header from './Header';
 import Sidebar from './Sidebar';
 import useHierarchy from '../hooks/useHierarchy';
+import Helmet from 'react-helmet';
 
 interface LayoutProps {
   children?: ReactNode
@@ -10,14 +11,26 @@ interface LayoutProps {
   }
 }
 const Layout: StatelessComponent<LayoutProps> = ({ children, pageContext: { slug } }) => {
-  const { setCurrentPath } = useHierarchy();
+  const { setCurrentPath, getVersionPath, getCurrentVersion, getCurrentNode } = useHierarchy();
   const [isToggled, setSidebarOpen] = useState(false);
   const handleNavigate = () => setSidebarOpen(false);
   
   setCurrentPath(slug);
+  const ver = getCurrentVersion();
+  const currentNode = getCurrentNode();
 
   return (
     <>
+    {currentNode && ver !== '4' && (
+      <Helmet
+        link={[
+          {
+            rel: 'canonical',
+            href: getVersionPath(currentNode, '4'),
+          }
+        ]}
+       />
+    )}
     <Header handleSidebarToggle={() => setSidebarOpen(!isToggled)} />
     <div className={`docs-wrapper container ${isToggled ? 'sidebar-visible' : ''}`}>
     <Sidebar onNavigate={handleNavigate} isOpen={isToggled} />

src/components/NodeProvider.tsx

@@ -12,6 +12,7 @@ import {
     getParent,
     getSiblings,
     initialise,
+    getVersionPath,
     setCurrentPath,
 } from '../utils/nodes';
 
@@ -56,6 +57,7 @@ const NodeProvider: StatelessComponent<{}> = ({ children, pageContext: { slug }
             getNodes,
             getParent,
             getSiblings,
+            getVersionPath,
             setCurrentPath,
         }}>
           {children}

src/hooks/useHierarchy.ts

@@ -12,6 +12,7 @@ interface NodeFunctions {
     getHomePage(): SilverstripeDocument|null;
     getNavChildren(node: SilverstripeDocument): SilverstripeDocument[];
     getCurrentVersion(): string;
+    getVersionPath(currentNode: SilverstripeDocument, version: number): string;
     setCurrentPath(slug: string): undefined;
 };
 

src/utils/nodes.ts

@@ -1,5 +1,6 @@
 import { SilverstripeDocument } from '../types';
 import sortFiles from './sortFiles';
+import { node } from 'prop-types';
 
 let __nodes: SilverstripeDocument[];
 let __currentVersion: string | null = null;
@@ -143,6 +144,19 @@ const getHomePage = (): SilverstripeDocument | null => {
  */
 const getCurrentVersion = (): string => __currentVersion || '4';
 
+
+/**
+ * Gets the path in another version
+ * @param currentNode 
+ * @param version 
+ */
+const getVersionPath = (currentNode: SilverstripeDocument, version: number): string => {
+  const newPath = currentNode.slug.replace(/^\/en\/[0-9]+\//, `/en/${version}/`);
+  const otherNode = getNodes().find(n => n.slug === newPath);
+
+  return otherNode ? otherNode.slug : `/en/${version}`;
+};
+
 /**
  * Set the current path, with some side effects for version
  * @param slug 
@@ -163,5 +177,6 @@ export {
   getHomePage,
   getNavChildren,
   getCurrentVersion,
+  getVersionPath,
   setCurrentPath
 };