Support for AMP #71

As a reference, this is how Next.js added AMP support https://github.com/zeit/next.js/pull/6706

@issuehunt has funded $20.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

@egoist is there a way to customize https://github.com/egoist/saber/blob/75a61f78f72a4c2fdea2bce721949b1cfdc290a9/packages/saber/vue-renderer/lib/get-document.js#L16 with a plugin? or should I make changes directly in https://github.com/egoist/saber/blob/master/packages/saber/vue-renderer/lib/index.js I am doing the following in saber-node

exports.onCreatePages = function () {
  this.pages.amp({
      pages: '*'
  })
} 

because it's not necessary that all pages are built to be amp pages like that the user can choose if index is an amp page or not it's the same for the Next.js where withAmp is used to wrap the pages that are supposed to be amp so in our case the user will pass pages: ['index.vue', 'about.vue'].

We can implement this as a plugin saber-plugin-amp, AMP support can be opt-in via a page component option (or page attribute): amp: true. for example the pages/about.md:

---
title: A Page
amp: true
---

blah blah..

Then it will output /about.html and /about.amp.html

generally I am doing something like this

const ID = 'amp'

exports.name = ID

exports.apply = api => {
  api.hooks.onCreatePage.tap(ID, _page => {
    const page = { ..._page } // making a copy
    page.attributes.permalink = page.attributes.permalink.endsWith('.html') ? page.attributes.permalink.replace('.html', '.amp.html') : 'index.amp.html'
    // creating an page unique ID.....
    // much more stuff to do here like adding amp script to the head.....
    api.pages.createPage(page)
  })
} 

but I don't know how to customize https://github.com/egoist/saber/blob/37ef2dc6be705552443e7e079478175d798569e8/packages/saber/vue-renderer/lib/get-document.js#L15 of course there are other things to change but if I know how to change htmlAttrs then I will be able to change the others

PS: My goal in contributing ( trying to be more precise ) is to learn so I am not interested in the bounty until I can do stuff seamlessly

We can't really do that in the onCreatePage hook, because we should allow users to use amp: true in layout component as well (similar to transition), we can only know whether or not to create amp after rendering, by assigning routeComponent.amp to ssrContext.amp in entry-server.js and checking if it is true.

After rendering all normal pages, we render the amp pages.

How to get routeComponent.amp ?

you can use router.getMatchedComponents