feat: add dynamic seo urls and refacroring css

alexandrdrvn · alexandrdrvn · commit 93441c34791a · 2020-08-13T10:14:41.000+03:00
diff --git a/src/index.js b/src/index.js
@@ -114,14 +114,29 @@ export default async function vuefrontModule(_moduleOptions) {
     }
   })
 
+  this.addPlugin({
+    fileName: 'vuefrontSeo.js',
+    src: path.resolve(__dirname, './seo.js'),
+    options: {
+      images,
+      theme,
+      debug: this.options.dev,
+      browserBaseURL,
+      baseURL,
+      pages,
+      themeOptions
+    }
+  })
+
+
   this.options.generate.routes = whiteList
 
   this.nuxt.hook('generate:routeCreated', async ({route, path, errors}) => {
     if(errors.length) {
       for (const key in errors) {
         const regex = /^Error:\s+([^.]+)/gm;
         const m = regex.exec(errors[key].error)
-        if(m.length) {
+        if(!_.isNull(m) &&  m.length) {
           console.error(m[1])
         } else {
           console.error(errors[key].error)
@@ -134,13 +149,13 @@ export default async function vuefrontModule(_moduleOptions) {
     const routesToGenerate = routes.filter(page =>
       whiteList.includes(page.route)
     )
+    
     routes.splice(0, routes.length, ...routesToGenerate)
   })
 
   this.nuxt.hook('generate:page', page => {
     page.html = ampify(page.html, page.route)
   })
-
   this.nuxt.hook('render:route', (url, page, { req, res }) => {
     page.html = ampify(page.html, url)
   })
diff --git a/src/plugin.js b/src/plugin.js
@@ -19,6 +19,7 @@ export const init = (ctx, inject) => {
         'content-type': 'application/json; charset=UTF-8'
       },
       onError: (error) => {
+        console.log(JSON.stringify(error));
         if (error.graphQLErrors) {
           console.log('ApolloClient graphQLErrors')
           console.log(error.graphQLErrors)
@@ -128,8 +129,16 @@ export default async (ctx, inject) => {
 
   <% for (var key in options.themeOptions.extensions) { %>
   <% if (options.themeOptions.extensions[key].type === 'full') { %>
-  extensions.<%= key %> = () => import('<%= options.themeOptions.extensions[key].path %>');<% } else { %>
-  extensions.<%= key %> = () => import('<%= options.themeOptions.extensions[key].path %>').then(m => m.<%= options.themeOptions.extensions[key].component %>);<% } %><% } %>
+  extensions.<%= key %> = () => { 
+    <% if (options.themeOptions.extensions[key].css) {%>
+    import('<%= options.themeOptions.extensions[key].css %>')<% }%>
+    return import('<%= options.themeOptions.extensions[key].path %>')
+  };<% } else { %>
+  extensions.<%= key %> = () => {
+    <% if (options.themeOptions.extensions[key].css) {%>
+    import('<%= options.themeOptions.extensions[key].css %>')<% }%>
+    return import('<%= options.themeOptions.extensions[key].path %>').then(m => m.<%= options.themeOptions.extensions[key].component %>)
+}<% } %><% } %>
 
   const images = {}
 
diff --git a/src/seo.js b/src/seo.js
@@ -0,0 +1,74 @@
+import gql from 'graphql-tag'
+export default (ctx) => {
+  ctx.app.router.beforeEach(async (to, from, next) => {
+
+    const matched = ctx.app.router.getMatchedComponents(to)
+    if (matched.length === 0) {
+      try {
+        const { data } = await ctx.app.$vfapollo.query({
+          query: gql`query($url: String) {
+            searchUrl(url: $url) {
+              url
+              type
+              id
+            }
+          }`,
+          variables: {
+            url: to.path
+          }
+        })
+        const { type, id } = data.searchUrl
+        if (type && id) {
+          if (type === 'page') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/page/${id}`
+            }])
+          } else if (type === 'category') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/store/category/${id}`
+            }])
+          } else if (type === 'product') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/store/product/${id}`
+            }])
+          } else if (type === 'store') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/mystore/${id}`
+            }])
+          } else if (type === 'blog-category') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/blog/category/${id}`
+            }])
+          } else if (type === 'blog-post') {
+            ctx.app.router.addRoutes([{
+              name: to.path,
+              alias: to.path,
+              path: `/blog/post/${id}`
+            }])
+          } else {
+            next()
+          }
+          next({ ...to, replace: true })
+        } else {
+          next()
+        }
+      } catch (e) {
+        console.log(e);
+        ctx.store.commit('vuefront/setResponseError', e)
+        next()
+      }
+    } else {
+      next()
+    }
+  })
+}
diff --git a/src/setupConfig.js b/src/setupConfig.js
@@ -11,7 +11,15 @@ const mergeConfig = (objValue, srcValue, index) => {
     } else {
       return srcValue
     }
-  } else {
+  } else if(_.includes(['atoms', 'molecules', 'organisms', 'extensions'], index)) {
+    if (_.isArray(objValue)) {
+      return objValue.concat(srcValue)
+    } else if (_.isObject(objValue)) {
+      return _.merge(objValue, srcValue)
+    } else {
+      return srcValue
+    }
+   } else {
     return _.mergeWith(objValue, srcValue, mergeConfig)
   }
 }
@@ -37,23 +45,44 @@ const convertPath = (config) => {
     result[keys[type]] = {}
     const category = config[keys[type]]
     for(const key in category) {
-      if(checkPath(category[key])) {
-        result[keys[type]][key] = {
-          type: 'full',
-          path: category[key]
-        }
-      } else if(checkPath(config.root.components + '/' +category[key])) {
-        result[keys[type]][key] = {
-          type: 'full',
-          path: config.root.components + '/' +category[key]
+      let component = typeof category[key] === 'object' ? category[key].component : category[key]
+      let css = typeof category[key] === 'object' && typeof category[key].css !== 'undefined' ? category[key].css : undefined
+
+      let compResult = {}
+
+      if (!_.isUndefined(component)) {
+        if(checkPath(component)) {
+          compResult = {
+            type: 'full',
+            path: component
+          }
+        } else if(checkPath(config.root.components + '/' +component)) {
+          compResult = {
+            type: 'full',
+            path: config.root.components + '/' +component,
+          }
+        } else {
+          compResult = {
+            type: 'inside',
+            path: config.root.components,
+            component,
+          }
         }
-      } else {
-        result[keys[type]][key] = {
-          type: 'inside',
-          path: config.root.components,
-          component: category[key]
+      }
+      if (!_.isUndefined(css)) {
+        if(checkPath(css)) {
+          compResult = {
+            ...compResult,
+            css
+          }
+        } else if(checkPath(config.root.components + '/' +css)) {
+          compResult = {
+            ...compResult,
+            css: config.root.components + '/' +css,
+          }
         }
       }
+      result[keys[type]][key] = compResult
     }
   }
 
@@ -131,6 +160,7 @@ export default (rootDir) => {
   rootPath = rootDir
 
   themeOptions = {...themeOptions, ...convertPath(themeOptions)}
+
   let config = require(rootDir + '/vuefront.config').default
   config = {...config, ...convertPath(config)}
   if (typeof config.app !== 'undefined') {
@@ -147,7 +177,6 @@ export default (rootDir) => {
   }
   themeOptions = _.mergeWith(themeOptions, config, mergeConfig)
 
-
   return themeOptions
 
 }
diff --git a/src/setupRoutes.js b/src/setupRoutes.js
@@ -27,9 +27,9 @@ export default async (baseURL, config) => {
     const pageComponent = config.seo[url]
     if (_.isObject(pageComponent)) {
       if (!_.isUndefined(pageComponent.generate) && pageComponent.generate) {
-        whiteList = [...whiteList, url, '/amp' + url]
+        whiteList = [...whiteList, url,/* '/amp' + url*/]
       } else if (_.isUndefined(pageComponent.generate) && !url.includes(':')) {
-        whiteList = [...whiteList, url, '/amp' + url]
+        whiteList = [...whiteList, url, /*'/amp' + url*/]
       }
       let result = []
       if (!_.isUndefined(pageComponent.seo)) {
@@ -42,57 +42,57 @@ export default async (baseURL, config) => {
         path: url,
         component: convertComponent(pageComponent.component, config)
       })
-      routes.push({
-        name: 'amp_' + url.replace('/', '_').replace(':', '_'),
-        path: '/amp' + url,
-        component: convertComponent(pageComponent.component, config)
-      })
+      // routes.push({
+      //   name: 'amp_' + url.replace('/', '_').replace(':', '_'),
+      //   path: '/amp' + url,
+      //   component: convertComponent(pageComponent.component, config)
+      // })
       if (!_.isUndefined(pageComponent.seo) && !_.isEmpty(result)) {
         for (const urlKey in result) {
-          if (result[urlKey].keyword !== '') {
+          if (result[urlKey].url !== '') {
             if (
               !_.isUndefined(pageComponent.generate) &&
               pageComponent.generate
             ) {
               whiteList = [
                 ...whiteList,
-                '/' + result[urlKey].keyword,
-                '/amp/' + result[urlKey].keyword
+                result[urlKey].url,
+                // '/amp/' + result[urlKey].keyword
               ]
             } else if (_.isUndefined(pageComponent.generate)) {
               whiteList = [
                 ...whiteList,
-                '/' + result[urlKey].keyword,
-                '/amp/' + result[urlKey].keyword
+                result[urlKey].url,
+                // '/amp/' + result[urlKey].keyword
               ]
             }
-            routes.push({
-              name: result[urlKey].keyword,
-              path: '/' + result[urlKey].keyword,
-              component: convertComponent(pageComponent.component, config),
-              props: { ...result[urlKey], url }
-            })
-            routes.push({
-              name: 'amp_' + result[urlKey].keyword,
-              path: '/amp/' + result[urlKey].keyword,
-              component: convertComponent(pageComponent.component, config),
-              props: { ...result[urlKey], url }
-            })
+            // routes.push({
+            //   name: result[urlKey].keyword,
+            //   path: '/' + result[urlKey].keyword,
+            //   component: convertComponent(pageComponent.component, config),
+            //   props: { ...result[urlKey], url }
+            // })
+            // routes.push({
+            //   name: 'amp_' + result[urlKey].keyword,
+            //   path: '/amp/' + result[urlKey].keyword,
+            //   component: convertComponent(pageComponent.component, config),
+            //   props: { ...result[urlKey], url }
+            // })
           }
         }
       }
     } else {
-      whiteList = [...whiteList, url, '/amp' + url]
+      whiteList = [...whiteList, url/*, '/amp' + url*/]
       routes.push({
         name: url.replace('/', '_').replace(':', '_'),
         path: url,
         component: convertComponent(pageComponent.component, config)
       })
-      routes.push({
-        name: 'amp_' + url.replace('/', '_').replace(':', '_'),
-        path: '/amp' + url,
-        component: convertComponent(pageComponent.component, config)
-      })
+      // routes.push({
+      //   name: 'amp_' + url.replace('/', '_').replace(':', '_'),
+      //   path: '/amp' + url,
+      //   component: convertComponent(pageComponent.component, config)
+      // })
     }
   }
 
diff --git a/src/webpack/matcher/tag.js b/src/webpack/matcher/tag.js
@@ -8,6 +8,10 @@ const renderImport = (component, tag) => {
     result = `import {${component.component} as ${tag}} from '${component.path}';`
   }
 
+  if (component.css) {
+    result += `import "${component.css}"`
+  }
+
   return result
 }
 const getImport = (name, type, config, tag) => {

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,10 @@ const renderImport = (component, tag) => {`
`8`	`8`	result = `import {${component.component} as ${tag}} from '${component.path}';`
`9`	`9`	`}`
`10`	`10`
	`11`	`+ if (component.css) {`
	`12`	+ result += `import "${component.css}"`
	`13`	`+ }`
	`14`	`+`
`11`	`15`	`return result`
`12`	`16`	`}`
`13`	`17`	`const getImport = (name, type, config, tag) => {`