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

@@ -3,7 +3,7 @@ import { useHistory } from "react-router-dom";
 import config from "src/config";
 import paper from "paper";
 
-import style from "./style.module.scss";
+import './style-blobs.css';
 import Blobs from "./blobs";
 
 import ArtistNav from "../Components/ArtistNav/";
@@ -105,9 +105,9 @@ export default function BlobField({ collapsed = false }) {
 
   return (
     <div
-      className={style.wrapper}
+      className='blobs-wrapper'
       ref={wrapperEl}
-      style={collapsed ? {} : { width: parentWidth, height: parentHeight }}
+      // style={collapsed ? {} : { width: parentWidth, height: parentHeight }}
     >
       <ArtistNav />
       <canvas ref={animationEl}/>
@@ -122,7 +122,7 @@ export default function BlobField({ collapsed = false }) {
             : "NEARREST NEIGHBOR"}
         </div>
       )}
-      <div className={style.popover} style={popoverStyle}>
+      <div className='blobs-popover' style={popoverStyle}>
         {collapsed && activeArtist ? activeArtist.name.toUpperCase() : ""}
       </div>
     </div>

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

@@ -1,22 +1,22 @@
-.wrapper {
+.blobs-wrapper {
     display: flex;
     height: 100%;
     justify-content: center;
     flex-direction: column;
     position: relative;
     width: 100%;
-    svg, canvas {
-        position: fixed;
-        bottom: 0;
-        // left: 0;
-        right: 0;
-        // top: 0;
-        z-index: 999;
-    }
+}
 
+.blobs-wrapper > svg, canvas {
+    position: fixed;
+    bottom: 0;
+    /* left: 0; */
+    right: 0;
+    /* top: 0; */
+    z-index: 999;
 }
 
-.popover{
+.blobs-popover{
     position: fixed;
     z-index: 9999;
     transform: translate(0, -50%);

src/Components/ProjectHeader/index.js

@@ -9,7 +9,7 @@ import {
 } from './style.module.css';
 
 const ProjectHeader = ({artistName, title, materials, link, children}) => (
-  <div className={container}>
+  <div>
     <h3 className={headerArtist}>{artistName}</h3>
     <h2 className={headerTitle}>{title}</h2>
     <div className={headerMaterials} dangerouslySetInnerHTML={{__html: materials}} />

src/Components/Seo/index.js

@@ -0,0 +1,106 @@
+// 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 absoluteUrl = path => `https://deploy-preview-46--kind-tesla-a088c1.netlify.app/${path}`;
+const seoImageURL = file => `https://deploy-preview-46--kind-tesla-a088c1.netlify.app${file}`;
+
+const getMetaTags = ({
+  title, description, url, contentType, published, updated, category, tags, twitter, image,
+}) => {
+  const metaTags = [
+    { itemprop: 'name', content: title },
+    { itemprop: 'description', content: description ? description : 'Online MFA show for 2020 DMA grads.'},
+    { name: 'description', content: description ? description : 'Online MFA show for 2020 DMA grads.'},
+    { name: 'twitter:site', content: twitter},
+    { name: 'twitter:title', content: `${title} | NEARREST NEIGHBOR` },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:creator', content: twitter},
+    { property: 'og:title', content: `${title} | NEARREST NEIGHBOR` },
+    { 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} | NEARREST NEIGHBOR`}
+    link={[
+      { rel: 'canonical', href: absoluteUrl(path) },
+    ]}
+    meta={getMetaTags({
+      title,
+      description,
+      contentType,
+      url: absoluteUrl(path),
+      published,
+      updated,
+      category,
+      tags,
+      twitter,
+      image: image ? image.images[image.images.length - 1].path : 'FALLBACKIMAGE'
+    })}
+  />
+);
+
+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

@@ -11,11 +11,11 @@ export default () => (
       <Suspense fallback={<div />}>
         <Switch>
           {
-            config.artists.map(({slug, component}) => {
+            config.artists.map(({slug, component}, i) => {
               const Comp = lazy(() => import(`../../work/${component}`));
               return (
                 <Route path={`/${slug}`} key={slug}>
-                  <Comp />
+                  <Comp config={config.artists[i]}/>
                 </Route>
               )
             })

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.

src/work/BenLerchin.js

@@ -1,52 +1,69 @@
-import React from 'react';
+import React from "react";
 
-import Artist from '../Containers/Artist';
-import ProjectCover from '../Components/ProjectCover';
-import ProjectHeader from '../Components/ProjectHeader';
-import ArtistBio from '../Components/ArtistBio';
-import ProjectColumns, { Column } from '../Components/ProjectColumns';
-import Image from '../Components/Image';
-import Vimeo from '../Components/VideoVimeo'
+import Artist from "../Containers/Artist";
+import ProjectCover from "../Components/ProjectCover";
+import ProjectHeader from "../Components/ProjectHeader";
+import ArtistBio from "../Components/ArtistBio";
+import ProjectColumns, { Column } from "../Components/ProjectColumns";
+import Image from "../Components/Image";
+import Vimeo from "../Components/VideoVimeo";
 
-import BenImage from './assets/BenLerchin-yimby-cover.jpg';
-import Placeholder from './assets/placeholder.png';
+import BenImage from "./assets/BenLerchin-yimby-cover.jpg";
+import Placeholder from "./assets/placeholder.png";
 
-export default function() {
-    return (
-        <Artist>
-            <ProjectHeader
-                artistName="Ben Lerchin"
-                title="Yes, in my Backyard"
-                materials="10 minute video"
-                link="http://benlerchin.com"
-            />
-            <ProjectCover>
-                <Image
-                    img={BenImage}
-                    alt='Still from video. A gray industrial concrete and metal box is in the foreground, with the text
+import Seo from "../Components/Seo";
+export default function (config) {
+  return (
+    <Artist>
+      <Seo
+        title={config.config.name}
+        description="Scelerisque venenatis nibh fames ad quam feugiat leo commodo vitae sed lacus."
+        path={config.config.slug}
+        image={BenImage}
+      />
+      <ProjectHeader
+        artistName="Ben Lerchin"
+        title="Yes, in my Backyard"
+        materials="10 minute video"
+        link="http://benlerchin.com"
+      />
+      <ProjectCover>
+        <Image
+          img={BenImage}
+          alt='Still from video. A gray industrial concrete and metal box is in the foreground, with the text
                     "MILE 103" obliquely visible. Low brush growth is seen in the near background, behind which a number
                     of wind turbines are visible.'
-                />
-            </ProjectCover>
-            <ProjectColumns>
-                <Column>
-                    <Vimeo
-                        url="https://player.vimeo.com/video/TK?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0"
-                    />
-                </Column>
-            </ProjectColumns>
-            <ProjectColumns>
-                <Column>
-                    <p>
-                        Semi-satirical mockumentary reframing Los Angeles' infrastructure as a tourist destination for nature-lovers.
-                    </p>
-                </Column>
-            </ProjectColumns>
-            <ArtistBio>
-                <p>
-                    Ben Lerchin is an artist and technologist who works with software, photography, and digital fabrication. Their practice deals extensively with the relationship between the photographic image and the American West. Reflecting on the uneasy experience of living between the city and the wilderness, my work attempts to reconcile a networked, industrialized lifestyle with the unstable ground under our feet. It is an attempt to erase boundaries with the natural world, and to see it not as victim nor antagonist, but as co-conspirator and friend. Using digital photographic processes, Ben embeds a polyphony of viewpoints into three dimensional forms reminiscent of the landscape from which they emerge, showing sites of resource management in relation to the people that depend on them.
-                </p>
-            </ArtistBio>
-        </Artist>
-    );
-}
+        />
+      </ProjectCover>
+      <ProjectColumns>
+        <Column>
+          <Vimeo url="https://player.vimeo.com/video/TK?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0" />
+        </Column>
+      </ProjectColumns>
+      <ProjectColumns>
+        <Column>
+          <p>
+            Semi-satirical mockumentary reframing Los Angeles' infrastructure as
+            a tourist destination for nature-lovers.
+          </p>
+        </Column>
+      </ProjectColumns>
+      <ArtistBio>
+        <p>
+          Ben Lerchin is an artist and technologist who works with software,
+          photography, and digital fabrication. Their practice deals extensively
+          with the relationship between the photographic image and the American
+          West. Reflecting on the uneasy experience of living between the city
+          and the wilderness, my work attempts to reconcile a networked,
+          industrialized lifestyle with the unstable ground under our feet. It
+          is an attempt to erase boundaries with the natural world, and to see
+          it not as victim nor antagonist, but as co-conspirator and friend.
+          Using digital photographic processes, Ben embeds a polyphony of
+          viewpoints into three dimensional forms reminiscent of the landscape
+          from which they emerge, showing sites of resource management in
+          relation to the people that depend on them.
+        </p>
+      </ArtistBio>
+    </Artist>
+  );
+}