Kopflos pages

.changeset/fair-suns-cover.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-cms/core": patch
+---
+
+Allow plugins to add watch paths using `watchPaths` method

.changeset/lucky-zebras-find.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-cms/vite": patch
+---
+
+`log` field is now protected so that impementing plugins can log more easily

.changeset/perky-birds-lick.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-labs/pages": patch
+---
+
+Re-export `html` from lit for convenience

.changeset/social-loops-say.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-labs/pages": patch
+---
+
+Added `(dis)allowConnectedCallback` arrays to `SsrOptions` to control which elements run `connectedCallback` in the browser.

.changeset/spotty-emus-talk.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-cms/core": patch
+---
+
+Added `appNs` `NamespaceBuilder` to the environment which creates named nodes relative to app base

.changeset/two-colts-shave.md

@@ -0,0 +1,5 @@
+---
+"@kopflos-cms/core": patch
+---
+
+Making `apiGraphs` optional in config. By default, a graph `${baseIri}/api` will be used. Additionally, plugins can provide addtional API graphs using `apiGraph` method

.github/workflows/tests.yml

@@ -33,6 +33,8 @@ jobs:
             path: labs/html-template
           - name: "@kopflos-labs/handlebars"
             path: labs/handlebars
+          - name: "@kopflos-labs/pages"
+            path: labs/pages
           - name: sparql-path-parser
             path: packages/sparql-path-parser
     steps:
@@ -82,7 +84,19 @@ jobs:
       - run: npm ci
       - run: docker compose up -d
         working-directory: example
-      - run: npm run -w example start &
+      - run: npm run -w example start 2>&1 | tee example.log &
+        env:
+          log_color: off
       - run: npx wait-on http://localhost:1429/plaque/newton-s-apple-tree-monash-university -t 30000
 
-      - run: npm run -w example test -- --debug --raw
+      - run: npm run -w example test -- --debug
+        env:
+          TMPDIR: ${{ runner.temp }}
+      - if: failure()
+        name: upload debug artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: smoke-test-debug
+          path: |
+            example.log
+            ${{ runner.temp }}/api-tuner*

example/kopflos.config.ts

@@ -5,13 +5,13 @@ import ExpressMiddleware from '@kopflos-cms/express/middleware' // eslint-disabl
 import Vite from '@kopflos-cms/vite'
 import Hydra from '@kopflos-cms/hydra'
 import Shacl from '@kopflos-cms/shacl'
+import PluginPages from '@kopflos-labs/pages'
 
 const baseIri = process.env.API_BASE || 'http://localhost:1429'
 const dbUri = process.env.DB_URI || 'http://localhost:7878'
 
 export default <KopflosConfig>{
   baseIri,
-  apiGraphs: [baseIri + '/api'],
   sparql: {
     default: {
       endpointUrl: dbUri + '/query?union-default-graph',
@@ -33,10 +33,6 @@ export default <KopflosConfig>{
       ],
     }),
     new Vite({
-      build: {
-        root: 'ui',
-        entrypoints: ['*.html'],
-      },
       config: {
         server: {
           allowedHosts: ['read-the-plaque.lndo.site'],
@@ -47,5 +43,13 @@ export default <KopflosConfig>{
       apis: [baseIri + '/api'],
     }),
     new Shacl(),
+    new PluginPages({
+      ssrOptions: {
+        disallowConnectedCallback: [
+          /^sl-/,
+          /^ol-/,
+        ],
+      },
+    }),
   ],
 }

example/package.json

@@ -19,20 +19,21 @@
     "@kopflos-cms/shacl": "0.3.1",
     "@kopflos-cms/vite": "0.3.4",
     "@kopflos-labs/handlebars": "0.1.1",
-    "@kopflos-labs/html-template": "0.1.1",
     "@kopflos-labs/lit": "0.1.1",
-    "@openlayers-elements/core": "^0.3.0",
-    "@openlayers-elements/maps": "^0.3.0",
+    "@kopflos-labs/pages": "0.0.0",
+    "@openlayers-elements/core": "^0.4.0",
+    "@openlayers-elements/maps": "^0.4.0",
     "@shoelace-style/shoelace": "^2.17.1",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^5.2.0",
     "kopflos": "0.1.10",
-    "lit-element": "^4.1.1"
+    "lit": "^3.3.2",
+    "lit-rdf": "^0.1.0"
   },
   "devDependencies": {
     "@types/express": "^5",
-    "api-tuner": "^0.5.3"
+    "api-tuner": "^0.5.4"
   }
 }

example/pages/component/maps.ts

@@ -0,0 +1,4 @@
+import '@openlayers-elements/core/ol-map.js'
+import '@openlayers-elements/maps/ol-layer-openstreetmap.js'
+import '@openlayers-elements/maps/ol-marker-icon.js'
+import '@openlayers-elements/core/ol-layer-vector.js'

example/pages/component/my-header.ts

@@ -0,0 +1,18 @@
+import { LitElement, html, css } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { consumeFocusNode } from 'lit-rdf/mixins.js'
+
+@customElement('my-header')
+export class MyHeader extends consumeFocusNode(LitElement) {
+  public static get styles() {
+    return css`
+      h1 {
+        color: red
+      }
+    `
+  }
+
+  render() {
+    return html`<h1>${this.focusNode?.value}</h1>`
+  }
+}

example/pages/component/plaque-button.ts

@@ -0,0 +1,13 @@
+import { consumeEnvironment, consumeFocusNode } from 'lit-rdf/mixins.js'
+import { html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('plaque-button')
+export default class extends consumeEnvironment(consumeFocusNode(LitElement)) {
+  render() {
+    return html`<sl-button variant="primary" pill target="_blank"
+                           href="https://readtheplaque.com/plaque/${this.focusNode?.out(this.rdf.ns.schema.identifier)}">See the
+      original
+    </sl-button>`
+  }
+}

example/pages/component/schema-geo-map-button.ts

@@ -0,0 +1,22 @@
+import { consumeEnvironment, consumeFocusNode } from 'lit-rdf/mixins.js'
+import { html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('schema-geo-map-button')
+export default class extends consumeEnvironment(consumeFocusNode(LitElement)) {
+  get latitude() {
+    return this.focusNode?.out(this.rdf.ns.schema.latitude).value
+  }
+
+  get longitude() {
+    return this.focusNode?.out(this.rdf.ns.schema.longitude).value
+  }
+
+  render() {
+    return html`
+      <sl-button variant="primary" pill target="_blank"
+                 href="http://maps.google.com/maps?&z=21&t=m&q=loc:${this.latitude}+${this.longitude}">
+        See on Google Maps
+      </sl-button>`
+  }
+}

example/pages/component/schema-geo-map.ts

@@ -0,0 +1,30 @@
+import { consumeEnvironment, consumeFocusNode } from 'lit-rdf/mixins.js'
+import { html, isServer, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+if (!isServer) {
+  import('./maps.js')
+}
+
+@customElement('schema-geo-map')
+export default class extends consumeEnvironment(consumeFocusNode(LitElement)) {
+  get latitude() {
+    return this.focusNode?.out(this.rdf.ns.schema.latitude).value
+  }
+
+  get longitude() {
+    return this.focusNode?.out(this.rdf.ns.schema.longitude).value
+  }
+
+  render() {
+    return html`<ol-map slot="image" zoom="13" lat="${this.latitude}"
+                        lon="${this.longitude}">
+      <ol-layer-openstreetmap></ol-layer-openstreetmap>
+      <ol-layer-vector z-index="1">
+        <ol-marker-icon src="https://openlayers-elements.netlify.app/icon.png"
+                        lon="${this.longitude}"
+                        lat="${this.latitude}"/>
+      </ol-layer-vector>
+    </ol-map>`
+  }
+}

example/pages/component/schema-image.ts

@@ -0,0 +1,33 @@
+import { consumeEnvironment, consumeFocusNode } from 'lit-rdf/mixins.js'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('schema-image')
+export class SchemaImage extends consumeFocusNode(consumeEnvironment(LitElement)) {
+  static styles = css`
+      :host {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    `
+
+  @property({ type: String })
+  public alt?: string
+
+  protected render(): unknown {
+    const src = this.focusNode?.out(this.rdf.ns.schema.contentUrl).value
+    if (!src) {
+      return nothing
+    }
+
+    return html`
+            <img part="image" src="${src}" alt="${this.alt}"/>
+        `
+  }
+}

example/pages/plaque/[id].client.ts

@@ -0,0 +1,3 @@
+import 'lit-rdf/runtime/data-graph.js'
+import '@shoelace-style/shoelace/dist/components/card/card.js'
+import '@shoelace-style/shoelace/dist/components/button/button.js'

example/pages/plaque/[id].html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="///cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.17.1/cdn/themes/light.css"/>
+
+  <style>
+    body[dsd-pending] {
+      display: none;
+    }
+
+    main {
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    sl-card {
+      width: 500px;
+    }
+
+    .card-overview small {
+      color: var(--sl-color-neutral-500);
+    }
+
+    .card-overview [slot='footer'] {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    ol-map {
+      height: 500px;
+      width: 100%;
+    }
+  </style>
+</head>
+<body dsd-pending>
+<footer>
+  <p>&copy; 2024 Zazuko</p>
+</footer>
+</body>
+</html>

example/pages/plaque/[id].html.ts

@@ -0,0 +1,57 @@
+import { html, definePage } from '@kopflos-labs/pages'
+import plaque from './plaque.rq'
+
+export default definePage({
+  mainEntity: '/plaque/[id]',
+  queries: {
+    plaque,
+  },
+  head({ env, data }) {
+    const name = data.plaque
+      .has(env.ns.rdf.type, env.kopflos.appNs('/api/schema/Plaque'))
+      .out(env.ns.schema.name).value
+
+    return `<title> ${name} ::: Read the Plaque</title>`
+  },
+  body({ env }) {
+    return html`
+      <rdf-environment>
+        <data-graph data-graph="plaque">
+          <target-node target-class="${env.kopflos.appNs('/api/schema/Plaque').value}">
+            <header>
+              <traverse-graph property-path="schema:name">
+                <my-header></my-header>
+              </traverse-graph>
+            </header>
+            <main>
+              <sl-card class="card-overview">
+                <traverse-graph slot="image" property-path="schema:image">
+                  <schema-image></schema-image>
+                </traverse-graph>
+
+                <resource-label property="schema:text"></resource-label>
+
+                <div slot="footer">
+                  <plaque-button>
+                    See the original
+                  </plaque-button>
+                </div>
+              </sl-card>
+
+              <traverse-graph property-path="schema:geo">
+                <sl-card class="card-overview">
+                  <schema-geo-map></schema-geo-map>
+
+                  <div slot="footer">
+                    <schema-geo-map-button>
+                      See on Google Maps
+                    </schema-geo-map-button>
+                  </div>
+                </sl-card>
+              </traverse-graph>
+            </main>
+          </target-node>
+        </data-graph>
+      </rdf-environment>`
+  },
+})

example/pages/plaque/[id].ts

@@ -0,0 +1,7 @@
+import 'lit-rdf'
+import 'lit-rdf/components/rdf-environment.js'
+import '../component/my-header.js'
+import '../component/schema-image.js'
+import '../component/plaque-button.js'
+import '../component/schema-geo-map.js'
+import '../component/schema-geo-map-button.js'

example/pages/plaque/plaque.rq

@@ -0,0 +1,11 @@
+PREFIX schema: <http://schema.org/>
+PREFIX sparqlc: <https://sparqlc.described.at/>
+
+CONSTRUCT {
+ ?s ?p ?o
+} {
+  BIND(sparqlc:param(schema:mainEntity) as ?plaque)
+  GRAPH ?plaque {
+    ?s ?p ?o
+  }
+}