Skip to content

Commit

Permalink
feat($theme-default): add code group and code block components (#2594)
Browse files Browse the repository at this point in the history
  • Loading branch information
d-pollard authored Sep 9, 2020
1 parent 4618913 commit 394c4f6
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 5 deletions.
36 changes: 36 additions & 0 deletions packages/@vuepress/theme-default/global-components/CodeBlock.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div
class="theme-code-block"
:class="{ 'theme-code-block__active': active }"
>
<slot />
</div>
</template>

<script>
export default {
name: 'CodeBlock',
props: {
title: {
type: String,
required: true
},
active: {
type: Boolean,
default: false
}
}
}
</script>

<style scoped>
.theme-code-block {
display: none;
}
.theme-code-block__active {
display: block;
}
.theme-code-block > pre {
background-color: orange;
}
</style>
90 changes: 90 additions & 0 deletions packages/@vuepress/theme-default/global-components/CodeGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template>
<div class="theme-code-group">
<div class="theme-code-group__nav">
<button
v-for="(tab, i) in codeTabs"
:key="tab.title"
class="theme-code-group__nav-tab"
:class="{'theme-code-group__nav-tab-active': i === activeCodeTabIndex}"
@click="changeCodeTab(i)"
>
{{ tab.title }}
</button>
</div>
<slot />
<pre
v-if="codeTabs.length < 1"
class="pre-blank"
>// Make sure to add code blocks to your code group</pre>
</div>
</template>

<script>
export default {
name: 'CodeGroup',
data () {
return {
codeTabs: [],
activeCodeTabIndex: -1
}
},
watch: {
activeCodeTabIndex (index) {
this.codeTabs.forEach(tab => {
tab.elm.classList.remove('theme-code-block__active')
})
this.codeTabs[index].elm.classList.add('theme-code-block__active')
}
},
mounted () {
this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
if (slot.componentOptions.propsData.active === '') {
this.activeCodeTabIndex = index
}
return {
title: slot.componentOptions.propsData.title,
elm: slot.elm
}
})
if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
this.activeCodeTabIndex = 0
}
},
methods: {
changeCodeTab (index) {
this.activeCodeTabIndex = index
}
}
}
</script>

<style lang="stylus" scoped>
.theme-code-group {}
.theme-code-group__nav {
margin-bottom: -35px;
background-color: $codeBgColor;
padding-bottom: 22px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding-left: 10px;
padding-top: 10px;
}
.theme-code-group__nav-tab {
border: 0;
padding: 5px;
cursor: pointer;
background-color: transparent;
font-size: 0.85em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.theme-code-group__nav-tab-active {
border-bottom: #42b983 1px solid;
}
.pre-blank {
color: #42b983;
}
</style>
47 changes: 43 additions & 4 deletions packages/docs/docs/guide/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,19 @@ The fastest way to get your VuePress project setup is to use our [create-vuepres

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

<code-group>
<code-block title="YARN" active>
```bash
yarn create vuepress-site [optionalDirectoryName]
# OR npx create-vuepress-site [optionalDirectoryName]
```
</code-block>

<code-block title="NPM">
```bash
npx create-vuepress-site [optionalDirectoryName]
```
</code-block>
</code-group>

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

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

2. Initialize with your preferred package manager

<code-group>
<code-block title="YARN" active>
```bash
yarn init
```
</code-block>

<code-block title="NPM">
```bash
yarn init # npm init
npm init
```
</code-block>
</code-group>

3. Install VuePress locally

<code-group>
<code-block title="YARN" active>
```bash
yarn add -D vuepress
```
</code-block>

<code-block title="NPM">
```bash
yarn add -D vuepress # npm install -D vuepress
npm install -D vuepress
```
</code-block>
</code-group>

4. Create your first document

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

6. Serve the documentation site in the local server

<code-group>
<code-block title="YARN" active>
```bash
yarn docs:dev
```
</code-block>

<code-block title="NPM">
```bash
yarn docs:dev # npm run docs:dev
npm run docs:dev
```
</code-block>
</code-group>

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

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/docs/theme/default-theme-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -559,7 +559,7 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page.

## Ejecting

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`.
You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. If you didnt install VuePress globally, run `./node_modules/.bin/vuepress eject`.

::: warning
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.
Expand Down

0 comments on commit 394c4f6

Please sign in to comment.