add options example

Author: yyx990803

src/examples/Examples.vue

@@ -6,12 +6,18 @@ import data from './data.json'
 const store = new ReplStore()
 
 // TODO make dynamic
-const preference = 'composition'
+const preference = document.documentElement.classList.contains(
+  'prefer-composition'
+)
+  ? 'composition'
+  : 'options'
 
-window.addEventListener('hashchange', () => {
-  const newHash = ___location.hash.slice(1)
-  store.setFiles(data[newHash][preference])
-})
+function updateExample() {
+  const hash = ___location.hash.slice(1)
+  store.setFiles(data[hash][preference])
+}
+
+window.addEventListener('hashchange', updateExample)
 </script>
 
 <template>

src/examples/src/markdown/options/App.vue

@@ -0,0 +1,74 @@
+<script>
+import marked from 'marked'
+
+export default {
+  data: () => ({
+    input: '# hello'
+  }),
+  computed: {
+    output() {
+      return marked(this.input, { sanitize: true })
+    }
+  },
+  methods: {
+    update: debounce(function (e) {
+      this.input = e.target.value
+    }, 100)
+  }
+}
+
+function debounce(fn, delay) {
+  let handle
+  return (...args) => {
+    if (handle) clearTimeout(handle)
+    handle = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+</script>
+
+<template>
+  <div id="editor">
+    <textarea class="input" :value="input" @input="update"></textarea>
+    <div class="output" v-html="output"></div>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  height: 100%;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  color: #333;
+}
+
+#editor {
+  height: 100vh;
+  display: flex;
+}
+
+.input,
+.output {
+  overflow: auto;
+  width: 50%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.input {
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
+code {
+  color: #f66;
+}
+</style>

src/examples/src/markdown/options/import-map.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "marked": "https://unpkg.com/[email protected]/lib/marked.esm.js"
+  }
+}