Skip to content

Commit f2b1113

Browse files
rstoenescurstoenescu
committed
feat(docs): brand update; also backport features from v2 docs (work in progress)
1 parent 9fadf44 commit f2b1113

30 files changed

+494
-617
lines changed

‎docs/build/md-loader-utils.js‎

Lines changed: 22 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
const
2-
matter = require('gray-matter'),
3-
toml = require('toml')
1+
const matter = require('gray-matter')
2+
const toml = require('toml')
43

54
function getComponentsImport (comp) {
65
return comp.map(c => {
@@ -18,61 +17,28 @@ function getComponentsDeclaration (comp) {
1817
return `components: { ${list} },`
1918
}
2019

21-
// Make sure to keep in sync with /src/assets/get-meta.js
22-
2320
module.exports.getVueComponent = function (rendered, data, toc) {
2421
return `
25-
<template>
26-
<doc-page title="${data.heading !== false ? data.title : ''}"${data.related !== void 0 ? ` :related="related"` : ''}${data.nav !== void 0 ? ` :nav="nav"` : ''}${data.badge !== void 0 ? ` :badge="badge"` : ''}>${rendered}</doc-page>
27-
</template>
28-
<script>
29-
import { copyHeading } from 'assets/page-utils'
30-
${data.components !== void 0 ? getComponentsImport(data.components) : ''}
31-
${data.desc !== void 0 ? `const title = \`${data.title} | Quasar Framework\`, desc = \`${data.desc}\`` : ''}
32-
export default {
33-
meta: {
34-
title: \`${data.title}\`${data.desc !== void 0 ? `,
35-
meta: {
36-
title: {
37-
name: 'title',
38-
content: title
39-
},
40-
ogTitle: {
41-
name: 'og:title',
42-
content: title
43-
},
44-
twitterTitle: {
45-
name: 'twitter:title',
46-
content: title
47-
},
48-
49-
description: {
50-
name: 'description',
51-
content: desc
52-
},
53-
ogDesc: {
54-
name: 'og:description',
55-
content: desc
56-
},
57-
twitterDesc: {
58-
name: 'twitter:description',
59-
content: desc
60-
}
61-
}` : ''}
62-
},
63-
${data.components !== void 0 ? getComponentsDeclaration(data.components) : ''}
64-
${data.related !== void 0 || data.nav !== void 0 ? `
65-
created () {
66-
this.$root.store.toc = ${toc}
67-
${data.related !== void 0 ? `this.related = ${JSON.stringify(data.related)}` : ''}
68-
${data.nav !== void 0 ? `this.nav = ${JSON.stringify(data.nav)}` : ''}
69-
${data.badge !== void 0 ? `this.badge = ${JSON.stringify(data.badge)}` : ''}
70-
},` : ''}
71-
methods: {
72-
copyHeading
73-
}
74-
}
75-
</script>`
22+
<template>
23+
<doc-page :meta-title="metaTitle" title="${data.heading !== false ? data.title : ''}"${data.related !== void 0 ? ` :related="related"` : ''}${data.nav !== void 0 ? ` :nav="nav"` : ''}${data.badge !== void 0 ? ` :badge="badge"` : ''}${data.related !== void 0 || data.nav !== void 0 ? ` :toc="toc"` : ''}${data.desc !== void 0 ? ' :meta-desc="metaDesc"' : ''}>${rendered}</doc-page>
24+
</template>
25+
<script>
26+
import { copyHeading } from 'assets/page-utils'
27+
${data.components !== void 0 ? getComponentsImport(data.components) : ''}
28+
export default {
29+
name: 'DocMarkdownPage',
30+
${data.components !== void 0 ? getComponentsDeclaration(data.components) : ''}
31+
created () {
32+
this.metaTitle = ${JSON.stringify(data.title)}
33+
${data.desc !== void 0 ? `this.metaDesc = ${JSON.stringify(data.desc)},` : ''}
34+
${data.related !== void 0 ? `this.related = ${JSON.stringify(data.related)},` : ''}
35+
${data.nav !== void 0 ? `this.nav = ${JSON.stringify(data.nav)},` : ''}
36+
${data.badge !== void 0 ? `this.badge = ${JSON.stringify(data.badge)},` : ''}
37+
${data.related !== void 0 || data.nav !== void 0 ? `this.toc = ${toc},` : ''}
38+
this.copyHeading = copyHeading
39+
}
40+
}
41+
</script>`
7642
}
7743

7844
module.exports.parseFrontMatter = function (content) {

‎docs/quasar.conf.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,31 +109,31 @@ module.exports = function (ctx) {
109109
description: 'Quasar Framework Documentation',
110110
display: 'standalone',
111111
orientation: 'any',
112-
background_color: '#ffffff',
113-
theme_color: '#027be3',
112+
background_color: '#000000',
113+
theme_color: '#00B4FF',
114114
icons: [
115115
{
116-
src: 'https://cdn.quasar.dev/app-icons/icon-128x128.png',
116+
src: 'https://cdn.quasar.dev/logo-v2/favicon/icon-128x128.png',
117117
sizes: '128x128',
118118
type: 'image/png'
119119
},
120120
{
121-
src: 'https://cdn.quasar.dev/app-icons/icon-192x192.png',
121+
src: 'https://cdn.quasar.dev/logo-v2/favicon/icon-192x192.png',
122122
sizes: '192x192',
123123
type: 'image/png'
124124
},
125125
{
126-
src: 'https://cdn.quasar.dev/app-icons/icon-256x256.png',
126+
src: 'https://cdn.quasar.dev/logo-v2/favicon/icon-256x256.png',
127127
sizes: '256x256',
128128
type: 'image/png'
129129
},
130130
{
131-
src: 'https://cdn.quasar.dev/app-icons/icon-384x384.png',
131+
src: 'https://cdn.quasar.dev/logo-v2/favicon/icon-384x384.png',
132132
sizes: '384x384',
133133
type: 'image/png'
134134
},
135135
{
136-
src: 'https://cdn.quasar.dev/app-icons/icon-512x512.png',
136+
src: 'https://cdn.quasar.dev/logo-v2/favicon/icon-512x512.png',
137137
sizes: '512x512',
138138
type: 'image/png'
139139
}

‎docs/src/assets/features.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import menu from './menu.js'
2+
3+
function normalizeComps (list) {
4+
let acc = [
5+
{
6+
name: 'Layout',
7+
path: 'layout'
8+
},
9+
{
10+
name: 'Layout Header',
11+
path: 'header-and-footer'
12+
},
13+
{
14+
name: 'Layout Footer',
15+
path: 'header-and-footer'
16+
},
17+
{
18+
name: 'Layout Drawer',
19+
path: 'drawer'
20+
},
21+
{
22+
name: 'Layout Page',
23+
path: 'page'
24+
},
25+
{
26+
name: 'Page Sticky',
27+
path: 'page-sticky'
28+
},
29+
{
30+
name: 'Page Scroller',
31+
path: 'page-scroller'
32+
}
33+
]
34+
35+
list.forEach(entry => {
36+
if (entry.children) {
37+
acc = acc.concat(entry.children)
38+
}
39+
else {
40+
acc.push(entry)
41+
}
42+
})
43+
44+
return acc.sort((a, b) => a.name.localeCompare(b.name))
45+
}
46+
47+
export default {
48+
comps: normalizeComps(menu.find(entry => entry.name === 'Vue Components').children),
49+
dirs: menu.find(entry => entry.name === 'Vue Directives').children,
50+
plugins: menu.find(entry => entry.name === 'Quasar Plugins').children
51+
}

‎docs/src/assets/get-meta.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
// Make sure to keep in sync with /build/md-loader-utils.js
2-
31
export default function (title, desc) {
42
return {
53
title: {
64
name: 'title',
75
content: title
86
},
97
ogTitle: {
10-
name: 'og:title',
8+
property: 'og:title',
119
content: title
1210
},
1311
twitterTitle: {
@@ -20,7 +18,7 @@ export default function (title, desc) {
2018
content: desc
2119
},
2220
ogDesc: {
23-
name: 'og:description',
21+
property: 'og:description',
2422
content: desc
2523
},
2624
twitterDesc: {

‎docs/src/assets/page-utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ export function copyHeading (id) {
3636
this.$q.notify({
3737
message: 'Anchor has been copied to clipboard.',
3838
color: 'white',
39-
textColor: 'primary',
39+
textColor: 'brand-primary',
4040
position: 'top',
41-
actions: [ { icon: 'close', color: 'primary', dense: true, round: true } ],
41+
actions: [ { icon: 'close', color: 'brand-primary', dense: true, round: true } ],
4242
timeout: 2000
4343
})
4444
}

‎docs/src/components/ApiRows.sass‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.api-row
22
padding: 8px 16px 4px
33
font-weight: 300
4-
color: $grey-7
4+
color: $grey
55

66
&--big-padding
77
padding: 16px
@@ -10,26 +10,31 @@
1010
border-top: 1px solid #ddd
1111

1212
&__item
13+
min-height: 25px
1314
margin-bottom: 4px
1415

1516
&__subitem
1617
padding: 4px 0 0 16px
1718
border-radius: 5px
1819
> div
19-
border: 1px solid #eee !important
20+
border: 1px solid rgba(0,0,0,.12) !important
2021
border-radius: inherit
2122
> div + div
2223
margin-top: 4px
2324

25+
&__type
26+
font-family: $font-family-avenir
27+
2428
&__value
2529
font-weight: 400
26-
color: black
30+
color: #000
2731

2832
&--indent
2933
padding-left: 16px
3034

3135
&__example
32-
background: $grey-3
36+
background-color: #eee
37+
border: 1px solid #ddd
3338
margin: 4px
3439
padding: 2px 4px
3540
border-radius: $generic-border-radius

‎docs/src/components/AppMenu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default {
9494
menu.badge !== void 0
9595
? h(QItemSection, {
9696
props: { side: true }
97-
}, [ h(QBadge, [ menu.badge ]) ])
97+
}, [ h(QBadge, { props: { color: 'brand-primary' } }, [ menu.badge ]) ])
9898
: null
9999
])
100100
}

‎docs/src/components/AppMenu.sass‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.app-menu
2-
32
.q-item
43
font-size: 12px
54

@@ -8,20 +7,20 @@
87
padding-bottom: 6px
98

109
.q-item__section--avatar
11-
color: $primary
10+
color: $brand-primary
1211
.q-expansion-item__toggle-icon
1312
color: $grey-5
1413

1514
.q-expansion-item--expanded > div > .q-item
1615
> .q-item__section--main
17-
color: $primary
16+
color: $brand-primary
1817
font-weight: 500
1918
> .q-item__section--side .q-expansion-item__toggle-icon
20-
color: $primary
19+
color: $brand-primary
2120

2221
.q-expansion-item__content .q-item
2322
border-radius: 0 10px 10px 0
2423
margin-right: 12px
2524

2625
.q-item.q-router-link--active
27-
background: scale-color($primary, $lightness: 90%)
26+
background: scale-color($brand-primary, $lightness: 90%)

‎docs/src/components/AppSearchResults.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,13 @@ export default {
9999
&__section-title
100100
padding: 4px 0 4px 16px
101101
font-weight: 500
102-
color: $primary
102+
color: $brand-primary
103103
104104
&__result
105105
margin: 4px 16px 4px 0
106106
padding: 8px 8px 8px 16px
107107
border: 1px solid rgba(0, 0, 0, 0.12)
108-
border-right: 4px solid $primary
108+
border-right: 4px solid $brand-primary
109109
border-radius: 0 4px 4px 0
110110
position: relative
111111
cursor: pointer
@@ -118,7 +118,7 @@ export default {
118118
width: 1.2em
119119
height: 1.2em
120120
background: #fff
121-
color: $primary
121+
color: $brand-primary
122122
border-radius: 4px
123123
124124
&-overlay
@@ -138,7 +138,7 @@ export default {
138138
color: #000
139139
140140
&__result.q-item--active
141-
background: $primary
141+
background: $brand-primary
142142
color: #fff
143143
144144
.app-search__result-overlay

‎docs/src/components/DocApi.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@ q-card.doc-api.q-my-lg(flat bordered)
55
q-space
66
.col-auto.text-grey {{ type }}
77

8-
q-linear-progress(v-if="loading", color="primary", indeterminate)
8+
q-linear-progress(v-if="loading", color="brand-primary", indeterminate)
99

1010
template(v-else)
1111
q-separator
1212

1313
div.bg-grey-2.text-grey-7.flex.no-wrap
14-
q-tabs.col(v-model="currentTab", indicator-color="primary", align="left", :breakpoint="0", dense)
14+
q-tabs.col(v-model="currentTab", active-color="brand-primary", indicator-color="brand-primary", align="left", :breakpoint="0", dense)
1515
q-tab(
1616
v-for="tab in tabs"
1717
:key="`api-tab-${tab}`"
1818
:name="tab"
1919
)
2020
.row.no-wrap.items-center
2121
span.q-mr-xs.text-uppercase.text-weight-medium {{ tab }}
22-
q-badge(v-if="tabCount[tab]") {{ tabCount[tab] }}
22+
q-badge(v-if="tabCount[tab]" color="brand-primary" :label="tabCount[tab]")
2323

2424
q-input.q-mx-sm(
2525
v-if="$q.screen.gt.xs"
@@ -45,8 +45,8 @@ q-card.doc-api.q-my-lg(flat bordered)
4545
.col-auto.row.no-wrap.bg-grey-1.text-grey-7.q-py-lg
4646
q-tabs(
4747
v-model="currentInnerTab[tab]",
48-
active-color="primary",
49-
indicator-color="primary",
48+
active-color="brand-primary",
49+
indicator-color="brand-primary",
5050
:breakpoint="0",
5151
vertical,
5252
dense,
@@ -59,9 +59,9 @@ q-card.doc-api.q-my-lg(flat bordered)
5959
:name="category"
6060
)
6161
.row.no-wrap.items-center.self-stretch
62-
span.q-mr-xs.text-capitalize.text-weight-medium {{ category }}
62+
span.q-mr-xs.text-weight-medium {{ category }}
6363
.col
64-
q-badge(v-if="apiInnerCount(tab, category)") {{ formattedApiInnerCount(tab, category) }}
64+
q-badge(v-if="apiInnerCount(tab, category)" color="brand-primary" :label="formattedApiInnerCount(tab, category)")
6565

6666
q-separator(vertical)
6767

0 commit comments

Comments
 (0)