Migrate Themes page

package.json

@@ -9,6 +9,7 @@
     "build": "vuepress build src"
   },
   "dependencies": {
-    "axios": "^0.19.1"
+    "axios": "^0.19.1",
+    "showdown": "^1.9.1"
   }
 }

src/.vuepress/components/community/themes/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="themes">
+    <theme-provider v-for="provider in providers" :key="provider.name" :provider="provider" />
+
+    <p>
+      Want to feature your themes here?
+      <a href="mailto:evan@vuejs.org?subject=Theme+affiliation">Contact us</a>!
+    </p>
+  </div>
+</template>
+
+<script>
+import providers from './theme-data'
+
+export default {
+  components: {
+    ThemeProvider: () => import('./theme-provider')
+  },
+
+  data: () => ({
+    providers
+  })
+}
+</script>

src/.vuepress/components/community/themes/theme-data.js

@@ -0,0 +1,184 @@
+export default [
+  {
+    name: 'Creative Tim',
+    description: `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.`,
+    seeMoreUrl: 'https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187',
+    products: [
+      {
+        name: 'Vue Argon Design System',
+        price: 0,
+        description: 'Free Vue.js Design System',
+        url: 'https://www.creative-tim.com/product/vue-argon-design-system?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-argon-design-system/vue-argon-design-system.jpg'
+      },
+      {
+        name: 'Vue Black Dashboard Pro',
+        price: 59,
+        description: 'Premium Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-black-dashboard-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
+      },
+      {
+        name: 'Vue Paper Dashboard 2 Pro',
+        price: 59,
+        description: 'Premium Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-paper-dashboard-2-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
+      },
+      {
+        name: 'Vue Material Kit',
+        price: 0,
+        description: 'Free Vue.js UI Kit',
+        url: 'https://www.creative-tim.com/product/vue-material-kit?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit/vue-material-kit.jpg'
+      },
+      {
+        name: 'Vue Black Dashboard',
+        price: 0,
+        description: 'Free Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-black-dashboard?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard/vue-black-dashboard.jpg'
+      },
+      {
+        name: 'Vue Now UI Kit Pro',
+        price: 79,
+        description: 'Premium Vue.js UI Kit',
+        url: 'https://www.creative-tim.com/product/vue-now-ui-kit-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit-pro/vue-now-ui-kit-pro.jpg'
+      },
+      {
+        name: 'Vue Now UI Dashboard Pro',
+        price: 59,
+        description: 'Premium Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-now-ui-dashboard-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-dashboard-pro/vue-now-ui-dashboard-pro.jpg'
+      },
+      {
+        name: 'Vue Now UI Kit',
+        price: 0,
+        description: 'Free Vue.js UI Kit',
+        url: 'https://www.creative-tim.com/product/vue-now-ui-kit?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit/vue-now-ui-kit.jpg'
+      },
+      {
+        name: 'Vue Light Bootstrap Dashboard Pro',
+        price: 49,
+        description: 'Premium Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard-pro/vue-light-bootstrap-dashboard-pro.jpg'
+      },
+      {
+        name: 'Vue Material Dashboard Pro',
+        price: 59,
+        description: 'Premium Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-material-dashboard-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-dashboard-pro/vue-material-dashboard-pro.jpg'
+      },
+      {
+        name: 'Vue Material Kit Pro',
+        price: 89,
+        description: 'Premium Vue.js UI Kit',
+        url: 'https://www.creative-tim.com/product/vue-material-kit-pro?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit-pro/vue-material-kit-pro.jpg'
+      },
+      {
+        name: 'Vue Light Bootstrap Dashboard',
+        price: 0,
+        description: 'Free Vue.js Admin Template',
+        url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?affiliate_id=116187',
+        image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard/vue-light-bootstrap-dashboard.jpg'
+      }
+    ]
+  },
+  {
+    name: "MDBootstrap",
+    description: `Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.`,
+    seeMoreUrl: "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
+    products: [
+      {
+        url: "https://mdbootstrap.com/products/vue-ui-kit?utm_ref_id=82665",
+        name: "Vue Material Bootstrap Pro",
+        description: "Premium Vue.js UI Kit",
+        image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
+        price: 99
+      },
+      {
+        url: "https://mdbootstrap.com/docs/vue?utm_ref_id=82665",
+        name: "Vue Material Bootstrap Kit",
+        description: "Free Vue.js UI Kit",
+        image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/ui-kit.jpg",
+        price: 0
+      },
+      {
+        url: "https://mdbootstrap.com/products/vue-admin-dashboard?utm_ref_id=82665",
+        name: " Vue Admin Bootstrap Pro",
+        description: "Premium Vue.js Templates Pack",
+        image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
+        price: 79
+      },
+      {
+        url: "https://mdbootstrap.com/freebies/vue/admin-dashboard?utm_ref_id=82665",
+        name: "Vue Admin Bootstrap",
+        description: "Free Vue.js Templates Pack",
+        image: "https://mdbootstrap.com/img/Marketing/mdb-press-pack/vuejs/admin-pack.jpg",
+        price: 0
+      }
+    ]
+  },
+  {
+    name: 'PrimeVue',
+    description: `The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 50 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look&feel that suits you best.`,
+    seeMoreUrl: 'https://www.primefaces.org/primevue/#/?af_id=4218',
+    products: [
+      {
+        name: 'Sapphire',
+        price: 79,
+        description: 'Material Design Admin Template',
+        url: 'https://www.primefaces.org/layouts/sapphire-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/sapphire.jpg'
+      },
+      {
+        name: 'Avalon',
+        price: 79,
+        description: 'Bootstrap Inspired Admin Template',
+        url: 'https://www.primefaces.org/layouts/avalon-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/avalon.jpg'
+      },
+      {
+        name: 'Serenity',
+        price: 79,
+        description: 'Material Design Admin Template',
+        url: 'https://www.primefaces.org/layouts/serenity-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/serenity.jpg'
+      },
+      {
+        name: 'Apollo',
+        price: 79,
+        description: 'Admin Template with a Dark Mode',
+        url: 'https://www.primefaces.org/layouts/apollo-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/apollo.jpg'
+      },
+      {
+        name: 'Babylon',
+        price: 79,
+        description: 'Admin Template with Extensive Options',
+        url: 'https://www.primefaces.org/layouts/babylon-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/babylon.jpg'
+      },
+      {
+        name: 'Roma',
+        price: 59,
+        description: 'Admin Template with a Clean Design System',
+        url: 'https://www.primefaces.org/layouts/roma-vue?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/roma.jpg'
+      },
+      {
+        name: 'Sigma',
+        price: 0,
+        description: 'Free Admin Template',
+        url: 'https://www.primefaces.org/sigma-vue/#/?af_id=4218',
+        image: 'https://www.primefaces.org/vue-templates/sigma.jpg'
+      }
+    ]
+  }
+]

src/.vuepress/components/community/themes/theme-item.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="item-preview">
+    <a class="item-preview-img" :href="theme.url" rel="sponsored">
+      <img :src="theme.image" :alt="`${theme.name} - ${theme.description}`" loading="lazy">
+    </a>
+    <div class="item-preview-name-container">
+      <h3 class="item-preview-name" :class="{'free': theme.price === 0}">
+        {{theme.name}}
+      </h3>
+      <b v-if="theme.price" class="item-preview-price">${{theme.price}}</b>
+    </div>
+    <div class="item-preview-description">{{theme.description}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    theme: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/_settings";
+
+.item-preview {
+  width: 290px;
+  margin-bottom: 25px;
+
+  @media screen and (max-width: 1300px) {
+    justify-content: center;
+    width: 380px;
+  }
+
+  &-img {
+    transition: .15s box-shadow, .15s transform;
+    border-radius: .5rem;
+    box-shadow: 0 2rem 1.5rem -1.5rem rgba(33,37,41,.15), 0 0 1.5rem 0.5rem rgba(33,37,41,.05);
+    overflow: hidden;
+    display: block;
+
+    &:hover {
+      transform: translateY(-0.25rem);
+      box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .5rem rgba(33,37,41,.05);
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: .5rem;
+    vertical-align: middle;
+    border-style: none;
+  }
+
+  &-name-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-name {
+    margin-top: 1rem;
+    margin-bottom: .3rem;
+    font-size: 1rem;
+    line-height: 1.5;
+
+    &.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;
+    }
+  }
+
+  &-price {
+    margin-top: .7rem
+  }
+
+  &-description {
+    font-size: .9rem
+  }
+}
+</style>

src/.vuepress/components/community/themes/theme-provider.vue

@@ -0,0 +1,81 @@
+<template>
+  <section>
+    <h2 :id="provider.name">{{ provider.name }}</h2>
+
+    <div class="tip custom-block description" v-html="description"/>
+
+    <div class="themes-grid">
+      <ThemeItem v-for="theme in provider.products" :key="theme.url" :theme="theme"/>
+    </div>
+
+    <div class="see-more-container">
+      <a :href="provider.seeMoreUrl" class="see-more-button">
+        See More Themes from {{ provider.name }}
+      </a>
+    </div>
+  </section>
+</template>
+
+<script>
+import showdown from 'showdown'
+
+export default {
+  props: {
+    provider: {
+      type: Object,
+      required: true
+    }
+  },
+
+  components: {
+    ThemeItem: () => import('./theme-item')
+  },
+
+  computed: {
+    description: function () {
+      return (new showdown.Converter()).makeHtml(this.provider.description)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/_settings";
+
+.themes-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media screen and (max-width: 1300px) {
+    justify-content: center;
+  }
+}
+
+.description {
+  margin: 1.5em 0;
+}
+
+.see-more {
+  &-container {
+    text-align: center;
+    width: 100%;
+  }
+
+  &-button {
+    color: $green;
+    display: inline-block;
+    width: auto;
+    border-radius: 2em;
+    transition: all 0.15s ease;
+    border: 1px solid $green;
+    padding: 12px 24px;
+    text-decoration: none !important;
+
+    &:hover {
+      background: $green;
+      color: #fff;
+    }
+  }
+}
+</style>