Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/index.html

Created September 18, 2018 07:21
Show Gist options
  • Save bellbind/7cf6dce4dc45f18ae4a05a472c388b29 to your computer and use it in GitHub Desktop.
Save bellbind/7cf6dce4dc45f18ae4a05a472c388b29 to your computer and use it in GitHub Desktop.
Download ZIP
[solid][browser] pastebins app from tutorial doc
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script
src="https://solid.github.io/releases/solid.js/solid-client.min.js"
></script>
<script type="module" src="./main.js"></script>
<style>
li > input:checked ~ .child {display: none;}
</style>
</head>
<body>
<div>
<p>
NOTE: WebID only works in https://databox.me/ ,
not on https://solid.community/ or https://solidtest.space/ .
</p>
</div>
<h1>Paste bins app</h1>
<div>
<label>Your WebID
<input id="webid" size="80"
value="https://bellbind.databox.me/profile/card#me"
/>
</label>
<button id="login">check browser logged-in</button>
</div>
<div>
<label>Bins URL
<input id="bins" size="80"
value="https://bellbind.databox.me/Inbox/"
/>
</label>
<button id="load">load</button>
</div>
<div><button id="append">append an empty bin</button></div>
<ul id="list"></ul>
</body>
</html>
Raw
main.js
// Check login state of the WebID to its solid server
const checkLogin = ev => (async () => {
const inputWebId = document.getElementById("webid").value.trim();
//[TBD: how to use non databox.me WebIds?]
//const endpoint = new URL(inputWebId);
//endpoint.pathname = endpoint.hash = "";
//console.log(endpoint.href);
const webId = await SolidClient.login(inputWebId);
//const webId = await SolidClient.login(inputWebId, {
// authEndpoint: endpoint.href});
//const webId = await SolidClient.login(inputWebId, endpoint.href);
console.log(`login WebID: ${webId}`);
if (!webId) {// webId === ""
alert(`FAIL: ${inputWebId} is not logged-in. go ${inputWebId} to login`);
location.href = inputWebId;
} else {// webId === inputWebId ?
alert(`OK: ${webId} is already logged-in`);
}
})().catch(console.error);
document.getElementById("login").addEventListener("click", checkLogin);
const appendBin = () => (async () => {
const $rdf = SolidClient.rdflib;
const ns = SolidClient.vocab;
const graph = $rdf.graph();
const self = $rdf.sym("");
//[Warning] Relative URIs will fail in future versions
graph.add(self, ns.dct("title"), "");
graph.add(self, ns.sioc("content"), "");
const data = new $rdf.Serializer(graph).toN3(graph);
const binsUrl = document.getElementById("bins").value.trim();
const meta = await SolidClient.web.post(binsUrl, data);
console.log(meta);
loadBins();
})().catch(error => {
console.error(error);
alert(`fail to append by ${error.message}, check logged-in status`);
});
document.getElementById("append").addEventListener("click", appendBin);
const loadBins = () => (async () => {
const binsUrl = document.getElementById("bins").value.trim();
const response = await SolidClient.web.get(binsUrl);
console.log(response);
console.log(response.raw());
console.log(response.isContainer()); // why false??
//WORKAROUND: access container elements via rdflib
const $rdf = SolidClient.rdflib;
const ns = SolidClient.vocab;
const graph = response.parsedGraph();
const me = $rdf.sym(response.url);
const contains = graph.each(me, ns.ldp("contains"), undefined);
const list = document.getElementById("list");
for (const child of [...list.children]) child.remove();
await Promise.all(contains.map(elem => loadContent(elem.uri)));
})().catch(error => {
console.error(error);
alert(`fail to load by ${error.message}, check logged-in status`);
});
document.getElementById("load").addEventListener("click", loadBins);
async function loadContent(uri) {
const list = document.getElementById("list");
const id = encodeURIComponent(uri);
const li = document.createElement("li");
list.append(li);
const checkbox = document.createElement("input");
checkbox.id = id;
checkbox.type = "checkbox";
checkbox.checked = true;
li.append(checkbox);
const label = document.createElement("label");
label.textContent = uri;
label.setAttribute("for", id);
li.append(label);
// content data via rdflib
const response = await SolidClient.web.get(uri);
console.log(response);
console.log(response.raw());
const $rdf = SolidClient.rdflib;
const ns = SolidClient.vocab;
const graph = response.parsedGraph();
const me = $rdf.sym(response.url);
const title = graph.anyValue(me, ns.dct("title"));
const content = graph.anyValue(me, ns.sioc("content"));
const view = document.createElement("div");
view.classList.add("child");
li.append(view);
const titleView = document.createElement("input");
titleView.size = 80;
titleView.value = title;
const contentView = document.createElement("textarea");
contentView.cols = 80;
contentView.rows = 25;
contentView.value = content;
view.append(titleView);
view.append(contentView);
// modification-access buttons
const buttons = document.createElement("div");
view.append(buttons);
const update = document.createElement("button");
update.textContent = "modify";
update.addEventListener("click", async ev => {
const graph = $rdf.graph();
const self = $rdf.sym("");
//[Warning] Relative URIs will fail in future versions
graph.add(self, ns.dct("title"), titleView.value);
graph.add(self, ns.sioc("content"), contentView.value);
const data = new $rdf.Serializer(graph).toN3(graph);
const meta = await SolidClient.web.put(uri, data);
console.log(meta);
//loadBins();
});
buttons.append(update);
const remove = document.createElement("button");
remove.textContent = "remove";
remove.addEventListener("click", async ev => {
const meta = await SolidClient.web.del(uri);
console.log(meta);
loadBins();
});
buttons.append(remove);
}
@bellbind
Copy link
Author

NOTE: It requires your WebID on databox.me such as https://xxxxx.databox.me/profile/card#me

refs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment