
PodOS elements
HTML custom elements (aka web components) for PodOS.
Using data from Solid Pods as easy as writing HTML!
Quick Start
- Create a plain old html file
- Add latest PodOS script tag and stylesheet to the
head
- Add a
<pos-app></pos-app>
to the body
and use any PodOS element within it. - Host the page on any webserver (like your Solid Pod 😉)
Try this 🤩:
<!doctype html>
<html>
<head>
<title>PodOS Quick Start</title>
<script type="module" src="https://unpkg.com/@pod-os/elements/dist/elements/elements.esm.js"></script>
<link href="https://unpkg.com/@pod-os/elements/dist/elements/elements.css" rel="stylesheet">
</head>
<body>
<pos-app>
<ion-content>
<pos-resource uri="https://solidproject.solidcommunity.net/profile/card#me">
<h1>
<pos-label/>
</h1>
<blockquote>
<pos-description/>
</blockquote>
</pos-resource>
</ion-content>
</pos-app>
</body>
</html>
Development
Run locally
Follow the instructions in the projects main readme.
Tests
To run all unit and integration tests execute:
npm test