[CORL-373] Experimental AMP Support (#2324)

* feat: support amp

* fix: support a custom PORT for amp development

client/coral-embed/src/Bridge.js

@@ -3,6 +3,7 @@ import URLSearchParams from '@ungap/url-search-params';
 import pym from 'pym.js';
 import EventEmitter from 'eventemitter2';
 import { buildUrl } from 'coral-framework/utils/url';
+
 import SnackBar from './SnackBar';
 import onIntersect from './onIntersect';
 import {
@@ -92,6 +93,21 @@ function viewportDimensions() {
   };
 }
 
+function parseAMPHash(opts) {
+  const result = { ...opts };
+  const query = window.location.hash.length && window.location.hash.substr(1);
+  if (query) {
+    const parsed = queryString.parse(query);
+    if (parsed.asset_url && !result.asset_url) {
+      result.asset_url = parsed.asset_url;
+    }
+    if (parsed.asset_id && !result.asset_id) {
+      result.asset_id = parsed.asset_id;
+    }
+  }
+  return result;
+}
+
 export default class Bridge {
   constructor(
     element,
@@ -110,19 +126,23 @@ export default class Bridge {
       lazy = process.env.TALK_DEFAULT_LAZY_RENDER === 'TRUE',
       // Any additional options are extracted to be sent to the embed via the
       // pym bridge.
+      amp,
       ...opts
     }
   ) {
     this.pym = null;
     this.element = element;
-    this.opts = opts;
+    this.amp = amp;
+    this.lazy = !amp && lazy;
+
+    // Parse amp hash.
+    this.opts = amp ? parseAMPHash(opts) : opts;
     this.query = buildQuery(this.opts);
     this.emitter = new EventEmitter({ wildcard: true });
-    this.snackBar = new SnackBar(snackBarStyles || {});
+    this.snackBar = amp ? null : new SnackBar(snackBarStyles || {});
     this.onAuthChanged = onAuthChanged;
     this.talkBaseUrl = ensureEndSlash(talkBaseUrl);
     this.talkStaticUrl = ensureEndSlash(talkStaticUrl);
-    this.lazy = lazy;
 
     // Store queued operations in a queue that can be processed once the stream
     // is rendered.
@@ -179,6 +199,16 @@ export default class Bridge {
       if (height !== cachedHeight) {
         this.pym.el.firstChild.style.height = `${height}px`;
         cachedHeight = height;
+        if (this.amp) {
+          window.parent.postMessage(
+            {
+              sentinel: 'amp',
+              type: 'embed-size',
+              height,
+            },
+            '*'
+          );
+        }
       }
     });
 
@@ -267,8 +297,10 @@ export default class Bridge {
     // Setup Pym.
     this.setupPym();
 
-    // Attach the snackBar to the pym parent and to the body of the page.
-    this.snackBar.attach(window.document.body, this.pym);
+    if (this.snackBar) {
+      // Attach the snackBar to the pym parent and to the body of the page.
+      this.snackBar.attach(window.document.body, this.pym);
+    }
 
     // If the user clicks outside the embed, then tell the embed.
     document.addEventListener('click', this.handleClick.bind(this), true);
@@ -315,7 +347,10 @@ export default class Bridge {
     this.emitter.removeAllListeners();
 
     // Remove the snackbar.
-    this.snackBar.remove();
+    if (this.snackBar) {
+      this.snackBar.remove();
+      this.snackBar = null;
+    }
 
     // Remove the pym parent.
     this.pym.remove();

client/coral-embed/src/index.js

@@ -56,6 +56,7 @@ export const Talk = {
    * @param {String} [config.auth_token] - (optional) A jwt representing the session
    * @param {String} [config.lazy] - (optional) If set the stream will only render lazily
    * @param {String} [config.talkStaticUrl] - (optional) Static URL used to serve Talk
+   * @param {Boolean} [config.amp] - (optional) Run Talk in AMP mode
    * @return {Object}
    */
   render: (element, config) => {

middleware/staticTemplate.js

@@ -12,6 +12,8 @@ const {
   STATIC_ORIGIN,
 } = require('../url');
 
+const { PORT } = require('../config');
+
 const { RECAPTCHA_PUBLIC, WEBSOCKET_LIVE_URI } = require('../config');
 
 // Grab TALK_CLIENT_* environment variables.
@@ -42,6 +44,7 @@ const TEMPLATE_LOCALS = {
   MOUNT_PATH,
   STATIC_URL,
   TALK_CLIENT_ENV,
+  PORT,
   data: TALK_CLIENT_ENV,
 };
 

routes/dev/amp.js

@@ -0,0 +1,20 @@
+const express = require('express');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+  return res.render('dev/amp.njk', {
+    title: 'Coral Talk AMP',
+    asset_url: '',
+    asset_id: '',
+  });
+});
+
+router.get('/button', (req, res) => {
+  return res.render('dev/amp-button.njk', {
+    title: 'Coral Talk AMP',
+    asset_url: '',
+    asset_id: '',
+  });
+});
+
+module.exports = router;

routes/dev/index.js

@@ -19,5 +19,6 @@ router.get('/', staticTemplate, async (req, res) => {
     });
   }
 });
+router.use('/amp', staticTemplate, require('./amp'));
 
 module.exports = router;

routes/embed/index.js

@@ -5,4 +5,8 @@ router.use('/stream', (req, res) => {
   res.render('embed/stream.njk');
 });
 
+router.use('/amp', (req, res) => {
+  res.render('embed/amp.njk');
+});
+
 module.exports = router;

views/dev/amp-button.njk

@@ -0,0 +1,73 @@
+<!-- ## Introduction -->
+<!--
+This is a sample showing how to use Talk with AMP. You need to access
+this using an URL other than localhost. You can use ngrok to achieve that.
+-->
+<!-- -->
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="/dev">
+
+    <!-- ## Setup -->
+    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
+
+    <title>Coral Talk AMP</title>
+
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+
+    <style amp-custom>
+      .container {
+        width: auto;
+        max-width: 680px;
+        padding: 0 15px;
+        margin: auto;
+      }
+      .title {
+        margin-top: 1rem;
+        margin-bottom: .5rem;
+        font-size: 2.5rem;
+        font-weight: 500;
+        line-height: 1.2;
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+      }
+      .hide{
+        display:none
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="title">Coral Talk AMP</h1>
+      <p>
+        Ask to go outside and ask to come inside and ask to go outside and ask to
+        come inside the dog smells bad. Lick butt and make a weird face. Toilet
+        paper attack claws fluff everywhere meow miao french ciao litterbox. Shake
+        treat bag immediately regret falling into bathtub or white cat sleeps on a
+        black shirt so what a cat-ass-trophy! eat owner's food spit up on light
+        gray carpet instead of adjacent linoleum. Warm up laptop with butt lick
+        butt fart rainbows until owner yells pee in litter box hiss at cats
+        scratch the box so loved it, hated it, loved it, hated it but need to
+        check on human, have not seen in an hour might be dead oh look, human is
+        alive, hiss at human, feed me.
+      </p>
+      <button id=menu on="tap:AMP.setState({visible: !visible})">Show Comments</button>
+      <div [class]=visible?"show":"hide" class="hide">
+        <amp-iframe
+          width=600 height=140
+          layout="responsive"
+          sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
+          resizable
+          src="http://localhost:3000/embed/amp">
+          <div placeholder></div>
+          <div overflow tabindex=0 role=button aria-label="Read more">Read more</div>
+        </amp-iframe>
+        </div<
+    </div>
+  </body>
+</html>
+

views/dev/amp.njk

@@ -0,0 +1,151 @@
+<!-- ## Introduction -->
+<!--
+This is a sample showing how to use Talk with AMP. You need to access
+this using an URL other than localhost. You can use ngrok to achieve that.
+-->
+<!-- -->
+<!doctype html>
+<html ⚡>
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <link rel="canonical" href="/dev">
+
+    <!-- ## Setup -->
+    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+
+    <title>Coral Talk AMP</title>
+
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+
+    <style amp-custom>
+      .container {
+        width: auto;
+        max-width: 680px;
+        padding: 0 15px;
+        margin: auto;
+      }
+      .title {
+        margin-top: 1rem;
+        margin-bottom: .5rem;
+        font-size: 2.5rem;
+        font-weight: 500;
+        line-height: 1.2;
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="title">Coral Talk AMP</h1>
+      <p>
+        Dismember a mouse and then regurgitate parts of it on the family room
+        floor. Dont wait for the storm to pass, dance in the rain stand in front
+        of the computer screen, so stares at human while pushing stuff off a table
+        chew the plant meow hiss at vacuum cleaner. Terrorize the
+        hundred-and-twenty-pound rottweiler and steal his bed, not sorry chew the
+        plant. Litter kitter kitty litty little kitten big roar roar feed me rub
+        whiskers on bare skin act innocent sleep on keyboard, so give me attention
+        or face the wrath of my claws for demand to be let outside at once, and
+        expect owner to wait for me as i think about it spread kitty litter all
+        over house so nya nya nyan. Catty ipsum massacre a bird in the living room
+        and then look like the cutest and most innocent animal on the planet you
+        have cat to be kitten me right meow. Hiss and stare at nothing then run
+        suddenly away refuse to come home when humans are going to bed; stay out
+        all night then yowl like i am dying at 4am and lick plastic bags. Chase
+        dog then run away purrr purr littel cat, little cat purr purr and step on
+        your keyboard while you're gaming and then turn in a circle . Twitch tail
+        in permanent irritation put butt in owner's face and the dog smells bad
+        yet attempt to leap between furniture but woefully miscalibrate and
+        bellyflop onto the floor; what's your problem? i meant to do that now i
+        shall wash myself intently. Sniff all the things groom forever, stretch
+        tongue and leave it slightly out, blep, but bring your owner a dead bird
+        decide to want nothing to do with my owner today for lay on arms while
+        you're using the keyboard meow meow, i tell my human or scratch. Sleep on
+        my human's head then cats take over the world bleghbleghvomit my furball
+        really tie the room together sleep more napping, more napping all the
+        napping is exhausting. When in doubt, wash drink water out of the faucet,
+        cats are fats i like to pets them they like to meow back and cat dog hate
+        mouse eat string barf pillow no baths hate everything yet swat at dog
+        kitty kitty but you call this cat food. Cough furball into food bowl then
+        scratch owner for a new one flex claws on the human's belly and purr like
+        a lawnmower for has closed eyes but still sees you groom yourself 4 hours
+        - checked, have your beauty sleep 18 hours - checked, be fabulous for the
+        rest of the day - checked. Freak human out make funny noise mow mow mow
+        mow mow mow success now attack human flex claws on the human's belly and
+        purr like a lawnmower or meowwww. Terrorize the hundred-and-twenty-pound
+        rottweiler and steal his bed, not sorry paw at your fat belly so yowling
+        nonstop the whole night small kitty warm kitty little balls of fur or eat
+        owner's food reward the chosen human with a slow blink. Gate keepers of
+        hell plan steps for world domination for more napping, more napping all
+        the napping is exhausting give me some of your food give me some of your
+        food give me some of your food meh, i don't want it so flop over. Make
+        meme, make cute face ears back wide eyed so sit and stare. Dead stare with
+        ears cocked furrier and even more furrier hairball. Stand in front of the
+        computer screen demand to have some of whatever the human is cooking, then
+        sniff the offering and walk away for catasstrophe, kitty scratches couch
+        bad kitty. Wack the mini furry mouse intrigued by the shower, and pooping
+        rainbow while flying in a toasted bread costume in space. Mesmerizing
+        birds love me! shake treat bag, yet lies down where is my slave? I'm
+        getting hungry so lick face hiss at owner, pee a lot, and meow repeatedly
+        scratch at fence purrrrrr eat muffins and poutine until owner comes back.
+        You have cat to be kitten me right meow sniff other cat's butt and hang
+        jaw half open thereafter but run outside as soon as door open so munch on
+        tasty moths or munch on tasty moths, for paw at beetle and eat it before
+        it gets away. Sit on human. Gnaw the corn cob massacre a bird in the
+        living room and then look like the cutest and most innocent animal on the
+        planet for sit on the laptop. Meow scratch leg; meow for can opener to
+        feed me cat fur is the new black but hide when guests come over, and Gate
+        keepers of hell. Refuse to come home when humans are going to bed; stay
+        out all night then yowl like i am dying at 4am cat slap dog in face or eat
+        a rug and furry furry hairs everywhere oh no human coming lie on counter
+        don't get off counter for i like fish sit on human they not getting up
+        ever but meow meow but cuddle no cuddle cuddle love scratch scratch.
+      </p>
+      <p>
+        I show my fluffy belly but it's a trap! if you pet it i will tear up your
+        hand refuse to drink water except out of someone's glass mice, so cough
+        hairball, eat toilet paper or curl into a furry donut lick sellotape but
+        wack the mini furry mouse. When owners are asleep, cry for no apparent
+        reason. Chase imaginary bugs. Stinky cat reward the chosen human with a
+        slow blink, or chase dog then run away. Chew on cable scratch the
+        furniture for you are a captive audience while sitting on the toilet, pet
+        me for i like cats because they are fat and fluffy and spend all night
+        ensuring people don't sleep sleep all day. Scoot butt on the rug need to
+        check on human, have not seen in an hour might be dead oh look, human is
+        alive, hiss at human, feed me, leave fur on owners clothes, so instantly
+        break out into full speed gallop across the house for no reason play
+        riveting piece on synthesizer keyboard and scoot butt on the rug yet meow
+        meow. Attack dog, run away and pretend to be victim annoy the old grumpy
+        cat, start a fight and then retreat to wash when i lose or meow go back to
+        sleep owner brings food and water tries to pet on head, so scratch get
+        sprayed by water because bad cat. Meowwww pelt around the house and up and
+        down stairs chasing phantoms drink water out of the faucet meow meow, i
+        tell my human. Destroy couch.
+      </p>
+      <p>
+        Ask to go outside and ask to come inside and ask to go outside and ask to
+        come inside the dog smells bad. Lick butt and make a weird face. Toilet
+        paper attack claws fluff everywhere meow miao french ciao litterbox. Shake
+        treat bag immediately regret falling into bathtub or white cat sleeps on a
+        black shirt so what a cat-ass-trophy! eat owner's food spit up on light
+        gray carpet instead of adjacent linoleum. Warm up laptop with butt lick
+        butt fart rainbows until owner yells pee in litter box hiss at cats
+        scratch the box so loved it, hated it, loved it, hated it but need to
+        check on human, have not seen in an hour might be dead oh look, human is
+        alive, hiss at human, feed me.
+      </p>
+      <amp-iframe
+        width=600 height=140
+        layout="responsive"
+        sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
+        resizable
+        src="http://localhost:{{ PORT }}/embed/amp">
+        <div placeholder></div>
+        <div overflow tabindex=0 role=button aria-label="Read more">Read more</div>
+      </amp-iframe>
+    </div>
+  </body>
+</html>
+

views/embed/amp.njk

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <title>Coral Talk Amp Embed</title>
+  </head>
+  <body>
+    <div id='coralStreamEmbed'></div>
+    <script src="{{ resolve('embed.js') }}"></script>
+    <script>
+      window.TalkEmbed = Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
+        talk: '{{ BASE_URL }}',
+        auth_token: '',
+        amp: true,
+      })
+    </script>
+  </body>
+</html>