From faf0737cd8f310093cce57827b2a05ccfc1352c7 Mon Sep 17 00:00:00 2001
From: "X.Q. Chen" <31237954+brenner8023@users.noreply.github.com>
Date: Mon, 22 Aug 2022 09:43:54 +0800
Subject: [PATCH] docs: site add playground support (#1083)

---
 .../src/components/global/GlobalCodeBox.vue   |  1 +
 .../components/global/GlobalPlayground.vue    | 55 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 packages/site/src/components/global/GlobalPlayground.vue

diff --git a/packages/site/src/components/global/GlobalCodeBox.vue b/packages/site/src/components/global/GlobalCodeBox.vue
index 0bb3d8cdd..cf3f95403 100644
--- a/packages/site/src/components/global/GlobalCodeBox.vue
+++ b/packages/site/src/components/global/GlobalCodeBox.vue
@@ -11,6 +11,7 @@
           </div>
           <div class="global-code-box-actions">
             <IxSpace>
+              <GlobalPlayground :code="code" />
               <GlobalCodeSandbox :code="code" />
               <IxTooltip :title="lang === 'zh' ? '在 GitHub 上编辑此示例' : 'Edit this demo on GitHub'">
                 <a :href="editHref" class="global-code-box-edit" target="_blank" rel="noopener noreferrer">
diff --git a/packages/site/src/components/global/GlobalPlayground.vue b/packages/site/src/components/global/GlobalPlayground.vue
new file mode 100644
index 000000000..280be5051
--- /dev/null
+++ b/packages/site/src/components/global/GlobalPlayground.vue
@@ -0,0 +1,55 @@
+<template>
+  <IxTooltip :title="lang === 'zh' ? '在 Playground 中打开' : 'Open on Playground'">
+    <IxIcon name="bug" @click="onClick" />
+  </IxTooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from 'vue'
+
+import { appContextToken } from '../../context'
+
+export default defineComponent({
+  name: 'GlobalPlayground',
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const { lang } = inject(appContextToken)!
+
+    const onClick = () => {
+      const div = document.createElement('div')
+      div.style.display = 'none'
+
+      const url = getPlaygroundUrl(props.code)
+      div.innerHTML = `<a href=${url} target="_blank" rel="noopener noreferrer"></a>`
+
+      document.body.appendChild(div)
+      div.querySelector<HTMLElement>('a')?.click()
+      document.body.removeChild(div)
+    }
+
+    return {
+      onClick,
+      lang,
+    }
+  },
+})
+
+const utoa = (data: string) => {
+  return btoa(unescape(encodeURIComponent(data)))
+}
+
+const getPlaygroundUrl = (source: string) => {
+  const code = decodeURIComponent(source)
+  const codeMap = {
+    'App.vue': code,
+  }
+  const codeHash = utoa(JSON.stringify(codeMap))
+
+  return `https://playground.idux.site/#${codeHash}`
+}
+</script>