fix: invalid canonicalization

components/helmet/index.js

@@ -21,7 +21,7 @@ const Helmet = (props) => (
     <meta name="keywords" content={ siteConfig.keywords.join(',') } />
 
     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" />
-    <link rel="canonical" href={ siteConfig.url.web } />
+    { props.canonical && <link rel="canonical" href={ props.canonical } /> }
     <meta httpEquiv="Content-Language" content="en" />
 
     <meta property="og:title" content={ prepareTitle(props.title) } />

layouts/default/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Helmet from 'components/helmet';
 import './global.scss';
 import { firePageView } from 'lib/gtag';
 

lib/server.js

@@ -5,6 +5,7 @@
  */
 export const serverOnlyProps = (callback) => {
   return async (props) => {
+    // noinspection JSUnresolvedVariable
     if (process.browser) {
       // noinspection ES6ModulesDependencies,JSUnresolvedVariable
       return __NEXT_DATA__.props.pageProps;

pages/[roadmap]/index.js

@@ -4,11 +4,12 @@ import SiteNav from 'components/site-nav';
 import PageFooter from 'components/page-footer';
 import { serverOnlyProps } from 'lib/server';
 import { getRequestedRoadmap } from 'lib/roadmap';
+import siteConfig from 'storage/site';
 import Helmet from 'components/helmet';
 import RoadmapSummary from 'components/roadmap-summary';
 import DetailedRoadmap from 'components/detailed-roadmap';
 
-const Roadmap = ({ roadmap }) => {
+const Roadmap = ({ roadmap, canonical }) => {
   if (!roadmap) {
     return <Error statusCode={ 404 } />
   }
@@ -16,7 +17,11 @@ const Roadmap = ({ roadmap }) => {
   const showSummary = roadmap.upcoming || !roadmap.detailed;
   return (
     <DefaultLayout>
-      <Helmet title={ roadmap.title } description={ roadmap.description } />
+      <Helmet
+        canonical={canonical}
+        title={ roadmap.title }
+        description={ roadmap.description }
+      />
       <SiteNav />
       { showSummary ? <RoadmapSummary roadmap={roadmap} /> : <DetailedRoadmap roadmap={roadmap} /> }
       <PageFooter />
@@ -26,6 +31,7 @@ const Roadmap = ({ roadmap }) => {
 
 Roadmap.getInitialProps = serverOnlyProps(({ req }) => {
   return {
+    canonical: `${siteConfig.url.web}${req.url}`,
     roadmap: getRequestedRoadmap(req),
   };
 });

pages/guides/[guide].js

@@ -6,15 +6,20 @@ import GuideBody from 'components/guide-body';
 import GuideFooter from 'components/guide-footer';
 import { getRequestedGuide } from 'lib/guide';
 import Helmet from 'components/helmet';
+import siteConfig from 'storage/site';
 
-const Guide = ({ guide }) => {
+const Guide = ({ guide, canonical }) => {
   if (!guide) {
     return <Error statusCode={ 404 } />
   }
 
   return (
     <GuideLayout>
-      <Helmet title={ guide.title } description={ guide.description } />
+      <Helmet
+        title={ guide.title }
+        description={ guide.description }
+        canonical={ guide.canonical || canonical }
+      />
       <GuideHeader guide={ guide } />
       <GuideBody guide={ guide } />
       <GuideFooter guide={ guide } />
@@ -24,6 +29,7 @@ const Guide = ({ guide }) => {
 
 Guide.getInitialProps = serverOnlyProps(async ({ req }) => {
   return {
+    canonical: `${siteConfig.url.web}${req.url}`,
     guide: await getRequestedGuide(req),
   };
 });