4 | -
20 | {this.emailAddresses.map(email => (
21 |
- 22 | {email.value} 23 | 24 | ))} 25 |
-
21 | {this.phoneNumbers.map(phoneNumber => (
22 |
- 23 | {phoneNumber.value} 24 | 25 | ))} 26 |
-
18 | {this.contacts.map(it => (
19 |
- 20 | { 22 | e.preventDefault(); 23 | this.contactSelected.emit(it); 24 | }} 25 | href={it.uri} 26 | > 27 | {it.name || it.uri} 28 | 29 | 30 | ))} 31 |
Create new contact
23 |-
18 | {this.groups.map(it => (
19 |
- 20 | { 23 | e.preventDefault(); 24 | this.groupSelected.emit(it); 25 | }} 26 | > 27 | {it.name || it.uri} 28 | 29 | 30 | ))} 31 |
{this.group.name}
30 |-
31 | {this.group.members.map(it => (
32 |
- 33 | {it.name || it.uri} 34 | 35 | ))} 36 |
20 | PodOS contacts 21 |
22 |PodOS contacts
14 |
4 | 6 | You can choose to share those with other people and apps. 7 | 8 | As the owner of this pod, 9 | identified by http://localhost:3000/alice/profile/card#me, 10 | you have access to all of your documents. 11 | 12 | ## Working with your pod 13 | The easiest way to interact with pods 14 | is through Solid apps. 15 |
16 | For example, 17 | you can open your pod in [Databrowser](https://solid.github.io/mashlib/dist/browse.html?uri=http://localhost:3000/alice/). 18 | 19 | ## Learn more 20 | The [Solid website](https://solidproject.org/) 21 | and the people on its [forum](https://forum.solidproject.org/) 22 | will be glad to help you on your journey. 23 | -------------------------------------------------------------------------------- /dev-solid-server/data/alice/README.acl: -------------------------------------------------------------------------------- 1 | @prefix acl:
Solid Test HTML
12 |This is an HTML page stored in Alice's Pod.
13 |It can be viewed with PodOS.
14 | 15 | -------------------------------------------------------------------------------- /dev-solid-server/data/alice/documents/test.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pod-os/PodOS/e7e3a1b442384e157b558fc7369076bb89657a15/dev-solid-server/data/alice/documents/test.pdf -------------------------------------------------------------------------------- /dev-solid-server/data/alice/games/.acl: -------------------------------------------------------------------------------- 1 | @prefix acl:6 | You can choose to share those with other people and apps. 7 | 8 | As the owner of this pod, 9 | identified by http://localhost:3000/bob/profile/card#me, 10 | you have access to all of your documents. 11 | 12 | ## Working with your pod 13 | The easiest way to interact with pods 14 | is through Solid apps. 15 |
16 | For example, 17 | you can open your pod in [Databrowser](https://solid.github.io/mashlib/dist/browse.html?uri=http://localhost:3000/bob/). 18 | 19 | ## Learn more 20 | The [Solid website](https://solidproject.org/) 21 | and the people on its [forum](https://forum.solidproject.org/) 22 | will be glad to help you on your journey. 23 | -------------------------------------------------------------------------------- /dev-solid-server/data/bob/README.acl: -------------------------------------------------------------------------------- 1 | @prefix acl:
13 |
22 | Try these... 💡
14 |No idea where to start? Try these example resources, and follow your nose 👃
15 |
16 |
21 |
13 |
17 | Getting started 🚀
14 |🔎 Enter a URL into the above navigation bar to browse through the web of data.
15 |🔐 Sign in to access private resources on your Solid Pod or those of your friends or coworkers.
16 |
18 |
23 | New to Solid?
19 |20 | Get a Pod → 21 |
22 |
24 |
29 | Want to dig deeper into PodOS?
25 |26 | Learn more → 27 |
28 |17 |
19 |
14 |
17 | All subjects
15 |
22 | {this.uri}
23 |
26 |
27 | );
28 | } else {
29 | return (
30 |
33 | );
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/elements/src/components/pos-relations/pos-relations.css:
--------------------------------------------------------------------------------
1 | :host {
2 | --background-base-color: var(--color-grey-200);
3 | --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));
4 | --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));
5 | --border-color: var(--background-base-color);
6 | }
7 |
8 | dd {
9 | padding: 0;
10 | margin: 0;
11 | }
12 |
13 | dl {
14 | display: flex;
15 | flex-direction: column;
16 | gap: var(--size-1);
17 | padding: 0;
18 | margin: 0;
19 | }
20 |
21 | dt {
22 | margin-bottom: var(--size-1);
23 | }
24 |
25 | .predicate-values:nth-child(odd) {
26 | background-color: var(--background-color-odd);
27 | }
28 |
29 | .predicate-values:nth-child(even) {
30 | background-color: var(--background-color-even);
31 | }
32 |
33 | .predicate-values {
34 | display: flex;
35 | flex-direction: column;
36 | border: var(--size-px) solid var(--border-color);
37 | padding: var(--size-2);
38 | gap: var(--size-1);
39 |
40 | .values {
41 | display: flex;
42 | flex-direction: column;
43 | gap: var(--size-3);
44 | }
45 | }
46 |
47 | pos-rich-link {
48 | --background-color: inherit;
49 | }
50 |
--------------------------------------------------------------------------------
/elements/src/components/pos-reverse-relations/pos-reverse-relations.css:
--------------------------------------------------------------------------------
1 | :host {
2 | --background-base-color: var(--color-grey-200);
3 | --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));
4 | --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));
5 | --border-color: var(--background-base-color);
6 | }
7 |
8 | dd {
9 | padding: 0;
10 | margin: 0;
11 | }
12 |
13 | dl {
14 | display: flex;
15 | flex-direction: column;
16 | gap: var(--size-1);
17 | padding: 0;
18 | margin: 0;
19 | }
20 |
21 | dt {
22 | margin-bottom: var(--size-1);
23 | }
24 |
25 | .predicate-values:nth-child(odd) {
26 | background-color: var(--background-color-odd);
27 | }
28 |
29 | .predicate-values:nth-child(even) {
30 | background-color: var(--background-color-even);
31 | }
32 |
33 | .predicate-values {
34 | display: flex;
35 | flex-direction: column;
36 | border: var(--size-px) solid var(--border-color);
37 | padding: var(--size-2);
38 | gap: var(--size-1);
39 | .values {
40 | display: flex;
41 | flex-direction: column;
42 | gap: var(--size-3);
43 | }
44 | }
45 |
46 | pos-rich-link {
47 | --background-color: inherit;
48 | }
49 |
--------------------------------------------------------------------------------
/elements/src/components/pos-rich-link/pos-rich-link.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
2 |
3 | @Component({
4 | tag: 'pos-rich-link',
5 | shadow: true,
6 | styleUrl: 'pos-rich-link.css',
7 | })
8 | export class PosRichLink {
9 | @Prop() uri: string;
10 |
11 | @Event({ eventName: 'pod-os:link' }) linkEmitter: EventEmitter;
12 |
13 | render() {
14 | return (
15 |
17 | {
20 | e.preventDefault();
21 | this.linkEmitter.emit(this.uri);
22 | }}
23 | >
24 |
- {items}
${story()}
19 |