|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8" /> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | +<title>Article — schema.org app</title> |
| 7 | +<link rel="stylesheet" href="./app.css" /> |
| 8 | +</head> |
| 9 | +<body> |
| 10 | +<!-- JSON-LD data island --> |
| 11 | +<script type="application/ld+json" id="data"> |
| 12 | +{ |
| 13 | + "@context": "https://schema.org", |
| 14 | + "@type": "Article", |
| 15 | + "headline": "The Future of Personal Data Sovereignty", |
| 16 | + "author": "Tim Berners-Lee", |
| 17 | + "datePublished": "2024-11-20", |
| 18 | + "description": "An exploration of how Solid Pods give individuals control over their own data.", |
| 19 | + "articleBody": "For decades, large platforms have held dominion over personal data. Solid changes the equation by putting data back in the hands of the user, stored in personal pods with fine-grained access controls.", |
| 20 | + "url": "https://example.org/articles/personal-data-sovereignty" |
| 21 | +} |
| 22 | +</script> |
| 23 | + |
| 24 | +<main id="app"></main> |
| 25 | + |
| 26 | +<!-- per-type config: this is the ONLY thing that changes between apps --> |
| 27 | +<script> |
| 28 | + window.APP = { |
| 29 | + type: "Article", |
| 30 | + titleProp: "headline", |
| 31 | + icon: "📰", |
| 32 | + accent: "#2d6cdf", |
| 33 | + fields: [ |
| 34 | + { prop: "headline", label: "Headline", type: "text" }, |
| 35 | + { prop: "author", label: "Author", type: "text" }, |
| 36 | + { prop: "datePublished", label: "Published", type: "text" }, |
| 37 | + { prop: "description", label: "Description", type: "textarea" }, |
| 38 | + { prop: "articleBody", label: "Body", type: "textarea" }, |
| 39 | + { prop: "url", label: "URL", type: "url" }, |
| 40 | + ], |
| 41 | + }; |
| 42 | +</script> |
| 43 | +<script src="./app.js"></script> |
| 44 | +</body> |
| 45 | +</html> |
0 commit comments