Show first name.

index.html

@@ -20,6 +20,10 @@ <h1>Profile viewer</h1>
     <input id="profile">
     <button id="view">View</button>
   </p>
+  <dl id="viewer">
+    <dt>Full name</dt>
+    <dd id="fullName"></dd>
+  </dl>
   <script src="scripts/jquery.js"></script>
   <script src="scripts/solid-auth-client.bundle.js"></script>
   <script src="scripts/rdflib.min.js"></script>

scripts/main.js

@@ -1,3 +1,5 @@
+const FOAF = $rdf.Namespace('http://xmlns.com/foaf/0.1/');
+
 // Log the user in and out on click
 const popupUri = 'popup.html';
 $('#login  button').click(() => solid.auth.popupLogin({ popupUri }));
@@ -15,3 +17,17 @@ solid.auth.trackSession(session => {
       $('#profile').val(session.webId);
   }
 });
+
+$('#view').click(async () => {
+  // Set up a local data store and associated data fetcher
+  const store = $rdf.graph();
+  const fetcher = new $rdf.Fetcher(store);
+
+  // Load the person's data into the store
+  const person = $('#profile').val();
+  await fetcher.load(person);
+
+  // Display their details
+  const fullName = store.any($rdf.sym(person), FOAF('name'));
+  $('#fullName').text(fullName && fullName.value);
+});

styles/main.css

@@ -14,3 +14,12 @@ button, label {
 #profile {
   width: 400px;
 }
+
+dt {
+  font-weight: bold;
+  clear: left;
+  float: left;
+}
+dt:after {
+  content: ': ';
+}