1 files changed, 73 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d1b5991
--- /dev/null
+++ b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Graffiti JS Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
+  <link rel="stylesheet" href="./style.css">
+  <script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
+  <script type="importmap">{ "imports": {
+    "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.esm-browser.prod.min.js",
+    "graffiti-vue": "../plugins/vue/plugin.js"
+  }}</script>
+  <script type="module">
+    import { createApp } from 'vue'
+    import { Name, SetMyName } from './components/name.js'
+    import Chat from './components/chat.js'
+    import Moderation from './components/moderation.js'
+    import PrivateMessaging from './components/private-messaging.js'
+    import GraffitiVue from 'graffiti-vue'
+    createApp()
+      .use(GraffitiVue)
+      .component('Name', Name)
+      .component('SetMyName', SetMyName)
+      .component('Chat', Chat)
+      .component('Moderation', Moderation)
+      .component('PrivateMessaging', PrivateMessaging)
+      .mount('#app')
+  </script>
+</head>
+<body id="app">
+
+  <h1>Graffiti Demo</h1>
+
+  <h2>Connection Status</h2>
+
+  <p>
+    Connected to the Graffiti server? <b>{{ $graffitiConnected }}</b>
+  </p>
+
+  <h2>Logging In</h2>
+
+  <p>
+    <button @click="$graffitiToggleLogIn">
+      {{ !$graffitiMyID? 'Log In' : 'Log Out' }}
+    </button>
+  </p>
+
+  <p v-if="$graffitiMyID">
+    My Graffiti ID is <b>{{ $graffitiMyID }}</b>
+  </p>
+
+  <h2>Profile</h2>
+
+  <p>
+    My name is: <name :of="$graffitiMyID"></name>
+  </p>
+
+  <set-my-name :tags="[$graffitiMyID]"></set-my-name>
+
+  <h2>Chatting</h2>
+
+  <chat></chat>
+
+  <h2>Moderation</h2>
+
+  <moderation></moderation>
+
+  <h2>Private Messaging</h2>
+
+  <private-messaging></private-messaging>
+</body>
+</html>