Merge pull request #46 from blerchin/pre-rendered-seo

Pre-rendered seo

package.json

@@ -72,6 +72,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
+    "postbuild": "react-snap",
     "test": "node scripts/test.js",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
@@ -147,6 +148,8 @@
     ]
   },
   "devDependencies": {
+    "react-helmet": "^6.0.0",
+    "react-snap": "^1.23.0",
     "responsive-loader": "^1.2.0",
     "sharp": "^0.25.3"
   }

src/BlobField/index.js

@@ -1,14 +1,18 @@
 import React, { useRef, useState, useEffect } from "react";
-import { useHistory } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import config from "src/config";
 import paper from "paper";
 
-import style from "./style.module.scss";
+import {
+  wrapper,
+  popover,
+} from './style.module.css';
+
 import Blobs from "./blobs";
 
 import ArtistNav from "../Components/ArtistNav/";
 
-export default function BlobField({ collapsed = false }) {
+export default function BlobField() {
   const animationEl = useRef(null);
   const wrapperEl = useRef(null);
   const blobsRef = useRef(null);
@@ -18,6 +22,9 @@ export default function BlobField({ collapsed = false }) {
   const [parentHeight, setParentHeight] = useState(window.innerHeight);
   const [popoverStyle, setPopooverStyle] = useState(null);
 
+  let location = useLocation();
+  const collapsed = location.pathname !== '/';
+
   function calculateStyle(event, isCollapsed) {
     let style = {
       display: "none",
@@ -104,26 +111,28 @@ export default function BlobField({ collapsed = false }) {
   }, [blobsRef, collapsed]);
 
   return (
-    <div
-      className={style.wrapper}
-      ref={wrapperEl}
-      style={collapsed ? {} : { width: parentWidth, height: parentHeight }}
-    >
-      <ArtistNav />
-      <canvas ref={animationEl}/>
-      {collapsed ? (
-        ""
-      ) : (
-        <div className="title">
-          {activeArtist
-            ? activeArtist.name.split(" ").map((item, i) => {
-                return <p key={item}>{item.toUpperCase()}</p>;
-              })
-            : "NEARREST NEIGHBOR"}
+    <div className="blobs">
+      <div
+        className={wrapper}
+        ref={wrapperEl}
+        // style={collapsed ? {} : { width: parentWidth, height: parentHeight }}
+      >
+        <ArtistNav />
+        <canvas ref={animationEl}/>
+        {collapsed ? (
+          ""
+        ) : (
+          <div className="title">
+            {activeArtist
+              ? activeArtist.name.split(" ").map((item, i) => {
+                  return <p key={item}>{item.toUpperCase()}</p>;
+                })
+              : "NEARREST NEIGHBOR"}
+          </div>
+        )}
+        <div className={popover} style={popoverStyle}>
+          {collapsed && activeArtist ? activeArtist.name.toUpperCase() : ""}
         </div>
-      )}
-      <div className={style.popover} style={popoverStyle}>
-        {collapsed && activeArtist ? activeArtist.name.toUpperCase() : ""}
       </div>
     </div>
   );

src/BlobField/style.module.scss → src/BlobField/style.module.css

@@ -5,15 +5,15 @@
     flex-direction: column;
     position: relative;
     width: 100%;
-    svg, canvas {
-        position: fixed;
-        bottom: 0;
-        // left: 0;
-        right: 0;
-        // top: 0;
-        z-index: 999;
-    }
+}
 
+.wrapper > svg, canvas {
+    position: fixed;
+    bottom: 0;
+    /* left: 0; */
+    right: 0;
+    /* top: 0; */
+    z-index: 999;
 }
 
 .popover{

src/Components/Seo/index.js

@@ -0,0 +1,128 @@
+// https://github.com/stereobooster/react-snap/blob/master/doc/recipes.md
+// From https://github.com/stereobooster/an-almost-static-stack/blob/react-snap/src/components/Seo.js
+import React from "react";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet";
+
+const rootURL = `https://kind-tesla-a088c1.netlify.app`;
+const absoluteUrl = (path) => `${rootURL}/${path}`;
+const seoImageURL = (file) => `${rootURL}${file}`;
+
+const getMetaTags = ({
+  title,
+  description,
+  url,
+  contentType,
+  published,
+  updated,
+  category,
+  tags,
+  twitter,
+  image,
+}) => {
+  const metaTags = [
+    { itemprop: "name", content: title },
+    { itemprop: "description", content: description },
+    { name: "description", content: description },
+    { name: "twitter:site", content: twitter },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:creator", content: twitter },
+    { property: "og:title", content: title },
+    { property: "og:type", content: contentType }, //https://ogp.me/#types
+    { property: "og:url", content: url },
+    { property: "og:description", content: description },
+    { property: "og:site_name", content: "NEARREST NEIGHBOR" },
+    { property: "og:locale", content: "en_EN" },
+    // { name: 'fb:app_id', content: '<FB App ID>' },
+  ];
+
+  if (published)
+    metaTags.push({ name: "article:published_time", content: published });
+  if (updated)
+    metaTags.push({ name: "article:modified_time", content: updated });
+  if (category) metaTags.push({ name: "article:section", content: category });
+  if (tags) metaTags.push({ name: "article:tag", content: tags });
+  if (image) {
+    metaTags.push({ itemprop: "image", content: seoImageURL(image) });
+    metaTags.push({ name: "twitter:image:src", content: seoImageURL(image) });
+    metaTags.push({ property: "og:image", content: seoImageURL(image) });
+    metaTags.push({ name: "twitter:card", content: "summary_large_image" });
+  } else {
+    metaTags.push({ name: "twitter:card", content: "summary" });
+  }
+
+  return metaTags;
+};
+
+const getHtmlAttributes = ({ schema }) => {
+  let result = {
+    lang: "en",
+  };
+  if (schema) {
+    result = {
+      ...result,
+      itemscope: undefined,
+      itemtype: `http://schema.org/${schema}`,
+    };
+  }
+  return result;
+};
+
+getHtmlAttributes.propTypes = {
+  schema: PropTypes.string,
+};
+
+const Seo = ({
+  schema,
+  title,
+  description,
+  path,
+  contentType,
+  published,
+  updated,
+  category,
+  tags,
+  twitter,
+  image,
+}) => (
+  <Helmet
+    htmlAttributes={getHtmlAttributes({
+      schema,
+    })}
+    title={title ? `${title} | NEARREST NEIGHBOR` : "NEARREST NEIGHBOR"}
+    link={[{ rel: "canonical", href: absoluteUrl(path) }]}
+    meta={getMetaTags({
+      title: title ? `${title} | NEARREST NEIGHBOR` : "NEARREST NEIGHBOR",
+      description: description
+        ? description
+        : "Online MFA show for 2020 DMA grads.",
+      contentType,
+      url: path ? absoluteUrl(path) : rootURL,
+      published,
+      updated,
+      category,
+      tags,
+      twitter,
+      image: image
+        ? image.images[image.images.length - 1].path
+        : `/ogimagecomp.jpg`,
+    })}
+  />
+);
+
+Seo.propTypes = {
+  schema: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  path: PropTypes.string,
+  contentType: PropTypes.string,
+  published: PropTypes.string,
+  updated: PropTypes.string,
+  category: PropTypes.string,
+  tags: PropTypes.array,
+  twitter: PropTypes.string,
+  image: PropTypes.object,
+};
+
+export default Seo;

src/Containers/App/index.js

@@ -1,37 +1,60 @@
-import React, { Suspense, lazy } from 'react';
+import React from 'react';
 
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import './style.css';
 import BlobField from 'src/BlobField';
 import config from '../../config';
+import Seo from 'src/Components/Seo'
+
+import BenLerchin from '../../work/BenLerchin';
+import BerfinAtaman from '../../work/BerfinAtaman';
+import BlaineOneill from '../../work/BlaineOneill';
+import ClaraLeivas from '../../work/ClaraLeivas';
+import DalenaTran from '../../work/DalenaTran';
+import ErinCooney from '../../work/ErinCooney';
+import GrahamAkins from '../../work/GrahamAkins';
+import HiradSab from '../../work/HiradSab';
+import LemingZc from '../../work/LemingZc';
+import MilesPeyton from '../../work/MilesPeyton';
+import ZeynepAbes from '../../work/ZeynepAbes';
+
+const comps = {
+  BenLerchin,
+  BerfinAtaman,
+  BlaineOneill,
+  ClaraLeivas,
+  DalenaTran,
+  ErinCooney,
+  GrahamAkins,
+  HiradSab,
+  LemingZc,
+  MilesPeyton,
+  ZeynepAbes,
+};
 
 export default () => (
   <Router>
     <div className="app">
-      <Suspense fallback={<div />}>
-        <Switch>
-          {
-            config.artists.map(({slug, component}) => {
-              const Comp = lazy(() => import(`../../work/${component}`));
-              return (
-                <Route path={`/${slug}`} key={slug}>
-                  <Comp />
-                </Route>
-              )
-            })
-          }
-          <Route path='/'>{/* no-op */}</Route>
-          <Route path="*">
-            Page not Found ✧・ﾟ:*
+      <BlobField />
+      <Switch>
+        {
+          config.artists.map(({slug, name, component}) => {
+            const Comp = comps[component];
+            return (
+              <Route path={`/${slug}`} key={slug}>
+                <Comp slug={slug} name={name} />
+              </Route>
+            )
+          })
+        }
+        <Route path='/'>
+        <Seo/>
+          {/* no-op */}
           </Route>
-        </Switch>
-      </Suspense>
-      <Route path="/" render={({ match }) => (
-        <div className="blobs">
-          <BlobField collapsed={!match.isExact} />
-        </div>
-      )}>
-      </Route>
+        <Route path="*">
+          Page not Found ✧・ﾟ:*
+        </Route>
+      </Switch>
     </div>
   </Router>
 );

src/Containers/App/style.css

@@ -33,6 +33,8 @@ body {
   font-family: sans-serif;
   font-weight: 700;
   line-height: initial;
+  margin-top: 50vh;
+  transform: translateY(-50%);
 }
 
 .blobs {

src/index.js

@@ -3,12 +3,29 @@ import ReactDOM from 'react-dom';
 import App from './Containers/App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   document.getElementById('root')
+// );
+
+const rootElement = document.getElementById("root");
+if (rootElement.hasChildNodes()) {
+  ReactDOM.hydrate(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+    rootElement
+  );
+} else {
+  ReactDOM.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+    rootElement
+  );
+}
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.