31:[] 2f:{"title":"Solid Profile Viewer for Observable","cells":[{"id":0,"value":"md`# Solid Profile Viewer for Observable\n## Tim Berners-Lee's Solid app platform hello world\n\nSolid empowers users and organizations to separate their data from the applications that use it. It allows people to look at the **same data** with **different apps** at the same time. \n\n**You must unblock popups yet. Does not work on mobile.**\n\nRather than storing data on a platform like Google or Github, data is stored along with your profile called personal online data store (POD), accessed with client code as below.\n\nWhen you load this page, a popup appears to log in or create a new pod. Hosted PODs can be created at one of the identity providers shown or even [hosted on Glitch](https://glitch.com/) using Node.js.\n\n## Profile Viewer\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"html`

You are logged in as ${authorization.webId}

Viewing POD at \"${profileInput}\" and their name is ${loggedInProfileObj.fullName}

Their friends in their profile include:

${a.resolved}

${a}

The other profiles are linked above to explore.

\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"md`## How it works, step by step:\nFirst we initialize the store using rdflib.js:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"// set up local data store\nstore = await $rdf.graph()","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`The logout button doesn't work yet:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"//Logout button \"Error Logging out\" on terminal, spread the below over two cells.\n// viewof b1 = button({value: \"Logout\", description: \"We use a reference to the button below to trigger the logout.\"})\n/*{\n b1\n if (this !== true) {\n console.log( solidAuth.logout());\n }\n return !this;\n} */","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`Let's load the Friend-of-a-Friend (FOAF) namespace schema into \"FOAF\" using rdflib.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"FOAF = $rdf.Namespace('http://xmlns.com/foaf/0.1/');","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`Because targetWebId is a mutable value, the input might have to be implemented by hand, rather than using the inputs Observable:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"profileInput = {\n let e = html``;\n e.addEventListener(\"keyup\", event => {\n switch (event.key) {\n case \"Enter\": mutable targetWebId = e.value; break;\n }\n });\n return e;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"md`Now for the fun part, here we initialize the rdflib fetcher and have it go fetch some FOAF-oriented things about the target user profile. Pop open the object:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"loggedInProfileObj = {\n //Observable seems to get the variable dependency tree confused if you define fetcher outside. \n const fetcher = new $rdf.Fetcher(store);\n const rdfPerson = await fetcher.load(targetWebId)\n const fullName = store.any($rdf.sym(targetWebId), FOAF('name'))\n const friends = store.each($rdf.sym(targetWebId), FOAF('knows'));\n\n const loadedFriends = await Promise.all(\n friends.map(async (friend) => {\n try {\n await fetcher.load(friend);\n }\n catch(err){\n console.error(err);\n }\n\n return ({ ref: friend,\n resolved: store.any(friend, FOAF('name'))});\n })\n );\n \n return ({\n dateRequested: new Date(Date.now()).toUTCString(),\n rdfPerson,\n fullName,\n friends,\n loadedFriends\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"md`In observable, you have to ask specially for mutable variables, so we do that here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"mutable targetWebId = authorization.webId","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`Here is the user login process that launched the popup for you:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"authorization = solidAuth.popupLogin({ popupUri: 'https://solid.github.io/solid-auth-client/dist/popup.html' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`And the various libraries to require from NPM:\n\nBased on the jQuery example ['Make an App on your Lunch Break'](https://solid.inrupt.com/docs/app-on-your-lunch-break)\n\n### To Dos\n* Follow best practice as for [OAuth popups on Observable](https://talk.observablehq.com/t/best-practice-for-oauth-popup-prompts/684), perhaps remembering logged in status.\n* Make this sign-in importable in other Observables\n* Allow logged-out browsing\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"solidAuth = require('https://bundle.run/solid-auth-client@2.2.14')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$$rdf = require('https://bundle.run/rdflib@0.19.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"/* This is the code to require mashlib, according to https://beta.observablehq.com/@tmcw/module-require-debugger*/\n//mashlib = require('mashlib@0.7.17/index.js').catch(() => window.dump)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}