Feat/add person annotations (#518)

* add rdfa to person variable * also support prefixed properties * changeset and improve resource rdfa * fix typing ? * add ext:content and backwards compatibility * add space between firstname and lastname --------- Co-authored-by: Arne Bertrand <[email protected]>
lblod · Dec 18, 2024 · 3188ea3 · 3188ea3
1 parent 74a109a
commit 3188ea3
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 20 deletions.
diff --git a/.changeset/wet-zebras-run.md b/.changeset/wet-zebras-run.md
@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Add rdfa to the person variable
diff --git a/addon/plugins/variable-plugin/variables/person.ts b/addon/plugins/variable-plugin/variables/person.ts
@@ -1,6 +1,9 @@
 import {
   EXT,
+  FOAF,
   RDF,
+  PERSOON,
+  PERSON,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import {
   createEmberNodeSpec,
@@ -51,22 +54,43 @@ const parseDOM = [
           return false;
         }
         let value: Person | undefined;
-        if (node.dataset.value) {
-          value = JSON.parse(node.dataset.value) as Person | undefined;
-        } else if (node.dataset.mandatee) {
-          const mandatee = JSON.parse(node.dataset.mandatee) as
-            | {
-                personUri: string;
-                firstName: string;
-                lastName: string;
-              }
-            | undefined;
-          if (mandatee) {
-            value = {
-              uri: mandatee.personUri,
-              firstName: mandatee.firstName,
-              lastName: mandatee.lastName,
-            };
+        const contentNode = node.querySelector(
+          '[data-content-container="true"]',
+        );
+        const aboutNode = contentNode?.querySelector(
+          `[property="${EXT('content').full}"],[property="${EXT('content').prefixed}]`,
+        );
+        if (aboutNode) {
+          const firstNameNode = aboutNode.querySelector(
+            `[property="${FOAF('gebruikteVoornaam').full}"],[property="${FOAF('gebruikteVoornaam').prefixed}"]`,
+          );
+          const lastNameNode = aboutNode.querySelector(
+            `[property="${PERSOON('familyName').full}"],[property="${PERSOON('familyName').prefixed}"]`,
+          );
+          value = {
+            uri: aboutNode.getAttribute('resource') || '',
+            firstName: firstNameNode?.textContent || '',
+            lastName: lastNameNode?.textContent || '',
+          };
+        } else {
+          // Backwards compatibility
+          if (node.dataset.value) {
+            value = JSON.parse(node.dataset.value) as Person | undefined;
+          } else if (node.dataset.mandatee) {
+            const mandatee = JSON.parse(node.dataset.mandatee) as
+              | {
+                  personUri: string;
+                  firstName: string;
+                  lastName: string;
+                }
+              | undefined;
+            if (mandatee) {
+              value = {
+                uri: mandatee.personUri,
+                firstName: mandatee.firstName,
+                lastName: mandatee.lastName,
+              };
+            }
           }
         }
         return {
@@ -87,18 +111,42 @@ const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
   return renderRdfaAware({
     renderable: node,
     tag: 'span',
-    attrs: {
-      'data-value': JSON.stringify(person),
-    },
+    attrs: {},
     content: person
-      ? `${person.firstName} ${person.lastName}`
+      ? generatePersonHtml(person)
       : t(
           'variable-plugin.person.nodeview-placeholder',
           TRANSLATION_FALLBACKS.nodeview_placeholder,
         ),
   });
 };
 
+function generatePersonHtml(person: Person): DOMOutputSpec {
+  return [
+    'span',
+    {
+      property: EXT('content').full,
+      resource: person.uri,
+      typeof: PERSON('Person').full,
+    },
+    [
+      'span',
+      {
+        property: FOAF('gebruikteVoornaam').full,
+      },
+      person.firstName,
+    ],
+    ' ',
+    [
+      'span',
+      {
+        property: PERSOON('familyName').full,
+      },
+      person.lastName,
+    ],
+  ];
+}
+
 const emberNodeConfig: EmberNodeConfig = {
   name: 'person-variable',
   component: PersonNodeViewComponent as unknown as ComponentLike,

diff --git a/addon/utils/constants.ts b/addon/utils/constants.ts
@@ -46,6 +46,11 @@ export const SRO = namespace(
   'https://data.vlaanderen.be/ns/slimmeraadpleegomgeving#',
   'sro',
 );
+export const PERSOON = namespace(
+  'http://data.vlaanderen.be/ns/persoon#',
+  'persoon',
+);
+export const PERSON = namespace('http://www.w3.org/ns/person#', 'person');
 export const BESTUURSPERIODES = {
   '2012-2019':
     'http://data.lblod.info/id/concept/Bestuursperiode/845dbc7f-139e-4632-b200-f90e180f1dba',