| name | pod-os-dashboard |
| description | Create or maintain a PodOS dashboard, i.e. an HTML page facilitating PodOS elements to use and visualize RDF data from Solid Pods . |
| license | MIT |
| compatibility | opencode |
A PodOS dashboard is a regular HTML page. Therefore, all existing rules regarding HTML and CSS apply.
Additionally, a dashboard page includes PodOS elements, a set of HTML custom elements (web components) that can fetch,
visualize and interact with RDF data in Solid Pods.
Quick start
Check out https://raw.githubusercontent.com/pod-os/PodOS/refs/heads/main/homepage/docs/getting-started/quick-start.md to
learn the basics.
Element reference
Never assume / invent elements or their attributes. Consult the existing documentation or ask the user if unsure.
Use the built-in tools to look up element information:
podos_listAllElements — lists all available PodOS elements with short descriptions. Use this to discover what elements exist.podos_getElementDocs — returns full documentation for a specific element by tag name (e.g. pos-list). Use this before using any element to get its exact attributes, properties, and events.
Here is the list of the most important elements:
| Component name | When to use |
|---|
| pos-app | Always, this is the root node for everything |
| pos-resource | Fetching resources and setting a context |
| pos-label | show name / label of a thing |
| pos-value | Display a value of a certain property / predicate |
| pos-description | describe a thing |
| pos-picture | Visualize a thing by showing it's picture |
| pos-list | List several things (kind of a loop). Tip: Can also be used to follow a relation even if only one element is present! |
| pos-switch | Conditional rendering |
| pos-case | Conditional rendering (together with pos-switch) |
| pos-rich-link | Link a resource |
Call podos_getElementDocs for each element you intend to use before writing any HTML for it. If an element is not found via the tools, only then fall back to fetching its readme from:
https://raw.githubusercontent.com/pod-os/PodOS/refs/heads/main/docs/elements/components/<component name>/readme.md
Workflow
- Ask the user what they want to build
- interview them using the questions tool
- go through their needs step by step, be explicit about what to build
- don't make assumptions
- don't build more than asked for, but propose if you think more could be usefull
- Clarify how the relevant data is stored in a Pod
- What conventions exist to rely on?
- Can the user provide example data or data shapes?
- Make sure that you have the correct assumptions about the data before proceeding
- Choose appropriate elements and check out their docs
- Build the HTML
- Get feedback from user and finish the work in an interactive iterative way
Styling
PodOS styles are based on CSS variables. Find available options in https://raw.githubusercontent.com/pod-os/PodOS/refs/heads/main/elements/src/global.css
The styles are built on top of Pollen CSS. Find the list of their variables here: https://unpkg.com/pollen-css/dist/pollen.css.
Use both the PodOS and Pollen variables instead of hardcoded values as long as this does not contradict the user's preferences given to you.
Dark / Light mode
PodOS has an automatic dark mode. Keep this in mind when styling pages that default to a light or dark theme. You may need to explicitly override PodOS CSS vars to enforce either light or dark colours. Preferably style the dashboard both for light and dark themes, unless the user explicitly instructs you too use only one of them.
Potential issues
PodOS elements are still in an early stage. You may run into issues fulfilling all user requests with the given elements.
If you find something important is missing:
- inform the user
- ask them whether to document the issue
- if confirmed, write an issue-.md file to describe what would be needed (Important: make it transparent that it is an LLM generated issue)
- ask the user to review it carefully and submit it to https://github.com/pod-os/PodOS/issues manually if they want
