Skip to content

Commit 4fe1892

Browse files
author
Christopher Mühl
authored
Merge pull request #6 from padarom/global-configuration
Add a way of configuring default languages for switcher names
2 parents eb6720e + 03ec40a commit 4fe1892

File tree

6 files changed

+101
-16
lines changed

6 files changed

+101
-16
lines changed

‎README.md‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ After installing, add it to your Vuepress configuration's plugin list:
1616

1717
```js
1818
module.exports = {
19-
plugins: [ 'code-switcher' ]
19+
// Your remaining configuration ...
20+
plugins: [ 'code-switcher' ],
2021
}
2122
```
2223

@@ -46,9 +47,60 @@ export default function isString (str: string) : str is string {
4647

4748
> The extra newline between the `<template>` tags and their content is necessary if you want to have Markdown interpreted within the component.
4849
50+
### With options
51+
If you have a lot of code switchers in your documentation you might not want to
52+
specify your languages every single time. Therefore you can instantiate the
53+
plugin with options and name the default languages for a given group:
54+
55+
```js
56+
module.exports = {
57+
// Your remaining configuration ...
58+
plugins: [
59+
[
60+
'code-switcher',
61+
{
62+
groups: {
63+
default: { ts: 'TypeScript', js: 'JavaScript' },
64+
jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },
65+
},
66+
},
67+
],
68+
],
69+
}
70+
```
71+
72+
You then want to give your `CodeSwitcher` components the `name` prop to match them
73+
with the configured language group. If you omit the `name` prop, it uses the group
74+
named `default`.
75+
76+
````markdown
77+
<!-- Uses the "default" languages defined above -->
78+
<CodeSwitcher>
79+
<template v-slot:js>
80+
<!-- ... (see above) -->
81+
</template>
82+
<template v-slot:ts>
83+
<!-- ... (see above) -->
84+
</template>
85+
</CodeSwitcher>
86+
87+
<!-- Uses the "jvm" languages defined above -->
88+
<CodeSwitcher name="jvm">
89+
<template v-slot:java>
90+
<!-- ... (see above) -->
91+
</template>
92+
<template v-slot:kotlin>
93+
<!-- ... (see above) -->
94+
</template>
95+
<template v-slot:jruby>
96+
<!-- ... (see above) -->
97+
</template>
98+
</CodeSwitcher>
99+
````
100+
49101
#### Props
50102
| Prop | Description | Type | Default |
51103
| ----- | ----- | ---- | ---- |
52104
| languages | The languages that can be switched between. The object expects shorthands as keys and the tab title as values. The shorthands will also be used as slot names | Object | --- |
53-
| name | All code switchers on one page with the same name will be synchronized | String | `'default'` |
105+
| name | All code switchers on one page with the same name will be synchronized. When using the `groups` plugin option, this will also determine the default value for the `languages` prop. | String | `'default'` |
54106
| isolated | if true, this block will not synchronize with any others or load/save its state to/from localstorage | Boolean | `false` |

‎components/CodeSwitcher.vue‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="code-switcher">
33
<div class="tab-header">
44
<ul>
5-
<li v-for="(name, shorthand) in languages"
5+
<li v-for="(name, shorthand) in actualLanguages"
66
:key="shorthand"
77
@click="switchLanguage(shorthand)"
88
:class="{ active: selectedLanguage === shorthand }"
@@ -13,7 +13,7 @@
1313

1414
<div class="tab-content"
1515
:key="shorthand"
16-
v-for="(name, shorthand) in languages"
16+
v-for="(name, shorthand) in actualLanguages"
1717
v-show="shorthand === selectedLanguage"
1818
>
1919
<slot :name="shorthand"></slot>
@@ -32,12 +32,16 @@ export default {
3232
type: Boolean,
3333
default: false
3434
},
35-
languages: Object,
35+
languages: {
36+
type: Object,
37+
required: false,
38+
}
3639
},
3740
3841
data () {
3942
return {
40-
selectedLanguage: Object.keys(this.languages)[0]
43+
selectedLanguage: this.languages ? Object.keys(this.languages)[0] : null,
44+
actualLanguages: this.languages,
4145
}
4246
},
4347
@@ -53,7 +57,7 @@ export default {
5357
5458
localStorageKey () {
5559
return `vuepress-plugin-code-switcher@${this.name}`
56-
}
60+
},
5761
},
5862
5963
methods: {
@@ -66,15 +70,32 @@ export default {
6670
localStorage.setItem(this.localStorageKey, value)
6771
}
6872
this.root.$emit('change', { name: this.name, value })
73+
},
74+
75+
setConfiguredDefaultLanguages () {
76+
// No need to override the language list if we already have manually
77+
// specified languages
78+
if (this.languages) return
79+
80+
const options = this.$page.codeSwitcherOptions
81+
if (options && options.groups && options.groups[this.name]) {
82+
this.actualLanguages = options.groups[this.name]
83+
this.selectedLanguage = Object.keys(this.actualLanguages)[0]
84+
}
6985
}
7086
},
7187
7288
created () {
7389
if (this.isolated) return
7490
91+
this.setConfiguredDefaultLanguages()
92+
if (!this.actualLanguages) {
93+
throw new Error('You must specify either the "languages" prop or use the "groups" option when configuring the plugin.')
94+
}
95+
7596
if (typeof localStorage !== 'undefined') {
7697
let selected = localStorage.getItem(this.localStorageKey)
77-
if (selected && Object.keys(this.languages).indexOf(selected) !== -1)
98+
if (selected && Object.keys(this.actualLanguages).indexOf(selected) !== -1)
7899
this.selectedLanguage = selected
79100
}
80101

‎demo/src/.vuepress/config.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@ module.exports = {
99
},
1010

1111
plugins: [
12-
'code-switcher',
12+
[
13+
'code-switcher',
14+
{
15+
groups: {
16+
synchronized: { julia: 'Julia', kotlin: 'Kotlin', perl: 'Perl' },
17+
'group-1': { nim: 'Nim', ocaml: 'OCaml' },
18+
'group-2': { nim: 'Nim', ocaml: 'OCaml' },
19+
},
20+
},
21+
],
1322
]
1423
}

‎demo/src/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ to be made.
1919

2020
### Longest Common Substring
2121

22-
<CodeSwitcher :languages="{julia:'Julia',kotlin:'Kotlin',perl:'Perl'}">
22+
<CodeSwitcher name="synchronized">
2323
<template v-slot:julia>
2424

2525
```julia
@@ -107,7 +107,7 @@ print "The longest common substring of <thisisatest> and <testing123testing> is
107107

108108
### Palindrome Detection
109109

110-
<CodeSwitcher :languages="{julia:'Julia',kotlin:'Kotlin',perl:'Perl'}">
110+
<CodeSwitcher name="synchronized">
111111
<template v-slot:julia>
112112

113113
```julia
@@ -276,7 +276,7 @@ switch, while the others stay the same.
276276

277277
### Group 1: FizzBuzz
278278

279-
<CodeSwitcher :languages="{nim:'Nim',ocaml:'OCaml'}" name="group-1">
279+
<CodeSwitcher name="group-1">
280280
<template v-slot:nim>
281281

282282
```nim
@@ -311,7 +311,7 @@ let _ =
311311

312312
### Group 1: Hello world
313313

314-
<CodeSwitcher :languages="{nim:'Nim',ocaml:'OCaml'}" name="group-1">
314+
<CodeSwitcher name="group-1">
315315
<template v-slot:nim>
316316

317317
```nim
@@ -330,7 +330,7 @@ print_endline "Hello world!"
330330

331331
### Group 2: String case
332332

333-
<CodeSwitcher :languages="{nim:'Nim',ocaml:'OCaml'}" name="group-2">
333+
<CodeSwitcher name="group-2">
334334
<template v-slot:nim>
335335

336336
```nim
@@ -361,7 +361,7 @@ let () =
361361

362362
### Group 2: Strip whitespace
363363

364-
<CodeSwitcher :languages="{nim:'Nim',ocaml:'OCaml'}" name="group-2">
364+
<CodeSwitcher name="group-2">
365365
<template v-slot:nim>
366366

367367
```nim

‎index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
const { resolve } = require('path')
22

33
module.exports = (options, ctx) => ({
4+
extendPageData($page) {
5+
$page.codeSwitcherOptions = options
6+
},
47
name: 'vuepress-plugin-code-switcher',
58
enhanceAppFiles: resolve(__dirname, 'enhanceAppFile.js'),
69
plugins: [

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"type": "git",
1010
"url": "https://github.com/padarom/vuepress-plugin-code-switcher"
1111
},
12-
"version": "1.0.5",
12+
"version": "1.1.0",
1313
"main": "index.js",
1414
"license": "MIT",
1515
"dependencies": {

0 commit comments

Comments
 (0)