You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
5.4 KiB
169 lines
5.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/dependencies/webdav.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div id=content></div>
|
|
|
|
<script>
|
|
// insert screenshots (could probably do the same way, i.e. filereader then webdav upload
|
|
const webdavURL = "https://webdav.benetou.fr";
|
|
const subdirWebDAV = "/fotsave/fot_sloan_companion_public/"
|
|
var webdavClient = window.WebDAV.createClient(webdavURL)
|
|
const hmdURL = "https://hmd.link/?https://companion.benetou.fr"
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
let filename = urlParams.get('filename');
|
|
if (!filename) filename = 'demo_q1.json'
|
|
|
|
// should update on query parameter
|
|
// should then use that in demo editor page
|
|
|
|
// const eventSourceConverted = new EventSource( `https://ntfy.benetou.fr/convertedwebdav/sse` )
|
|
// to use for live updates
|
|
|
|
async function getContent(){
|
|
let rootEl = document.getElementById("content")
|
|
/*
|
|
const contents = await webdavClient.getDirectoryContents(subdirWebDAV);
|
|
// consider instead search https://github.com/perry-mitchell/webdav-client#search
|
|
contents.filter(f => f.basename.endsWith( filename ))
|
|
.map(a => {
|
|
fetch(a.basename).then( r => r.json() ).then( r => {
|
|
*/
|
|
// removed direct WebDAV as it seems to create CORS issues (which... wasn't the case until now?)
|
|
fetch(filename).then( r => r.json() ).then( r => {
|
|
r.content.filter( c => c.name ).map( c => {
|
|
let h2 = document.createElement("h2")
|
|
h2.innerText = c.name
|
|
h2.id = c.name.replaceAll(' ', '_') // is added after the page has loaded... should position back
|
|
rootEl.appendChild(h2)
|
|
if ( c.screenshot ){
|
|
let img = document.createElement("img")
|
|
img.src = c.screenshot
|
|
img.style.height = "200px"
|
|
rootEl.appendChild(img)
|
|
}
|
|
if ( c.description ){
|
|
let h3 = document.createElement("h3")
|
|
//h3.innerText = c.description //.replace()
|
|
h3.innerHTML = c.description.replace(/(.*) (http.*)/,'$1 <a href="$2">$2</a>').replaceAll('\n','<br>')
|
|
// could be innerHTML instead
|
|
// should make link clickable
|
|
rootEl.appendChild(h3)
|
|
}
|
|
if ( c.video ){
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = c.video
|
|
link.innerText = "video extract"
|
|
ul.appendChild(li)
|
|
link.target = "_blank"
|
|
li.appendChild(link)
|
|
}
|
|
if (c.usernames) {
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
|
|
c.usernames.map( h => {
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = "/index.html?username="+h
|
|
link.innerText = "link"
|
|
li.appendChild(link)
|
|
let spanEl = document.createElement("span")
|
|
spanEl.innerText = " "
|
|
li.appendChild(spanEl)
|
|
let linkHMD = document.createElement("a")
|
|
linkHMD.href = hmdURL + "/index.html?username="+h
|
|
linkHMD.target = "_blank"
|
|
linkHMD.innerText = "(open on other device)"
|
|
li.appendChild(linkHMD)
|
|
ul.appendChild(li)
|
|
})
|
|
}
|
|
if (c.testingurl) {
|
|
let h3 = document.createElement("h4")
|
|
h3.innerHTML = "testing URL:"
|
|
rootEl.appendChild(h3)
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
c.testingurl.map( h => {
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = h
|
|
link.innerText = h.replace(/.*\//,'')
|
|
li.appendChild(link)
|
|
ul.appendChild(li)
|
|
})
|
|
}
|
|
if (c.code) {
|
|
let h3 = document.createElement("h4")
|
|
h3.innerHTML = "code:"
|
|
rootEl.appendChild(h3)
|
|
let ul = document.createElement("ul")
|
|
rootEl.appendChild(ul)
|
|
c.code.map( h => {
|
|
let li = document.createElement("li")
|
|
let link = document.createElement("a")
|
|
link.href = h
|
|
link.innerText = h.replace(/.*\//,'')
|
|
li.appendChild(link)
|
|
ul.appendChild(li)
|
|
})
|
|
}
|
|
|
|
let hr = document.createElement("hr")
|
|
rootEl.appendChild(hr)
|
|
})
|
|
if (location.hash) document.getElementById(location.hash.replace('#','')).scrollIntoView()
|
|
})
|
|
//})
|
|
}
|
|
|
|
getContent()
|
|
</script>
|
|
|
|
<div id=comments>
|
|
|
|
<br>
|
|
<br>
|
|
</div>
|
|
|
|
<h3>
|
|
ideas :
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>integrate better live messages (via ?allowNtfyFeedbackHUD=true , e.g. https://companion.benetou.fr/index.htm?allowNtfyFeedbackHUD=true )
|
|
<li>JSON editing, either as-is or via PmWiki (including raw text within JSON) or with CodeMirror as editor (just text area is plain text should be enough
|
|
<li>feedback intertwined per demo (based on screenshot/audio recording demos)
|
|
<li>richer text rendering (beyond just clickable link)
|
|
<li>couple live messages with inView(targetSelector)
|
|
<li>showcase sequentialFiltersInteractionOnReleased
|
|
</ul>
|
|
|
|
<h3>
|
|
done :
|
|
</h3>
|
|
|
|
<ul>
|
|
<li>hmd.link/? to share directly over same local network
|
|
<li>link as clickable (right now only trailing ones, and 1 link per description maximum)
|
|
<li>source JSON URL https://webdav.benetou.fr/fotsave/fot_sloan_companion_public/demo_q1.json
|
|
<li>alternative descriptions https://futuretextlab.info/1st-quarter/ (more verbose but static)
|
|
<li>mobile view
|
|
<li>linked to editor : https://companion.benetou.fr/demos_editor_example.html
|
|
<li>edited list https://companion.benetou.fr/demos_example.html?filename=demos_saved_1742834331999.json
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|
|
|