feat: code groups (#2)

example/docs/advanced/icons.md

@@ -44,8 +44,8 @@ To import other icons, you may need to search for icons' names [here](https://oh
 import OhVueIcon from "oh-vue-icons";
 
 // import the icons you need
-import { OiGitCompare, FaBook } from "oh-vue-icons/icons";
-OhVueIcon.add(OiGitCompare, FaBook);
+import { OiGitCompare, RiBook2Fill } from "oh-vue-icons/icons";
+OhVueIcon.add(OiGitCompare, RiBook2Fill);
 ```
 
 Or you can also locally import them in your custom components.
@@ -55,11 +55,11 @@ Or you can also locally import them in your custom components.
 
 Then you can use these icons in Markdown or your custom components:
 
-<v-icon name="oi-git-compare" /> <v-icon name="fa-book" />
+<v-icon name="oi-git-compare" /> <v-icon name="ri-book-2-fill" />
 
 ```html
 <v-icon name="oi-git-compare" />
-<v-icon name="fa-book" />
+<v-icon name="ri-book-2-fill" />
 ```
 
 `oh-vue-icons` also supports many other features, like editting icon's color, size, animation, flip and so on. Here are some examples:

example/docs/basic/installation.md

@@ -12,11 +12,19 @@ yarn init  # or: npm init
 
 Install VuePress and theme Gungnir:
 
+<code-group>
+<code-block title="YARN" active>
 ```bash
 yarn add -D vuepress vuepress-theme-gungnir
-# or
+```
+</code-block>
+
+<code-block title="NPM">
+```bash
 npm install -D vuepress vuepress-theme-gungnir
 ```
+</code-block>
+</code-group>
 
 Build your directory structure follow the guide of [VuePress's official documentation](https://vuepress.vuejs.org/guide/) and specify this theme in `.vuepress/config.js`:
 
@@ -25,4 +33,4 @@ module.exports = {
     ...
     theme: 'gungnir'
 }
-```
+```

example/posts/2020-10-29-hello-word.md

@@ -42,6 +42,8 @@ Most people would find the picture of our universe as an infinite **tower of tor
 
 ## Code
 
+### Code Blocks
+
 Code block with the default theme "[tomorrow](https://prismjs.com/themes/prism-tomorrow.css)" (click the red button on the upper-right corner to make the code block full screen):
 
 ```python{8}
@@ -64,7 +66,28 @@ while True:
   me.eat(10)
 ```
 
-Inline code: `const a = 1`
+### Code Groups
+
+<code-group>
+<code-block title="YARN" active>
+```bash
+yarn add -D vuepress-theme-gungnir
+```
+</code-block>
+
+<code-block title="NPM">
+```bash
+npm install -D vuepress-theme-gungnir
+```
+</code-block>
+</code-group>
+
+### Inline Code
+
+`const a = 1`
+
+
+## Badges <Badge text="tip" /> <Badge text="warning" type="warning" /> <Badge text="error" type="error" /> <Badge text="tip middle" vertical="middle" />
 
 
 ## Charts

example/posts/2020-10-30-hello-word-with-header-image.md

@@ -43,6 +43,8 @@ Most people would find the picture of our universe as an infinite **tower of tor
 
 ## Code
 
+### Code Blocks
+
 Code block with the default theme "[tomorrow](https://prismjs.com/themes/prism-tomorrow.css)" (click the red button on the upper-right corner to make the code block full screen):
 
 ```python{8}
@@ -65,7 +67,28 @@ while True:
   me.eat(10)
 ```
 
-Inline code: `const a = 1`
+### Code Groups
+
+<code-group>
+<code-block title="YARN" active>
+```bash
+yarn add -D vuepress-theme-gungnir
+```
+</code-block>
+
+<code-block title="NPM">
+```bash
+npm install -D vuepress-theme-gungnir
+```
+</code-block>
+</code-group>
+
+### Inline Code
+
+`const a = 1`
+
+
+## Badges <Badge text="tip" /> <Badge text="warning" type="warning" /> <Badge text="error" type="error" /> <Badge text="tip middle" vertical="middle" />
 
 
 ## Charts

example/zh/docs/advanced/icons.md

@@ -43,8 +43,8 @@ date: 2020-03-30
 import OhVueIcon from "oh-vue-icons";
 
 // 引入想要使用的图标
-import { OiGitCompare, FaBook } from "oh-vue-icons/icons";
-OhVueIcon.add(OiGitCompare, FaBook);
+import { OiGitCompare, RiBook2Fill } from "oh-vue-icons/icons";
+OhVueIcon.add(OiGitCompare, RiBook2Fill);
 ```
 
 当然你也可以在你的自定义组件中局部引入。
@@ -54,11 +54,11 @@ OhVueIcon.add(OiGitCompare, FaBook);
 
 然后你就可以在 Markdown 或自定义组件中使用引入的图标了：
 
-<v-icon name="oi-git-compare" /> <v-icon name="fa-book" />
+<v-icon name="oi-git-compare" /> <v-icon name="ri-book-2-fill" />
 
 ```html
 <v-icon name="oi-git-compare" />
-<v-icon name="fa-book" />
+<v-icon name="ri-book-2-fill" />
 ```
 
 `oh-vue-icons` 还支持定制图标的颜色、大小、翻转、动画等，这是一些例子：

example/zh/docs/basic/installation.md

@@ -12,11 +12,19 @@ yarn init  # or: npm init
 
 安装 VuePress 和主题 Gungnir：
 
+<code-group>
+<code-block title="YARN" active>
 ```bash
 yarn add -D vuepress vuepress-theme-gungnir
-# or
+```
+</code-block>
+
+<code-block title="NPM">
+```bash
 npm install -D vuepress vuepress-theme-gungnir
 ```
+</code-block>
+</code-group>
 
 参考 [VuePress 文档](https://vuepress.vuejs.org/guide/) 搭建目录结构，然后在 `.vuepress/config.js` 中指定主题：
 
@@ -25,4 +33,4 @@ module.exports = {
     ...
     theme: 'gungnir'
 }
-```
+```

packages/theme-gungnir/components/Page.vue

@@ -108,22 +108,25 @@ export default {
   watch: {
     $route() {
       this.$nextTick(() => {
-        this.codeFullScreen();
+        this.addCodeBtn();
       });
     }
   },
 
   mounted() {
-    this.codeFullScreen();
+    this.addCodeBtn();
   },
   methods: {
-    codeFullScreen() {
+    addCodeBtn() {
       // full screen the code blocks
       const codeBlocks = document.querySelectorAll("div[class*='language-']");
       const htmlDom = document.querySelector("html");
       for (let block of codeBlocks) {
+        if (this.checkBtn(block)) continue;
+
         let btn = document.createElement("div");
         btn.classList.add("code-button");
+
         // click to full screen the code block
         btn.onclick = function () {
           if (block.classList.contains("code-block-fullscreen")) {
@@ -134,8 +137,15 @@ export default {
             htmlDom.classList.add("screen-fixed");
           }
         };
+
         block.appendChild(btn);
       }
+    },
+    checkBtn(block) {
+      return Object.values(block.children).find((value) => {
+        if (value.classList.contains("code-button")) return true;
+        return false;
+      });
     }
   }
 };

packages/theme-gungnir/global-components/CodeBlock.vue

@@ -0,0 +1,45 @@
+<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
+    }
+  },
+  mounted() {
+    if (this.$parent && this.$parent.loadTabs) {
+      this.$parent.loadTabs();
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.theme-code-block
+  display none
+  & > pre
+    background-color orange
+  & >>> div[class*="language-"]
+    box-shadow none
+    pre, pre[class*="language-"]
+      padding-top 1em
+    .highlight-lines
+      padding-top 1.1rem
+    .code-button
+      display none
+    &::before
+      top -2.6em
+.theme-code-block__active
+  display block
+</style>