Solid Web Components Overview

Using from a CDN

To use components on any pod or web page, all you have to do is to import the components from a CDN, for example:

<script 
  src="https://cdn.jsdelivr.net/npm/solid-web-components@1.0.6/sol-cdn.js"
  type="module"
></script>

Using from a local install

Note on URLs

In sol components, anytime URLs are required, you can use absolute URLs or URLs relative to the server root (e.g. /home) or relative to the current webpage (e.g. ./assets/foo.png).

Solid Web Components by Function

Embed Non-Rdf Content

You can insert snippets from HTML, Markdown, and Text documents by supplying the URL of the document.

HTML

Markdown

If the tag specifies `Markdown`, the document will be converted to HTML.

Text

If the tag specifies `Text`, the document will not be converted, regardless of orignal format.

Javascript

By default all HTML and Markdown documents are sanitized with DOMPurify which means that javascript will be disabled, including onclick actions.

If you supply the `trusted` attribute, the sanitizing will be bypassed and onclick and other inline javasript will be active. Needless to say, use with caution.

Components

Components can call other components. For example a header component might call a banner component and a menu component. Components are trusted by default so only include components you control or trust.

Embed, Query, & Filter RDF Content

A single subject

Multiple subjects

Simple RDF queries

SPARQL queries

Replaceable query parameters

SELECT ?Feedname
    WHERE {
       ?x rdfs:label ?Feedname; bookmark:hasTopic "${queryParam}" .
    }

HTML/RDFa filtering

Access Solid Pods

Login

<sol-login></sol-login>

 

Containers

Forms

<sol-rdf
       source="./data/sample-rdf.ttl#004"
       form="./data/sample-form.ttl#MyForm"
       wanted="* a Bookmark"
       view="form"
</sol-rdf>

SolidOS Apps

Create GUIs

Table

Menu

Custom views

<sol-demo style="display:inline-block;margin-right:1rem;">
  <sol-demo style="border:1px solid grey; padding:1rem; width:20ch;background:lightgrey;">
   ${label}
  </sol-demo>
  <sol-demo  style="border:1px solid grey; padding:1rem; width:20ch;">
    ${hasTopic}
  </sol-demo>
</sol-demo>

Links

Selector

Page

Tree

Tabs

Accordion

Modal

Draggable

Droppable

Add Plugins, Apps, & Widgets

Document Editor

Searchbar

RSS

UTC/Local