Skip to content

Commit 9140147

Browse files
rosanorosano
committed
Clone to /remotestorage
1 parent d05c433 commit 9140147

5 files changed

Lines changed: 460 additions & 0 deletions

File tree

‎remotestorage/Glossary.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Glossary
2+
3+
- **Solid POD:** This is your personal storage where Solid applications store files.
4+
- **Identity provider:** This is the service used to perform authentication, it is often served in the same url as your POD (but not always).
5+
- **WebId:** The url that identifies you as a person, for example `https://noeldemartin.solidcommunity.net/profile/card#me`. WebIds can also identify organizations and groups, it's not limited to individuals.
6+
- **Solid document:** Data stored in your POD can either be a binary, like an image or video, or an RDF document. Although these are called documents, this doesn't mean that they are stored in a text file. Documents are represented by a url, and the Solid POD can persist them in any way (text files, database, etc.).
7+
- **Solid container:** A collection of documents and binary resources. [Learn more](https://www.w3.org/TR/ldp-primer/).
8+
- **Solid Profile:** This is the document that contains information about you. It is the document that contains your webId. For example `https://noeldemartin.solidcommunity.net/profile/card`.
9+
- **RDF:** Resource Definition Framework, the abstract data representation for data in Solid. [Learn more](https://www.w3.org/TR/rdf11-concepts/).
10+
- **Turtle:** A specific RDF encoding format. [Learn more](https://www.w3.org/TR/turtle/).
11+
- **SPARQL:** Query language used to query RDF data. [Learn more](https://www.w3.org/TR/sparql11-query/).
12+
13+
Learn more about Solid at https://solidproject.org.

‎remotestorage/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Solid Hello World
2+
3+
This is a simple application illustrating how to get started with [Solid](https://solidproject.org/).
4+
5+
It only has two dependencies: [an authentication library](https://github.com/inrupt/solid-client-authn-js) and [an RDF parsing library](https://github.com/rdfjs/N3.js). Everything else is plain HTML, CSS and JavaScript. All the functionality related with Solid is contained in a single file; `solid.js`.
6+
7+
## Documentation
8+
9+
You can find the documentation in the `solid.js` file, and some general Solid concepts in [the glossary](Glossary.md).
10+
11+
The `index.html` and `main.js` files are not documented, but they should be fairly easy to understand if you're already familiar with HTML and JavaScript. The application doesn't have any custom CSS as it is using a classless CSS framework called [Simple.css](https://simplecss.org).
12+
13+
## Usage instructions
14+
15+
If you want to play around with the application, you'll need to log into a [Solid POD](https://solidproject.org/users/get-a-pod).
16+
17+
To run one in your local environment, we suggest that you use the [Community Solid Server (CSS)](https://github.com/solid/community-server) with the filesystem configuration. This will use your filesystem to serve a Solid POD from the folder of your choice; `./solid-pod` in this case:
18+
19+
```sh
20+
npm install -g @solid/community-server
21+
community-solid-server -c @css:config/file.json -p 4000 -f ./solid-pod
22+
```
23+
24+
If you want to modify the code, you'll also need to serve the application in a url. You could just open the `index.html` file in a browser, but unfortunately that will not work because the authentication flow performs a redirect and that won't work with a website being served with the `file://` protocol.
25+
26+
Any tool to run a local server will work, for example you could use [ViteJS](https://vitejs.dev/):
27+
28+
```sh
29+
npm install -g vite
30+
vite .
31+
```

‎remotestorage/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Solid Hello World</title>
7+
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
8+
</head>
9+
10+
<body>
11+
<h1>Solid Hello World</h1>
12+
13+
<div id="loading">
14+
<p>Loading...</p>
15+
</div>
16+
17+
<div id="auth-guest" hidden>
18+
<p>Hi there!</p>
19+
<p>
20+
This page is a showcase of a simple <a href="https://solidproject.org/" target="_blank">Solid application</a>
21+
built using JavaScript, CSS and HTML. You can look at the source code and learn how to use it in
22+
<a href="https://github.com/0dataapp/hello-world-solid" target="_blank">the repository</a>.
23+
</p>
24+
25+
<button id="login-button" type="button" onclick="login()">Log in with Solid</button>
26+
</div>
27+
28+
<div id="auth-user" hidden>
29+
<p>Hello, <span id="username"></span>!</p>
30+
<button id="logout-button" type="button" onclick="logout()">Log out</button>
31+
32+
<h2>Your tasks</h2>
33+
<ul id="tasks"></ul>
34+
<button type="button" onclick="createTask()">Create new task</button>
35+
</div>
36+
37+
<script src="https://cdn.jsdelivr.net/npm/n3-browserify@1.11.1"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/@inrupt/solid-client-authn-browser@1.11.2/dist/solid-client-authn.bundle.js"></script>
39+
<script src="solid.js"></script>
40+
<script src="main.js"></script>
41+
42+
</body>
43+
44+
</html>

‎remotestorage/main.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
async function main() {
2+
const user = await restoreSession();
3+
4+
document.getElementById('loading').setAttribute('hidden', '');
5+
6+
if (!user) {
7+
document.getElementById('auth-guest').removeAttribute('hidden');
8+
9+
return;
10+
}
11+
12+
document.getElementById('username').innerHTML = `<a href="${user.url}" target="_blank">${user.name}</a>`;
13+
document.getElementById('auth-user').removeAttribute('hidden');
14+
15+
const tasks = await loadTasks();
16+
17+
for (const task of tasks) {
18+
appendTaskItem(task);
19+
}
20+
}
21+
22+
function login() {
23+
const loginUrl = getLoginUrl();
24+
25+
if (!loginUrl)
26+
return;
27+
28+
performLogin(loginUrl);
29+
}
30+
31+
async function logout() {
32+
document.getElementById('logout-button').setAttribute('disabled', '');
33+
34+
await performLogout();
35+
36+
document.getElementById('auth-guest').removeAttribute('hidden');
37+
document.getElementById('auth-user').setAttribute('hidden', '');
38+
document.getElementById('logout-button').removeAttribute('disabled');
39+
}
40+
41+
async function createTask() {
42+
const description = prompt('Task description');
43+
44+
if (!description)
45+
return;
46+
47+
const task = await performTaskCreation(description);
48+
49+
appendTaskItem(task);
50+
}
51+
52+
async function updateTask(taskUrl, button) {
53+
const done = button.innerText === 'Complete';
54+
button.setAttribute('disabled', '');
55+
56+
await performTaskUpdate(taskUrl, done);
57+
58+
button.removeAttribute('disabled');
59+
button.innerText = done ? 'Undo' : 'Complete';
60+
}
61+
62+
async function deleteTask(taskUrl, taskElement, button) {
63+
button.setAttribute('disabled', '');
64+
65+
await performTaskDeletion(taskUrl);
66+
67+
taskElement.remove();
68+
}
69+
70+
function appendTaskItem(task) {
71+
const taskItem = document.createElement('li');
72+
73+
taskItem.innerHTML = `
74+
<button
75+
type="button"
76+
onclick="deleteTask('${task.url}', this.parentElement, this)"
77+
>
78+
Delete
79+
</button>
80+
<button
81+
type="button"
82+
onclick="updateTask('${task.url}', this)"
83+
style="width:100px"
84+
>
85+
${task.done ? 'Undo' : 'Complete'}
86+
</button>
87+
<span>${task.description}</span>
88+
`;
89+
90+
document.getElementById('tasks').appendChild(taskItem);
91+
}
92+
93+
// ------------------------------------------------------------------
94+
95+
main();
96+
97+
window.onunhandledrejection = (error) => alert(`Error: ${error.reason?.message}`);

0 commit comments

Comments
 (0)