Skip to content

Commit 394c4f6

Browse files
d-pollardd-pollard
authored
feat($theme-default): add code group and code block components (#2594)
1 parent 4618913 commit 394c4f6

File tree

4 files changed

+170
-5
lines changed

4 files changed

+170
-5
lines changed

‎packages/@vuepress/theme-default/global-components/CodeBlock.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div
3+
class="theme-code-block"
4+
:class="{ 'theme-code-block__active': active }"
5+
>
6+
<slot />
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'CodeBlock',
13+
props: {
14+
title: {
15+
type: String,
16+
required: true
17+
},
18+
active: {
19+
type: Boolean,
20+
default: false
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style scoped>
27+
.theme-code-block {
28+
display: none;
29+
}
30+
.theme-code-block__active {
31+
display: block;
32+
}
33+
.theme-code-block > pre {
34+
background-color: orange;
35+
}
36+
</style>

‎packages/@vuepress/theme-default/global-components/CodeGroup.vue

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="theme-code-group">
3+
<div class="theme-code-group__nav">
4+
<button
5+
v-for="(tab, i) in codeTabs"
6+
:key="tab.title"
7+
class="theme-code-group__nav-tab"
8+
:class="{'theme-code-group__nav-tab-active': i === activeCodeTabIndex}"
9+
@click="changeCodeTab(i)"
10+
>
11+
{{ tab.title }}
12+
</button>
13+
</div>
14+
<slot />
15+
<pre
16+
v-if="codeTabs.length < 1"
17+
class="pre-blank"
18+
>// Make sure to add code blocks to your code group</pre>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
name: 'CodeGroup',
25+
data () {
26+
return {
27+
codeTabs: [],
28+
activeCodeTabIndex: -1
29+
}
30+
},
31+
watch: {
32+
activeCodeTabIndex (index) {
33+
this.codeTabs.forEach(tab => {
34+
tab.elm.classList.remove('theme-code-block__active')
35+
})
36+
this.codeTabs[index].elm.classList.add('theme-code-block__active')
37+
}
38+
},
39+
mounted () {
40+
this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
41+
if (slot.componentOptions.propsData.active === '') {
42+
this.activeCodeTabIndex = index
43+
}
44+
45+
return {
46+
title: slot.componentOptions.propsData.title,
47+
elm: slot.elm
48+
}
49+
})
50+
51+
if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
52+
this.activeCodeTabIndex = 0
53+
}
54+
},
55+
methods: {
56+
changeCodeTab (index) {
57+
this.activeCodeTabIndex = index
58+
}
59+
}
60+
}
61+
</script>
62+
63+
<style lang="stylus" scoped>
64+
.theme-code-group {}
65+
.theme-code-group__nav {
66+
margin-bottom: -35px;
67+
background-color: $codeBgColor;
68+
padding-bottom: 22px;
69+
border-top-left-radius: 6px;
70+
border-top-right-radius: 6px;
71+
padding-left: 10px;
72+
padding-top: 10px;
73+
}
74+
.theme-code-group__nav-tab {
75+
border: 0;
76+
padding: 5px;
77+
cursor: pointer;
78+
background-color: transparent;
79+
font-size: 0.85em;
80+
line-height: 1.4;
81+
color: rgba(255, 255, 255, 0.9);
82+
font-weight: 600;
83+
}
84+
.theme-code-group__nav-tab-active {
85+
border-bottom: #42b983 1px solid;
86+
}
87+
.pre-blank {
88+
color: #42b983;
89+
}
90+
</style>

‎packages/docs/docs/guide/getting-started.md

+43-4
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,19 @@ The fastest way to get your VuePress project setup is to use our [create-vuepres
1313

1414
To use it, open up your terminal in the desired directory and run the following command:
1515

16+
<code-group>
17+
<code-block title="YARN" active>
1618
```bash
1719
yarn create vuepress-site [optionalDirectoryName]
18-
# OR npx create-vuepress-site [optionalDirectoryName]
1920
```
21+
</code-block>
22+
23+
<code-block title="NPM">
24+
```bash
25+
npx create-vuepress-site [optionalDirectoryName]
26+
```
27+
</code-block>
28+
</code-group>
2029

2130
You will then have the opportunity to configure your VuePress site’s metadata such as:
2231

@@ -40,15 +49,35 @@ This section will help you build a basic VuePress documentation site from ground
4049

4150
2. Initialize with your preferred package manager
4251

52+
<code-group>
53+
<code-block title="YARN" active>
54+
```bash
55+
yarn init
56+
```
57+
</code-block>
58+
59+
<code-block title="NPM">
4360
```bash
44-
yarn init # npm init
61+
npm init
4562
```
63+
</code-block>
64+
</code-group>
4665

4766
3. Install VuePress locally
4867

68+
<code-group>
69+
<code-block title="YARN" active>
70+
```bash
71+
yarn add -D vuepress
72+
```
73+
</code-block>
74+
75+
<code-block title="NPM">
4976
```bash
50-
yarn add -D vuepress # npm install -D vuepress
77+
npm install -D vuepress
5178
```
79+
</code-block>
80+
</code-group>
5281

5382
4. Create your first document
5483

@@ -71,9 +100,19 @@ This section will help you build a basic VuePress documentation site from ground
71100

72101
6. Serve the documentation site in the local server
73102

103+
<code-group>
104+
<code-block title="YARN" active>
105+
```bash
106+
yarn docs:dev
107+
```
108+
</code-block>
109+
110+
<code-block title="NPM">
74111
```bash
75-
yarn docs:dev # npm run docs:dev
112+
npm run docs:dev
76113
```
114+
</code-block>
115+
</code-group>
77116

78117
VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080).
79118

‎packages/docs/docs/theme/default-theme-config.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -559,7 +559,7 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page.
559559

560560
## Ejecting
561561

562-
You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn't install Vuepress globally, run `./node_modules/.bin/vuepress eject`.
562+
You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didn’t install VuePress globally, run `./node_modules/.bin/vuepress eject`.
563563

564564
::: warning
565565
Once you eject, you are on your own and **won’t** be receiving future updates or bugfixes to the default theme even if you upgrade VuePress.

0 commit comments

Comments
 (0)