#154 [zh] traditional/simplified switch

components/Header.vue

@@ -7,6 +7,15 @@
                     <span class="higher"><T>title</T></span>
                 </nuxt-link>
             </h1>
+            <div v-if="config.locale === 'zh'" class="btn-group m-2">
+                <button v-for="(display, code) in {traditional: '繁體', simplified: '简体'}"
+                        :class="'btn btn-sm ' + (spelling === code ? 'btn-secondary disabled' : 'btn-outline-secondary')"
+                        :disabled="spelling === code"
+                        @click="setSpelling(code)"
+                >
+                    {{display}}
+                </button>
+            </div>
             <!--
             <Dropdown v-if="Object.keys(locales).length > 1" btnClass="btn-outline-secondary btn-sm">
                 <template v-slot:toggle>
@@ -82,6 +91,7 @@
         computed: {
             ...mapState([
                 'user',
+                'spelling',
             ]),
             links() {
                 const links = [];
@@ -193,6 +203,10 @@
                     || (link.extra || []).includes(this.$route.name)
                     || (link.extra || []).includes(decodeURIComponent(this.$route.path));
             },
+            setSpelling(spelling) {
+                this.$store.commit('setSpelling', spelling);
+                this.$cookies.set('spelling', this.$store.state.spelling);
+            },
         },
     }
 </script>

components/LinkedText.vue

@@ -1,5 +1,7 @@
 <script>
     import Icon from './Icon';
+    import {mapState} from "vuex";
+    import zhConverter from 'zh_cn_zh_tw';
 
     export default {
         props: {
@@ -20,7 +22,7 @@
                     return h(Icon, {props: { v: buffer}});
                 }
 
-                const bufferNode = [ h('span', {domProps: { innerHTML: buffer }}) ];
+                const bufferNode = [ h('span', {domProps: { innerHTML: this.handleSpelling(buffer) }}) ];
 
                 if (!isLink) {
                     return bufferNode;
@@ -45,7 +47,7 @@
                     );
                 }
 
-                return h('nuxt-link', {props: { to: linkBuffer || '/' + this.config.nouns.route + '#' + buffer }}, bufferNode);
+                return h('nuxt-link', {props: { to: linkBuffer || '/' + this.config.nouns.route + '#' + this.handleSpelling(buffer) }}, bufferNode);
             }
             const addChild = _ => {
                 if (!buffer) {
@@ -86,5 +88,19 @@
 
             return h('span', children);
         },
+        computed: {
+            ...mapState([
+                'spelling',
+            ]),
+        },
+        methods: {
+            handleSpelling(str) {
+                if (this.config.locale !== 'zh' || this.spelling === 'traditional') {
+                    return str;
+                }
+
+                return zhConverter.convertToSimplifiedChinese(str);
+            }
+        },
     }
 </script>

package.json

@@ -37,7 +37,8 @@
     "suml-loader": "^0.1.1",
     "ulid": "^2.3.0",
     "vue-matomo": "^3.13.5-0",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "zh_cn_zh_tw": "^1.0.7"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-pro": "git+ssh://git@gitlab.com:Avris/FontAwesomePro.git",

plugins/globals.js

@@ -3,7 +3,7 @@ import t from '../src/translator';
 import config from '../data/config.suml';
 import {buildDict} from "../src/helpers";
 
-export default ({ app }) => {
+export default ({ app, store }) => {
     Vue.prototype.$base = process.env.BASE_URL;
     Vue.prototype.$t = t;
     Vue.prototype.$translateForPronoun = (str, pronoun) =>
@@ -21,4 +21,5 @@ export default ({ app }) => {
             }
         }
     });
+    store.commit('setSpelling', app.$cookies.get('spelling') || 'traditional');
 }

src/classes.js

@@ -21,7 +21,7 @@ export class Example {
         const parts = [];
         let lastPosition = 0;
 
-        for (let m of str.matchAll(/{('?[a-z_]+)}/g)) {
+        for (let m of str.matchAll(/{('?[a-z0-9_]+)}/g)) {
             const textBefore = str.substr(lastPosition, m.index - lastPosition);
             if (textBefore.length) {
                 parts.push(new ExamplePart(false, textBefore));

store/index.js

@@ -3,6 +3,7 @@ import jwt from 'jsonwebtoken';
 export const state = () => ({
     token: null,
     user: null,
+    spelling: 'traditional',
 })
 
 export const mutations = {
@@ -32,5 +33,8 @@ export const mutations = {
 
         state.token = null;
         state.user = null;
-    }
+    },
+    setSpelling(state, spelling) {
+        state.spelling = spelling;
+    },
 }

yarn.lock

@@ -9382,3 +9382,8 @@ yargs@^12.0.1:
     which-module "^2.0.0"
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
+
+zh_cn_zh_tw@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/zh_cn_zh_tw/-/zh_cn_zh_tw-1.0.7.tgz#dc6fa59f4964cc2b65e6b4b525771f286890447d"
+  integrity sha512-GwEQN99thOy/HHrQg3vAnxm3c0SvmESsnWXVApCNIXElrYcowZcLwzmaiAsjN34J+s7RJymGhddzMpSpJ35CtA==