SHACL-UI view layout concepts

book.ttl

<book/a-macska-es-a-puding>
  a schema:Book ;
  schema:title "A Macska és a puding" ;
  schema:author [ schema:givenName "Biljana" ; schema:familyName "Nikolic" ] ;
  schema:associatedMedia [
    schema:contentUrl <book/a-macska-es-a-puding.pdf> ;
  ] ;
  schema:image [
    a schema:ImageObject ;
    schema:contentUrl <large-cover> ;
    schema:thumbnail [
      a schema:ImageObject ;
      schema:contentUrl <small-cover> ;
    ] ;
  ] ;
.

layout.html

<book-layout>
  #shadow-root
    <section id="left">
      <slot name="image"></slot>
    </section>
    <section id="controls">
      <slot name="controls"></slot>
    </section>
    <section id="main">
      <slot></slot>
    </section>
  
  <!-- main group props go to default slot -->
  <span>A Macska és a puding</span>
  <span>Biljana Nikolic</span>
  
  <!-- image in slot -->
  <img src="small-cover" alt="?" slot="image" />
  
  <!-- download button etc -->
  <a href="book/a-macska-es-a-puding.pdf" slot="controls" >
</book-layout>

page.ttl

<Page>
  a schema:WebPage ;
  schema:mainEntity <book/a-macska-es-a-puding> ;
  dash:shape <PageShape> ;
.

view.ttl

<PageShape>
  a sh:NodeShape ;
  dash:viewer ex:BookLayout ;
  sh:property [
    # title is simple
    sh:path schema:title ;
    sh:group _:mainGroup ;
    sh:order 1 ; # properties are ordered within group
  ], [
    # author concatenates first+last name using SHACL-AF
    sh:path ex:author ;
    sh:values [
      sparql:concat (
        [ sh:path schema:givenName ]
        " "
        [ sh:path schema:familyName ]
      ) ;
    ] ;
    sh:group _:mainGroup ;
    sh:order 2 ;
  ], [
    # image follows the schema:ImageObject to find the thumbnail
    sh:path (schema:image schema:thumbnail schema:contentUrl) ;
    dash:viewer dash:ImageViewer ;
    sh:group _:imageGroup ;
  ], [
    sh:path ( schema:associatedMedia schema:contentUrl ) ;
  ] ;
.

_:imageGroup ex:slot "image" .
_:buttonsGroup ex:slot "controls" .

# main group does not have a slot, will use default