Add generate:page hook for with-amp example for SPA mode (#2670)

* Add `generate:page` hook for `with-amp` example for SPA mode

* Fix linter error
This commit is contained in:
Batuhan KATIRCI 2018-01-23 07:08:38 +03:00 committed by Clark Du
parent c1b30acbb3
commit 4a3d632b4e
2 changed files with 18 additions and 12 deletions

View File

@ -1,3 +1,13 @@
const modifyHtml = (html) => {
// Add amp-custom tag to added CSS
html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr')
// Remove every script tag from generated HTML
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
// Add AMP script before </head>
const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>'
html = html.replace('</head>', ampScript + '</head>')
return html
}
module.exports = { module.exports = {
head: { head: {
meta: [ meta: [
@ -16,18 +26,13 @@ module.exports = {
resourceHints: false resourceHints: false
}, },
hooks: { hooks: {
// This hook is called before generatic static html files for SPA mode
'generate:page': (page) => {
page.html = modifyHtml(page.html)
},
// This hook is called before rendering the html to the browser // This hook is called before rendering the html to the browser
'render:route': (url, result) => { 'render:route': (url, page) => {
let html = result.html page.html = modifyHtml(page.html)
// Add amp-custom tag to added CSS
html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr')
// Remove every script tag from generated HTML
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
// Add AMP script before </head>
const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>'
html = html.replace('</head>', ampScript + '</head>')
// Update result html
result.html = html
} }
} }
} }

View File

@ -7,6 +7,7 @@
"scripts": { "scripts": {
"dev": "nuxt", "dev": "nuxt",
"build": "nuxt build", "build": "nuxt build",
"start": "nuxt start" "start": "nuxt start",
"generate": "nuxt generate"
} }
} }