Skip to content
Permalink
Browse files
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>
  • Loading branch information
einazare and jacobmllr95 committed Jul 21, 2020
1 parent c775f44 commit ec51ef062f7ed39339cde59b2d9d4cee40347dcc
Show file tree
Hide file tree
Showing 12 changed files with 744 additions and 100 deletions.
@@ -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">
@@ -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>
@@ -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"
File renamed without changes.
@@ -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'
@@ -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

@@ -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
@@ -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
@@ -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
@@ -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: {
@@ -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",

0 comments on commit ec51ef0

Please sign in to comment.