1 files changed, 19 insertions, 31 deletions
diff --git a/demo/index.html b/demo/index.html
index 7a142c1..06e83d3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,16 +2,16 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Graffiti Vue</title>
+  <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": "../plugin.js"
+    "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js"
   }}</script>
   <script type="module">
-    // "graffiti-vue": "https://graffiti.garden/graffiti-js/plugins/vue/plugin.js"
     import { createApp } from 'vue'
     import { Name, SetMyName } from './components/name.js'
     import Chat from './components/chat.js'
@@ -25,19 +25,20 @@
   </script>
 </head>
 <body id="app">
-<!-------------------------------------------------------------->
 
-  <h1>
-    Connection Status
-  </h1>
+  <h1>Graffiti Demo</h1>
 
   <p>
-    Connected to the Graffiti server? {{ $graffitiConnected }}
+    This demonstrates use of the <a href="">graffiti-js</a> library Vue interface.
   </p>
 
-  <h1>
-    Logging In
-  </h1>
+  <h2>Connection Status</h2>
+
+  <p>
+    Connected to the Graffiti server? <b>{{ $graffitiConnected }}</b>
+  </p>
+
+  <h2>Logging In</h2>
 
   <p>
     <button @click="$graffitiToggleLogIn">
@@ -45,15 +46,11 @@
     </button>
   </p>
 
-  <p>
-    My Graffiti ID is "{{ $graffitiMyID }}"
+  <p v-if="$graffitiMyID">
+    My Graffiti ID is <b>{{ $graffitiMyID }}</b>
   </p>
 
-  <br>
-
-  <h1>
-    Profile
-  </h1>
+  <h2>Profile</h2>
 
   <p>
     My name is: <name :of="$graffitiMyID"></name>
@@ -61,24 +58,15 @@
 
   <set-my-name :tags="[$graffitiMyID]"></set-my-name>
 
-  <br>
-
-  <h1>
-    Chatting
-  </h1>
+  <h2>Chatting</h2>
 
   <chat :tags="['demo']"></chat>
 
-  <!-- Add a like button -->
-
-
-  <!-- Filter by likes -->
-
+  <h2>Moderation</h2>
 
-  <!-- different contexts -->
+  <h2>Context</h2>
 
-  <!-- Private messages -->
+  <h2>Private Messages</h2>
   
-<!-------------------------------------------------------------->
 </body>
 </html>