Fix og:url on SSR (#10902)

www/src/components/MarkdownPage/MarkdownPage.js

@@ -20,7 +20,7 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import {sharedStyles} from 'theme';
-import {urlRoot} from 'constants';
+import createOgUrl from 'utils/createOgUrl';
 
 const MarkdownPage = ({
   authors,
@@ -48,9 +48,9 @@ const MarkdownPage = ({
         zIndex: 0,
       }}>
       <TitleAndMetaTags
-        title={`${titlePrefix}${titlePostfix}`}
-        ogUrl={`${urlRoot}/${markdownRemark.fields.path || ''}`}
         ogDescription={ogDescription}
+        ogUrl={createOgUrl(markdownRemark.fields.slug)}
+        title={`${titlePrefix}${titlePostfix}`}
       />
       <div css={{flex: '1 0 auto'}}>
         <Container>

www/src/templates/blog.js

@@ -66,6 +66,7 @@ export const pageQuery = graphql`
       fields {
         date(formatString: "MMMM DD, YYYY")
         path
+        slug
       }
     }
     allMarkdownRemark(

www/src/templates/community.js

@@ -41,6 +41,7 @@ export const pageQuery = graphql`
       }
       fields {
         path
+        slug
       }
     }
   }

www/src/templates/docs.js

@@ -41,6 +41,7 @@ export const pageQuery = graphql`
       }
       fields {
         path
+        slug
       }
     }
   }

www/src/templates/home.js

@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import {colors, media, sharedStyles} from 'theme';
-import {urlRoot} from 'constants';
+import createOgUrl from 'utils/createOgUrl';
 
 class Home extends Component {
   componentDidMount() {
@@ -35,7 +35,7 @@ class Home extends Component {
       <div css={{width: '100%'}}>
         <TitleAndMetaTags
           title={title}
-          ogUrl={`${urlRoot}/${data.markdownRemark.fields.path}`}
+          ogUrl={createOgUrl(data.markdownRemark.fields.slug)}
         />
         <header
           css={{
@@ -201,7 +201,7 @@ export const pageQuery = graphql`
         title
       }
       fields {
-        path
+        slug
       }
     }
   }

www/src/templates/installation.js

@@ -21,7 +21,7 @@ import {createLinkDocs} from 'utils/createLink';
 import findSectionForPath from 'utils/findSectionForPath';
 import {sectionListDocs} from 'utils/sectionList';
 import {sharedStyles} from 'theme';
-import {urlRoot} from 'constants';
+import createOgUrl from 'utils/createOgUrl';
 
 // HACK: copied from 'installation.md'
 // TODO: clean this up.
@@ -141,7 +141,7 @@ class InstallationPage extends Component {
         }}>
         <TitleAndMetaTags
           title="Installation - React"
-          ogUrl={`${urlRoot}/${markdownRemark.fields.path || ''}`}
+          ogUrl={createOgUrl(markdownRemark.fields.slug)}
         />
         <div css={{flex: '1 0 auto'}}>
           <Container>
@@ -211,6 +211,7 @@ export const pageQuery = graphql`
       }
       fields {
         path
+        slug
       }
     }
   }

www/src/templates/tutorial.js

@@ -52,6 +52,7 @@ export const pageQuery = graphql`
       }
       fields {
         path
+        slug
       }
     }
   }

www/src/utils/createOgUrl.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import {urlRoot} from 'site-constants';
+
+export default slug =>
+  (slug == null ? null : `${urlRoot}/${slug.replace(/^\//, '')}`);