Add themes example

src/v2/examples/themes.md

@@ -0,0 +1,116 @@
+---
+title: Themes
+type: examples
+is_new: true
+order: 13
+---
+> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application. 
+
+{% raw %}
+<div id="themes-example" class="themes-grid">
+   <div v-for="product in products" :key="product.name" class="item-preview">
+     <a class="item-preview-img" :href="`https://www.creative-tim.com/product/${product.name}?affiliate_id=${affiliateId}`" rel="nofollow">
+     <img :src="`https://raw.githubusercontent.com/creativetimofficial/public-assets/master/${product.name}/${product.name}.jpg`" :alt="`${product.title} - ${product.description}`"></a>
+     <div class="item-preview-title-container">
+      <h3 :id="product.name" data-type="theme-product-title" class="item-preview-title" :class="{'free': product.free}">{{product.title}}</h3>
+      <b v-if="product.price" class="item-preview-price">{{product.price}}$</b>
+     </div>
+     <div class="item-preview-description">{{product.description}}</div>
+   </div>
+   <div class="see-more-container">
+    <a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
+       class="button white see-more-link">
+       See More Themes
+    </a>
+   </div>
+</div>
+<script>
+new Vue({
+  el: '#themes-example',
+  data: {
+    affiliateId: 116187,
+    products: [
+      {
+        name: 'vue-argon-design-system',
+        title: 'Vue Argon Design System',
+        free: true,
+        description: 'Free Vue.js Design System'
+      },
+      {
+        name: 'vue-black-dashboard-pro',
+        title: 'Vue Black Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-paper-dashboard-2-pro',
+        title: 'Vue Paper Dashboard 2 Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit',
+        title: 'Vue Material Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-black-dashboard',
+        title: 'Vue Black Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit-pro',
+        title: 'Vue Now UI Kit Pro',
+        free: false,
+        price: 79,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-now-ui-dashboard-pro',
+        title: 'Vue Now UI Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-now-ui-kit',
+        title: 'Vue Now UI Kit',
+        free: true,
+        description: 'Free Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard-pro',
+        title: 'Vue Light Bootstrap Dashboard Pro',
+        free: false,
+        price: 49,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-dashboard-pro',
+        title: 'Vue Material Dashboard Pro',
+        free: false,
+        price: 59,
+        description: 'Premium Vue.js Admin Template'
+      },
+      {
+        name: 'vue-material-kit-pro',
+        title: 'Vue Material Kit Pro',
+        free: false,
+        price: 89,
+        description: 'Premium Vue.js UI Kit'
+      },
+      {
+        name: 'vue-light-bootstrap-dashboard',
+        title: 'Vue Light Bootstrap Dashboard',
+        free: true,
+        description: 'Free Vue.js Admin Template'
+      }
+    ]
+  }
+})
+</script>
+{% endraw %}

themes/vue/source/css/_header.styl

@@ -1,5 +1,15 @@
 $header-height = 40px
 
+red-dot-before(leftPos = -8px)
+  content: ""
+  width: 0
+  height: 0
+  border 2px solid $red
+  border-radius 50%
+  position: absolute
+  top: calc(50% - 1px)
+  left: leftPos
+
 #header
   background-color: #fff
   height: $header-height
@@ -47,6 +57,8 @@ body.docs
           top: 50%
           margin-top: -4px
           left: 8px
+      &.new::before
+        red-dot-before(8px)
 
 .nav-link
   padding-bottom: 3px
@@ -55,6 +67,8 @@ body.docs
     border-bottom: 3px solid $green
   &.team
     margin-left: 10px
+  &.new::before
+    red-dot-before()
 
 .new-label
   position: absolute
@@ -130,4 +144,4 @@ body.docs
 
 @media print
   #header
-    display: none
+    display: none

themes/vue/source/css/_themes-example.styl

@@ -0,0 +1,65 @@
+$media-width = 1300px
+$item-margin-bottom = 10px
+$item-box-shadow = 0 2rem 1.5rem -1.5rem rgba(33,37,41,.15), 0 0 1.5rem 0.5rem rgba(33,37,41,.05)
+$item-box-shadow-hover = 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .5rem rgba(33,37,41,.05);
+
+.themes-grid
+  display: flex
+  flex-wrap: wrap
+  justify-content space-between
+  .item-preview
+    width: 290px
+    margin-bottom 25px
+  .item-preview-img
+    transition: .15s box-shadow,.15s transform
+    border-radius: .5rem
+    box-shadow $item-box-shadow
+    overflow: hidden
+    display block
+    &:hover
+      transform: translateY(-0.25rem)
+      box-shadow: $item-box-shadow-hover
+  img
+    max-width: 100%
+    height: auto
+    border-radius: .5rem
+    vertical-align: middle
+    border-style: none
+  .item-preview-title-container
+    display flex
+    justify-content space-between
+    align-items center
+  h3.item-preview-title
+    margin-top: .7rem
+    margin-bottom: 0
+    &.free::after
+      content: "FREE";
+      display: inline-block
+      font-size: 10px
+      font-weight: 600
+      color: #fff
+      background-color: $green
+      line-height: 14px
+      padding: 0 4px
+      border-radius: 3px
+      margin-left: 5px
+      vertical-align: middle
+      position: relative
+      top: -1px
+  .item-preview-price
+    margin-top: .7rem
+  .item-preview-description
+    font-size: .9rem
+  .see-more-container
+    display: flex
+    justify-content center
+    width: 100%
+    .see-more-link
+      color: $green
+
+@media screen and (max-width: $media-width)
+  .themes-grid
+    justify-content center
+    .item-preview
+      justify-content center
+      width: 380px

themes/vue/source/css/index.styl

@@ -3,6 +3,7 @@
 @import "_sidebar"
 @import "_sponsors-index"
 @import "_modal"
+@import "_themes-example"
 
 $width = 900px
 $space = 40px

themes/vue/source/css/page.styl

@@ -14,6 +14,7 @@
 @import "_modal"
 @import "_scrimba"
 @import "_vue-mastery"
+@import "_themes-example"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)

themes/vue/source/js/common.js

@@ -2,6 +2,7 @@
   initHashLevelRedirects()
   initMobileMenu()
   initVideoModal()
+  initNewNavLinks()
   if (PAGE_TYPE) {
     initVersionSelect()
     initApiSpecLinks()
@@ -189,6 +190,50 @@
     }
   }
 
+  /**
+   * Initializes a list of links to mark as "updated" by adding a red dot next to them
+   */
+
+  function initNewNavLinks() {
+    var linkExpirePeriod = 60 * 24 * 3600 * 1000 // 2 months
+    var links = [
+      {
+        title: 'Learn',
+        updatedOn: new Date("Fri Mar 1 2019")
+      },
+      {
+        title: 'Examples',
+        updatedOn: new Date("Fri Mar 1 2019")
+      }
+    ]
+    var today = new Date().getTime()
+    var updatedLinks = links
+      .filter(function (link) {
+        return link.updatedOn.getTime() + linkExpirePeriod > today
+      })
+      .map(function (link) {
+        return link.title
+      })
+
+    var navLinks = document.querySelectorAll('#nav a.nav-link')
+    var newLinks = []
+    navLinks.forEach(function (link) {
+      if (updatedLinks.indexOf(link.textContent) !== -1) {
+        newLinks.push(link)
+      }
+    })
+    newLinks.forEach(function (link) {
+      var classes = link.classList
+      var linkKey = `visisted-${link.textContent}`
+      if (localStorage.getItem(linkKey) || classes.contains('current')) {
+        classes.remove('updated-link')
+        localStorage.setItem(linkKey, 'true')
+      } else {
+        classes.add('new')
+      }
+    })
+  }
+
   /**
    * Mobile burger menu button and gesture for toggling sidebar
    */
@@ -329,7 +374,6 @@
       } else {
         headers = content.querySelectorAll('h3')
         each.call(headers, function (h) {
-          console.log(h)
           sectionContainer.appendChild(makeLink(h))
           allHeaders.push(h)
         })
@@ -364,9 +408,15 @@
         })
         .forEach(makeHeaderClickable)
 
-      smoothScroll.init({
+      new SmoothScroll('a[href*="#"]', {
         speed: 400,
-        offset: 0
+        offset: function (anchor, toggle) {
+          let dataTypeAttr = anchor.attributes['data-type']
+          if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') {
+            return 300
+          }
+          return 0
+        }
       })
     }