From 974738cb241b216ad864f129ca2388379c5f0016 Mon Sep 17 00:00:00 2001
From: theia
Date: Fri, 3 Feb 2023 13:09:02 -0500
Subject: Demo to root

---
 demo/components/chat.js             | 60 ++++++++++++++++++++++++++
 demo/components/name.js             | 56 +++++++++++++++++++++++++
 demo/index.html                     | 84 +++++++++++++++++++++++++++++++++++++
 index.html                          | 84 -------------------------------------
 plugins/vue/demo/components/chat.js | 60 --------------------------
 plugins/vue/demo/components/name.js | 56 -------------------------
 plugins/vue/demo/index.html         | 84 -------------------------------------
 7 files changed, 200 insertions(+), 284 deletions(-)
 create mode 100644 demo/components/chat.js
 create mode 100644 demo/components/name.js
 create mode 100644 demo/index.html
 delete mode 100644 index.html
 delete mode 100644 plugins/vue/demo/components/chat.js
 delete mode 100644 plugins/vue/demo/components/name.js
 delete mode 100644 plugins/vue/demo/index.html

diff --git a/demo/components/chat.js b/demo/components/chat.js
new file mode 100644
index 0000000..86d8fe7
--- /dev/null
+++ b/demo/components/chat.js
@@ -0,0 +1,60 @@
+import { Name } from './name.js'
+
+export default {
+
+  components: { Name },
+
+  props: ['tags'],
+
+  data: ()=> ({
+    message: ''
+  }),
+
+  methods: {
+    messageObjects(objects) {
+      return objects.filter(o=> 
+                      'message' in o &&
+                      'timestamp' in o &&
+                      typeof o.message == 'string' &&
+                      typeof o.timestamp == 'number')
+                    .sortBy('timestamp')
+    },
+
+    sendMessage() {
+      if (!this.message) return
+      this.$graffitiUpdate({
+        message: this.message,
+        timestamp: Date.now(),
+        _tags: this.tags
+      })
+      this.message = ''
+    }
+  },
+
+  template: `
+    <graffiti-objects :tags="tags" v-slot="{objects}">
+      <ul v-for="object in messageObjects(objects)">
+        <li>
+          <em><Name :of="object._by"/></em>:
+
+          {{ object.message }}
+
+          <template v-if="object._by==$graffitiMyID">
+            <button @click="object.message+='!!';object._update()">
+              ‼️
+            </button>
+
+            <button @click="object._remove()">
+              ❌
+            </button>
+          </template>
+        </li>
+      </ul>
+    </graffiti-objects>
+
+    <form @submit.prevent="sendMessage">
+      <input v-model="message">
+      <input type="submit" value="Submit"/>
+    </form>`
+}
+
diff --git a/demo/components/name.js b/demo/components/name.js
new file mode 100644
index 0000000..ea44f95
--- /dev/null
+++ b/demo/components/name.js
@@ -0,0 +1,56 @@
+export const Name = {
+
+  props: ["of"],
+
+  methods: {
+    name(objects) {
+      const nameObjects = objects
+                 .filter(o=> 
+                   'name' in o &&
+                   'of' in o &&
+                   'timestamp' in o &&
+                   typeof o.name == 'string' &&
+                   o.of == this.of &&
+                   o._by == this.of &&
+                   typeof o.timestamp == 'number')
+                 .sortBy('-timestamp')
+
+      return nameObjects.length?
+        nameObjects[0].name : 'anonymous'
+    }
+  },
+
+  template: `
+    <graffiti-objects :tags="[of]" v-slot="{objects}">
+      {{ name(objects) }}
+    </graffiti-objects>`
+}
+
+export const SetMyName = {
+
+  props: ["tags"],
+
+  data: ()=> ({
+    name: ''
+  }),
+
+  methods: {
+    setMyName() {
+      this.$graffitiUpdate({
+        name: this.name,
+        timestamp: Date.now(),
+        of: this.$graffitiMyID,
+        _tags: this.tags
+      })
+      this.name = ''
+    }
+  },
+
+  template: `
+    <form @submit.prevent="setMyName">
+      <label for="nameBox">Change your name:</label>
+      <input v-model="name" id="nameBox"/>
+      <br>
+      <input type="submit" value="Submit"/>
+    </form>`
+}
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..7a142c1
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Graffiti Vue</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">
+  <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"
+  }}</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'
+    import GraffitiVue from 'graffiti-vue'
+    createApp()
+      .use(GraffitiVue)
+      .component('Name', Name)
+      .component('SetMyName', SetMyName)
+      .component('Chat', Chat)
+      .mount('#app')
+  </script>
+</head>
+<body id="app">
+<!-------------------------------------------------------------->
+
+  <h1>
+    Connection Status
+  </h1>
+
+  <p>
+    Connected to the Graffiti server? {{ $graffitiConnected }}
+  </p>
+
+  <h1>
+    Logging In
+  </h1>
+
+  <p>
+    <button @click="$graffitiToggleLogIn">
+      {{ !$graffitiMyID? 'Log In' : 'Log Out' }}
+    </button>
+  </p>
+
+  <p>
+    My Graffiti ID is "{{ $graffitiMyID }}"
+  </p>
+
+  <br>
+
+  <h1>
+    Profile
+  </h1>
+
+  <p>
+    My name is: <name :of="$graffitiMyID"></name>
+  </p>
+
+  <set-my-name :tags="[$graffitiMyID]"></set-my-name>
+
+  <br>
+
+  <h1>
+    Chatting
+  </h1>
+
+  <chat :tags="['demo']"></chat>
+
+  <!-- Add a like button -->
+
+
+  <!-- Filter by likes -->
+
+
+  <!-- different contexts -->
+
+  <!-- Private messages -->
+  
+<!-------------------------------------------------------------->
+</body>
+</html>
diff --git a/index.html b/index.html
deleted file mode 100644
index e3c2dc0..0000000
--- a/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <h1> Graffiti x JS </h1>
-
-  <p id="ID"></p>
-
-  <h2 id="status"></h2>
-
-  <button onclick="Subscribe()">
-    Subscribe
-  </button>
-
-  <button onclick="Unsubscribe()">
-    Unsubscribe
-  </button>
-
-  <button onclick="Update()">
-    Update
-  </button>
-
-  <button onclick="Remove()">
-    Remove
-  </button>
-
-  <button onclick="LogOut()">
-    Log Out
-  </button>
-
-<script type="module">
-  import Graffiti from "./graffiti.js"
-
-  // Connect to a local Graffiti instance
-  // (see the server README for how to n locally)
-  window.graffiti = new Graffiti("http://localhost:5001")
-  await graffiti.opened()
-
-  // Log in automatically if not already
-  // and supply a log out button
-  if (!graffiti.myID) graffiti.toggleLogIn()
-  window.LogOut = ()=> graffiti.toggleLogIn()
-  document.getElementById('ID').innerHTML = `Your Graffiti ID is: ${graffiti.myID}`
-
-  const myTag = "asdf"
-
-  // Make a display
-  async function displayObjects() {
-    let display = 'not subscribed'
-    try {
-      const objects = graffiti.objectsByTags(myTag)
-      display = `objects: ${JSON.stringify(objects)}`
-    } catch {}
-
-    document.getElementById('status').innerHTML = display
-  }
-
-  // Create an object containing a special string
-  window.Subscribe = async function() {
-    await graffiti.subscribe(myTag)
-    await new Promise(r => setTimeout(r, 1000));
-    displayObjects()
-  }
-
-  window.Unsubscribe = async function() {
-    await graffiti.unsubscribe(myTag)
-    await new Promise(r => setTimeout(r, 1000));
-    displayObjects()
-  }
-
-  // Create an object containing a special string
-  window.Update = async function() {
-    await graffiti.update({_tags: [myTag]})
-    displayObjects()
-  }
-
-  // Remove an existing object
-  window.Remove = async function() {
-    await graffiti.objectsByTags(myTag)[0]._remove()
-    displayObjects()
-  }
-
-</script>
-</body>
-</html>
diff --git a/plugins/vue/demo/components/chat.js b/plugins/vue/demo/components/chat.js
deleted file mode 100644
index 7453d77..0000000
--- a/plugins/vue/demo/components/chat.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Name } from './name.js'
-
-export default {
-
-  components: { Name },
-
-  props: ['tags'],
-
-  data: ()=> ({
-    message: ''
-  }),
-
-  methods: {
-    messageObjects(objects) {
-      return objects.filter(o=> 
-                      'message' in o &&
-                      'timestamp' in o &&
-                      typeof o.message == 'string' &&
-                      typeof o.timestamp == 'number')
-                    .sortBy('timestamp')
-    },
-
-    sendMessage() {
-      if (!this.message) return
-      this.$graffitiUpdate({
-        message: this.message,
-        timestamp: Date.now(),
-        _tags: this.tags
-      })
-      this.message = ''
-    }
-  },
-
-  template: `
-    <graffiti-objects :tags="tags" v-slot="{objects}">
-      <ul v-for="object in messageObjects(objects)">
-        <li>
-          <name :of="object._by"></name>
-
-          {{ object.message }}
-
-          <template v-if="object._by==$graffitiMyID">
-            <button @click="object.message+='!!';object._update()">
-              ‼️
-            </button>
-
-            <button @click="object._remove()">
-              ❌
-            </button>
-          </template>
-        </li>
-      </ul>
-    </graffiti-objects>
-
-    <form @submit.prevent="sendMessage">
-      <input v-model="message">
-      <input type="submit" value="Submit"/>
-    </form>`
-}
-
diff --git a/plugins/vue/demo/components/name.js b/plugins/vue/demo/components/name.js
deleted file mode 100644
index ea44f95..0000000
--- a/plugins/vue/demo/components/name.js
+++ /dev/null
@@ -1,56 +0,0 @@
-export const Name = {
-
-  props: ["of"],
-
-  methods: {
-    name(objects) {
-      const nameObjects = objects
-                 .filter(o=> 
-                   'name' in o &&
-                   'of' in o &&
-                   'timestamp' in o &&
-                   typeof o.name == 'string' &&
-                   o.of == this.of &&
-                   o._by == this.of &&
-                   typeof o.timestamp == 'number')
-                 .sortBy('-timestamp')
-
-      return nameObjects.length?
-        nameObjects[0].name : 'anonymous'
-    }
-  },
-
-  template: `
-    <graffiti-objects :tags="[of]" v-slot="{objects}">
-      {{ name(objects) }}
-    </graffiti-objects>`
-}
-
-export const SetMyName = {
-
-  props: ["tags"],
-
-  data: ()=> ({
-    name: ''
-  }),
-
-  methods: {
-    setMyName() {
-      this.$graffitiUpdate({
-        name: this.name,
-        timestamp: Date.now(),
-        of: this.$graffitiMyID,
-        _tags: this.tags
-      })
-      this.name = ''
-    }
-  },
-
-  template: `
-    <form @submit.prevent="setMyName">
-      <label for="nameBox">Change your name:</label>
-      <input v-model="name" id="nameBox"/>
-      <br>
-      <input type="submit" value="Submit"/>
-    </form>`
-}
diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html
deleted file mode 100644
index 7a142c1..0000000
--- a/plugins/vue/demo/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Graffiti Vue</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">
-  <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"
-  }}</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'
-    import GraffitiVue from 'graffiti-vue'
-    createApp()
-      .use(GraffitiVue)
-      .component('Name', Name)
-      .component('SetMyName', SetMyName)
-      .component('Chat', Chat)
-      .mount('#app')
-  </script>
-</head>
-<body id="app">
-<!-------------------------------------------------------------->
-
-  <h1>
-    Connection Status
-  </h1>
-
-  <p>
-    Connected to the Graffiti server? {{ $graffitiConnected }}
-  </p>
-
-  <h1>
-    Logging In
-  </h1>
-
-  <p>
-    <button @click="$graffitiToggleLogIn">
-      {{ !$graffitiMyID? 'Log In' : 'Log Out' }}
-    </button>
-  </p>
-
-  <p>
-    My Graffiti ID is "{{ $graffitiMyID }}"
-  </p>
-
-  <br>
-
-  <h1>
-    Profile
-  </h1>
-
-  <p>
-    My name is: <name :of="$graffitiMyID"></name>
-  </p>
-
-  <set-my-name :tags="[$graffitiMyID]"></set-my-name>
-
-  <br>
-
-  <h1>
-    Chatting
-  </h1>
-
-  <chat :tags="['demo']"></chat>
-
-  <!-- Add a like button -->
-
-
-  <!-- Filter by likes -->
-
-
-  <!-- different contexts -->
-
-  <!-- Private messages -->
-  
-<!-------------------------------------------------------------->
-</body>
-</html>
-- 
cgit v1.2.3-70-g09d2