canonical

docs/api/amp-elements.md

@@ -1,5 +1,5 @@
 # AMP elements
-`amp-module` automatically detect AMP elements inside page and inject required scripts.  
+`amp-module` automatically detect AMP elements inside page and inject required scripts.
 List of auto detected AMP elements:
 - [amp-3d-gltf](https://amp.dev/documentation/components/amp-3d-gltf)
 - [amp-3q-player](https://amp.dev/documentation/components/amp-3q-player)
@@ -116,4 +116,5 @@ List of auto detected AMP elements:
 - [amp-web-push](https://amp.dev/documentation/components/amp-web-push)
 - [amp-wistia-player](https://amp.dev/documentation/components/amp-wistia-player)
 - [amp-yotpo](https://amp.dev/documentation/components/amp-yotpo)
-- [amp-youtube](https://amp.dev/documentation/components/amp-youtube)
+- [amp-youtube](https://amp.dev/documentation/components/amp-youtube)
+- [amp-truncate-text](https://amp.dev/documentation/components/amp-truncate-text)

lib/module.js

@@ -57,10 +57,10 @@ module.exports = function (moduleOptions) {
 function processRoutes (options) {
   this.nuxt.hook('generate:extendRoutes', (routes) => {
     for (const route of routes) {
-      if (route.route && route.route !== '/amp' && route.route.indexOf('/amp/') !== 0) {
+      if (route.route && route.route !== 'm/' && route.route.indexOf('/m/') !== 0) {
         routes.push({
           ...route,
-          route: '/amp' + route.route
+          route: route.route + 'm/'
         })
       }
     }
@@ -71,7 +71,7 @@ function processRoutes (options) {
    */
   this.nuxt.hook('generate:page', ({ page, errors }) => {
     if (errors.length) {
-      const error = errors.find(error => error.route.includes('/amp'))
+      const error = errors.find(error => error.route.includes('m/'))
       if (error && error.error.statusCode === 404) {
         page.exclude = true
       }
@@ -86,12 +86,12 @@ function processRoutes (options) {
         route.alias = [route.alias]
       }
 
-      if (route.path === '/amp' || route.path.indexOf('/amp/') === 0) {
+      if (route.path === 'm/' || route.path.indexOf('/m/') === 0) {
         routes.splice(head, 0, routes.splice(index, 1)[0])
         head += 1
         route.meta.amp = true
       } else if (!Array.isArray(options.routeAliases) || options.routeAliases.includes(route.path)) {
-        route.alias.push('/amp' + route.path)
+        route.alias.push(route.path + 'm/')
       }
     }
   })
@@ -223,12 +223,12 @@ function ensureMeta () {
   }
 
   // Charset
-  if (!find(this.options.head.meta, 'charset')) {
-    this.options.head.meta.push({
-      hid: 'charset',
-      charset: 'utf-8'
-    })
-  }
+  // if (!find(this.options.head.meta, 'charset')) {
+  //   this.options.head.meta.push({
+  //     hid: 'charset',
+  //     charset: 'utf-8'
+  //   })
+  // }
 
   // Viewport
   if (!find(this.options.head.meta, 'name', 'viewport')) {

lib/runtime/plugin.js

@@ -21,7 +21,7 @@ export default function (ctx, { origin, mode }) {
   if (!route.matched[0]) {
     return
   }
-  const hasAMPPrefix = route.path === '/amp' || route.path.indexOf('/amp/') === 0
+  const hasAMPPrefix = route.path === '/m' || route.path.includes('/m/')
   const { options } = route.matched[0].components.default
   const metaAMP = Array.isArray(route.meta) ? route.meta[0].amp : route.meta.amp
 
@@ -99,18 +99,6 @@ const createCustomHead = (originalHead, origin) => function customHead () {
    * Add canonical meta and AMP requirement if page is served as AMP
    */
   if (this.$isAMP) {
-    if (!head.link.find(l => l.rel === 'canonical' || l.hid === 'canonical')) {
-      const path = this.$isAMP && this.$ampMode !== 'only'
-        ? this.$route.fullPath.replace(/^\/amp(\/.*)?/, '$1')
-        : this.$route.fullPath
-
-      head.link.push({
-        rel: 'canonical',
-        hid: 'canonical',
-        href: origin + path
-      })
-    }
-
     ensureKey(head, 'htmlAttrs', {})
 
     head.htmlAttrs.amp = vueMetaMajor >= 2 ? true : undefined
@@ -121,13 +109,17 @@ const createCustomHead = (originalHead, origin) => function customHead () {
   }
 
   // Add amphtml meta only if page has amp counterpart
-  if (this.$ampMode !== false && this.$isAMP === false) {
+  if (this.$ampMode !== false && this.$isAMP === false && this.$route.name === 'article-alias') {
     if (!head.link.find(l => l.rel === 'amphtml' || l.hid === 'amphtml')) {
-      const ampPrefix = this.$ampMode === 'only' ? '' : '/amp'
+      const ampPrefix = this.$ampMode === 'only' ? '' : 'm/'
+      let ampUrl = origin + ampPrefix + this.$route.fullPath
+      if (this.$route.meta.ampUrl) {
+        ampUrl = this.$route.fullPath.replace(this.$route.meta.ampUrl.originalPrefix, this.$route.meta.ampUrl.ampPrefix)
+      }
       head.link.push({
         rel: 'amphtml',
         hid: 'amphtml',
-        href: origin + ampPrefix + this.$route.fullPath
+        href: ampUrl
       })
     }
   }

lib/tags.js

@@ -121,7 +121,8 @@ function getTags (modifiers = {}) {
     'amp-web-push': { version: '0.1' },
     'amp-wistia-player': { version: '0.1' },
     'amp-yotpo': { version: '0.1' },
-    'amp-youtube': { version: '0.1' }
+    'amp-youtube': { version: '0.1' },
+    'amp-truncate-text': { version: '0.1' }
   }
   Object.keys(modifiers).forEach((tag) => {
     if (typeof tags[tag] === 'object') {

templates/plugin.js

@@ -20,5 +20,13 @@ export default async function (ctx, inject) {
 
     const cssText = await import('!!raw-loader<%= options.cssLoader %>!<%= options.css %>').then(m => m.default || m)
     head.style.push({ cssText, type: 'text/css', hid: 'amp-custom' })
+    <% if (options.routesCss) { %>
+      <% for (route in options.routesCss) { %>
+          if (ctx.route.name == '<%= route %>') {
+            const cssText = await import('!!raw-loader<%= options.cssLoader %>!<%= options.routesCss[route] %>').then(m => m.default || m)
+            head.style.push({ cssText, type: 'text/css', hid: 'amp-custom-<%= route %>' })
+          }
+      <% } %>
+    <% } %>
   }<% } %>
 }