apb/thedocks
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 1 Wiki Activity

[add] vue

Browse source
This commit is contained in:
Andy Bunce 2021-12-25 22:28:59 +00:00
parent aea3919d03
commit e379c4ca62
3 changed files with 91 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
caddy/site/data.json Normal file
View file

@ -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"
}
}
}
}
}

13
caddy/site/index.html
View file

@ -1,9 +1,18 @@
<html> <html>
<head> <head>
<meta charset="utf-8" />
<title>Caddy test</title> <title>Caddy test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> </head>
<body> <body>
This is a test This is a test
<div>Page loaded at: {{now | date "Mon Jan 2 15:04:05 MST 2006"}}</div> <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> </body>
</html> </html>

57
caddy/site/index.js Normal file
View file

@ -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()
}
});