feat: support multi-language configuration

Author: calebman

src/DemoBlock.vue

@@ -41,182 +41,9 @@
   </div>
 </template>
 
-<style lang="less">
-.demo-block {
-  border: solid 1px #ebebeb;
-  border-radius: 3px;
-  transition: 0.2s;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  &.hover {
-    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
-      0 2px 4px 0 rgba(232, 237, 250, 0.5);
-  }
-  code {
-    font-family: Menlo, Monaco, Consolas, Courier, monospace;
-  }
-  .demo-button {
-    float: right;
-  }
-  .demo-content {
-    padding: 24px;
-  }
-  .meta {
-    background-color: #282c34;
-    border: solid 1px #ebebeb;
-    border-radius: 3px;
-    overflow: hidden;
-    height: 0;
-    transition: height 0.2s;
-  }
-  .description {
-    padding: 20px;
-    box-sizing: border-box;
-    border: solid 1px #ebebeb;
-    border-radius: 3px;
-    font-size: 14px;
-    line-height: 22px;
-    color: #666;
-    word-break: break-word;
-    margin: 10px;
-    background-color: #fafafa;
-  }
-  .code-content {
-    pre[class*="language-"] {
-      padding: 16px;
-      margin: 8px 0;
-    }
-  }
-  .demo-block-control {
-    border-top: solid 1px #eaeefb;
-    height: 44px;
-    box-sizing: border-box;
-    background-color: #fafafa;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    text-align: center;
-    margin-top: -1px;
-    color: #d3dce6;
-    cursor: pointer;
-    position: relative;
-
-    &.is-fixed {
-      position: fixed;
-      bottom: 0;
-      width: 660px;
-      z-index: 999;
-    }
-
-    .icon {
-      font-family: element-icons !important;
-      font-style: normal;
-      font-weight: 400;
-      font-variant: normal;
-      text-transform: none;
-      line-height: 1;
-      vertical-align: baseline;
-      display: inline-block;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    .caret-top {
-      &::before {
-        content: "";
-        position: absolute;
-        right: 50%;
-        width: 0;
-        height: 0;
-        border-bottom: 6px solid #ccc;
-        border-right: 6px solid transparent;
-        border-left: 6px solid transparent;
-      }
-    }
-
-    .caret-bottom {
-      &::before {
-        content: "";
-        position: absolute;
-        right: 50%;
-        width: 0;
-        height: 0;
-        border-top: 6px solid #ccc;
-        border-right: 6px solid transparent;
-        border-left: 6px solid transparent;
-      }
-    }
-
-    i {
-      font-size: 16px;
-      line-height: 44px;
-      transition: 0.3s;
-      &.hovering {
-        transform: translateX(-40px);
-      }
-    }
-
-    > span {
-      position: absolute;
-      transform: translateX(-30px);
-      font-size: 14px;
-      line-height: 44px;
-      transition: 0.3s;
-      display: inline-block;
-    }
-
-    .copy-action {
-      right: 0px;
-      color: #409eff;
-    }
-
-    &.copying {
-      transform: translateX(-44px);
-    }
-
-    .copy-action-success {
-      color: #f5222d;
-    }
-
-    &:hover {
-      color: #409eff;
-      background-color: #f9fafc;
-    }
-    & .text-slide-enter,
-    & .text-slide-leave-active {
-      opacity: 0;
-      transform: translateX(10px);
-    }
-
-    & .bounce-enter-active {
-      animation: bounce-in 0.5s;
-    }
-
-    @keyframes bounce-in {
-      0% {
-        transform: scale(0);
-      }
-      50% {
-        transform: scale(1.5);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    .control-button {
-      line-height: 26px;
-      position: absolute;
-      top: 0;
-      right: 0;
-      font-size: 14px;
-      padding-left: 5px;
-      padding-right: 25px;
-    }
-  }
-}
-</style>
-
 <script type="text/babel">
-import compoLang from './i18n/lang.json';
+import './style/index.less'
+import defaultLang from './i18n/default_lang.json';
 export default {
   data() {
     return {
@@ -228,9 +55,20 @@ export default {
       scrollParent: null
     };
   },
+  props: {
+    options: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
   computed: {
+    compoLang() {
+      return this.options.locales || defaultLang
+    },
     langConfig() {
-        return compoLang.filter(config => config.lang === this.$lang)[0]['demo-block'];
+        return this.compoLang.filter(config => config.lang === this.$lang)[0]['demo-block'];
     },
     blockClass() {
       return `demo-${this.$lang} demo-${this.$router.currentRoute.path

src/common/containers.js

@@ -17,7 +17,8 @@ module.exports = options => {
         if (tokens[idx].nesting === 1) {
           const description = m && m.length > 1 ? m[1] : '';
           const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
-          return `<${componentName}>
+          const encodeOptionsStr = encodeURI(JSON.stringify(options));
+          return `<${componentName} :options="JSON.parse(decodeURI('${encodeOptionsStr}'))">
             <template slot="demo"><!--pre-render-demo:${content}:pre-render-demo--></template>
             ${description ? `<div slot="description">${md.render(description).html}</div>` : ''}
             <template slot="source">

src/i18n/default_lang.json

@@ -0,0 +1,20 @@
+[
+  {
+    "lang": "zh-CN",
+    "demo-block": {
+      "hide-text": "隐藏代码",
+      "show-text": "显示代码",
+      "copy-text": "复制代码",
+      "copy-success": "复制成功"
+    }
+  },
+  {
+    "lang": "en-US",
+    "demo-block": {
+      "hide-text": "Hide",
+      "show-text": "Expand",
+      "copy-text": "Copy",
+      "copy-success": "Successful"
+    }
+  }
+]