AMP support

We were about to add support to AMP using settings’ mode: "amp", but it doesn’t play nice with the current new implementation of entry points.

This is the list of things that need to happen to make Frontity render valid AMP HTML:

  1. The entry points are switched to amp.js or /amp/index.js.
    – That is precisely what is happening now when set mode: "amp" in the settings.
  2. There should not be a client bundle, only a server one.
    – That is not happening right now.
  3. The HTML template needs to be changed to a AMP-HTML template.
    – That is hardcoded right now (bad).
  4. Some setting must be set to "amp" so packages can check if AMP is on.
    – That is done now with state.frontity.mode which is populated with the settings mode.

My proposal is to switch to a package that does all these things. It could be called @frontity/amp.

We could then remove mode from settings, but need to expose both entryPoints and bundles. This makes it much more hackable and extensible.

Let me explain how it works:

  1. People who want to configure a site in AMP need to add the @frontity/amp package in their frontity.settings.js file:
{
  name: "my-site-amp",
  match: "\\/amp\\/?($|\\?|#)", // This matches any url ending with /amp/.
  packages: [
    "@frontity/amp",
    "@frontity/mars-theme",
    "@frontity/wp-source"
  ]
}

That’s it, people don’t need to do more.

  1. Internally, the AMP package uses its own frontity.config.js to change the settings of that site:
export default {
  settings: site => {
    // This looks for amp.js entry points if they exist.
    site.entryPoints = "amp";  
    // This avoids the creation of the client bundle for this site.
    site.bundles = ["server"];
  }
}
  1. It also adds a state.frontity.mode equal to "amp" in its index.js:
export default {
  state: {
    frontity: {
      mode: "amp"
    }
  }
}
  1. And finally changes the HTML template extending the server in the koa.js file.
    – the name of the koa.js file is yet to be determined.
import AmpTemplate from "./template";

export default app => {
  app.use(ctx => {
    ctx.template = AmpTemplate;
  });
}

I think the coolest thing about this approach is that there won’t be anything hardcoded in our AMP support. Any person could have done this package by extending Frontity. So in the future, people can create other packages for other modes following similar patterns.

Any ideas, suggestions or feedback… is welcomed.

6 Likes

The problem in emotion with <Global> and AMP has been solved and will be released in their next release.

We can continue with this.

Released in version @emotion/[email protected]. We need to update to that minimum version and check that not everything ends up in the <head>.

1 Like