From e379c4ca628f0b9df38dd78906d71f05048d927b Mon Sep 17 00:00:00 2001 From: apb Date: Sat, 25 Dec 2021 22:28:59 +0000 Subject: [PATCH] [add] vue --- caddy/site/data.json | 23 +++++++++++++++++ caddy/site/index.html | 13 ++++++++-- caddy/site/index.js | 57 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 caddy/site/data.json create mode 100644 caddy/site/index.js diff --git a/caddy/site/data.json b/caddy/site/data.json new file mode 100644 index 0000000..ed88a0c --- /dev/null +++ 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" + } + } + } + } +} \ No newline at end of file diff --git a/caddy/site/index.html b/caddy/site/index.html index d10d853..4111915 100644 --- a/caddy/site/index.html +++ b/caddy/site/index.html @@ -1,9 +1,18 @@ + Caddy test + -This is a test -
Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}
+ This is a test +
Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}
+
+ +
{{ message }}
+ 
{{ json  }}
+
+ + \ No newline at end of file diff --git a/caddy/site/index.js b/caddy/site/index.js new file mode 100644 index 0000000..424fb07 --- /dev/null +++ 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() + } +});