feat(docs): launch themes page with first BootstrapVue theme (#5549)

* docs(footer): uncomment link for themes * docs(header): uncomment link for themes * docs(sidebar): uncomment link for themes * docs(intro/README): uncomment link for themes * docs(theming/README): uncomment link for themes * feature(themes): add first Bootstrap Vue & Creative Tim theme * style(themes): prettify themes files * fix(themes): solve typo * Use `@nuxt/content` for themes * Update index.vue * Update themes.vue * Don't pin `@nuxt/content` * Update themes.vue * Update themes.vue Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
bootstrap-vue · Jul 21, 2020 · ec51ef0 · ec51ef0
1 parent c775f44
commit ec51ef0
Show file tree

Hide file tree

Showing 12 changed files with 744 additions and 100 deletions.
diff --git a/docs/components/footer.vue b/docs/components/footer.vue
@@ -19,12 +19,10 @@
             <li><b-link to="/docs/reference" exact>Reference</b-link></li>
             <li><b-link to="/play" exact>Playground</b-link></li>
           </ul>
-          <!-- TODO: Uncomment when we have themes
           <h5 class="bd-text-purple-bright mb-1 mt-3">Themes</h5>
           <ul class="list-unstyled ml-3">
             <li><b-link to="/themes" exact>Themes and dashboards</b-link></li>
           </ul>
-          -->
         </b-col>
 
         <b-col cols="auto" class="text-left">

diff --git a/docs/components/header.vue b/docs/components/header.vue
@@ -35,9 +35,7 @@
         <b-nav-item to="/docs/directives" active-class="active" no-prefetch>Directives</b-nav-item>
         <b-nav-item to="/docs/icons" active-class="active" no-prefetch>Icons</b-nav-item>
         <b-nav-item to="/docs/reference" active-class="active">Reference</b-nav-item>
-        <!-- TODO: Uncomment when we have themes
         <b-nav-item to="/themes" active-class="active" no-prefetch>Themes</b-nav-item>
-        -->
         <b-nav-item to="/play" active-class="active" no-prefetch>Play</b-nav-item>
       </b-navbar-nav>
     </div>

diff --git a/docs/components/sidebar.vue b/docs/components/sidebar.vue
@@ -51,7 +51,6 @@
       </b-nav>
     </b-link>
 
-    <!-- TODO: Uncomment when we have themes
     <b-link
       to="/themes"
       router-tag="div"
@@ -69,7 +68,6 @@
         Themes
       </b-link>
     </b-link>
-    -->
 
     <b-link
       to="/play"

diff --git a/docs/content/index.js → docs/content.js b/docs/content/index.js → docs/content.js
diff --git a/docs/content/themes/argon-dashboard-pro.yaml b/docs/content/themes/argon-dashboard-pro.yaml
@@ -0,0 +1,8 @@
+title: 'BootstrapVue Argon Dashboard PRO'
+type: 'dashboard'
+category: 'Admin & Dashboard'
+img: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/bootstrap-vue-argon-dashboard-pro/opt_badp_thumbnail.jpg'
+href: 'https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard-pro?partner=134895'
+description: 'BootstrapVue Argon Dashboard PRO is a completely new product built on our newest re-built from scratch framework structure that is meant to make our products more intuitive, more adaptive and, needless to say, so much easier to customize. Let Argon amaze you with its cool features and build tools and get your project to a whole new level.'
+provider: 'Creative Tim'
+price: '$89.00'
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -27,10 +27,7 @@ The online documentation is comprised of the following sections:
 - [Icons](/docs/icons) - Icons and icon plugin documentation <b-badge>v2.2.0+</b-badge>
 - [Reference](/docs/reference) - Reference information and documentation
 - [Playground](/play) - Online playground
-
-<!-- TODO: Uncomment when we have themes
 - [Themes](/themes) - Themes and dashboards
--->
 
 ## Prerequisites
 

diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md
@@ -9,10 +9,8 @@ stacked tables, etc). Our custom CSS relies on variables defined the Bootstrap v
 using the BootstrapVue source SCSS, you can have your variable overrides (such as breakpoints, theme
 colors, etc) adjust the custom BootstrapVue css generation.
 
-<!-- TODO: Uncomment when we have themes
 For premium dashboards and themes, please refer to the [`Themes section`](/themes) of the
 documentation.
--->
 
 ## SASS variable defaults
 
@@ -283,10 +281,8 @@ a {
 
 ## See also
 
-<!-- TODO: Uncomment when we have themes
 - For premium dashboards and themes, please refer to the [`Themes section`](/themes) of the
 documentation.
--->
 
 - If you are defining custom breakpoint names, please see the
   [BootstrapVue settings](/docs/reference/settings) page on how to update BootstrapVue `<b-col>` and

diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -280,15 +280,19 @@ module.exports = {
   plugins: ['~/plugins/bootstrap-vue.js', '~/plugins/play.js', '~/plugins/docs.js'],
 
   buildModules: ['@nuxtjs/google-analytics'],
-  modules: ['@nuxtjs/pwa', '@nuxtjs/robots', '@nuxtjs/sitemap'],
+  modules: ['@nuxt/content', '@nuxtjs/pwa', '@nuxtjs/robots', '@nuxtjs/sitemap'],
 
-  'google-analytics': {
+  googleAnalytics: {
     id: GA_TRACKING_ID,
     autoTracking: {
       exception: true
     }
   },
 
+  content: {
+    apiPrefix: 'api'
+  },
+
   // We enable crawling in production docs only
   robots: () => {
     // In production docs we allow crawling, else we deny crawling

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -566,6 +566,7 @@ export default {
   created() {
     this.bootstrapUrl = `https://getbootstrap.com/docs/${bootstrapVersionMinor}`
     this.bootstrapVersionMajor = bootstrapVersionMajor
+    this.bootstrapVersionMinor = bootstrapVersionMinor
     this.bootstrapIconsCount = bootstrapIconsCount
     this.vueVersionMinor = vueVersionMinor
     this.version = version

diff --git a/docs/pages/themes.vue b/docs/pages/themes.vue
@@ -4,7 +4,7 @@
       <header class="bd-content pb-4">
         <h1>Custom themes and dashboards</h1>
         <p class="lead">
-          With the below themes and dashboards built by our partners, you can build eye-catching
+          With the themes and dashboards built by our partners, you can build eye-catching
           apps and pages &mdash; all using BootstrapVue! The following items have been curated by
           the BootstrapVue team.
         </p>
@@ -26,8 +26,14 @@
       >
         <b-card no-body bg-variant="light">
           <b-row no-gutters>
-            <b-col md="6" lg="4" xl="4" aria-hidden="true">
-              <b-aspect aspect="4:3">
+            <b-col
+              md="6"
+              lg="4"
+              xl="4"
+              class="bg-dark"
+              aria-hidden="true"
+            >
+              <b-aspect aspect="4:3" class="h-100 align-items-center">
                 <b-card-img-lazy
                   :src="theme.img"
                   alt="Image"
@@ -39,24 +45,19 @@
             </b-col>
             <b-col class="d-flex flex-column p-4">
               <!-- We use `<h2>` for correct semantics, but `.h5` style -->
-              <h2 :id="`theme-label-${idx}`" class="h5">{{ theme.title }}</h2>
-              <b-card-text class="flex-grow-1">
-                {{ theme.description }}
-              </b-card-text>
+              <h2 :id="`theme-label-${idx}`" class="h5 mb-3">{{ theme.title }}</h2>
+              <b-card-text class="flex-grow-1">{{ theme.description }}</b-card-text>
               <b-card-text class="text-muted small">
-                <span class="d-block d-lg-inline-block mb-2 mb-lg-0">Category: {{ theme.category }}</span>
-                <span class="d-block d-lg-inline-block ml-lg-3"><i>Provided by: {{ theme.provider }}</i></span>
+                <span class="d-block d-lg-inline-block mb-2 mb-lg-0"><strong>Category:</strong> {{ theme.category }}</span>
+                <span class="d-block d-lg-inline-block ml-lg-3"><i><strong>Provided by:</strong> {{ theme.provider }}</i></span>
               </b-card-text>
               <b-card-text class="d-flex align-items-center">
                 <b-button :href="theme.href" target="_blank" variant="bd-primary">
                   Get {{ theme.type || 'theme' }}
                 </b-button>
-                <small v-if="theme.price" class="text-muted position-relative ml-3">
-                  Price: {{ theme.price }}
-                  <b-link href="#theme-notes" title="See notes" class="stretched-link">
-                    <b>*</b>
-                  </b-link>
-                </small>
+                <span v-if="theme.price" class="text-muted position-relative ml-3">
+                  <strong>Price:</strong> {{ theme.price }}<b-link href="#theme-notes" title="See notes">*</b-link>
+                </span>
               </b-card-text>
             </b-col>
           </b-row>
@@ -75,7 +76,7 @@
             site documentation for licensing information.
           </li>
           <li>
-            BootstrapVue does not guarantee that all coustom components provided by a theme are
+            BootstrapVue does not guarantee that all custom components provided by a theme are
             WIA-ARIA compliant. Refer to the provider documentation for details.
           </li>
           <li>
@@ -146,56 +147,22 @@ import BvLogo from '~/components/bv-logo'
 
 export default {
   components: { BvLogo },
-  data() {
+  async asyncData({ $content }) {
+    // Themes are stored as YAML files in `docs/content/themes`
+    // The theme preview image should be 800x400px (and 4:3 aspect ratio)
+    // Data structure:
+    //   title: 'Superduper Dashboard - PRO'
+    //   type: 'dashboard'
+    //   category: 'Admin & Dashboard'
+    //   img: 'https://picsum.photos/800/600/?image=84'
+    //   href: '#'
+    //   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    //   provider: 'Innovative Ivan'
+    //   price: '$100.00'
+    const themes = await $content('themes').fetch()
+
     return {
-      // This could be async data that comes from a JSON file
-      // Theme image preview should be 800x400px (and 4:3 aspect ratio)
-      themes: [
-        /*
-        {
-          title: 'Superduper Dashboard - PRO',
-          type: 'dashboard',
-          category: 'Admin & Dashboard',
-          img: 'https://picsum.photos/800/600/?image=84',
-          href: '#',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-          provider: 'Innovative Ivan',
-          price: '$500.00'
-        },
-        {
-          title: 'Funky dashboard extreme',
-          type: 'dashboard',
-          category: 'Admin & Dashboard',
-          img: 'https://picsum.photos/800/600/?image=82',
-          href: '#',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-          provider: 'Dashboards-R-Us',
-          price: 'Free'
-        },
-        {
-          title: 'Some mystery theme theatre',
-          img: 'https://picsum.photos/800/600/?image=54',
-          category: 'Landing & Corporate',
-          href: '#',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-          provider: 'Cyberdyne Terminators',
-          price: '$75.00'
-        },
-        {
-          title: 'Shopper Style Galore',
-          img: 'https://picsum.photos/800/600/?image=90',
-          category: 'E-Commerce & Retail',
-          href: '#',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-          provider: 'Cyberdyne Terminators',
-          price: '$75.00'
-        }
-        */
-      ]
+      themes
     }
   },
   computed: {

diff --git a/package.json b/package.json
@@ -100,6 +100,7 @@
     "@babel/plugin-transform-runtime": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/standalone": "^7.10.5",
+    "@nuxt/content": "^1.4.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@nuxtjs/robots": "^2.4.2",