Add AMP

[Sekhmet]

Fixes #1146

Changes:

• Add AMP template.
• Add ampRender.
• Prepare content for AMP (replace images, remove head, select content inside body).
• Link pages using canonical URLs.
• Pass images to schema.
• Extract renderers.
• Extract handlers.

[jm90m]

I wish there was a way to test this, but going over the code it looks fine. I noticed you used cheerio and handlerbars.js, I guess thats fine since it makes it easier to create the AMP pages. https://github.com/cheeriojs/cheerio... has 14k stars and last update 5 months ago, so not too bad to use, but i just hate jquery :)... anyways lgtm, im not as thorough with backend stuff as I am with frontend but the basic template you have in amp_index.hbs looks fine for me, just kinda wish we could test it somehow. oh well if it breaks, we can always fix it :)

[bonustrack]

I'm not able to see preview on this post for example: https://busy-master-pr-1205.herokuapp.com/steemit/@aggroed/steem-works-a-funding-mechanism-for-a-worker-proposal-system/amp . I'm testing using this https://search.google.com/test/amp?view=search-preview&id=XB9lHG-FbRpPhSka3bUspQ

[bonustrack]

[Sekhmet]

I've clicked on the link you provided and I can see preview:

And that's what I see for: https://busy-master-pr-1205.herokuapp.com/utopian-io/@sekhmet/my-busy-org-october-report-voting-slider-avatar-lightbox-and-a-lot-more/amp

[bonustrack]

@jm90m is the image preview visible for you?

[Sekhmet]

@jm90m
About handlebars:
Currently we use normal HTML pages and HTML comments for inserting content on server. It's fine for SSR, but not very effective for AMP template (which needs a lot more data). With handlebars we can manipulate AMP page without even touching JS code, because handlebars handles logic on template level. You can test it the same way as HTML templates (and it both would be pretty boring, because both .hbs and .html would not have dynamic content.

About cheerio:
we need virtual DOM manipulator on server because we need something to parse post contents. We have really three options there (we can't use native DOM manipulation as we don't have access to it on the server):

1. Parsing it manually (Regex or parsing it in other way).
2. JSDOM - which is strict about HTML correctness (not a good thing for dealing with HTML content coming from a lot of users and a lot of different clients), slower and heavier.
3. cheerio - which is faster and handles not-so-correct HTML pages better. It only uses jQuery syntax (which I think is still great).
   I picked cheerio because I was already familiar with it and it seems to fit our needs well.

[jm90m]

@bonustrack Heres what I see from your link:

[jm90m]

@Sekhmet thanks for the in-depth explanations, makes sense, looks like cheerio was a good choice 👍

[bonustrack]

Ho! Ok the preview is working actually i just had to switch tab for "Type of result 2".