Merge branch 'main' of https://github.com/solidos/profile-pane

Author: timbl

package-lock.json

@@ -11,9 +11,7 @@ import { ProfilePresentation } from "./presenter";
 import { CVPresentation } from "./CVPresenter";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { card } from "./baseStyles";
-import { icons } from "solid-ui";
 
-const editButtonURI = icons.iconBase + 'noun_253504.svg'
 
 const styles = {
   image: styleMap(fullWidth()),
@@ -38,21 +36,23 @@ export const CVCard = (
 
   if(renderRoles(rolesByType["FutureRole"]) || renderRoles(rolesByType["CurrentRole"]) || renderRoles(rolesByType["PastRole"]) || renderSkills(skills) || renderLanguages(languages)){
   return html`
-  <div data-testid="curriculum-vitae" style="${styles.card}">
-    <div style=${styles.info}>
-      <h3 style=${nameStyle}>Bio</h3>
-      <div style=${styles.info}>${renderRoles(rolesByType["FutureRole"])}</div>
-      <hr />
-      <div style=${styles.info}>${renderRoles(rolesByType["CurrentRole"])}</div>
-      <hr />
-      <div style=${styles.info}>${renderRoles(rolesByType["PastRole"])}</div>
-      <hr />
-      <h3 style=${nameStyle}>Skills</h3>
-      <div style=${styles.info}>${renderSkills(skills)}</div>
-      <h3 style=${nameStyle}>Languages</h3>
-      <div style=${styles.info}>${renderLanguages(languages)}</div>
-          <div style=${styles.tools}>${renderEditButton()}</div>
-    </div>
+  <div>
+    <div data-testid="curriculum-vitae" style="${styles.card}">
+      <div style=${styles.info}>
+        <h3 style=${nameStyle}>Bio</h3>
+        <div style=${styles.info}>${renderRoles(rolesByType["FutureRole"])}</div>
+        <hr />
+        <div style=${styles.info}>${renderRoles(rolesByType["CurrentRole"])}</div>
+        <hr />
+        <div style=${styles.info}>${renderRoles(rolesByType["PastRole"])}</div>
+        <hr />
+        <h3 style=${nameStyle}>Skills</h3>
+        <div style=${styles.info}>${renderSkills(skills)}</div>
+        <h3 style=${nameStyle}>Languages</h3>
+        <div style=${styles.info}>${renderLanguages(languages)}</div>
+            
+      </div>
+      </div>
     </div>
   `}
   return html``
@@ -111,11 +111,6 @@ function strToUpperCase(str) {
   return '';
 }
 
-function renderEditButton () {
-    return html `<button type="button" class="ProfilePaneCVEditButton">
-    <img  src="${editButtonURI}">
-    Edit</button>`
-}
 
 // ends
 

src/CVCard.ts

@@ -19,6 +19,18 @@ import { StuffCard } from "./StuffCard";
 import { QRCodeCard } from "./QRCodeCard";
 import { addMeToYourFriendsDiv } from "./addMeToYourFriends";
 
+// The edit button switches to the editor pane
+/*
+function renderEditButton (subject) {
+  return 
+    authn.currentUser() && authn.currentUser().sameTerm(subject) ?
+        html `<button type="button" class="ProfilePaneCVEditButton">
+        <img  src="${editButtonURI}">
+        Edit</button>`
+    : html``;
+}
+*/
+
 export async function ProfileView (
   subject: NamedNode,
   context: DataBrowserContext
@@ -40,6 +52,8 @@ export async function ProfileView (
     }),
   };
 
+  // was: <div style=${styles.card}>${renderEditButton(subject)}</div>
+
   return html`
     <div style="${styles.grid}">
       <div>
@@ -53,8 +67,9 @@ export async function ProfileView (
         ${StuffCard(profileBasics, context, subject, stuffData)}
         ${FriendList(profileBasics, subject, context)}
       <div style="${styles.chat}">${ChatWithMe(subject, context)}</div>
-      <div data-testid="qrcode-display" style="${styles.card}">
+      <div data-testid="qrcode-display" class="qrcode-display" style="${styles.card}">
         ${QRCodeCard(profileBasics, subject)}
+         
       </div>
     </div>
   `;

src/ProfileView.ts

@@ -53,9 +53,11 @@ export const QRCodeCard = (
   // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
 
   return html`
-    <div style=${styles.info}>
+  <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>
   `;
 };

src/QRCodeCard.ts

@@ -37,13 +37,15 @@ export const SocialCard = (
   if(accounts.length){
 
   return html`
-  <div data-testid="social-media" style="${styles.card}">
-    <div style=${styles.info + "margin: auto;"}>
-      <h3 style=${nameStyle}>Follow me on</h3>
+  <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 style=${styles.info}>${renderAccounts(accounts)}</div>
+      </div>
     </div>
+  </div>
   `}
   return html``
 }

src/SocialCard.ts

@@ -37,15 +37,17 @@ export const StuffCard = (profileBasics: ProfilePresentation,
   });
   // return renderThings(stuff)
   return html`
-  <div data-testid="stuff" style="${styles.card}">
-    <div style=${styles.info}>
-      <h3 style=${nameStyle}>Stuff</h3>
+  <div>
+    <div data-testid="stuff" style="${styles.card}">
+      <div style=${styles.info}>
+        <h3 style=${nameStyle}>Stuff</h3>
 
-      <div style=${styles.info}><table data-testid="stuffTable">${renderThings(stuff)}</table></div>
-      <hr />
+        <div style=${styles.info}><table data-testid="stuffTable">${renderThings(stuff)}</table></div>
+        <hr />
 
+      </div>
     </div>
-    </div>
+  </div>
 `
 }
 
@@ -61,7 +63,7 @@ function renderThing (thing, dom) {
 }
 
 function renderThings(things) {
-    console.log('Renderthings: ', things)
+    // console.log('Renderthings: ', things)
     if (things.length === 0) return html``;
     return html`${renderThing(things[0], dom)}${things.length > 1 ? renderThings(things.slice(1)) : html``}`
 }

src/StuffCard.ts

@@ -38,14 +38,14 @@ export async function presentStuff(
 ): Promise<StuffPresentation> {
 
  const scopedItems = await getScopedAppInstances(null, subject)
- console.log('scopedItems', scopedItems)
+ // console.log('scopedItems', scopedItems)
 
  const stuff = scopedItems.map(item => { // work with old or new solid-logic
    const icon = getIconForClass((item as any).type || ns.rdf('Resource'))  // eslint-disable-line
    const href = item.instance.uri
    const name = utils.label(item.instance)
    const instance = item.instance
-   console.log(`   href=${href} name=${name} icon=${icon}`)
+   // console.log(`   href=${href} name=${name} icon=${icon}`)
    return { href, name, icon, instance }
  })
 

src/StuffPresenter.ts

@@ -3,7 +3,7 @@
  */
 
 export const responsiveGrid = () => ({
-  "--auto-grid-min-size": "20rem",
+  "--auto-grid-min-size": "30rem", // was 20rem but allowed 2 cols on phone
   display: "grid",
   "grid-template-columns":
     "repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr))",

src/baseStyles.ts

@@ -423,14 +423,17 @@ WHERE
      [ ui:for soc:GithubAccount; ui:use :GithubIdField ],
      [ ui:for soc:InstagramAccount; ui:use :InstagramIdField ],
      [ ui:for soc:LinkedInAccount; ui:use :LinkedInIdField ],
-     [ ui:for soc:NostrAccount; ui:use :NostrIdField ],
      [ ui:for soc:MastodonAccount; ui:use :MastodonIdField ],
      [ ui:for soc:MatrixAccount; ui:use :MatrixIdField ],
      [ ui:for soc:MediumAccount; ui:use :MediumIdField ],
+     [ ui:for soc:NostrAccount; ui:use :NostrIdField ],
+     [ ui:for soc:OrcidAccount; ui:use :OrcidIdField ],
      [ ui:for soc:PinterestAccount; ui:use :PinterestIdField ],
      [ ui:for soc:RedditAccount; ui:use :RedditIdField ],
+     [ ui:for soc:StravaAccount; ui:use :StravaIdField ],
      [ ui:for soc:SnapchatAccount; ui:use :SnapchatIdField ],
      [ ui:for soc:TiktokAccount; ui:use :TiktokIdField ],
+     [ ui:for soc:TumblrAccount; ui:use :TumblrIdField ],
      [ ui:for soc:TwitterAccount; ui:use :TwitterIdField ],
      [ ui:for soc:OtherAccount; ui:use :OtherIdForm  ] .
 
@@ -506,6 +509,14 @@ WHERE
       ui:pattern "[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*";  # @@
       ui:size    70 .
 
+  :OrcidIdField
+      a ui:SingleLineTextField ;
+      ui:label "ORCiD id";
+      ui:maxLength "200" ;
+      ui:property foaf:accountName ; 
+      ui:pattern "[a-z0-9A-Z_-]*";  # @@
+      ui:size    40 .
+
   :PinterestIdField
       a ui:SingleLineTextField ;
       ui:label "Pinterest id";
@@ -522,6 +533,14 @@ WHERE
       ui:pattern "[a-z0-9A-Z_-]*";  # @@
       ui:size    40 .
 
+  :StravaIdField
+      a ui:SingleLineTextField ;
+      ui:label "Strava Id";
+      ui:maxLength "200" ;
+      ui:property foaf:accountName ; 
+      ui:pattern "[a-z0-9A-Z_-]*";  # @@
+      ui:size    40 .
+
   :SnapchatIdField
       a ui:SingleLineTextField ;
       ui:label "Snapchat Id";
@@ -538,6 +557,14 @@ WHERE
       ui:pattern "@[a-z0-9A-Z_-]*";  # @@
       ui:size    40 .
 
+  :TumblrIdField
+      a ui:SingleLineTextField ;
+      ui:label "Tumblr user name";
+      ui:maxLength "200" ;
+      ui:property foaf:accountName ; 
+      ui:pattern "@[a-z0-9A-Z_-]*";  # @@
+      ui:size    40 .
+
   :TwitterIdField
       a ui:SingleLineTextField ;
       ui:label "Twitter Id";
@@ -604,8 +631,8 @@ WHERE
 foaf:Account a rdfs:Class;
     rdfs:label "Online Account Provider";
     owl:disjointUnionOf ( :BlueSkyAccount :FacebookAccount :GithubAccount :InstagramAccount
-    :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount :PinterestAccount
-    :RedditAccount :SnapchatAccount :TiktokAccount  :TwitterAccount :OtherAccount) .
+    :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount :OrcidAccount :PinterestAccount
+    :RedditAccount :SnapchatAccount :StravaAccount :TiktokAccount  :TumblrAccount  :TwitterAccount :OtherAccount) .
 
 :BlueSkyAccount rdfs:subClassOf foaf:Account ;
     rdfs:label "Bluesky";
@@ -665,6 +692,12 @@ foaf:Account a rdfs:Class;
     foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;
     foaf:homepage <https://nostr.net/> .
 
+:OrcidAccount rdfs:subClassOf foaf:Account ;
+    rdfs:label "ORCiD";
+    foaf:userProfilePrefix "https://orcid.org/";
+    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;
+    foaf:homepage <https://orcid.org/> .
+
 :PinterestAccount rdfs:subClassOf foaf:Account ;
     rdfs:label "Pinterest";
     foaf:userProfilePrefix "https://pin.it/";
@@ -683,12 +716,24 @@ foaf:Account a rdfs:Class;
     foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;
     foaf:homepage <https://www.snapchat.com/> .
 
+:StravaAccount rdfs:subClassOf foaf:Account ;
+    rdfs:label "Strava";
+    foaf:userProfilePrefix "https://www.strava.com/athletes/";
+    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;
+    foaf:homepage <https://strava.com/> .
+
 :TiktokAccount rdfs:subClassOf foaf:Account ;
     rdfs:label "TikTok";
     foaf:userProfilePrefix "https://www.tiktok.com/@";
     foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;
     foaf:homepage <https://www.tiktok.com/> .
 
+:TumblrAccount rdfs:subClassOf foaf:Account ;
+    rdfs:label "Tumblr";
+    foaf:userProfilePrefix "https://www.tumblr.com/";
+    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;
+    foaf:homepage <https://www.tumblr.com/> .
+
 
 :TwitterAccount rdfs:subClassOf foaf:Account ;
     rdfs:label "X (formerly Twitter)";

src/editProfilePane/wrapped-profileFormText.ts

@@ -18,6 +18,7 @@ async function loadExtendedProfile(store: LiveStore, subject: NamedNode) {
   }
 }
 
+
 const Pane = {
   global: false,
   icon: icons.iconBase + "noun_15059.svg",
@@ -38,42 +39,11 @@ const Pane = {
   },
   editor: editProfileView,                                            
   render: (subject: NamedNode, context: DataBrowserContext): HTMLElement => {
-
-    async function switchToEditor () {
-      alert('switching to editor')
-      target.innerHTML = '' // Clear
-      const newPane = editProfileView.render(subject, context)
-      const parent = target.parentNode
-      parent.removeChild(target)
-      parent.appendChild(newPane)
-    }
-    
-
     const target = context.dom.createElement("div");
     const store = context.session.store;
 
     loadExtendedProfile(store, subject).then(async () => {
       render(await ProfileView(subject, context), target)
-/*  Not currently used as personTR does itself
-      const fillIns =  Array.from(target.getElementsByClassName('fillInLater'))
-      for (const ele of fillIns) {
-        const href = ele.getAttribute('href')
-        store.fetcher.load(href).then(()=> { // async
-          const label = utils.label(store.sym(href))
-          ele.children[1].textContent =  label // Relabel
-          console.log('   ele.children[0]',   ele.children[1])
-          console.log(` Relabelled  ${href} to "${label}"`)
-        })
-      }
-      */
-      const editButtons = Array.from(target.getElementsByClassName('ProfilePaneCVEditButton'))
-      if (editButtons.length) {
-        const editButton = editButtons[0]
-        editButton.addEventListener('click', switchToEditor)
-      } else {
-        alert('No edit button')
-      }
-
       const QRCodeEles = Array.from(target.getElementsByClassName('QRCode')) // was context.dom
       if (!QRCodeEles.length) return console.error("QRCode Ele missing")
       for (const QRCodeElement of QRCodeEles as HTMLElement[]) {