HTML custom elements (aka web components) for PodOS.
Using data from Solid Pods as easy as writing HTML!
- Create a plain old html file
- Add latest PodOS script tag and stylesheet to the
head - Add a
<pos-app></pos-app>to thebodyand 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> <!-- will provide a PodOS instance -->
<pos-resource
uri="https://solidproject.solidcommunity.net/profile/card#me"
> <!-- Loads the resource and sets the context for all the child elements -->
<h1> <!-- You can just combine normal HTML with PodOS elements -->
<pos-label /> <!-- renders a human-readable name of the resource -->
</h1>
<blockquote>
<pos-description /> <!-- renders a description of the resource -->
</blockquote>
</pos-resource>
</pos-app>
</body>
</html>Check out the 📖 Storybook documentation to learn about the available elements.
Follow the instructions in the projects main readme.
To run all unit and integration tests execute:
npm test