Merge pull request #60 from SolidOS/socials

Add Social Network accounts to your profile

Author: timbl

Makefile

@@ -1,7 +1,8 @@
 
-# Wrap ttext files in js as text load is broken
+# Wrap text files in js as text load is broken
 
-src/editProfilePane/wrapped-profileFormText.ts : src/editProfilePane/profileFormText.ttl
-	echo "export const profileFormText = \`" > $@
-	cat src/editProfilePane/profileFormText.ttl >> $@
+src/editProfilePane/wrapped-profileFormText.ts : src/ontology/profileForm.ttl src/ontology/socialMedia.ttl 
+	echo "export const profileForm= \`" > $@
+	cat src/ontology/profileForm.ttl >> $@
+	cat src/ontology/socialMedia.ttl >> $@
 	echo '` ;' >> $@

README.md

@@ -48,3 +48,11 @@ npm run build
 ```
 
 The build is done by `tsc`, webpack is only used as dev server and not for production build.
+
+### Check before committing
+
+```
+npm run check
+```
+
+This does lint, build and test.

dev/index.ts

@@ -27,8 +27,8 @@ finishLogin();
 // https://timbl.inrupt.net/profile/card#me
 //
 // const webIdToShow = "https://angelo.veltens.org/profile/card#me";
-const webIdToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
-// const webIdToShow = "https://timbl.inrupt.net/profile/card#me";
+// const webIdToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
+const webIdToShow = "https://timbl.inrupt.net/profile/card#me";
 
 fetcher.load(webIdToShow).then(() => {
   const app = pane.render(sym(webIdToShow), context);

package-lock.json

@@ -9,7 +9,7 @@
   "main": "lib/index.js",
   "scripts": {
     "start": "webpack serve --config webpack.dev.config.js --open",
-    "build": "npm run clean && tsc",
+    "build": "make && npm run clean && tsc",
     "clean": "rm -rf lib",
     "check": "npm run lint && npm run build && npm run test",
     "test": "jest",
@@ -36,7 +36,7 @@
     "contacts-pane": "^2.6.12",
     "lit-html": "^3.1.2",
     "qrcode": "^1.5.3",
-    "solid-ui": "^2.4.33",
+    "solid-ui": "2.5",
     "validate-color": "^2.2.4"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,47 @@
+diff --git a/src/CVCard.ts b/src/CVCard.ts
+index 793e095..8e09a6b 100644
+--- a/src/CVCard.ts
++++ b/src/CVCard.ts
+@@ -1,14 +1,10 @@
+ import { html, TemplateResult } from "lit-html";
+-import { icons } from "solid-ui";
+-
+-const editButtonURI = icons.iconBase + 'noun_253504.svg'
+-
+ import {
+   fullWidth,
+   heading,
+   paddingSmall,
+   textCenter,
+-  textLeft, textRight,
++  textLeft,
+   textGray,
+ } from "./baseStyles";
+ import { ProfilePresentation } from "./presenter";
+@@ -21,7 +17,6 @@ const styles = {
+   intro: styleMap({ ...textGray(), ...textCenter() }),
+   card: styleMap(card()),
+   info: styleMap({ ...paddingSmall(), ...textLeft() }),
+-  tools: styleMap({ ...paddingSmall(), ...textRight() }),
+ };
+ 
+ export const CVCard = (
+@@ -52,7 +47,6 @@ export const CVCard = (
+       <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>
+   `}
+@@ -111,9 +105,3 @@ function strToUpperCase(str) {
+   }
+   return '';
+ }
+-
+-function renderEditButton () {
+-  return html `<button type="button" class="ProfilePaneCVEditButton">
+-  <img  src="${editButtonURI}">
+-  Edit</button>`
+-}
+\ No newline at end of file

src/0Panic.diff

@@ -0,0 +1,107 @@
+import { html, TemplateResult } from "lit-html";
+import {
+  fullWidth,
+  heading,
+  paddingSmall,
+  textCenter,
+  textLeft,
+  textGray,
+} from "./baseStyles";
+import { ProfilePresentation } from "./presenter";
+import { CVPresentation } from "./CVPresenter";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { card } from "./baseStyles";
+
+const styles = {
+  image: styleMap(fullWidth()),
+  intro: styleMap({ ...textGray(), ...textCenter() }),
+  card: styleMap(card()),
+  info: styleMap({ ...paddingSmall(), ...textLeft() }),
+};
+
+export const CVCard = (
+  profileBasics: ProfilePresentation,
+  cvData: CVPresentation
+): TemplateResult => {
+ 
+  const { rolesByType, skills, languages } = cvData;
+  
+  const nameStyle = styleMap({
+    ...heading(),
+    // "text-decoration": "underline",
+    color: profileBasics.highlightColor, // was "text-decoration-color"
+  });
+
+  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>
+    </div>
+  `}
+  return html``
+}
+
+function renderRole(role) {
+  return role
+    ? html`<div style="margin-top: 0.3em; margin-bottom: 0.3em;">
+        <b>${role.orgName}</b>
+        <span>${strToUpperCase(role.roleText)}</span>
+        <span>${role.dates}</span>   
+      </div> `
+    : html``;
+}
+
+function renderRoles(roles) {
+    if (roles[0] > "")
+      return html`${renderRole(roles[0])}${roles.length > 1 ? renderRoles(roles.slice(1)) : html``}`
+}
+
+function renderSkill(skill) {
+  return skill
+    ? html`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${skill}</p>
+      </div> `
+    : html``;
+}
+
+function renderSkills(skills) {
+  if(skills[0] > "")
+    return html`${renderSkill(strToUpperCase(skills[0]))} ${skills.length > 1 ? renderSkills(skills.slice(1)) : html``}`
+}
+
+function renderLan(language) {
+  return language
+    ? html`<div style="margin: 0.5em;">
+        <p style="text-align: center;">${language}</p>
+      </div> `
+    : html``;
+}
+
+function renderLanguages(languages) {
+  if(languages[0] > "")
+    return html`${renderLan(languages[0])}${languages.length > 1 ? renderLanguages(languages.slice(1)) : html``}`
+} 
+
+function strToUpperCase(str) {
+  if (str && str[0] > "") {
+    const strCase = str.split(' ');
+    for (let i = 0; i < strCase.length; i++) {
+      strCase[i] = strCase[i].charAt(0).toUpperCase() +
+        strCase[i].substring(1);
+    }
+    return strCase.join(' ');
+  }
+  return '';
+}

src/0SAVED-CVCard.ts

@@ -1,8 +1,4 @@
 import { html, TemplateResult } from "lit-html";
-import { icons } from "solid-ui";
-
-const editButtonURI = icons.iconBase + 'noun_253504.svg'
-
 import {
   fullWidth,
   heading,
@@ -15,6 +11,9 @@ 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()),
@@ -52,7 +51,7 @@ export const CVCard = (
       <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 style=${styles.tools}>${renderEditButton()}</div>
     </div>
     </div>
   `}
@@ -113,7 +112,10 @@ function strToUpperCase(str) {
 }
 
 function renderEditButton () {
-  return html `<button type="button" class="ProfilePaneCVEditButton">
-  <img  src="${editButtonURI}">
-  Edit</button>`
-}
+    return html `<button type="button" class="ProfilePaneCVEditButton">
+    <img  src="${editButtonURI}">
+    Edit</button>`
+}
+
+// ends
+

src/CVCard.ts

@@ -10,9 +10,11 @@ import { ChatWithMe } from "./ChatWithMe";
 import { FriendList } from "./FriendList";
 import { presentProfile } from "./presenter";
 import { presentCV } from './CVPresenter' // 20210527
+import { presentSocial } from './SocialPresenter' // 20210527
 import { presentStuff } from './StuffPresenter' // 20210527
 import { ProfileCard } from "./ProfileCard";
 import { CVCard } from "./CVCard";
+import { SocialCard } from "./SocialCard";
 import { StuffCard } from "./StuffCard";
 import { QRCodeCard } from "./QRCodeCard";
 import { addMeToYourFriendsDiv } from "./addMeToYourFriends";
@@ -23,6 +25,7 @@ export async function ProfileView (
 ): Promise <TemplateResult> {
   const profileBasics = presentProfile(subject, context.session.store as LiveStore); // rdflib rdfs type problems
   const rolesByType = presentCV (subject, context.session.store as LiveStore)
+  const accounts = presentSocial(subject, context.session.store as LiveStore)
   const stuffData = await presentStuff(subject)
   const styles = {
     grid: styleMap({
@@ -46,6 +49,7 @@ export async function ProfileView (
         </div>
       </div>
         ${CVCard(profileBasics, rolesByType)}
+        ${SocialCard(profileBasics, accounts)}
         ${StuffCard(profileBasics, context, subject, stuffData)}
         ${FriendList(profileBasics, subject, context)}
       <div style="${styles.chat}">${ChatWithMe(subject, context)}</div>

src/ProfileView.ts

@@ -0,0 +1,70 @@
+import { html, TemplateResult } from "lit-html";
+import {
+  fullWidth,
+  heading,
+  paddingSmall,
+  textCenter,
+  textRight,
+  textGray,
+} from "./baseStyles";
+import { ProfilePresentation } from "./presenter";
+import { SocialPresentation } from "./SocialPresenter";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { card } from "./baseStyles";
+
+
+const styles = {
+  image: styleMap(fullWidth()),
+  intro: styleMap({ ...textGray(), ...textCenter() }),
+  card: styleMap(card()),
+  info: styleMap({ ...paddingSmall(), ...textCenter() }),
+  tools: styleMap({ ...paddingSmall(), ...textRight() }),
+};
+
+export const SocialCard = (
+  profileBasics: ProfilePresentation,
+  SocialData: SocialPresentation
+): TemplateResult => {
+ 
+  const { accounts } = SocialData;
+  
+  const nameStyle = styleMap({
+    ...heading(),
+    // "text-decoration": "underline",
+    color: profileBasics.highlightColor, // was "text-decoration-color"
+  });
+
+  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 style=${styles.info}>${renderAccounts(accounts)}</div>
+    </div>
+    </div>
+  `}
+  return html``
+}
+
+function renderAccount(account) {
+  return account.homepage && account.name && account.icon
+    ? 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> ` 
+    : html``;
+}
+
+function renderAccounts(accounts) {
+    if (accounts.length > 0)
+      return html`${renderAccount(accounts[0])}${accounts.length > 1 ? renderAccounts(accounts.slice(1)) : html``}`
+}
+
+// ends
+