Merge pull request #35 from reactjs/sync-06deefa5

Sync with reactjs.org @ 06deefa

Author: arshadkazmi42

content/community/conferences.md

@@ -12,21 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Finland 2019 {#react-finland-2019}
-April 24-26 in Helsinki, Finland
-
-[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
-
-### ReactJS Girls Conference {#reactjs-girls-conference}
-May 3, 2019 in London, UK
-
-[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)
-
-### <React.NotAConf /> 2019 {#reactnotaconf--2019}
-May 11 in Sofia, Bulgaria
-
-[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/events/780891358936156)
-
 ### ReactEurope 2019 {#reacteurope-2019}
 May 23-24, 2019 in Paris, France
 
@@ -385,3 +370,18 @@ April 4-5, 2019 in Kraków, Poland
 April 12, 2019 in Amsterdam, The Netherlands
 
 [Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
+
+### React Finland 2019 {#react-finland-2019}
+April 24-26 in Helsinki, Finland
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
+
+### ReactJS Girls Conference {#reactjs-girls-conference}
+May 3, 2019 in London, UK
+
+[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)
+
+### <React.NotAConf /> 2019 {#reactnotaconf--2019}
+May 11 in Sofia, Bulgaria
+
+[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/events/780891358936156)

content/docs/hooks-effect.md

@@ -333,7 +333,7 @@ function FriendStatusWithCounter(props) {
 }
 ```
 
-**Hooks lets us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified.
+**Hooks let us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified.
 
 ### Explanation: Why Effects Run on Each Update {#explanation-why-effects-run-on-each-update}
 

src/components/MarkdownPage/MarkdownPage.js

@@ -15,7 +15,7 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import {sharedStyles} from 'theme';
-import createOgUrl from 'utils/createOgUrl';
+import createCanonicalUrl from 'utils/createCanonicalUrl';
 
 import type {Node} from 'types';
 
@@ -74,7 +74,7 @@ const MarkdownPage = ({
       }}>
       <TitleAndMetaTags
         ogDescription={ogDescription}
-        ogUrl={createOgUrl(markdownRemark.fields.slug)}
+        canonicalUrl={createCanonicalUrl(markdownRemark.fields.slug)}
         title={`${titlePrefix}${titlePostfix}`}
       />
       <div css={{flex: '1 0 auto'}}>

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -13,21 +13,22 @@ const defaultDescription = 'A JavaScript library for building user interfaces';
 type Props = {
   title: string,
   ogDescription: string,
-  ogUrl: string,
+  canonicalUrl: string,
 };
 
-const TitleAndMetaTags = ({title, ogDescription, ogUrl}: Props) => {
+const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
   return (
     <Helmet title={title}>
       <meta property="og:title" content={title} />
       <meta property="og:type" content="website" />
-      {ogUrl && <meta property="og:url" content={ogUrl} />}
+      {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
       <meta property="og:image" content="/logo-og.png" />
       <meta
         property="og:description"
         content={ogDescription || defaultDescription}
       />
       <meta property="fb:app_id" content="623268441017527" />
+      {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
     </Helmet>
   );
 };

src/pages/acknowledgements.html.js

@@ -21,7 +21,7 @@ const Acknowlegements = ({data, location}) => (
         <div css={sharedStyles.articleLayout.content}>
           <Header>Acknowledgements</Header>
           <TitleAndMetaTags
-            ogUrl={`${urlRoot}/acknowledgements.html`}
+            canonicalUrl={`${urlRoot}/acknowledgements.html`}
             title="React - Acknowledgements"
           />
 

src/pages/blog/all.html.js

@@ -30,7 +30,7 @@ const AllBlogPosts = ({data, location}: Props) => (
         <div css={sharedStyles.articleLayout.content}>
           <Header>All Posts</Header>
           <TitleAndMetaTags
-            ogUrl={`${urlRoot}/blog/all.html`}
+            canonicalUrl={`${urlRoot}/blog/all.html`}
             title="React - All Posts"
           />
           <ul

src/pages/index.js

@@ -15,7 +15,7 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import Layout from 'components/Layout';
 import {colors, media, sharedStyles} from 'theme';
 import loadScript from 'utils/loadScript';
-import createOgUrl from 'utils/createOgUrl';
+import createCanonicalUrl from 'utils/createCanonicalUrl';
 import {babelURL} from 'site-constants';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
@@ -51,7 +51,7 @@ class Home extends Component {
       <Layout location={location}>
         <TitleAndMetaTags
           title="React &ndash; युज़र इंटरफ़ेसिज़ के निर्माण के लिए एक जावास्क्रिप्ट लाइब्रेरी"
-          ogUrl={createOgUrl('index.html')}
+          canonicalUrl={createCanonicalUrl('/')}
         />
         <div css={{width: '100%'}}>
           <header

src/pages/languages.js

@@ -10,6 +10,7 @@ import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import React from 'react';
+import {urlRoot} from 'site-constants';
 import {media, sharedStyles} from 'theme';
 
 // $FlowFixMe This is a valid path
@@ -47,7 +48,10 @@ const Languages = ({location}: Props) => (
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
           <Header>Languages</Header>
-          <TitleAndMetaTags title="React - Languages" />
+          <TitleAndMetaTags
+            canonicalUrl={`${urlRoot}/languages/`}
+            title="React - Languages"
+          />
 
           <div css={sharedStyles.markdown}>
             <p>

src/pages/versions.js

@@ -10,6 +10,7 @@ import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import React from 'react';
+import {urlRoot} from 'site-constants';
 import {sharedStyles} from 'theme';
 
 // $FlowFixMe This is a valid path
@@ -25,7 +26,10 @@ const Versions = ({location}: Props) => (
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
           <Header>React Versions</Header>
-          <TitleAndMetaTags title="React - Versions" />
+          <TitleAndMetaTags
+            canonicalUrl={`${urlRoot}/versions/`}
+            title="React - Versions"
+          />
           <div css={sharedStyles.markdown}>
             <p>
               A complete release history for React is available{' '}