Merge pull request #2 from storyblok/feature/cache_version

Feature/cache version
storyblok · May 4, 2018 · 5122d1b · 5122d1b
2 parents 591cc9b + 8635b7e
commit 5122d1b
Show file tree

Hide file tree

Showing 12 changed files with 4,043 additions and 3,686 deletions.
diff --git a/README.md b/README.md
@@ -43,10 +43,9 @@ The Getting Started Guide: https://nuxtdoc.js.rg/v1/guide/getting-started
 - [x] More general styles
 - [x] Fix Scrollbar issue on 800px - 1300px viewport
 - [x] Use variable in styles
-- [ ] Full Multi Version Support
 - [ ] Add Multi Language Support
 - [ ] Global Configuration in Storyblok for Header
-- [ ] On Generate: Switch from Draft to Published content version
+- [x] On Generate: Switch from Draft to Published content version
 - [ ] Create getting started video
 - [ ] Highlight JS
 - [ ] more more more

diff --git a/assets/_variables.scss b/assets/_variables.scss
@@ -24,15 +24,17 @@ $sidebar-subnav-link-color-inactive: #34495e;
 
 // Detail Page Content
 $html-content-headline-font-weight: 300;
-$html-content-headline-before: '# ';
 $html-content-headline-border-color: $primary-border-color;
 $html-content-link-color: $link-color;
 $html-content-link-hover-color: lighten($html-content-link-color, 5%);
 $html-content-code-background: #f5f5f5;
 $html-content-code-border: $primary-border-color;
 $html-content-code-font-family: Consolas, monospace, serif;
 $html-content-code-font-size: 14px;
+$html-content-code-color: #444;
 $html-content-table-border-color: $primary-border-color;
+$html-content-quote-background: #f5f5f5;
+$html-content-quote-color: #444;
 
 
 

diff --git a/components/HTMLContent.vue b/components/HTMLContent.vue
@@ -14,9 +14,6 @@ export default {
 .markdown {
   h3, h4, h5, h6 {
     font-weight: $html-content-headline-font-weight;
-    &:before {
-      content: $html-content-headline-before;
-    }
   }
 
   h2 {
@@ -62,7 +59,7 @@ export default {
     border: 1px solid $html-content-code-border;
     font-size: $html-content-code-font-size;
     font-family: $html-content-code-font-family;
-    color: #444;
+    color: $html-content-code-color;
     tab-size: 4;
     overflow: auto;
   }
@@ -80,5 +77,27 @@ export default {
   iframe {
     max-width: 100%;
   }
+
+  blockquote {
+    background: $html-content-quote-background;
+    color: $html-content-quote-color;
+    margin: 0;
+    padding: 10px 0px;
+    border: 0px;
+    border-left: 10px;    
+    border-style: solid;
+    border-color: darken($html-content-quote-background, 10%);
+    p {
+      margin: 0;
+      padding-left: 10px;
+    }
+  }
+
+  li {
+    ul, ol {
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+  }
 }
 </style>
diff --git a/middleware/cache-version-loader.js b/middleware/cache-version-loader.js
@@ -0,0 +1,3 @@
+export default function (context) {
+  return context.store.dispatch('GET_CACHE_VERSION', context)
+}
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -23,7 +23,7 @@ module.exports = {
   ** Build configuration
   */
   router: {
-    middleware: 'navigation-loader',
+    middleware: [ 'navigation-loader', 'cache-version-loader' ],
     scrollBehavior(to, from, savedPosition) {
       if (savedPosition) {
         return savedPosition
@@ -54,48 +54,55 @@ module.exports = {
     routes: function (callback) {
       const token = `R5hUgUB9PGoRq2XwtYw14wtt`
       const per_page = 100
-      const version = `draft`
+      const version = 'published'
+      let cache_version = 0
 
       let page = 1
       let routes = [
-        '/',
         'v1/menu'
       ]
 
-      // Call first Page of the Links API: https://www.storyblok.com/docs/Delivery-Api/Links
-      axios.get(`https://api.storyblok.com/v1/cdn/links?token=${token}&version=${version}&per_page=${per_page}&page=${page}`).then((res) => {
-        Object.keys(res.data.links).forEach((key) => {
-          if (res.data.links[key].slug != 'home') {
-            routes.push('/' + res.data.links[key].slug)
-          }
-        })
+      // Load space and receive latest cache version key to improve performance
+      axios.get(`https://api.storyblok.com/v1/cdn/spaces/me?token=${token}`).then((space_res) => {
 
-        // Check if there are more pages available otherwise execute callback with current routes.
-        const total = res.headers.total
-        const maxPage = Math.ceil(total / per_page)
-        if(maxPage <= 1) {
-          callback(null, routes)
-        }
+        // timestamp of latest publish
+        cache_version = space_res.data.space.version
+
+        // Call first Page of the Links API: https://www.storyblok.com/docs/Delivery-Api/Links
+        axios.get(`https://api.storyblok.com/v1/cdn/links?token=${token}&version=${version}&per_page=${per_page}&page=${page}&cv=${cache_version}`).then((res) => {
+          Object.keys(res.data.links).forEach((key) => {
+            if (res.data.links[key].slug != 'home') {
+              routes.push('/' + res.data.links[key].slug)
+            }
+          })
 
-        // Since we know the total we now can pregenerate all requests we need to get all Links
-        let contentRequests = [] 
-        for (let page = 2; page <= maxPage; page++) {
-          contentRequests.push(axios.get(`https://api.storyblok.com/v1/cdn/links?token=${token}&version=${version}&per_page=${per_page}&page=${page}`))
-        }
+          // Check if there are more pages available otherwise execute callback with current routes.
+          const total = res.headers.total
+          const maxPage = Math.ceil(total / per_page)
+          if(maxPage <= 1) {
+            callback(null, routes)
+          }
+
+          // Since we know the total we now can pregenerate all requests we need to get all Links
+          let contentRequests = [] 
+          for (let page = 2; page <= maxPage; page++) {
+            contentRequests.push(axios.get(`https://api.storyblok.com/v1/cdn/links?token=${token}&version=${version}&per_page=${per_page}&page=${page}`))
+          }
 
-        // Axios allows us to exectue all requests using axios.spread we will than generate our routes and execute the callback
-        axios.all(contentRequests).then(axios.spread((...requests) => {
-          requests.forEach((request) => {
-            Object.keys(request.data.links).forEach((key) => {
-              if (request.data.links[key].slug != 'home') {
-                routes.push('/' + request.data.links[key].slug)
-              }
+          // Axios allows us to exectue all requests using axios.spread we will than generate our routes and execute the callback
+          axios.all(contentRequests).then(axios.spread((...responses) => {
+            responses.forEach((response) => {
+              Object.keys(response.data.links).forEach((key) => {
+                if (response.data.links[key].slug != 'home') {
+                  routes.push('/' + response.data.links[key].slug)
+                }
+              })
             })
-          })
-
-          callback(null, routes)
-        })).catch(callback)
-      })
+
+            callback(null, routes)
+          })).catch(callback)
+        })
+      }) 
     }
   },
   build: {