@hexagon6/solid-kit

solid-kit -> Social Linked Data with SvelteKit

Goals

• Test-bed for svelte components usable in sveltekit applications.
• An SDK for getting started with Solid and Single Page Applications.
• Deployable on static webservers with "@sveltejs/adapter-static"
• No backend required, only a POD

Non-Goals

• Server side rendering.

Implementation

This software is available on npm.org as @hexagon6/solid-kit.

Installation

Using your favorite package manager, run: npm install @hexagon6/solid-kit.

It is supposed to be used within a sveltekit project.

Usage

see src/lib/index.js for importable components and helper functions:

import {
  LDContent,
  Markdown,
  Redirect,
  SolidLogin,
  SolidStorage,
  createSession,
  fetchLinkHeaders,
  container,
  getParentContainer,
  oidcIssuer,
} from '@hexagon6/solid-kit'

SvelteKit routes

Run this repo locally with pnpm run dev and inspect what you find in src/routes/.

login/ and redirect/ pages are recommended as endpoints in your sveltekit project, so openid connect works within a single-page-application setup.

Components

There are some Svelte components that can be used with payloads returned from a Solid POD.

• LDContent: Linked Data (application/json+ld), supports TypeIndex & Preferences file
• Markdown: Render Markdown

Some Svelte components can be used for interacting with a Solid OIDC server, which handles login, authorization, redirect & logout

• Redirect: Redirect from registered URL to the page the user would like to land on authenticated.
• SolidLogin: A login component, which allows setting a validated webid / oidc provider and subsequently shows log in and out buttons
• SolidStorage: A component, capable of resolving a Storage URL with the LDP-Container http link headers

helper functions

• createSession: A reactive store for solid session handling
• fetchLinkHeaders: Fetch HTTP Link headers and parse them
• container: Derive a container from LDP headers
• getParentContainer: Derive a parent container from a URL
• oidcIssuer: Store the current selected oidcIssuer in LocalStorage

Integration Testing

Run pnpm run ci to check if the full stack is still working after changes.

Base Path

If you want to deploy your Single Page Application on a different path than / you can set the environment variable BASEPATH when building, e.g.:

BASEPATH=/alternative pnpm run build if you will deploy your application in a /alternative subfolder on your webserver.

Storybook

Status: Implemented, but not yet published

pnpm run storybook to try it locally