profile-pane 2.0.0 → 3.0.0-024af9a2

package/lib/ProfileView.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProfileView = ProfileView;
 var _litHtml = require("lit-html");
-var _styleMap = require("lit-html/directives/style-map.js");
-var _baseStyles = require("./baseStyles");
+require("./styles/ProfileView.css");
 var _ChatWithMe = require("./ChatWithMe");
 var _FriendList = require("./FriendList");
 var _presenter = require("./presenter");
@@ -17,11 +16,6 @@ var _ProfileCard = require("./ProfileCard");
 var _CVCard = require("./CVCard");
 var _SocialCard = require("./SocialCard");
 var _StuffCard = require("./StuffCard");
-var _QRCodeCard = require("./QRCodeCard");
-var _addMeToYourFriends = require("./addMeToYourFriends");
-/*  Profile View
-*/
-
 // 20210527
 // 20210527
 // 20210527
@@ -39,42 +33,127 @@ function renderEditButton (subject) {
 */
 
 async function ProfileView(subject, context) {
-  const profileBasics = (0, _presenter.presentProfile)(subject, context.session.store); // rdflib rdfs type problems
+  const profileBasics = (0, _presenter.presentProfile)(subject, context.session.store);
   const rolesByType = (0, _CVPresenter.presentCV)(subject, context.session.store);
   const accounts = (0, _SocialPresenter.presentSocial)(subject, context.session.store);
   const stuffData = await (0, _StuffPresenter.presentStuff)(subject);
-  const styles = {
-    grid: (0, _styleMap.styleMap)({
-      ...(0, _baseStyles.responsiveGrid)(),
-      ...(0, _baseStyles.paddingSmall)(),
-      background: `radial-gradient(circle, ${profileBasics.backgroundColor} 80%, ${profileBasics.highlightColor} 100%)`
-    }),
-    card: (0, _styleMap.styleMap)((0, _baseStyles.card)()),
-    chat: (0, _styleMap.styleMap)({
-      ...(0, _baseStyles.card)(),
-      ...(0, _baseStyles.padding)()
-    })
-  };
+  return (0, _litHtml.html)` 
+    <main
+      id="main-content"
+      class="profile-grid"
+      style="--profile-grid-bg: radial-gradient(circle, ${profileBasics.backgroundColor} 80%, ${profileBasics.highlightColor} 100%)"
+      role="main"
+      aria-label="Profile for ${profileBasics.name}"
+      tabindex="-1"
+    >
+      <!-- Enhanced breadcrumb navigation -->
+      <nav id="profile-nav" aria-label="Profile sections" class="visually-hidden">
+        <ol>
+          <li><a href="#profile-card-heading">Personal Information</a></li>
+          ${(() => {
+    const cv = (0, _CVCard.CVCard)(rolesByType);
+    return cv && cv.strings && cv.strings.join('').trim() !== '' ? (0, _litHtml.html)`<li><a href="#cv-heading">Professional Experience</a></li>` : '';
+  })()}
+          ${accounts.accounts && accounts.accounts.length > 0 ? (0, _litHtml.html)`<li><a href="#social-heading" id="social-accounts">Social Accounts</a></li>` : ''}
+          <li><a href="#chat-heading" id="contact-section">Contact</a></li>
+        </ol>
+      </nav>
+
+      <article 
+        aria-labelledby="profile-card-heading" 
+        class="profileSection section-bg" 
+        role="region"
+        tabindex="-1"
+      >
+        <header class="text-center mb-md">
+          <h2 id="profile-card-heading" tabindex="-1">${profileBasics.name}</h2>
+        </header>
+        ${(0, _ProfileCard.ProfileCard)(profileBasics, context, subject)}
+      </article>
+
+      ${(() => {
+    const cv = (0, _CVCard.CVCard)(rolesByType);
+    return cv && cv.strings && cv.strings.join('').trim() !== '' ? (0, _litHtml.html)`
+          <section 
+            aria-labelledby="cv-heading" 
+            class="profileSection section-bg" 
+            role="region"
+            tabindex="-1"
+          >
+            <header class="text-center mb-md">
+              <h2 id="cv-heading" tabindex="-1">Professional & Education</h2>
+            </header>
+            <div>
+              ${cv}
+            </div>
+          </section>
+        ` : '';
+  })()}
+
+      ${accounts.accounts && accounts.accounts.length > 0 ? (0, _litHtml.html)`
+        <aside 
+          aria-labelledby="social-heading" 
+          class="profileSection section-bg" 
+          role="complementary"
+          tabindex="-1"
+        >
+          <header class="text-center mb-md">
+            <h2 id="social-heading" tabindex="-1">Social Accounts</h2>
+          </header>
+          <nav aria-label="Social media links">
+            ${(0, _SocialCard.SocialCard)(accounts)}
+          </nav>
+        </aside>
+      ` : ''}
+
+      ${stuffData.stuff && stuffData.stuff.length > 0 ? (0, _litHtml.html)`
+        <section 
+          aria-labelledby="stuff-heading" 
+          class="profileSection section-bg" 
+          role="region"
+          tabindex="-1"
+        >
+          <header class="text-center mb-md">
+            <h2 id="stuff-heading" tabindex="-1">Shared Items</h2>
+          </header>
+          <div>
+            ${(0, _StuffCard.StuffCard)(profileBasics, context, subject, stuffData)}
+          </div>
+        </section>
+      ` : ''}
 
-  // was: <div style=${styles.card}>${renderEditButton(subject)}</div>
+      ${(() => {
+    const friends = (0, _FriendList.FriendList)(subject, context);
+    return friends ? (0, _litHtml.html)`
+          <aside 
+            aria-labelledby="friends-heading" 
+            class="profileSection section-bg" 
+            role="complementary"
+            tabindex="-1"
+          >
+            <header class="text-center mb-md">
+              <h2 id="friends-heading" tabindex="-1">Friends</h2>
+            </header>
+            <div role="list" aria-label="Friend connections">
+              ${friends}
+            </div>
+          </aside>
+        ` : '';
+  })()}
 
-  return (0, _litHtml.html)`
-    <div style="${styles.grid}">
-      <div>
-        <div data-testid="profile-card" style="${styles.card}">
-          ${(0, _ProfileCard.ProfileCard)(profileBasics)}
-          ${(0, _addMeToYourFriends.addMeToYourFriendsDiv)(subject, context)}
+      <section 
+        aria-labelledby="chat-heading" 
+        class="profileSection section-bg" 
+        role="region"
+        tabindex="-1"
+      >
+        <header class="text-center mb-md">
+          <h2 id="chat-heading" tabindex="-1">Contact</h2>
+        </header>
+        <div>
+          ${(0, _ChatWithMe.ChatWithMe)(subject, context)}
         </div>
-      </div>
-        ${(0, _CVCard.CVCard)(profileBasics, rolesByType)}
-        ${(0, _SocialCard.SocialCard)(profileBasics, accounts)}
-        ${(0, _StuffCard.StuffCard)(profileBasics, context, subject, stuffData)}
-        ${(0, _FriendList.FriendList)(profileBasics, subject, context)}
-      <div style="${styles.chat}">${(0, _ChatWithMe.ChatWithMe)(subject, context)}</div>
-      <div data-testid="qrcode-display" class="qrcode-display" style="${styles.card}">
-        ${(0, _QRCodeCard.QRCodeCard)(profileBasics, subject)}
-         
-      </div>
-    </div>
+      </section>
+    </main>
   `;
 }

package/lib/QRCodeCard.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
 import { NamedNode } from 'rdflib';
-import { ProfilePresentation } from './presenter';
-export declare const QRCodeCard: (profileBasics: ProfilePresentation, subject: NamedNode) => TemplateResult;
+import './styles/QRCodeCard.css';
+export declare const QRCodeCard: (highlightColor: string, backgroundColor: string, subject: NamedNode) => TemplateResult;
 //# sourceMappingURL=QRCodeCard.d.ts.map

package/lib/QRCodeCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard.d.ts","sourceRoot":"","sources":["../src/QRCodeCard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AASlC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAWjD,eAAO,MAAM,UAAU,GACrB,eAAe,mBAAmB,EAClC,SAAS,SAAS,KACjB,cAoCF,CAAA"}
+{"version":3,"file":"QRCodeCard.d.ts","sourceRoot":"","sources":["../src/QRCodeCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,OAAO,yBAAyB,CAAA;AAuChC,eAAO,MAAM,UAAU,GACrB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,EACvB,SAAS,SAAS,KACjB,cA0EF,CAAA"}

package/lib/QRCodeCard.js

@@ -5,56 +5,109 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.QRCodeCard = void 0;
 var _litHtml = require("lit-html");
-var _baseStyles = require("./baseStyles");
-var _styleMap = require("lit-html/directives/style-map.js");
 var _solidUi = require("solid-ui");
-// A card in my profile to show yu a QRCode of my webid
-//
-
-const styles = {
-  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
-  intro: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.textGray)(),
-    ...(0, _baseStyles.textCenter)()
-  }),
-  card: (0, _styleMap.styleMap)({}),
-  info: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.paddingSmall)(),
-    ...(0, _baseStyles.textLeft)()
-  })
-};
-const QRCodeCard = (profileBasics, subject) => {
-  const nameStyle = (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.heading)(),
-    // "text-decoration": "underline",
-    color: profileBasics.highlightColor // was "text-decoration-color"
+require("./styles/QRCodeCard.css");
+var _texts = require("./texts");
+function hexToRgb(hex) {
+  // Remove leading # if present
+  hex = hex.replace(/^#/, '');
+  if (hex.length === 3) {
+    hex = hex.split('').map(x => x + x).join('');
+  }
+  if (hex.length !== 6) return null;
+  const num = parseInt(hex, 16);
+  return {
+    r: num >> 16 & 255,
+    g: num >> 8 & 255,
+    b: num & 255
+  };
+}
+function luminance({
+  r,
+  g,
+  b
+}) {
+  const a = [r, g, b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
   });
-  const qrCodeCanvasStyle = 'width: 80%; margin:auto;';
-  const highlightColor = profileBasics.highlightColor || '#000000';
-  const backgroundColor = profileBasics.backgroundColor || '#ffffff';
-  // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
-
+  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+}
+function contrastRatio(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  if (!rgb1 || !rgb2) return 1;
+  const lum1 = luminance(rgb1);
+  const lum2 = luminance(rgb2);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+const QRCodeCard = (highlightColor, backgroundColor, subject) => {
+  const hC = highlightColor || '#000000';
+  const bC = backgroundColor || '#ffffff';
   const name = _solidUi.utils.label(subject);
+
+  // Color contrast check
+  const ratio = contrastRatio(hC, bC);
+  if (ratio < 4.5) {
+    console.warn(`QRCodeCard: The contrast ratio between highlightColor (${hC}) and backgroundColor (${bC}) is ${ratio.toFixed(2)}, which is below the WCAG 2.1 recommended minimum of 4.5:1 for normal text.`);
+  }
   const BEGIN = 'BEGIN:VCARD\r\n';
   const END = 'END:VCARD\r\n';
   const FN = 'FN:' + name + '\r\n';
   const URL = 'URL:' + subject.uri + 'r\n';
   const VERSIONV = 'VERSION:4.0\r\n';
 
-  // find out how to import values from presenter.ts
-  // once those values are imported, make sure any user input aligns
-
+  // Accessibility check: Ensure QR code is rendered as an accessible image or canvas
+  // This assumes the QR code is rendered inside the <div> below by another library or script.
+  // If you use a library, ensure it sets role="img" and an appropriate aria-label or alt attribute.
+  // If not, warn the developer.
+  setTimeout(() => {
+    const container = document.querySelector('.QRCode [role="img"]');
+    if (container) {
+      const hasAriaLabel = container.hasAttribute('aria-label');
+      const hasAlt = container.hasAttribute('alt');
+      if (!hasAriaLabel && !hasAlt) {
+        console.warn('QRCodeCard: The QR code element should have an accessible label (aria-label or alt attribute) for screen readers.');
+      }
+    } else {
+      console.warn('QRCodeCard: No element with role="img" found for the QR code. Ensure the QR code is rendered as an <img> or <canvas> with proper ARIA attributes.');
+    }
+  }, 0);
   const vCard = BEGIN + FN + URL + END + VERSIONV;
 
   // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
 
   return (0, _litHtml.html)`
-  <div>
-    <div style=${styles.card}>
-      <h3 style=${nameStyle}>${profileBasics.name}</h3>
-      <div class="QRCode" style="${qrCodeCanvasStyle}" data-value="${vCard}" highlightColor="${highlightColor}" backgroundColor="${backgroundColor}"></div>
-    </div>
-  </div>
+    <figure 
+      class="QRCode"
+      data-value="${vCard}"
+      highlightColor="${hC}"
+      backgroundColor="${bC}"
+      data-testid="qrcode-card"
+      aria-labelledby="qr-code-caption"
+      role="img"
+      aria-describedby="qr-code-description"
+    >
+      <div 
+        aria-label="Static QR code containing contact information for ${name}"
+        role="img"
+        tabindex="0"
+      ></div>
+      <figcaption 
+        id="qr-code-caption" 
+        class="qrCaption"
+      >
+        ${_texts.scanQrToConnectText}
+      </figcaption>
+      <div 
+        id="qr-code-description" 
+        class="sr-only"
+      >
+        This is a static QR code containing vCard information for ${name}, including profile URL ${subject.uri}. The QR code is not interactive.
+      </div>
+    </figure>
   `;
 };
 exports.QRCodeCard = QRCodeCard;

package/lib/SocialCard.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { ProfilePresentation } from './presenter';
 import { SocialPresentation } from './SocialPresenter';
-export declare const SocialCard: (profileBasics: ProfilePresentation, SocialData: SocialPresentation) => TemplateResult;
+import './styles/SocialCard.css';
+export declare const SocialCard: (SocialData: SocialPresentation) => TemplateResult;
 //# sourceMappingURL=SocialCard.d.ts.map

package/lib/SocialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SocialCard.d.ts","sourceRoot":"","sources":["../src/SocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAS/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAatD,eAAO,MAAM,UAAU,GACrB,eAAe,mBAAmB,EAClC,YAAY,kBAAkB,KAC7B,cAwBF,CAAA"}
+{"version":3,"file":"SocialCard.d.ts","sourceRoot":"","sources":["../src/SocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,KAC7B,cA+CF,CAAA"}

package/lib/SocialCard.js

@@ -5,61 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SocialCard = void 0;
 var _litHtml = require("lit-html");
-var _baseStyles = require("./baseStyles");
-var _styleMap = require("lit-html/directives/style-map.js");
-const styles = {
-  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
-  intro: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.textGray)(),
-    ...(0, _baseStyles.textCenter)()
-  }),
-  card: (0, _styleMap.styleMap)((0, _baseStyles.card)()),
-  info: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.paddingSmall)(),
-    ...(0, _baseStyles.textCenter)()
-  }),
-  tools: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.paddingSmall)(),
-    ...(0, _baseStyles.textRight)()
-  })
-};
-const SocialCard = (profileBasics, SocialData) => {
+require("./styles/SocialCard.css");
+const SocialCard = SocialData => {
   const {
     accounts
   } = SocialData;
-  const nameStyle = (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.heading)(),
-    // "text-decoration": "underline",
-    color: profileBasics.highlightColor // was "text-decoration-color"
-  });
   if (accounts.length) {
     return (0, _litHtml.html)`
-  <div>
-    <div data-testid="social-media" style="${styles.card}">
-      <div style=${styles.info + 'margin: auto;'}>
-        <h3 style=${nameStyle}>Follow me on</h3>
-
-        <div style=${styles.info}>${renderAccounts(accounts)}</div>
-      </div>
-    </div>
-  </div>
-  `;
+      <section
+        class="socialCard"
+        aria-labelledby="social-card-title"
+        data-testid="social-media"
+      >
+        <nav aria-label="Social media profiles">
+          <ul class="socialList list-reset" role="list">
+            ${accounts.map(account => renderAccount(account))}
+          </ul>
+        </nav>
+      </section>
+    `;
+  }
+  function renderAccount(account) {
+    return account.homepage && account.name && account.icon ? (0, _litHtml.html)`
+          <li class="socialItem" role="listitem">
+            <a 
+              href="${account.homepage}" 
+              target="_blank" 
+              rel="noopener noreferrer" 
+              aria-label="Visit ${account.name} profile (opens in new tab)"
+              style="display: flex; align-items: center; gap: 0.5em; text-decoration: none;"
+            >
+              <img 
+                class="socialIcon" 
+                src="${account.icon}" 
+                alt="${account.name} icon"
+                width="40"
+                height="40"
+                loading="lazy"
+              />
+              <span class="text-wrap-anywhere">${account.name}</span>
+            </a>
+          </li>
+        ` : (0, _litHtml.html)``;
   }
-  return (0, _litHtml.html)``;
 };
-exports.SocialCard = SocialCard;
-function renderAccount(account) {
-  return account.homepage && account.name && account.icon ? (0, _litHtml.html)`<div class="textButton-0-1-3" style="margin-top: 0.3em; margin-bottom: 0.3em;">
-
-        <a href="${account.homepage}" style="text-decoration: none;" target="social"> 
-                <img style="width: 2em; height: 2em; margin: 1em; vertical-align:middle;" src="${account.icon}" alt="${account.name}"> 
-
-                <span style="font-size: 1.2rem;">${account.name}</span> 
-        </a>
-      </div> ` : (0, _litHtml.html)``;
-}
-function renderAccounts(accounts) {
-  if (accounts.length > 0) return (0, _litHtml.html)`${renderAccount(accounts[0])}${accounts.length > 1 ? renderAccounts(accounts.slice(1)) : (0, _litHtml.html)``}`;
-}
-
-// ends
+exports.SocialCard = SocialCard;

package/lib/SocialPresenter.js

@@ -8,7 +8,7 @@ exports.presentSocial = presentSocial;
 var _rdflib = require("rdflib");
 var _solidUi = require("solid-ui");
 /* babel-plugin-inline-import './ontology/profileForm.ttl' */
-const profileForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <https://solidos.github.io/profile-pane/src/ontology/profileForm.ttl#>.\n@prefix soc: <https://solidos.github.io/profile-pane/src/ontology/socialMedia.ttl#>.\n\n# was: https://solidos.github.io/solid-panes/dashboard/profileStyle.ttl#this\n# moved to:  https://solidos.github.io/profile-pane/src/ontology/profileForm.ttl#this\n\n\n\n\n# About forms: https://solidos.github.io/solid-ui/Documentation/forms-intro.html\n# About personal public data:  https://www.w3.org/DesignIssues/PersonalPublic.html\n#\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Profile form\" ;\n    a ui:Form ;\n    # ui:part :backgroundColor, :highlightColor;\n    ui:parts (\n      :styleGroup\n      :nicknameField\n      :pronounsForm\n      :LanguagesPrompt :LanguagesForm\n      :SocialsPrompt :SocialsForm\n      :CVGroup\n      :SkillsPrompt :SkillsForm\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n    :styleHeading a ui:Heading; ui:contents \"The style of your public profile.\".\n    :backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n      ui:label \"Background color\"; ui:default \"#ffffff\".\n    :highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n      ui:label \"Highlight color\"; ui:default \"#000000\".\n\n# Nickname\n\n:nicknameField a ui:SingleLineTextField; ui:size 12; ui:property foaf:nick;\n      ui:label \"Short name for chats, etc.\"@en, \"nom court\"@fr.\n\n # Pronouns\n\n :pronounsForm a ui:Group; ui:weight 0; ui:parts ( :pronounsPrompt :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n    :pronounsPrompt a ui:Comment; ui:contents  \"What are your pronouns?\" .\n\n    :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n        ui:size 10; ui:label \"he/she/they...\" .\n    :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n        ui:size 10; ui:label \"him/her/them...\" .\n    :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n        ui:size 10; ui:label \"his/hers/theirs...\" .\n\n  # Curriculum Vitae: membership of organizations\n\n  :CVHeading a ui:Heading; ui:contents \"Public Curriculum Vitae\".\n  :CVPrompt a ui:Comment; ui:contents  \"What organizations have you been involved with?\" .\n\n    :CVGroup a ui:Group; ui:weight 1; ui:parts ( :CVHeading :CVPrompt :involvementWithOrganizationsForm ).\n\n\n  solid:Role a rdfs:Class; owl:oneOf ( solid:CurrentRole solid:FormerRole solid:FutureRole ). # Future Role too?\n\n  org:member owl:inverse [ ui:label \"involvement with company, org etc\" ]. # timelimited involvement\n\n  :involvementWithOrganizationsForm a ui:Multiple;\n      ui:label \"Involvement with Organization\";\n      ui:property org:member; ui:reverse true; # link back from role to member\n      ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n      ui:part :RoleMembershipForm.\n\n# This is a big important form for one of a series of roles in the list.\n\n  :RoleMembershipForm a ui:Group; ui:weight 3; ui:parts ( :MembershipFormHeading :roleNameField\n        :escoOccupationField :orgField :RoleClassifier :RoleDatesForm :RoleDescriptionForm).\n\n     :MembershipFormHeading a ui:Heading; ui:contents \"Details of this role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n     :orgField a ui:Choice; ui:label \"Organization\"@en, \"Organization\"@fr;\n          ui:canMintNew true; ui:use :OrganizationCreationForm ;\n          ui:property org:organization;\n          ui:from vcard:Organization .\n     :roleNameField a ui:SingleLineTextField; ui:property vcard:role; ui:size 60 .\n\n    :escoOccupationField a ui:AutocompleteField;\n          ui:label \"occupation\"; ui:size 60;\n          ui:property org:role;\n          ui:dataSource :ESCO_Occupation_DataSource;\n           ui:targetClass schema:Occupation .\n\n         :ESCO_Occupation_DataSource a ui:DataSource;\n            schema:name \"ESCO\";\n            ui:targetClass schema:Occupation ;\n            schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n            ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n     :instituteIdentityField a ui:AutocompleteField; ui:label \"in wikidata\";\n          ui:size 60;\n          ui:property solid:publicId; ui:dataSource :WikidataOnOrganizations.\n\n     :WikidataOnOrganizations a ui:DataSource ;\n       schema:name \"Wikidata\";\n       ui:endpoint \"https://query.wikidata.org/sparql\" ;\n       ui:targetClass  <http://www.wikidata.org/entity/Q43229>; # Use if nothing else\n       ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n       WHERE {\n         ?klass wdt:P279* $(targetClass) .\n         ?subject wdt:P31 ?klass .\n         ?subject rdfs:label ?name.\n         FILTER regex(?name, \"$(name)\", \"i\")\n       } LIMIT $(limit) \"\"\" .\n\n      :WikidataOnOrganizations ui:classMap\n       [ ui:internalClass schema:Corporation; ui:externalClass <http://www.wikidata.org/entity/Q6881511>], #Enterprise is for-profit\n       [ ui:internalClass schema:EducationalOrganization; ui:externalClass <http://www.wikidata.org/entity/Q178706>], #insitution\n       [ ui:internalClass schema:ResearchOrganization; ui:externalClass <http://www.wikidata.org/entity/Q31855>], # reearch insitutie\n       [ ui:internalClass schema:GovernmentOrganization; ui:externalClass <http://www.wikidata.org/entity/Q327333>], #government agency\n       [ ui:internalClass schema:MedicalOrganization; ui:externalClass <http://www.wikidata.org/entity/Q4287745>],\n       [ ui:internalClass schema:MusicGroup; ui:externalClass <http://www.wikidata.org/entity/Q32178211>], #music organization\n       [ ui:internalClass schema:NGO; ui:externalClass <http://www.wikidata.org/entity/Q163740>], #nonprofit organization @@\n       [ ui:internalClass schema:Occupation; ui:externalClass <http://www.wikidata.org/entity/Q28640>], # superclass: Profession\n       [ ui:internalClass schema:Organization; ui:externalClass <http://www.wikidata.org/entity/Q43229>], # Superclass; Organization\n       [ ui:internalClass schema:Project; ui:externalClass <http://www.wikidata.org/entity/Q170584>],\n       [ ui:internalClass schema:SportsOrganization; ui:externalClass <http://www.wikidata.org/entity/Q4438121>] .\n\n\n# eposodes in one's career - Roles\n\nsolid:Role owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) .\nsolid:PastRole a rdfs:Class; rdfs:label \"former role\"@en, \"ancien r\xF4le\"@fr, \"vergangene Rolle\"@de, \"rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"current role\"@en, \"r\xF4le actuel\"@fr, \"momentane Rolle\"@de , \"rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"future role\"@en, \"r\xF4le \xE0 venir\"@fr, \"zuk\xFCnftige Rolle\"@de, \"rol futuro\"@es .\n\n:RoleDatesGroup a ui:Group; ui:weight 0; ui:parts ( :RoleClassifier :RoleDatesForm ) .\n  :RoleClassifier a ui:Classifier; ui:label \"What sort of role?\"@en;\n      ui:category solid:Role .\n\n  :RoleDatesForm a ui:Options; ui:dependingOn rdf:type; ui:case\n     [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n     [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n     [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n      :StartDateForm a ui:DateField; ui:label \"start\"@en,\"d\xE9but\"@fr;\n          ui:property schema:startDate .\n      :TwoDateForm a ui:Group; ui:weight 0; ui:parts ( :StartDateForm :EndDateForm ) .\n      :EndDateForm a ui:DateField; ui:label \"end\"@en,\"fin\"@fr;\n          ui:property schema:endDate .\n\n:RoleDescriptionForm a ui:MultiLineTextField; ui:property schema:description;\n  ui:label \"Describe your role\" .\n\n# Organizations\n\n vcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n# Ontology data to drive the classifier\n\nsolid:InterestingOrganization owl:disjointUnionOf  (\n# Airline - a Corporation\n# Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n# FundingScheme - eh?\n schema:GovernmentOrganization\n# LibrarySystem\n# LocalBusiness - Corporation\n# MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\nschema:PerformingGroup # a band\nschema:Project # like Solid\nschema:SportsOrganization # a Team\nsolid:OtherOrganization\n ) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\n   \"organizaci\xF3n de investigaci\xF3n\"@es, \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n  :OrganizationCreationForm a ui:Form; schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( :OrgClassifier :OrgSwitch   :OrganizationNameField :homePageURIField  ) .\n\n\n :OrgClassifier a ui:Classifier; ui:label \"What sort of organization?\"@en;\n    ui:category solid:InterestingOrganization .\n\n  :OrganizationNameField\n      a ui:SingleLineTextField ;\n      ui:label \"Organization Name\";\n      ui:maxLength \"200\" ;\n      ui:property schema:name ;\n      ui:size    80 .\n\n   :homePageURIField a ui:NamedNodeURIField; ui:size 80;\n      ui:label \"Home page URI\"@en;\n      ui:property  schema:uri . # @@ ??\n\n    :initituteTypeField a ui:Classifier;\n    ui:label \"What sort of organization\";\n    ui:category solid:InterestingOrganization .\n\n#  Depending on the type of org, chose a different form\n\n :OrgSwitch a ui:Options; ui:dependingOn rdf:type;\n   ui:case\n   [ ui:for schema:Corporation; ui:use :CorporationForm ],\n   [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n   [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n   [ ui:for schema:Project; ui:use :ProjectForm ],\n   [ ui:for schema:NGO; ui:use :NGOForm ],\n   [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n   [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n   [ ui:for :SportsOrganization; ui:use :SportsOrganizationForm ],\n   [ ui:for solid:OtherOrganization; ui:use :OtherOrganizationForm ].\n\n\n  :CorporationForm a ui:Group; ui:weight 0; ui:parts ( :CorporationPrompt :CorporationAutocomplete ) .\n\n      :CorporationPrompt a ui:Comment; ui:contents \"Which corporation?\".\n\n      :CorporationAutocomplete a ui:AutocompleteField;\n      a ui:AutocompleteField; ui:label \"Corporation in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n      :WikidataInstancesByName a ui:DataSource ;\n        schema:name \"Wikidata instances by name\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n        WHERE {\n          ?klass wdt:P279* $(targetClass) .\n          ?subject wdt:P31 ?klass .\n          ?subject rdfs:label ?name.\n          FILTER regex(?name, \"$(name)\", \"i\")\n        } LIMIT $(limit) \"\"\" ;\n\n        # Note this form of the query is very experimental\n        ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                            ui:where { ?klass wdt:P279 ?targetClass .\n                                       ?subject wdt:P31 ?klass; rdfs:label ?name .\n                                     };\n                        ].\n\n  :GovernmentOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :GovernmentOrganizationPrompt :GovernmentOrganizationAutocomplete ) .\n\n      :GovernmentOrganizationPrompt a ui:Comment; ui:contents \"Which GovernmentOrganization?\".\n\n      :GovernmentOrganizationAutocomplete\n      a ui:AutocompleteField; ui:label \"GovernmentOrganization in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n    :EducationalOrganizationForm a ui:Group; ui:weight 1; ui:parts ( :EducationalOrganizationPrompt :EducationalOrganizationAutocomplete ) .\n\n        :EducationalOrganizationPrompt a ui:Comment; ui:contents \"Which Educational Organization?\".\n\n        :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Educational Organization in wikidata\";\n             ui:size 60;\n             ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n             ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n    :ResearchOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :ResearchOrganizationPrompt :ResearchOrganizationAutocomplete ) .\n\n        :ResearchOrganizationPrompt a ui:Comment; ui:contents \"Which Research Organization?\".\n\n        :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Research Insitute in wikidata\";\n             ui:size 60;\n             ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n             ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n  :NGOForm a ui:Group; ui:weight 0; ui:parts ( :NGOPrompt :NGOAutocomplete ) .\n\n      :NGOPrompt a ui:Comment; ui:contents \"Which NGO?\".\n\n      :NGOAutocomplete\n      a ui:AutocompleteField; ui:label \"NGO in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n  :PerformingGroupForm a ui:Group; ui:weight 0; ui:parts ( :PerformingGroupPrompt :PerformingGroupAutocomplete ) .\n\n      :PerformingGroupPrompt a ui:Comment; ui:contents \"Which PerformingGroup?\".\n\n      :PerformingGroupAutocomplete\n      a ui:AutocompleteField; ui:label \"PerformingGroup in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n  :ProjectForm a ui:Group; ui:weight 0; ui:parts ( :ProjectPrompt :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n      :ProjectPrompt a ui:Comment; ui:contents \"Which Project?\".\n\n      :ProjectAutocomplete\n      a ui:AutocompleteField; ui:label \"Project in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n  :SportsOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :SportsOrganizationPrompt :SportsOrganizationAutocomplete ) .\n\n      :SportsOrganizationPrompt a ui:Comment; ui:contents \"Which Sports Organization?\".\n\n      :SportsOrganizationAutocomplete\n      a ui:AutocompleteField; ui:label \"SportsOrganization in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n   :OtherOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :OrganizationNameField :homePageURIField ) .\n\n  #################### Skills\n\n  :SkillsPrompt a ui:Comment; ui:contents  \"Skills?\" .\n\n  :SkillsForm a ui:Multiple;\n      ui:label \"Skills\";\n      ui:property schema:skills;\n      ui:ordered false; # Allow reader to order skills\n      ui:part :SkillForm.\n\n  :SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n        # :skillNameField a ui:SingleLineTextField; ui:property vcard:role; ui:size 30 .\n\n        :escoSkillField a ui:AutocompleteField;\n              ui:label \"skill\"; ui:size 30;\n              ui:property solid:publicId;\n              ui:dataSource :ESCO_Skill_DataSource;\n               ui:targetClass schema:Skill .\n\n        :ESCO_Skill_DataSource a ui:DataSource;\n           schema:name \"ESCO Skill\";\n           ui:targetClass esco:Skill ;\n           schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n           ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n# Language\n\n:LanguagesPrompt a ui:Comment; ui:contents  \"Languages?\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"Languages\";\n    ui:property schema:knowsLanguage; # @@@\n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\"; ui:size 30;\n          ui:property solid:publicId; # @@\n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Wikidata languages\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n\n         ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\nWHERE\n{ ?item wdt:P305 ?subject .\n  OPTIONAL {?item rdfs:label ?name}\n  OPTIONAL {?item wdt:P1705 ?name}\n  FILTER regex(?name, \"$(name)\", \"i\")\n  FILTER regex(?subject, \"^..$\", \"i\")\n}\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }\n\n########### Social Media - other accounts\n#\n# Twitter, Linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:SocialsPrompt a ui:Heading; ui:contents  \"Social Media etc?\" .\n:SocialsPrompt a ui:Comment; ui:contents  \"Link to accounts in social media sites, etc\" .\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account;\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; ui:weight 1; ui:parts ( :AccountField :AccountIdField ).\n\n:AccountField a ui:Classifier; ui:label \"What sort of account?\"@en;\n      ui:multiple false ; \n      ui:category foaf:Account  .\n\n:AccountIdField a ui:Options . \n\n  :AccountIdField a ui:Options; ui:dependingOn rdf:type; ui:case\n     [ ui:for soc:BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for soc:FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for soc:GithubAccount; ui:use :GithubIdField ],\n     [ ui:for soc:InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for soc:LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for soc:MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for soc:MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for soc:MediumAccount; ui:use :MediumIdField ],\n     [ ui:for soc:NostrAccount; ui:use :NostrIdField ],\n     [ ui:for soc:OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for soc:PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for soc:RedditAccount; ui:use :RedditIdField ],\n     [ ui:for soc:StravaAccount; ui:use :StravaIdField ],\n     [ ui:for soc:SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for soc:TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for soc:TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for soc:TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for soc:OtherAccount; ui:use :OtherIdForm  ] .\n\n  :BlueSkyIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Bluesky Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :FacebookIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Facebook Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :GithubIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Github Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :InstagramIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Instagram Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :LinkedInIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Linked In Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MastodonIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Mastodon (Activity Pub) Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MatrixIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Matrix Username\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MediumIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Medium Username\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :NostrIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Nostr public key\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    70 .\n\n  :OrcidIdField\n      a ui:SingleLineTextField ;\n      ui:label \"ORCiD id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :PinterestIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Pinterest id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :RedditIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Reddit Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :StravaIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Strava Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :SnapchatIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Snapchat Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TiktokIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Tiktok Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TumblrIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Tumblr user name\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TwitterIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Twitter Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n# an unknown SN account needs more info\n\n  :OtherIdForm a ui:Group; ui:weight 0; ui:parts ( :OtherIdField :OtherIconField :OtherLabelield ).\n\n  :OtherIdField\n      a ui:NamedNodeURIField ;\n      ui:label \"URL of account to link to\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:homepage ; \n      ui:size    60 .\n\n  :OtherLabelield\n      a ui:SingleLineTextField ;\n      ui:label \"Label\";\n      ui:maxLength \"200\" ;\n      ui:property rdfs:label ; \n      ui:size    40 .\n\n  :OtherIconField\n      a ui:NamedNodeURIField ;\n      ui:label \"URL of icon to display\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:icon ;\n      ui:size    60 .\n\n\n\n\n\n# ENDS\n";
+const profileForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <https://solidos.github.io/profile-pane/src/ontology/profileForm.ttl#>.\n@prefix soc: <https://solidos.github.io/profile-pane/src/ontology/socialMedia.ttl#>.\n\n# About forms: https://solidos.github.io/solid-ui/docs/forms-intro.html\n# About personal public data:  https://www.w3.org/DesignIssues/PersonalPublic.html\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Profile form\" ;\n    a ui:Form ;\n    # ui:part :backgroundColor, :highlightColor;\n    ui:parts (\n      :styleGroup\n      :nicknameField\n      :pronounsForm\n      :LanguagesPrompt :LanguagesForm\n      :SocialsPrompt :SocialsForm\n      :CVGroup\n      :SkillsPrompt :SkillsForm\n      ).\n\n:styleGroup a ui:Group; ui:weight 0; ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n    :styleHeading a ui:Heading; ui:contents \"The style of your public profile.\".\n    :backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n      ui:label \"Background color\"; ui:default \"#ffffff\".\n    :highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n      ui:label \"Highlight color\"; ui:default \"#000000\".\n\n# Nickname\n\n:nicknameField a ui:SingleLineTextField; ui:size 12; ui:property foaf:nick;\n      ui:label \"Short name for chats, etc.\"@en, \"nom court\"@fr.\n\n # Pronouns\n\n :pronounsForm a ui:Group; ui:weight 0; ui:parts ( :pronounsPrompt :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n    :pronounsPrompt a ui:Comment; ui:contents  \"What are your pronouns?\" .\n\n    :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n        ui:size 10; ui:label \"he/she/they...\" .\n    :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n        ui:size 10; ui:label \"him/her/them...\" .\n    :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n        ui:size 10; ui:label \"his/hers/theirs...\" .\n\n  # Curriculum Vitae: membership of organizations\n\n  :CVHeading a ui:Heading; ui:contents \"Public Curriculum Vitae\".\n  :CVPrompt a ui:Comment; ui:contents  \"What organizations have you been involved with?\" .\n\n    :CVGroup a ui:Group; ui:weight 1; ui:parts ( :CVHeading :CVPrompt :involvementWithOrganizationsForm ).\n\n\n  solid:Role a rdfs:Class; owl:oneOf ( solid:CurrentRole solid:FormerRole solid:FutureRole ). # Future Role too?\n\n  org:member owl:inverse [ ui:label \"involvement with company, org etc\" ]. # timelimited involvement\n\n  :involvementWithOrganizationsForm a ui:Multiple;\n      ui:label \"Involvement with Organization\";\n      ui:property org:member; ui:reverse true; # link back from role to member\n      ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n      ui:part :RoleMembershipForm.\n\n# This is a big important form for one of a series of roles in the list.\n\n  :RoleMembershipForm a ui:Group; ui:weight 3; ui:parts ( :MembershipFormHeading :roleNameField\n        :escoOccupationField :orgField :RoleClassifier :RoleDatesForm :RoleDescriptionForm).\n\n     :MembershipFormHeading a ui:Heading; ui:contents \"Details of this role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n     :orgField a ui:Choice; ui:label \"Organization\"@en, \"Organization\"@fr;\n          ui:canMintNew true; ui:use :OrganizationCreationForm ;\n          ui:property org:organization;\n          ui:from vcard:Organization .\n     :roleNameField a ui:SingleLineTextField; ui:property vcard:role; ui:size 60 .\n\n    :escoOccupationField a ui:AutocompleteField;\n          ui:label \"occupation\"; ui:size 60;\n          ui:property org:role;\n          ui:dataSource :ESCO_Occupation_DataSource;\n           ui:targetClass schema:Occupation .\n\n         :ESCO_Occupation_DataSource a ui:DataSource;\n            schema:name \"ESCO\";\n            ui:targetClass schema:Occupation ;\n            schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n            ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n     :instituteIdentityField a ui:AutocompleteField; ui:label \"in wikidata\";\n          ui:size 60;\n          ui:property solid:publicId; ui:dataSource :WikidataOnOrganizations.\n\n     :WikidataOnOrganizations a ui:DataSource ;\n       schema:name \"Wikidata\";\n       ui:endpoint \"https://query.wikidata.org/sparql\" ;\n       ui:targetClass  <http://www.wikidata.org/entity/Q43229>; # Use if nothing else\n       ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n       WHERE {\n         ?klass wdt:P279* $(targetClass) .\n         ?subject wdt:P31 ?klass .\n         ?subject rdfs:label ?name.\n         FILTER regex(?name, \"$(name)\", \"i\")\n       } LIMIT $(limit) \"\"\" .\n\n      :WikidataOnOrganizations ui:classMap\n       [ ui:internalClass schema:Corporation; ui:externalClass <http://www.wikidata.org/entity/Q6881511>], #Enterprise is for-profit\n       [ ui:internalClass schema:EducationalOrganization; ui:externalClass <http://www.wikidata.org/entity/Q178706>], #insitution\n       [ ui:internalClass schema:ResearchOrganization; ui:externalClass <http://www.wikidata.org/entity/Q31855>], # reearch insitutie\n       [ ui:internalClass schema:GovernmentOrganization; ui:externalClass <http://www.wikidata.org/entity/Q327333>], #government agency\n       [ ui:internalClass schema:MedicalOrganization; ui:externalClass <http://www.wikidata.org/entity/Q4287745>],\n       [ ui:internalClass schema:MusicGroup; ui:externalClass <http://www.wikidata.org/entity/Q32178211>], #music organization\n       [ ui:internalClass schema:NGO; ui:externalClass <http://www.wikidata.org/entity/Q163740>], #nonprofit organization @@\n       [ ui:internalClass schema:Occupation; ui:externalClass <http://www.wikidata.org/entity/Q28640>], # superclass: Profession\n       [ ui:internalClass schema:Organization; ui:externalClass <http://www.wikidata.org/entity/Q43229>], # Superclass; Organization\n       [ ui:internalClass schema:Project; ui:externalClass <http://www.wikidata.org/entity/Q170584>],\n       [ ui:internalClass schema:SportsOrganization; ui:externalClass <http://www.wikidata.org/entity/Q4438121>] .\n\n\n# eposodes in one's career - Roles\n\nsolid:Role owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) .\nsolid:PastRole a rdfs:Class; rdfs:label \"former role\"@en, \"ancien r\xF4le\"@fr, \"vergangene Rolle\"@de, \"rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"current role\"@en, \"r\xF4le actuel\"@fr, \"momentane Rolle\"@de , \"rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"future role\"@en, \"r\xF4le \xE0 venir\"@fr, \"zuk\xFCnftige Rolle\"@de, \"rol futuro\"@es .\n\n:RoleDatesGroup a ui:Group; ui:weight 0; ui:parts ( :RoleClassifier :RoleDatesForm ) .\n  :RoleClassifier a ui:Classifier; ui:label \"What sort of role?\"@en;\n      ui:category solid:Role .\n\n  :RoleDatesForm a ui:Options; ui:dependingOn rdf:type; ui:case\n     [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n     [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n     [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n      :StartDateForm a ui:DateField; ui:label \"start\"@en,\"d\xE9but\"@fr;\n          ui:property schema:startDate .\n      :TwoDateForm a ui:Group; ui:weight 0; ui:parts ( :StartDateForm :EndDateForm ) .\n      :EndDateForm a ui:DateField; ui:label \"end\"@en,\"fin\"@fr;\n          ui:property schema:endDate .\n\n:RoleDescriptionForm a ui:MultiLineTextField; ui:property schema:description;\n  ui:label \"Describe your role\" .\n\n# Organizations\n\n vcard:Organization ui:creationForm :OrganizationCreationForm  .\n\n# Ontology data to drive the classifier\n\nsolid:InterestingOrganization owl:disjointUnionOf  (\n# Airline - a Corporation\n# Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization  # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n# FundingScheme - eh?\n schema:GovernmentOrganization\n# LibrarySystem\n# LocalBusiness - Corporation\n# MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\nschema:PerformingGroup # a band\nschema:Project # like Solid\nschema:SportsOrganization # a Team\nsolid:OtherOrganization\n ) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\n   \"organizaci\xF3n de investigaci\xF3n\"@es, \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n  :OrganizationCreationForm a ui:Form; schema:name \"Form for editing an organization using public data\" ;\n    ui:parts ( :OrgClassifier :OrgSwitch   :OrganizationNameField :homePageURIField  ) .\n\n\n :OrgClassifier a ui:Classifier; ui:label \"What sort of organization?\"@en;\n    ui:category solid:InterestingOrganization .\n\n  :OrganizationNameField\n      a ui:SingleLineTextField ;\n      ui:label \"Organization Name\";\n      ui:maxLength \"200\" ;\n      ui:property schema:name ;\n      ui:size    80 .\n\n   :homePageURIField a ui:NamedNodeURIField; ui:size 80;\n      ui:label \"Home page URI\"@en;\n      ui:property  schema:uri . # @@ ??\n\n    :initituteTypeField a ui:Classifier;\n    ui:label \"What sort of organization\";\n    ui:category solid:InterestingOrganization .\n\n#  Depending on the type of org, chose a different form\n\n :OrgSwitch a ui:Options; ui:dependingOn rdf:type;\n   ui:case\n   [ ui:for schema:Corporation; ui:use :CorporationForm ],\n   [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n   [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n   [ ui:for schema:Project; ui:use :ProjectForm ],\n   [ ui:for schema:NGO; ui:use :NGOForm ],\n   [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n   [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n   [ ui:for :SportsOrganization; ui:use :SportsOrganizationForm ],\n   [ ui:for solid:OtherOrganization; ui:use :OtherOrganizationForm ].\n\n\n  :CorporationForm a ui:Group; ui:weight 0; ui:parts ( :CorporationPrompt :CorporationAutocomplete ) .\n\n      :CorporationPrompt a ui:Comment; ui:contents \"Which corporation?\".\n\n      :CorporationAutocomplete a ui:AutocompleteField;\n      a ui:AutocompleteField; ui:label \"Corporation in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n      :WikidataInstancesByName a ui:DataSource ;\n        schema:name \"Wikidata instances by name\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n        WHERE {\n          ?klass wdt:P279* $(targetClass) .\n          ?subject wdt:P31 ?klass .\n          ?subject rdfs:label ?name.\n          FILTER regex(?name, \"$(name)\", \"i\")\n        } LIMIT $(limit) \"\"\" ;\n\n        # Note this form of the query is very experimental\n        ui:searchByName [   ui:construct { ?subject schema:name ?name } ;\n                            ui:where { ?klass wdt:P279 ?targetClass .\n                                       ?subject wdt:P31 ?klass; rdfs:label ?name .\n                                     };\n                        ].\n\n  :GovernmentOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :GovernmentOrganizationPrompt :GovernmentOrganizationAutocomplete ) .\n\n      :GovernmentOrganizationPrompt a ui:Comment; ui:contents \"Which GovernmentOrganization?\".\n\n      :GovernmentOrganizationAutocomplete\n      a ui:AutocompleteField; ui:label \"GovernmentOrganization in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n    :EducationalOrganizationForm a ui:Group; ui:weight 1; ui:parts ( :EducationalOrganizationPrompt :EducationalOrganizationAutocomplete ) .\n\n        :EducationalOrganizationPrompt a ui:Comment; ui:contents \"Which Educational Organization?\".\n\n        :EducationalOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Educational Organization in wikidata\";\n             ui:size 60;\n             ui:targetClass  <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n             ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n    :ResearchOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :ResearchOrganizationPrompt :ResearchOrganizationAutocomplete ) .\n\n        :ResearchOrganizationPrompt a ui:Comment; ui:contents \"Which Research Organization?\".\n\n        :ResearchOrganizationAutocomplete\n        a ui:AutocompleteField; ui:label \"Research Insitute in wikidata\";\n             ui:size 60;\n             ui:targetClass  <http://www.wikidata.org/entity/Q31855>; # research institute\n             ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n  :NGOForm a ui:Group; ui:weight 0; ui:parts ( :NGOPrompt :NGOAutocomplete ) .\n\n      :NGOPrompt a ui:Comment; ui:contents \"Which NGO?\".\n\n      :NGOAutocomplete\n      a ui:AutocompleteField; ui:label \"NGO in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n  :PerformingGroupForm a ui:Group; ui:weight 0; ui:parts ( :PerformingGroupPrompt :PerformingGroupAutocomplete ) .\n\n      :PerformingGroupPrompt a ui:Comment; ui:contents \"Which PerformingGroup?\".\n\n      :PerformingGroupAutocomplete\n      a ui:AutocompleteField; ui:label \"PerformingGroup in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q32178211>; # Music Org\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n\n  :ProjectForm a ui:Group; ui:weight 0; ui:parts ( :ProjectPrompt :ProjectAutocomplete ) . #  :ProjectAutocomplete - no: supress, as not in WD\n\n      :ProjectPrompt a ui:Comment; ui:contents \"Which Project?\".\n\n      :ProjectAutocomplete\n      a ui:AutocompleteField; ui:label \"Project in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q170584>; # Project\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n  :SportsOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :SportsOrganizationPrompt :SportsOrganizationAutocomplete ) .\n\n      :SportsOrganizationPrompt a ui:Comment; ui:contents \"Which Sports Organization?\".\n\n      :SportsOrganizationAutocomplete\n      a ui:AutocompleteField; ui:label \"SportsOrganization in wikidata\";\n           ui:size 60;\n           ui:targetClass  <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n           ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n   :OtherOrganizationForm a ui:Group; ui:weight 0; ui:parts ( :OrganizationNameField :homePageURIField ) .\n\n  #################### Skills\n\n  :SkillsPrompt a ui:Comment; ui:contents  \"Skills?\" .\n\n  :SkillsForm a ui:Multiple;\n      ui:label \"Skills\";\n      ui:property schema:skills;\n      ui:ordered false; # Allow reader to order skills\n      ui:part :SkillForm.\n\n  :SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n        # :skillNameField a ui:SingleLineTextField; ui:property vcard:role; ui:size 30 .\n\n        :escoSkillField a ui:AutocompleteField;\n              ui:label \"skill\"; ui:size 30;\n              ui:property solid:publicId;\n              ui:dataSource :ESCO_Skill_DataSource;\n               ui:targetClass schema:Skill .\n\n        :ESCO_Skill_DataSource a ui:DataSource;\n           schema:name \"ESCO Skill\";\n           ui:targetClass esco:Skill ;\n           schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n           ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n# Language\n\n:LanguagesPrompt a ui:Comment; ui:contents  \"Languages?\" .\n\n:LanguagesForm a ui:Multiple;\n    ui:label \"Languages\";\n    ui:property schema:knowsLanguage; # @@@\n    ui:ordered true; # Allow user to order languages most important first.\n    ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n    :WikidataLanguageField a ui:AutocompleteField;\n          ui:label \"Language\"; ui:size 30;\n          ui:property solid:publicId; # @@\n          ui:dataSource :WikidataLanguageDataSource;\n           ui:targetClass schema:Language .\n\n    :WikidataLanguageDataSource\n        schema:name \"Wikidata languages\";\n        ui:endpoint \"https://query.wikidata.org/sparql\" ;\n        ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n        # Add this to any literal string returned as ?subject\n\n         ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\nWHERE\n{ ?item wdt:P305 ?subject .\n  OPTIONAL {?item rdfs:label ?name}\n  OPTIONAL {?item wdt:P1705 ?name}\n  FILTER regex(?name, \"$(name)\", \"i\")\n  FILTER regex(?subject, \"^..$\", \"i\")\n}\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }\n\n########### Social Media - other accounts\n#\n# Twitter, Linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:SocialsPrompt a ui:Heading; ui:contents  \"Social Media etc?\" .\n:SocialsPrompt a ui:Comment; ui:contents  \"Link to accounts in social media sites, etc\" .\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account;\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; ui:weight 1; ui:parts ( :AccountField :AccountIdField ).\n\n:AccountField a ui:Classifier; ui:label \"What sort of account?\"@en;\n      ui:multiple false ; \n      ui:category foaf:Account  .\n\n:AccountIdField a ui:Options . \n\n  :AccountIdField a ui:Options; ui:dependingOn rdf:type; ui:case\n     [ ui:for soc:BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for soc:DiggAccount; ui:use :DiggIdField],\n     [ ui:for soc:FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for soc:GithubAccount; ui:use :GithubIdField ],\n     [ ui:for soc:InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for soc:LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for soc:MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for soc:MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for soc:MediumAccount; ui:use :MediumIdField ],\n     [ ui:for soc:NostrAccount; ui:use :NostrIdField ],\n     [ ui:for soc:OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for soc:PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for soc:RedditAccount; ui:use :RedditIdField ],\n     [ ui:for soc:StravaAccount; ui:use :StravaIdField ],\n     [ ui:for soc:SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for soc:TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for soc:TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for soc:TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for soc:OtherAccount; ui:use :OtherIdForm  ] .\n\n  :BlueSkyIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Bluesky Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :DiggIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Digg Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :FacebookIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Facebook Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :GithubIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Github Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :InstagramIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Instagram Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :LinkedInIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Linked In Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MastodonIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Mastodon (Activity Pub) Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MatrixIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Matrix Username\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :MediumIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Medium Username\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    40 .\n\n  :NostrIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Nostr public key\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\";  # @@\n      ui:size    70 .\n\n  :OrcidIdField\n      a ui:SingleLineTextField ;\n      ui:label \"ORCiD id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :PinterestIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Pinterest id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :RedditIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Reddit Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :StravaIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Strava Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :SnapchatIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Snapchat Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TiktokIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Tiktok Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TumblrIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Tumblr user name\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n  :TwitterIdField\n      a ui:SingleLineTextField ;\n      ui:label \"Twitter Id\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:accountName ; \n      ui:pattern \"@[a-z0-9A-Z_-]*\";  # @@\n      ui:size    40 .\n\n# an unknown SN account needs more info\n\n  :OtherIdForm a ui:Group; ui:weight 0; ui:parts ( :OtherIdField :OtherIconField :OtherLabelield ).\n\n  :OtherIdField\n      a ui:NamedNodeURIField ;\n      ui:label \"URL of account to link to\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:homepage ; \n      ui:size    60 .\n\n  :OtherLabelield\n      a ui:SingleLineTextField ;\n      ui:label \"Label\";\n      ui:maxLength \"200\" ;\n      ui:property rdfs:label ; \n      ui:size    40 .\n\n  :OtherIconField\n      a ui:NamedNodeURIField ;\n      ui:label \"URL of icon to display\";\n      ui:maxLength \"200\" ;\n      ui:property foaf:icon ;\n      ui:size    60 .\n\n\n\n# Subclass definitions for foaf:Account (embedded for UI category selector)\nsoc:BlueSkyAccount rdfs:subClassOf foaf:Account; rdfs:label \"Bluesky\" .\nsoc:Digg rdfs:subClassOf foaf:Account; rdfs:label \"Digg\" .\nsoc:FacebookAccount rdfs:subClassOf foaf:Account; rdfs:label \"Facebook\" .\nsoc:GithubAccount rdfs:subClassOf foaf:Account; rdfs:label \"Github\" .\nsoc:InstagramAccount rdfs:subClassOf foaf:Account; rdfs:label \"Instagram\" .\nsoc:LinkedInAccount rdfs:subClassOf foaf:Account; rdfs:label \"Linked In\" .\nsoc:MastodonAccount rdfs:subClassOf foaf:Account; rdfs:label \"Mastodon\" .\nsoc:MatrixAccount rdfs:subClassOf foaf:Account; rdfs:label \"Matrix\" .\nsoc:MediumAccount rdfs:subClassOf foaf:Account; rdfs:label \"Medium\" .\nsoc:NostrAccount rdfs:subClassOf foaf:Account; rdfs:label \"Nostr\" .\nsoc:OrcidAccount rdfs:subClassOf foaf:Account; rdfs:label \"ORCiD\" .\nsoc:PinterestAccount rdfs:subClassOf foaf:Account; rdfs:label \"Pinterest\" .\nsoc:RedditAccount rdfs:subClassOf foaf:Account; rdfs:label \"Reddit\" .\nsoc:SnapchatAccount rdfs:subClassOf foaf:Account; rdfs:label \"Snapchat\" .\nsoc:StravaAccount rdfs:subClassOf foaf:Account; rdfs:label \"Strava\" .\nsoc:TiktokAccount rdfs:subClassOf foaf:Account; rdfs:label \"TikTok\" .\nsoc:TumblrAccount rdfs:subClassOf foaf:Account; rdfs:label \"Tumblr\" .\nsoc:TwitterAccount rdfs:subClassOf foaf:Account; rdfs:label \"X (formerly Twitter)\" .\nsoc:OtherAccount rdfs:subClassOf foaf:Account; rdfs:label \"Other\" .\n\n\n\n# ENDS\n";
 const DEFAULT_ICON_URI = _solidUi.icons.iconBase + 'noun_10636_grey.svg'; // grey disc
 
 function loadProfileForm(store) {
@@ -74,9 +74,10 @@ function presentSocial(subject, store) {
   if (!accountThings) return {
     accounts: []
   }; // could have been undefined
-  console.log('Social: accountThings', accountThings);
+  //console.log('Social: accountThings', accountThings)
   const accounts = accountThings.map(ac => accountAsObject(ac));
-  console.log('Social: account objects', accounts);
+  //console.log('Social: account objects', accounts)
+
   return {
     accounts
   };

package/lib/StuffCard.d.ts

@@ -1,6 +1,10 @@
 import { TemplateResult } from 'lit-html';
 import { NamedNode } from 'rdflib';
 import { DataBrowserContext } from 'pane-registry';
+import './styles/StuffCard.css';
 import { ProfilePresentation } from './presenter';
 export declare const StuffCard: (profileBasics: ProfilePresentation, context: DataBrowserContext, subject: NamedNode, stuffData: any) => TemplateResult;
+export declare function renderThingAsDOM(thing: any, dom: any): any;
+export declare function renderThing(thing: any, dom: any): any;
+export declare function renderThings(things: any, dom: any): any;
 //# sourceMappingURL=StuffCard.d.ts.map

package/lib/StuffCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StuffCard.d.ts","sourceRoot":"","sources":["../src/StuffCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAWlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAajD,eAAO,MAAM,SAAS,GAAI,eAAe,mBAAmB,EAC1D,SAAS,kBAAkB,EAC3B,SAAS,SAAS,EAAE,cAAS,KAAG,cAsBjC,CAAA"}
+{"version":3,"file":"StuffCard.d.ts","sourceRoot":"","sources":["../src/StuffCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAGjD,eAAO,MAAM,SAAS,GAAI,eAAe,mBAAmB,EAC1D,SAAS,kBAAkB,EAC3B,SAAS,SAAS,EAAE,cAAS,KAAG,cAuBjC,CAAA;AAED,wBAAgB,gBAAgB,CAAE,KAAK,KAAA,EAAE,GAAG,KAAA,OAK3C;AAED,wBAAgB,WAAW,CAAE,KAAK,KAAA,EAAE,GAAG,KAAA,OAEtC;AAED,wBAAgB,YAAY,CAAC,MAAM,KAAA,EAAE,GAAG,KAAA,OAGvC"}