chore: Integrate React Helmet

Now the base template is cleaner and it's easier to manipulate the page
meta.

antwar.config.js

@@ -5,6 +5,9 @@ module.exports = () => ({
   apiUrl: "http://api.react-finland.fi/graphql-2018",
   template: {
     file: path.resolve(__dirname, "templates/page.ejs"),
+    context: {
+      helmet: {},
+    },
   },
   renderPage: require("./utils/render-page"),
   output: "build",

components/AnchorHeader.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const AnchorHeader = ({ level, anchor, children }, { getId }) => {
-  let id = getId(anchor, children);
+  let id = getId && getId(anchor, children);
 
   return React.createElement(`h${level}`, { className: "heading" }, [
     <a className="heading--anchor" href={`#${id}`} id={id} key="anchor" />,

components/Meta.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Helmet from "react-helmet-async";
+import PropTypes from "prop-types";
+
+const Meta = ({ siteName, title, description, keywords = [] }) => (
+  <Helmet>
+    <link rel="canonical" href="https://react-finland.fi/" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+
+    <title>
+      {siteName} - {title}
+    </title>
+    <meta property="og:site_name" content={siteName} />
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"
+    />
+    <meta name="description" content={description} />
+    <meta name="keywords" content={keywords.join(", ")} />
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content="/meta-image.png" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:site" content="@ReactFinland" />
+    <meta name="twitter:image" content="./meta-image.png" />
+  </Helmet>
+);
+Meta.propTypes = {
+  siteName: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  keywords: PropTypes.array,
+};
+
+export default Meta;

components/index.js

@@ -7,6 +7,7 @@ export { default as Header } from "./Header";
 export { default as Link } from "./Link";
 export { default as Navigation } from "./Navigation";
 export { default as Markdown } from "./Markdown";
+export { default as Meta } from "./Meta";
 export { default as Organizer } from "./Organizer";
 export { default as Schedule } from "./Schedule";
 export { default as SessionSpeakers } from "./SessionSpeakers";

layouts/SiteBody.js

@@ -1,91 +1,110 @@
 import React from "react";
 import { hot } from "react-hot-loader";
 import PropTypes from "prop-types";
+import { HelmetProvider } from "react-helmet-async";
 import {
   AnchorHeader,
   AnchorProvider,
   Contacts,
-  Header,
   Footer,
+  Header,
+  Meta,
   Sponsor,
   Subscribe,
   connect,
 } from "../components";
+import * as tweakSponsors from "./tweak-sponsors";
 
 import "normalize.css/normalize.css";
 import "../styles/fontello-codes.css";
 import "../styles/fontello-embedded.css";
 import "../styles/style.scss";
 
-const SiteBody = ({
-  children,
-  location: { pathname },
-  page: { file: { title } },
-  partners = [],
-  goldSponsors = [],
-  silverSponsors = [],
-  bronzeSponsors = [],
-}) => (
-  <AnchorProvider>
-    <main>
-      <Header pathname={pathname} title={title} />
-      <div className="main-container container">
-        <section className="grid grid_6col">
-          {children}
-          <div className="grid--full">
-            <div className="sponsors sponsors_gold">
-              <AnchorHeader className="sponsors--heading" level={2}>
-                🥇 Gold Sponsors
-              </AnchorHeader>
-              <section className="sponsors--list">
-                <Contacts items={goldSponsors} render={Sponsor} />
-                {goldSponsors.length < 2 && (
-                  <a href="/for-sponsors/">Become a sponsor</a>
-                )}
-              </section>
-            </div>
-            <div className="sponsors sponsors_silver">
-              <AnchorHeader className="sponsors--heading" level={2}>
-                🥈 Silver Sponsors
-              </AnchorHeader>
-              <section className="sponsors--list">
-                <Contacts
-                  items={tweakSilverSponsors(silverSponsors)}
-                  render={Sponsor}
-                />
-                {silverSponsors.length < 3 && (
-                  <a href="/for-sponsors/">Become a sponsor</a>
-                )}
-              </section>
+const siteName = "React Finland";
+
+const SiteBody = (
+  {
+    children,
+    location: { pathname },
+    page: { file: { title, description, keywords } },
+    partners = [],
+    goldSponsors = [],
+    silverSponsors = [],
+    bronzeSponsors = [],
+  },
+  { router }
+) => (
+  <HelmetProvider
+    context={
+      router && router.staticContext && router.staticContext.helmetContext
+    }
+  >
+    <AnchorProvider>
+      <Meta
+        siteName={siteName}
+        title={title}
+        description={description}
+        keywords={keywords}
+      />
+      <main>
+        <Header pathname={pathname} title={title} />
+        <div className="main-container container">
+          <section className="grid grid_6col">
+            {children}
+            <div className="grid--full">
+              <div className="sponsors sponsors_gold">
+                <AnchorHeader className="sponsors--heading" level={2}>
+                  🥇 Gold Sponsors
+                </AnchorHeader>
+                <section className="sponsors--list">
+                  <Contacts items={goldSponsors} render={Sponsor} />
+                  {goldSponsors.length < 2 && (
+                    <a href="/for-sponsors/">Become a sponsor</a>
+                  )}
+                </section>
+              </div>
+              <div className="sponsors sponsors_silver">
+                <AnchorHeader className="sponsors--heading" level={2}>
+                  🥈 Silver Sponsors
+                </AnchorHeader>
+                <section className="sponsors--list">
+                  <Contacts
+                    items={tweakSponsors.silver(silverSponsors)}
+                    render={Sponsor}
+                  />
+                  {silverSponsors.length < 3 && (
+                    <a href="/for-sponsors/">Become a sponsor</a>
+                  )}
+                </section>
+              </div>
+
+              <AnchorHeader level={2}>Partners</AnchorHeader>
+              <div className="sponsors sponsors_partners grid--full">
+                <section className="sponsors--list">
+                  <Contacts
+                    items={tweakSponsors.bronze(bronzeSponsors)}
+                    render={Sponsor}
+                  />
+                  {bronzeSponsors.length < 4 && (
+                    <a href="/for-sponsors/">Become a sponsor</a>
+                  )}
+                </section>
+              </div>
             </div>
-            <div className="sponsors sponsors_bronze">
-              <AnchorHeader className="sponsors--heading" level={2}>
-                🥉 Bronze Sponsors
-              </AnchorHeader>
+
+            <AnchorHeader level={2}>Partners</AnchorHeader>
+            <div className="sponsors sponsors_partners grid--full">
               <section className="sponsors--list">
-                <Contacts
-                  items={tweakBronzeSponsors(bronzeSponsors)}
-                  render={Sponsor}
-                />
-                {bronzeSponsors.length < 4 && (
-                  <a href="/for-sponsors/">Become a sponsor</a>
-                )}
+                <Contacts items={partners} render={Sponsor} />
               </section>
             </div>
-          </div>
-
-          <AnchorHeader level={2}>Partners</AnchorHeader>
-          <div className="sponsors sponsors_partners grid--full">
-            <section className="sponsors--list">
-              <Contacts items={partners} render={Sponsor} />
-            </section>
-          </div>
-        </section>
-      </div>
-      <Subscribe />
-      <Footer />
-    </main>
-  </AnchorProvider>
+          </section>
+        </div>
+        <Subscribe />
+        <Footer />
+      </main>
+    </AnchorProvider>
+  </HelmetProvider>
 );
 SiteBody.propTypes = {
   children: PropTypes.node,
@@ -97,44 +116,6 @@ SiteBody.propTypes = {
   bronzeSponsors: PropTypes.array,
 };
 
-function tweakSilverSponsors(sponsors) {
-  // Tweak Nitor
-  return sponsors.map(sponsor => {
-    if (sponsor.name === "Nitor") {
-      return {
-        ...sponsor,
-        logoProps: {
-          style: {
-            background: "black",
-            padding: "1.5em",
-          },
-        },
-      };
-    }
-
-    return sponsor;
-  });
-}
-
-function tweakBronzeSponsors(sponsors) {
-  // Tweak Rohea
-  return sponsors.map(sponsor => {
-    if (sponsor.name === "Rohea") {
-      return {
-        ...sponsor,
-        logoProps: {
-          style: {
-            background: "black",
-            padding: "1em",
-          },
-        },
-      };
-    }
-
-    return sponsor;
-  });
-}
-
 const sponsorQuery = `{ name, social { homepage }, about, image }`;
 export default hot(module)(
   connect(`

layouts/tweak-sponsors.js

@@ -0,0 +1,39 @@
+function tweakSilverSponsors(sponsors) {
+  // Tweak Nitor
+  return sponsors.map(sponsor => {
+    if (sponsor.name === "Nitor") {
+      return {
+        ...sponsor,
+        logoProps: {
+          style: {
+            background: "black",
+            padding: "1.5em",
+          },
+        },
+      };
+    }
+
+    return sponsor;
+  });
+}
+
+function tweakBronzeSponsors(sponsors) {
+  // Tweak Rohea
+  return sponsors.map(sponsor => {
+    if (sponsor.name === "Rohea") {
+      return {
+        ...sponsor,
+        logoProps: {
+          style: {
+            background: "black",
+            padding: "1em",
+          },
+        },
+      };
+    }
+
+    return sponsor;
+  });
+}
+
+export { tweakSilverSponsors as silver, tweakBronzeSponsors as bronze };