A complete example of a custom Solid pane that displays and manages bookmarks.

• Displays bookmarks with title, URL, and description
• Add new bookmarks
• Delete bookmarks
• Lazy-loaded for optimal bundle size

bookmark-pane/
├── README.md           # This file
├── lazy.js             # Lightweight wrapper (always loaded)
├── render.js           # Full implementation (lazy loaded)
└── styles.css          # Pane styles

Uses schema.org Bookmark type:

@prefix schema: <http://schema.org/> .

<#bookmark1> a schema:Bookmark ;
    schema:name "Example Site" ;
    schema:url <https://example.com> ;
    schema:description "A great website" ;
    schema:dateCreated "2024-01-15" .

import { register } from 'solid-panes-jss'
import { bookmarkPane } from './bookmark-pane/lazy.js'

register(bookmarkPane)

<script type="module">
  import { bookmarkPane } from 'https://example.com/bookmark-pane/lazy.js'
  import { register } from 'solid-panes-jss'
  register(bookmarkPane)
</script>

The pane activates when viewing:

• Resources with type schema:Bookmark
• Containers with schema:Bookmark items

1. Copy this folder to solid-panes-jss/src/
2. Add to registerPanes.js:

   import { bookmarkPane } from './bookmark-pane/lazy.js'
   register(bookmarkPane)

3. Run npm start in mashlib-jss
4. Navigate to a bookmark resource