Skip to content

Commit ec51ef0

Browse files
einazarejacobmllr95
einazare
and
jacobmllr95
authored
feat(docs): launch themes page with first BootstrapVue theme (bootstrap-vue#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>
1 parent c775f44 commit ec51ef0

File tree

12 files changed

+744
-100
lines changed

12 files changed

+744
-100
lines changed

‎docs/components/footer.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,10 @@
1919
<li><b-link to="/docs/reference" exact>Reference</b-link></li>
2020
<li><b-link to="/play" exact>Playground</b-link></li>
2121
</ul>
22-
<!-- TODO: Uncomment when we have themes
2322
<h5 class="bd-text-purple-bright mb-1 mt-3">Themes</h5>
2423
<ul class="list-unstyled ml-3">
2524
<li><b-link to="/themes" exact>Themes and dashboards</b-link></li>
2625
</ul>
27-
-->
2826
</b-col>
2927

3028
<b-col cols="auto" class="text-left">

‎docs/components/header.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,7 @@
3535
<b-nav-item to="/docs/directives" active-class="active" no-prefetch>Directives</b-nav-item>
3636
<b-nav-item to="/docs/icons" active-class="active" no-prefetch>Icons</b-nav-item>
3737
<b-nav-item to="/docs/reference" active-class="active">Reference</b-nav-item>
38-
<!-- TODO: Uncomment when we have themes
3938
<b-nav-item to="/themes" active-class="active" no-prefetch>Themes</b-nav-item>
40-
-->
4139
<b-nav-item to="/play" active-class="active" no-prefetch>Play</b-nav-item>
4240
</b-navbar-nav>
4341
</div>

‎docs/components/sidebar.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
</b-nav>
5252
</b-link>
5353

54-
<!-- TODO: Uncomment when we have themes
5554
<b-link
5655
to="/themes"
5756
router-tag="div"
@@ -69,7 +68,6 @@
6968
Themes
7069
</b-link>
7170
</b-link>
72-
-->
7371

7472
<b-link
7573
to="/play"

‎docs/content/index.js renamed to ‎docs/content.js

File renamed without changes.

‎docs/content/themes/argon-dashboard-pro.yaml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
title: 'BootstrapVue Argon Dashboard PRO'
2+
type: 'dashboard'
3+
category: 'Admin & Dashboard'
4+
img: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/bootstrap-vue-argon-dashboard-pro/opt_badp_thumbnail.jpg'
5+
href: 'https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard-pro?partner=134895'
6+
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.'
7+
provider: 'Creative Tim'
8+
price: '$89.00'

‎docs/markdown/intro/README.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ The online documentation is comprised of the following sections:
2727
- [Icons](/docs/icons) - Icons and icon plugin documentation <b-badge>v2.2.0+</b-badge>
2828
- [Reference](/docs/reference) - Reference information and documentation
2929
- [Playground](/play) - Online playground
30-
31-
<!-- TODO: Uncomment when we have themes
3230
- [Themes](/themes) - Themes and dashboards
33-
-->
3431

3532
## Prerequisites
3633

‎docs/markdown/reference/theming/README.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@ stacked tables, etc). Our custom CSS relies on variables defined the Bootstrap v
99
using the BootstrapVue source SCSS, you can have your variable overrides (such as breakpoints, theme
1010
colors, etc) adjust the custom BootstrapVue css generation.
1111

12-
<!-- TODO: Uncomment when we have themes
1312
For premium dashboards and themes, please refer to the [`Themes section`](/themes) of the
1413
documentation.
15-
-->
1614

1715
## SASS variable defaults
1816

@@ -283,10 +281,8 @@ a {
283281
284282
## See also
285283
286-
<!-- TODO: Uncomment when we have themes
287284
- For premium dashboards and themes, please refer to the [`Themes section`](/themes) of the
288285
documentation.
289-
-->
290286
291287
- If you are defining custom breakpoint names, please see the
292288
[BootstrapVue settings](/docs/reference/settings) page on how to update BootstrapVue `<b-col>` and

‎docs/nuxt.config.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -280,15 +280,19 @@ module.exports = {
280280
plugins: ['~/plugins/bootstrap-vue.js', '~/plugins/play.js', '~/plugins/docs.js'],
281281

282282
buildModules: ['@nuxtjs/google-analytics'],
283-
modules: ['@nuxtjs/pwa', '@nuxtjs/robots', '@nuxtjs/sitemap'],
283+
modules: ['@nuxt/content', '@nuxtjs/pwa', '@nuxtjs/robots', '@nuxtjs/sitemap'],
284284

285-
'google-analytics': {
285+
googleAnalytics: {
286286
id: GA_TRACKING_ID,
287287
autoTracking: {
288288
exception: true
289289
}
290290
},
291291

292+
content: {
293+
apiPrefix: 'api'
294+
},
295+
292296
// We enable crawling in production docs only
293297
robots: () => {
294298
// In production docs we allow crawling, else we deny crawling

‎docs/pages/index.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,7 @@ export default {
566566
created() {
567567
this.bootstrapUrl = `https://getbootstrap.com/docs/${bootstrapVersionMinor}`
568568
this.bootstrapVersionMajor = bootstrapVersionMajor
569+
this.bootstrapVersionMinor = bootstrapVersionMinor
569570
this.bootstrapIconsCount = bootstrapIconsCount
570571
this.vueVersionMinor = vueVersionMinor
571572
this.version = version

‎docs/pages/themes.vue

Lines changed: 32 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<header class="bd-content pb-4">
55
<h1>Custom themes and dashboards</h1>
66
<p class="lead">
7-
With the below themes and dashboards built by our partners, you can build eye-catching
7+
With the themes and dashboards built by our partners, you can build eye-catching
88
apps and pages &mdash; all using BootstrapVue! The following items have been curated by
99
the BootstrapVue team.
1010
</p>
@@ -26,8 +26,14 @@
2626
>
2727
<b-card no-body bg-variant="light">
2828
<b-row no-gutters>
29-
<b-col md="6" lg="4" xl="4" aria-hidden="true">
30-
<b-aspect aspect="4:3">
29+
<b-col
30+
md="6"
31+
lg="4"
32+
xl="4"
33+
class="bg-dark"
34+
aria-hidden="true"
35+
>
36+
<b-aspect aspect="4:3" class="h-100 align-items-center">
3137
<b-card-img-lazy
3238
:src="theme.img"
3339
alt="Image"
@@ -39,24 +45,19 @@
3945
</b-col>
4046
<b-col class="d-flex flex-column p-4">
4147
<!-- We use `<h2>` for correct semantics, but `.h5` style -->
42-
<h2 :id="`theme-label-${idx}`" class="h5">{{ theme.title }}</h2>
43-
<b-card-text class="flex-grow-1">
44-
{{ theme.description }}
45-
</b-card-text>
48+
<h2 :id="`theme-label-${idx}`" class="h5 mb-3">{{ theme.title }}</h2>
49+
<b-card-text class="flex-grow-1">{{ theme.description }}</b-card-text>
4650
<b-card-text class="text-muted small">
47-
<span class="d-block d-lg-inline-block mb-2 mb-lg-0">Category: {{ theme.category }}</span>
48-
<span class="d-block d-lg-inline-block ml-lg-3"><i>Provided by: {{ theme.provider }}</i></span>
51+
<span class="d-block d-lg-inline-block mb-2 mb-lg-0"><strong>Category:</strong> {{ theme.category }}</span>
52+
<span class="d-block d-lg-inline-block ml-lg-3"><i><strong>Provided by:</strong> {{ theme.provider }}</i></span>
4953
</b-card-text>
5054
<b-card-text class="d-flex align-items-center">
5155
<b-button :href="theme.href" target="_blank" variant="bd-primary">
5256
Get {{ theme.type || 'theme' }}
5357
</b-button>
54-
<small v-if="theme.price" class="text-muted position-relative ml-3">
55-
Price: {{ theme.price }}
56-
<b-link href="#theme-notes" title="See notes" class="stretched-link">
57-
<b>*</b>
58-
</b-link>
59-
</small>
58+
<span v-if="theme.price" class="text-muted position-relative ml-3">
59+
<strong>Price:</strong> {{ theme.price }}<b-link href="#theme-notes" title="See notes">*</b-link>
60+
</span>
6061
</b-card-text>
6162
</b-col>
6263
</b-row>
@@ -75,7 +76,7 @@
7576
site documentation for licensing information.
7677
</li>
7778
<li>
78-
BootstrapVue does not guarantee that all coustom components provided by a theme are
79+
BootstrapVue does not guarantee that all custom components provided by a theme are
7980
WIA-ARIA compliant. Refer to the provider documentation for details.
8081
</li>
8182
<li>
@@ -146,56 +147,22 @@ import BvLogo from '~/components/bv-logo'
146147
147148
export default {
148149
components: { BvLogo },
149-
data() {
150+
async asyncData({ $content }) {
151+
// Themes are stored as YAML files in `docs/content/themes`
152+
// The theme preview image should be 800x400px (and 4:3 aspect ratio)
153+
// Data structure:
154+
// title: 'Superduper Dashboard - PRO'
155+
// type: 'dashboard'
156+
// category: 'Admin & Dashboard'
157+
// img: 'https://picsum.photos/800/600/?image=84'
158+
// href: '#'
159+
// description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
160+
// provider: 'Innovative Ivan'
161+
// price: '$100.00'
162+
const themes = await $content('themes').fetch()
163+
150164
return {
151-
// This could be async data that comes from a JSON file
152-
// Theme image preview should be 800x400px (and 4:3 aspect ratio)
153-
themes: [
154-
/*
155-
{
156-
title: 'Superduper Dashboard - PRO',
157-
type: 'dashboard',
158-
category: 'Admin & Dashboard',
159-
img: 'https://picsum.photos/800/600/?image=84',
160-
href: '#',
161-
description:
162-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
163-
provider: 'Innovative Ivan',
164-
price: '$500.00'
165-
},
166-
{
167-
title: 'Funky dashboard extreme',
168-
type: 'dashboard',
169-
category: 'Admin & Dashboard',
170-
img: 'https://picsum.photos/800/600/?image=82',
171-
href: '#',
172-
description:
173-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
174-
provider: 'Dashboards-R-Us',
175-
price: 'Free'
176-
},
177-
{
178-
title: 'Some mystery theme theatre',
179-
img: 'https://picsum.photos/800/600/?image=54',
180-
category: 'Landing & Corporate',
181-
href: '#',
182-
description:
183-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
184-
provider: 'Cyberdyne Terminators',
185-
price: '$75.00'
186-
},
187-
{
188-
title: 'Shopper Style Galore',
189-
img: 'https://picsum.photos/800/600/?image=90',
190-
category: 'E-Commerce & Retail',
191-
href: '#',
192-
description:
193-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
194-
provider: 'Cyberdyne Terminators',
195-
price: '$75.00'
196-
}
197-
*/
198-
]
165+
themes
199166
}
200167
},
201168
computed: {

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
"@babel/plugin-transform-runtime": "^7.10.5",
101101
"@babel/preset-env": "^7.10.4",
102102
"@babel/standalone": "^7.10.5",
103+
"@nuxt/content": "^1.4.1",
103104
"@nuxtjs/google-analytics": "^2.4.0",
104105
"@nuxtjs/pwa": "^3.0.0-beta.20",
105106
"@nuxtjs/robots": "^2.4.2",

0 commit comments

Comments
 (0)