react-snap + SEO + SMO + Per page meta tags

[hsab]

This is not intended for merging but for demonstration and some review if we should go ahead. I think the benefits outweigh the downsides, although I can't seem to think of any for now.
For the time being I'm opening it so can build locally to test and discuss here.

It's intended to address #43. And it actually turned out to be much easier than I thought.

Adds dependencies react-snap and react-helmet. I got a recipe for managing SEO from here as suggested in the react-snap's recipes doc.

For proper SEO and SMO management, the website needs to be pre-rendered. This is what react-snap does; helmet for head management.

So far seems to be working, except some minor issues with setParentHeight.Width where it wouldn't run when the component had mounted.

dma-20-mfa-show/src/BlobField/index.js

Lines 107 to 111 in 82fe7ea

	// Had to remove parentW/H because the static build was behaving strangely when setting the proper values
	<div
	className={style.wrapper}
	ref={wrapperEl}
	>

I managed to solve it by removing the hs/react dependency and resorting to pure css although had to resort to vh :(

dma-20-mfa-show/src/Containers/App/style.css

Lines 30 to 39 in 82fe7ea

	.title {
	color: #e3f994;
	font-size: 17vw;
	font-family: sans-serif;
	font-weight: 700;
	line-height: normal;
	/* Had to modify because the static build was behaving strangely when setting the proper values */
	margin-top: 50vh;
	transform: translateY(-50%);
	}

Let me know what you think.

EDIT: Just found some more issues. For some reason it's acting up if directly accessing the work through the address bar. className={style.wrapper} is confused with className={style.container}

[blerchin]

Interesting. Yeah the seo problem is a doozy.
I haven't used react-snap or the prerendering approach before, but this is promising. Seems a lot less frustrating than trying to do server-side rendering (have wasted months of my life trying to get that working).

Another approach would be to generate html files for each artist/page. Basically, just copies of the current public/index.html with correct metadata for each artist. This addresses meta/open graph/facebook tags but would not render "flat" html files. My understanding is google and most search engines crawl with a js-enabled browser these days so they actually can get to pages inside a SPA.

[hsab]

Yeah I remember when google and the likes announced that they're gonna parse with js enabled. What I'm more concerned with is SMO and proper social media sharing with appropriate og meta tags. I think the works will be shared online a lot, and good og tags could even further the dissemination.

There was a problem with puppeteer using my local chromium path. Netlify deployment is fixed now if you want to check it out.

Even if we decide to scarp react-snap. Helm and Seo recipe are really nice!

[hsab]

Also here's the issue I was talking about.
https://deploy-preview-45--kind-tesla-a088c1.netlify.app/graham-akins/

If you open the link directly with using routes, the {style.wrapper} class changes to container for some reason. I wonder if can just rename the style file to reduce confusion.

[blerchin]

Wow, that is strange. I need to work on other stuff right now but can take a look later today.

[hsab]

Also FYI:

That's coming from

In erin-cooney/index.html:

link http://repetitionrepetition.com
source http://repetitionrepetition.com/launch2.mp4
In zeynep-abes/index.html:

link http://repetitionrepetition.com
source http://repetitionrepetition.com/launch2.mp4

Since it builds statically it becomes an issue.

[brysonian]

If snap doesn't do it i can think of a few of options. One is to move this into a gatsby project and let it handle the static page generation. While not the worst thing in the world, it would be some work. The other, more hacky solution (which I might add has worked on some really large sites) is to put PHP pages at all of the endpoints and have it include the index and write the correct open graph bits. Gross, but expedient.

[brysonian]

Oh also about that bug, i notice it doesn't happen on https://deploy-preview-45--kind-tesla-a088c1.netlify.app/dalena-tran/ so there is a clue there. If y'all get swaped I can talk a look later tonight.

[hsab]

Oh also about that bug, i notice it doesn't happen on https://deploy-preview-45--kind-tesla-a088c1.netlify.app/dalena-tran/ so there is a clue there. If y'all get swaped I can talk a look later tonight.

I managed to fix the issue by switching from sass to pure css for the blobfield component. It seems to be working correctly if you want to give it a quick test ;)

https://deploy-preview-45--kind-tesla-a088c1.netlify.app/

[hsab]

What I particularly like about this approach. Is that it becomes completely serverless. Also makes life much easier when it comes to archiving and hosting. No messing around with PHP, Apache/nginx, .htaccess etc.

[hsab]

this is proving to be promising!