Skip to content

Commit a2767fb

Browse files
mrholekmrholek
committed
docs: update theme
1 parent af5303f commit a2767fb

File tree

16 files changed

+214
-359
lines changed

16 files changed

+214
-359
lines changed

‎packages/docs/.vuepress/client.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineClientConfig } from '@vuepress/client'
2+
23
import { CIcon } from '@coreui/icons-vue'
34
import CChartPlugin from '@coreui/vue-chartjs'
45
import CoreuiVue from '@coreui/vue/src/'

‎packages/docs/.vuepress/config.ts‎

Lines changed: 36 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,32 @@
11
import { defineUserConfig } from 'vuepress'
22
import { viteBundler } from '@vuepress/bundler-vite'
3-
import anchor from 'markdown-it-anchor'
4-
import include_plugin from 'markdown-it-include'
5-
import { defaultTheme } from './src/node/defaultTheme'
6-
7-
import { containerPlugin } from '@vuepress/plugin-container'
3+
import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
4+
import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
5+
import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'
6+
import { prismjsPlugin } from '@vuepress/plugin-prismjs'
87
import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
98
import { tocPlugin } from '@vuepress/plugin-toc'
109
import { getDirname, path } from '@vuepress/utils'
10+
import anchor from 'markdown-it-anchor'
11+
import include_plugin from 'markdown-it-include'
12+
import { defaultTheme } from './src/node'
1113

14+
import { fileURLToPath, URL } from 'url'
1215
const __dirname = getDirname(import.meta.url)
1316

1417
export default defineUserConfig({
1518
base: `/vue/docs/`,
1619
lang: 'en-US',
1720
title: 'Vue UI Components · CoreUI',
1821
description: 'UI Components Library for Vue.js (Vue 3)',
19-
head: [
20-
['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }],
21-
],
22-
bundler: viteBundler({
23-
viteOptions: {},
24-
vuePluginOptions: {},
25-
}),
22+
head: [['link', { rel: 'icon', href: `/vue/docs/favicons/favicon-96x96.png` }]],
23+
bundler: viteBundler(),
2624
markdown: {
2725
anchor: {
2826
permalink: anchor.permalink.ariaHidden({
2927
class: 'anchor-link',
30-
placement: 'after'
31-
})
32-
},
33-
code: {
34-
lineNumbers: false,
28+
placement: 'after',
29+
}),
3530
},
3631
},
3732
extendsMarkdown: (md) => {
@@ -41,53 +36,42 @@ export default defineUserConfig({
4136
})
4237
},
4338
plugins: [
44-
containerPlugin({
39+
activeHeaderLinksPlugin({
40+
headerLinkSelector: 'a.sidebar-item',
41+
headerAnchorSelector: '.header-anchor',
42+
// should greater than page transition duration
43+
delay: 300,
44+
}),
45+
// backToTopPlugin(),
46+
markdownContainerPlugin({
4547
type: 'demo',
46-
render: function (tokens, idx) {
47-
if (tokens[idx].nesting === 1) {
48-
return '<div class="docs-example rounded-top p-4">\n'
49-
} else {
50-
return '</div>\n'
51-
}
52-
},
48+
before: (): string => `<div class="docs-example rounded-top p-4">\n`,
49+
after: (): string => '</div>\n',
5350
}),
54-
containerPlugin({
55-
type: 'demo-rounded',
56-
render: function (tokens, idx) {
57-
if (tokens[idx].nesting === 1) {
58-
return '<div class="docs-example rounded p-4">\n'
59-
} else {
60-
return '</div>\n'
61-
}
62-
},
51+
markdownContainerPlugin({
52+
type: 'demo-bg-secondary',
53+
before: (): string =>
54+
`<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n`,
55+
after: (): string => '</div>\n',
6356
}),
64-
containerPlugin({
57+
markdownContainerPlugin({
6558
type: 'demo-dark',
66-
render: function (tokens, idx) {
67-
if (tokens[idx].nesting === 1) {
68-
return '<div class="docs-example rounded-top p-4 bg-dark">\n'
69-
} else {
70-
return '</div>\n'
71-
}
72-
},
59+
before: (): string => `<div class="docs-example rounded-top p-4 bg-dark">\n`,
60+
after: (): string => '</div>\n',
7361
}),
74-
containerPlugin({
75-
type: 'demo-bg-secondary',
76-
render: function (tokens, idx) {
77-
if (tokens[idx].nesting === 1) {
78-
return '<div class="docs-example rounded-top p-0 bg-body-secondary overflow-hidden">\n'
79-
} else {
80-
return '</div>\n'
81-
}
82-
},
62+
markdownContainerPlugin({
63+
type: 'demo-rounded',
64+
before: (): string => `<div class="docs-example rounded p-4">\n`,
65+
after: (): string => '</div>\n',
8366
}),
84-
tocPlugin({}),
67+
prismjsPlugin(),
8568
registerComponentsPlugin({
8669
components: {
8770
Callout: path.resolve(__dirname, './src/client/components/Callout.vue'),
8871
ScssDocs: path.resolve(__dirname, './src/client/components/ScssDocs.vue'),
8972
},
9073
}),
74+
tocPlugin({}),
9175
],
9276
theme: defaultTheme({
9377
sidebar: [

‎packages/docs/.vuepress/src/client/components/Banner.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<script setup lang="ts">
2+
import { usePageFrontmatter } from '@vuepress/client'
3+
import type { DefaultThemePageFrontmatter } from '../../shared'
4+
5+
const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
6+
const pro_component = frontmatter.value.pro_component
7+
</script>
8+
19
<template>
210
<div
311
v-if="pro_component"
@@ -38,11 +46,3 @@
3846
</ul>
3947
</div>
4048
</template>
41-
42-
<script setup lang="ts">
43-
import { usePageFrontmatter } from '@vuepress/client'
44-
import type { DefaultThemePageFrontmatter } from '../../shared'
45-
46-
const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
47-
const pro_component = frontmatter.value.pro_component
48-
</script>

‎packages/docs/.vuepress/src/client/components/Callout.vue‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
1+
<script setup lang="ts">
2+
const props = defineProps({
3+
color: String,
4+
title: String,
5+
})
6+
7+
const className = [
8+
'docs-callout',
9+
{
10+
[`docs-callout-${props.color}`]: props.color,
11+
},
12+
]
13+
</script>
14+
115
<template>
2-
<div :class="class">
3-
<h5 v-if="title">{{ title }}</h5>
16+
<div :class="className">
17+
<h5 v-if="props.title">{{ props.title }}</h5>
418
<slot></slot>
519
</div>
620
</template>
7-
8-
<script lang="ts">
9-
import { defineComponent } from 'vue'
10-
export default defineComponent({
11-
name: 'Callout',
12-
props: {
13-
color: String,
14-
title: String,
15-
},
16-
setup(props) {
17-
return {
18-
class: [
19-
'docs-callout',
20-
{
21-
[`docs-callout-${props.color}`]: props.color,
22-
}
23-
],
24-
color: props.color,
25-
title: props.title,
26-
}
27-
},
28-
})
29-
</script>

‎packages/docs/.vuepress/src/client/components/Footer.vue‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,4 @@
3535
</p>
3636
</CContainer>
3737
</CFooter>
38-
</template>
39-
40-
<script lang="ts">
41-
import { defineComponent } from 'vue'
42-
import pkg from './../../../../package.json'
43-
export default defineComponent({
44-
name: 'Footer',
45-
setup () {
46-
const version = pkg.version
47-
return {
48-
version
49-
}
50-
}
51-
})
52-
</script>
53-
../../../../package.json
38+
</template>

‎packages/docs/.vuepress/src/client/components/Header.vue‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<script setup lang="ts">
2+
import { useColorModes } from '@coreui/vue/src'
3+
4+
const props = defineProps({
5+
theme: String,
6+
})
7+
8+
const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
9+
</script>
110
<template>
211
<CHeader class="mb-5 elevation-0 border-bottom" position="sticky">
312
<CHeaderToggler class="ms-md-3" @click="$emit('toggle-sidebar')">
@@ -86,23 +95,3 @@
8695
</CButton>
8796
</CHeader>
8897
</template>
89-
<script lang="ts">
90-
import { defineComponent } from 'vue'
91-
import { useColorModes } from '@coreui/vue/src'
92-
93-
export default defineComponent({
94-
name: 'Header',
95-
props: {
96-
theme: String,
97-
},
98-
emits: ['toggle-sidebar'],
99-
setup() {
100-
const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
101-
102-
return {
103-
colorMode,
104-
setColorMode,
105-
}
106-
},
107-
})
108-
</script>

‎packages/docs/.vuepress/src/client/components/OtherFrameworks.vue‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,3 @@
1-
<template>
2-
<template v-if="frameworks">
3-
<h2>Other frameworks</h2>
4-
<p>
5-
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
6-
components. To learn more please visit the following pages.
7-
</p>
8-
<ul>
9-
<template v-for="framework in frameworks">
10-
<template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
11-
<li v-if="el !== 'vue'" :key="index">
12-
<a :href="otherFrameworks[framework][el]"
13-
>{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
14-
>
15-
</li>
16-
</template>
17-
</template>
18-
</ul>
19-
</template>
20-
</template>
211
<script setup lang="ts">
222
import { usePageFrontmatter } from '@vuepress/client'
233
import jsonData from '../components/other_frameworks.json'
@@ -42,4 +22,24 @@ const humanize = (text: string) => {
4222
return string[0].toUpperCase() + string.slice(1)
4323
}
4424
</script>
45-
./other_frameworks.json
25+
26+
<template>
27+
<template v-if="frameworks">
28+
<h2>Other frameworks</h2>
29+
<p>
30+
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
31+
components. To learn more please visit the following pages.
32+
</p>
33+
<ul>
34+
<template v-for="framework in frameworks">
35+
<template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
36+
<li v-if="el !== 'vue'" :key="index">
37+
<a :href="otherFrameworks[framework][el]"
38+
>{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
39+
>
40+
</li>
41+
</template>
42+
</template>
43+
</ul>
44+
</template>
45+
</template>

0 commit comments

Comments
 (0)