fix: use vue-router friendly btoa/atob

Author: Justineo

common/util.js

@@ -56,15 +56,23 @@ export function savePref (key, value) {
   localStorage.setItem(PREF_KEY, JSON.stringify(pref))
 }
 
+function urlBtoA (binary) {
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_')
+}
+
+function urlAtoB (base64) {
+  return atob(base64.replace(/-/g, '+').replace(/_/g, '/'))
+}
+
 export function utoa (data) {
   const buffer = strToU8(data)
   const zipped = zlibSync(buffer, { level: 9 })
   const binary = strFromU8(zipped, true)
-  return btoa(binary)
+  return urlBtoA(binary)
 }
 
 export function atou (base64) {
-  const binary = atob(base64)
+  const binary = urlAtoB(base64)
 
   // zlib header (x78), level 9 (xDA)
   if (binary.startsWith('\x78\xDA')) {

components/OneDemo.vue

@@ -30,6 +30,13 @@
     <slot name="desc"/>
   </section>
   <section class="actions">
+    <veui-button
+      v-tooltip="t('playInPlayground')"
+      ui="icon"
+      @click="play('VEUI')"
+    >
+      <veui-icon name="external-link"/>
+    </veui-button>
     <veui-button
       v-tooltip="t('playInCodeSandbox')"
       ui="icon"
@@ -129,6 +136,7 @@ import OneEditLink from './OneEditLink'
 import OneRepl from './OneRepl'
 import OneFocus from './OneFocus'
 import 'veui-theme-dls-icons/copy'
+import 'veui-theme-dls-icons/external-link'
 
 Vue.use(toast)
 
@@ -194,11 +202,6 @@ export default {
       track('play', { vendor, path: this.path })
     },
     trackCopy (action) {
-      if (this.copied) {
-        return
-      }
-
-      this.copied = true
       track('copy', { from: 'demo', path: this.path, action })
     },
     async copy () {

one/docs/play.vue

@@ -41,20 +41,22 @@ export default {
   methods: {
     deserialize () {
       try {
-        const stringified = atou(location.hash.slice(1))
-        const { code, theme } = stringified ? JSON.parse(stringified) : {}
+        const hash = atou(location.hash.slice(1))
+        const { code, theme } = hash ? JSON.parse(hash) : {}
         this.code = code || ''
         config.value.theme = theme || ''
       } catch (e) {
         console.error(e)
       }
     },
     serialize () {
-      history.replaceState(
-        {},
-        '',
-        `#${utoa(JSON.stringify({ code: this.code, theme: config.value.theme || undefined }))}`
+      const hash = utoa(
+        JSON.stringify({
+          code: this.code,
+          theme: config.value.theme || undefined
+        })
       )
+      history.replaceState({}, '', `#${hash}`)
     },
     handleCodeChange (code) {
       this.code = code