schema-apps/article.html at gh-pages · solid-apps/schema-apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Article — schema.org app</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<!-- JSON-LD data island -->
<script type="application/ld+json" id="data">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The Future of Personal Data Sovereignty",
  "author": "Tim Berners-Lee",
  "datePublished": "2024-11-20",
  "description": "An exploration of how Solid Pods give individuals control over their own data.",
  "articleBody": "For decades, large platforms have held dominion over personal data \u2014 harvesting, profiling, and monetizing the intimate details of billions of lives. The Solid project, spearheaded by Sir Tim Berners-Lee, changes the equation fundamentally.\n\nSolid Pods act as personal data vaults: encrypted containers where individuals store their information under their own control. Applications request access through fine-grained consent mechanisms, and users can revoke that access at any time.\n\nThe implications are profound. Healthcare data stays with the patient. Financial records remain with the consumer. Social graphs belong to the individual, not the platform. This is not incremental privacy reform \u2014 it is a structural shift in who owns the digital self.",
  "url": "https://example.org/articles/personal-data-sovereignty"
}
</script>

<main id="app"></main>

<!-- per-type config: this is the ONLY thing that changes between apps -->
<script>
  window.APP = {
    type: "Article",
    titleProp: "headline",
    icon: "📰",
    accent: "#2d6cdf",
    fields: [
      { prop: "headline",        label: "Headline",      type: "text" },
      { prop: "author",         label: "Author",         type: "text" },
      { prop: "datePublished",  label: "Published",      type: "text" },
      { prop: "description",    label: "Description",    type: "textarea" },
      { prop: "articleBody",    label: "Body",           type: "textarea" },
      { prop: "url",            label: "URL",            type: "url" },
    ],
  };
</script>
<script src="./app.js"></script>
</body>
</html>