Merge branch 'main' of https://github.com/red-blox/zap

red-blox · Dec 17, 2023 · b8a06aa · b8a06aa
2 parents f4e3d14 + 8acedf1
commit b8a06aa
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/docs/.vitepress/components/CodeBlock.vue b/docs/.vitepress/components/CodeBlock.vue
@@ -1,5 +1,8 @@
 <template>
     <div class="language-" :style="styles">
+		<button v-if="props.isCodeBlock && (lang === 'zapConfig' || lang === undefined)" class="tooltip" @click="showInPlayground">
+			Display in Playground
+		</button>
 		<Editor
 			:modelValue="props.code"
 			:options="{ ...(props.isCodeBlock ? CODEBLOCK_OPTIONS : EDITOR_OPTIONS), ...props.options }"
@@ -12,12 +15,15 @@
 <script setup lang="ts">
 import type monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 import { ref, watch } from 'vue';
+import { useRouter } from 'vitepress'
 
 const props = withDefaults(defineProps<{ code: string, options?: monacoEditor.editor.IStandaloneEditorConstructionOptions, lang?: string, isCodeBlock?: boolean }>(), {
 	isCodeBlock: true
 })
 defineEmits<{ (e: "update:modelValue", value: string): void }>()
 
+const { go } = useRouter()
+
 const styles = ref()
 watch(
 	() => props.code,
@@ -26,14 +32,41 @@ watch(
 			width: "100%",
 			height: Math.min(code.split("\n").length * (props.options?.lineHeight ?? 18), 460) + 40 + "px",
 			padding: "20px 0px",
-			background: props.isCodeBlock ? undefined : "transparent"
+			background: props.isCodeBlock ? undefined : "transparent",
+			position: "relative",
 		};
 	},
 	{ immediate: true },
 );
 ;
 
+const showInPlayground = () => {
+	try {
+		const link = btoa(props.code)
+		go(`/playground?code=${link}`)
+	} catch (err) {
+
+	}
+}
+
 const EDITOR_OPTIONS: monacoEditor.editor.IStandaloneEditorConstructionOptions = { readOnly: true, scrollBeyondLastLine: false }
 const CODEBLOCK_OPTIONS: monacoEditor.editor.IStandaloneEditorConstructionOptions = { ...EDITOR_OPTIONS, minimap: { enabled: false }, lineNumbers: "off", scrollbar: { vertical: "hidden", horizontal: "hidden", handleMouseWheel: false }, overviewRulerLanes: 0  }
 </script>
 
+<style>
+.tooltip {
+	position: absolute;
+	z-index: 10;
+	background: var(--vp-c-default-soft);
+	border-radius: 8px;
+	padding: 4px 8px;
+	right: 12px;
+	top: 12px;
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.language-:hover > .tooltip {
+	opacity: 1
+}
+</style>
diff --git a/docs/playground.md b/docs/playground.md
@@ -1,5 +1,7 @@
 # Playground
 
+<ClientOnly>
+
 <div class="button plugin-tabs">
 	<button @click="saveURL"><span>📎</span> Save URL</button>
 </div>
@@ -27,6 +29,8 @@
 />
 :::
 
+</ClientOnly>
+
 <script setup lang="ts">
 import MonacoEditor from "@guolao/vue-monaco-editor";
 import type { Monaco } from "@monaco-editor/loader";
@@ -42,7 +46,7 @@ const styles = ref({
 	height: "300px",
 	padding: "20px 0px",
 })
-const code = ref<string>();
+const code = ref("");
 const compiledResult = ref<Code>({
 	client: "-- Write some code to see output here!\n",
 	server: "-- Write some code to see output here!\n",
@@ -53,13 +57,20 @@ onMounted(() => {
 	const codeParam = new URLSearchParams(window.location.search).get("code")
 	const storedCode = localStorage.getItem("code")
 
+	let codeStr = ""
+
 	if (!codeParam && !!storedCode) {
+		codeStr = storedCode;
 		go(`/playground?code=${storedCode}`);
 	} else if (codeParam) {
-		try {
-			const result = atob(codeParam)
-			code.value = result
-		} catch (err) {}
+		codeStr = codeParam;
+	}
+
+	try {
+		const result = atob(codeStr)
+		code.value = result
+	} catch (err) {
+		console.warn(err)
 	}
 })