[add] vue

2021-12-25 22:28:59 +00:00 · 2021-12-25 22:28:59 +00:00 · e379c4ca62
parent aea3919d03
commit e379c4ca62
3 changed files with 91 additions and 2 deletions
--- a/caddy/site/data.json
+++ b/caddy/site/data.json
@ -0,0 +1,23 @@
+{
+    "d1": 42,
+    "glossary": {
+        "title": "example glossary",
+		"GlossDiv": {
+            "title": "S",
+			"GlossList": {
+                "GlossEntry": {
+                    "ID": "SGML",
+					"SortAs": "SGML",
+					"GlossTerm": "Standard Generalized Markup Language",
+					"Acronym": "SGML",
+					"Abbrev": "ISO 8879:1986",
+					"GlossDef": {
+                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
+						"GlossSeeAlso": ["GML", "XML"]
+                    },
+					"GlossSee": "markup"
+                }
+            }
+        }
+    }
+}
--- a/caddy/site/index.html
+++ b/caddy/site/index.html
@ -1,9 +1,18 @@
 <html>
 <head>
+<meta charset="utf-8" />
 <title>Caddy test</title>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
-This is a test
-<div>Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}</div>
+	This is a test
+	<div>Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}</div>
+	 <div id="app">
+         <button v-on:click="load">hits {{ hits }}</button>
+          <div> {{ message }}</div>
+          <pre>{{ json  }}</pre> 
+        </div>
+        
+        <script src="index.js"></script>
 </body>
 </html>
--- a/caddy/site/index.js
+++ b/caddy/site/index.js
@ -0,0 +1,57 @@
+if (/^file:\/\/\//.test(location.href)) {
+    let path = './';
+    let orig = fetch;
+    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
+        orig(resource) :
+        new Promise(function(resolve, reject) {
+            let request = new XMLHttpRequest();
+
+            let fail = (error) => {reject(error)};
+            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });
+
+            let pull = (expected) => (new Promise((resolve, reject) => {
+                if (
+                    request.responseType == expected ||
+                    (expected == 'text' && !request.responseType)
+                )
+                    resolve(request.response);
+                else
+                    reject(request.responseType);
+            }));
+
+            request.addEventListener('load', () => (resolve({
+                arrayBuffer : () => (pull('arraybuffer')),
+                blob        : () => (pull('blob')),
+                text        : () => (pull('text')),
+                json        : () => (pull('json'))
+            })));
+            request.open('GET', resource.replace(/^\//, path));
+            request.send();
+        })
+    );
+}
+
+var app = new Vue({ 
+    el: '#app',
+    data: {
+        message: 'Hello Vue!',
+        json: null,
+        hits:0
+    },
+ filters: {
+    pretty: function(value) {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    }
+  },
+  methods:{
+	  load: function () {
+		      this.hits += 1
+			  fetch("data.json")
+		        .then(response => response.json())
+		        .then(data => (this.json = data));
+           }
+  },
+  mounted () {
+      this.load()  
+    }
+});