Skip to content

Commit 8eba437

Browse files
timbltimbl
authored
Merge pull request #61 from SolidOS/tumblr
Tumblr Strava and Orcid.
2 parents b88e0a4 + 2213943 commit 8eba437

14 files changed

+264
-176
lines changed

‎package-lock.json

+94-86
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/CVCard.ts

+17-22
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import { ProfilePresentation } from "./presenter";
1111
import { CVPresentation } from "./CVPresenter";
1212
import { styleMap } from "lit-html/directives/style-map.js";
1313
import { card } from "./baseStyles";
14-
import { icons } from "solid-ui";
1514

16-
const editButtonURI = icons.iconBase + 'noun_253504.svg'
1715

1816
const styles = {
1917
image: styleMap(fullWidth()),
@@ -38,21 +36,23 @@ export const CVCard = (
3836

3937
if(renderRoles(rolesByType["FutureRole"]) || renderRoles(rolesByType["CurrentRole"]) || renderRoles(rolesByType["PastRole"]) || renderSkills(skills) || renderLanguages(languages)){
4038
return html`
41-
<div data-testid="curriculum-vitae" style="${styles.card}">
42-
<div style=${styles.info}>
43-
<h3 style=${nameStyle}>Bio</h3>
44-
<div style=${styles.info}>${renderRoles(rolesByType["FutureRole"])}</div>
45-
<hr />
46-
<div style=${styles.info}>${renderRoles(rolesByType["CurrentRole"])}</div>
47-
<hr />
48-
<div style=${styles.info}>${renderRoles(rolesByType["PastRole"])}</div>
49-
<hr />
50-
<h3 style=${nameStyle}>Skills</h3>
51-
<div style=${styles.info}>${renderSkills(skills)}</div>
52-
<h3 style=${nameStyle}>Languages</h3>
53-
<div style=${styles.info}>${renderLanguages(languages)}</div>
54-
<div style=${styles.tools}>${renderEditButton()}</div>
55-
</div>
39+
<div>
40+
<div data-testid="curriculum-vitae" style="${styles.card}">
41+
<div style=${styles.info}>
42+
<h3 style=${nameStyle}>Bio</h3>
43+
<div style=${styles.info}>${renderRoles(rolesByType["FutureRole"])}</div>
44+
<hr />
45+
<div style=${styles.info}>${renderRoles(rolesByType["CurrentRole"])}</div>
46+
<hr />
47+
<div style=${styles.info}>${renderRoles(rolesByType["PastRole"])}</div>
48+
<hr />
49+
<h3 style=${nameStyle}>Skills</h3>
50+
<div style=${styles.info}>${renderSkills(skills)}</div>
51+
<h3 style=${nameStyle}>Languages</h3>
52+
<div style=${styles.info}>${renderLanguages(languages)}</div>
53+
54+
</div>
55+
</div>
5656
</div>
5757
`}
5858
return html``
@@ -111,11 +111,6 @@ function strToUpperCase(str) {
111111
return '';
112112
}
113113

114-
function renderEditButton () {
115-
return html `<button type="button" class="ProfilePaneCVEditButton">
116-
<img src="${editButtonURI}">
117-
Edit</button>`
118-
}
119114

120115
// ends
121116

‎src/ProfileView.ts

+16-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@ import { StuffCard } from "./StuffCard";
1919
import { QRCodeCard } from "./QRCodeCard";
2020
import { addMeToYourFriendsDiv } from "./addMeToYourFriends";
2121

22+
// The edit button switches to the editor pane
23+
/*
24+
function renderEditButton (subject) {
25+
return
26+
authn.currentUser() && authn.currentUser().sameTerm(subject) ?
27+
html `<button type="button" class="ProfilePaneCVEditButton">
28+
<img src="${editButtonURI}">
29+
Edit</button>`
30+
: html``;
31+
}
32+
*/
33+
2234
export async function ProfileView (
2335
subject: NamedNode,
2436
context: DataBrowserContext
@@ -40,6 +52,8 @@ export async function ProfileView (
4052
}),
4153
};
4254

55+
// was: <div style=${styles.card}>${renderEditButton(subject)}</div>
56+
4357
return html`
4458
<div style="${styles.grid}">
4559
<div>
@@ -53,8 +67,9 @@ export async function ProfileView (
5367
${StuffCard(profileBasics, context, subject, stuffData)}
5468
${FriendList(profileBasics, subject, context)}
5569
<div style="${styles.chat}">${ChatWithMe(subject, context)}</div>
56-
<div data-testid="qrcode-display" style="${styles.card}">
70+
<div data-testid="qrcode-display" class="qrcode-display" style="${styles.card}">
5771
${QRCodeCard(profileBasics, subject)}
72+
5873
</div>
5974
</div>
6075
`;

‎src/QRCodeCard.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ export const QRCodeCard = (
5353
// console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
5454

5555
return html`
56-
<div style=${styles.info}>
56+
<div>
57+
<div style=${styles.card}>
5758
<h3 style=${nameStyle}>${profileBasics.name}</h3>
5859
<div class="QRCode" style="${qrCodeCanvasStyle}" data-value="${vCard}" highlightColor="${highlightColor}" backgroundColor="${backgroundColor}"></div>
5960
</div>
61+
</div>
6062
`;
6163
};

‎src/SocialCard.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ export const SocialCard = (
3737
if(accounts.length){
3838

3939
return html`
40-
<div data-testid="social-media" style="${styles.card}">
41-
<div style=${styles.info + "margin: auto;"}>
42-
<h3 style=${nameStyle}>Follow me on</h3>
40+
<div>
41+
<div data-testid="social-media" style="${styles.card}">
42+
<div style=${styles.info + "margin: auto;"}>
43+
<h3 style=${nameStyle}>Follow me on</h3>
4344
44-
<div style=${styles.info}>${renderAccounts(accounts)}</div>
45-
</div>
45+
<div style=${styles.info}>${renderAccounts(accounts)}</div>
46+
</div>
4647
</div>
48+
</div>
4749
`}
4850
return html``
4951
}

‎src/StuffCard.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,17 @@ export const StuffCard = (profileBasics: ProfilePresentation,
3737
});
3838
// return renderThings(stuff)
3939
return html`
40-
<div data-testid="stuff" style="${styles.card}">
41-
<div style=${styles.info}>
42-
<h3 style=${nameStyle}>Stuff</h3>
40+
<div>
41+
<div data-testid="stuff" style="${styles.card}">
42+
<div style=${styles.info}>
43+
<h3 style=${nameStyle}>Stuff</h3>
4344
44-
<div style=${styles.info}><table data-testid="stuffTable">${renderThings(stuff)}</table></div>
45-
<hr />
45+
<div style=${styles.info}><table data-testid="stuffTable">${renderThings(stuff)}</table></div>
46+
<hr />
4647
48+
</div>
4749
</div>
48-
</div>
50+
</div>
4951
`
5052
}
5153

@@ -61,7 +63,7 @@ function renderThing (thing, dom) {
6163
}
6264

6365
function renderThings(things) {
64-
console.log('Renderthings: ', things)
66+
// console.log('Renderthings: ', things)
6567
if (things.length === 0) return html``;
6668
return html`${renderThing(things[0], dom)}${things.length > 1 ? renderThings(things.slice(1)) : html``}`
6769
}

‎src/StuffPresenter.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ export async function presentStuff(
3838
): Promise<StuffPresentation> {
3939

4040
const scopedItems = await getScopedAppInstances(null, subject)
41-
console.log('scopedItems', scopedItems)
41+
// console.log('scopedItems', scopedItems)
4242

4343
const stuff = scopedItems.map(item => { // work with old or new solid-logic
4444
const icon = getIconForClass((item as any).type || ns.rdf('Resource')) // eslint-disable-line
4545
const href = item.instance.uri
4646
const name = utils.label(item.instance)
4747
const instance = item.instance
48-
console.log(` href=${href} name=${name} icon=${icon}`)
48+
// console.log(` href=${href} name=${name} icon=${icon}`)
4949
return { href, name, icon, instance }
5050
})
5151

‎src/baseStyles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

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

‎src/editProfilePane/wrapped-profileFormText.ts

+48-3
Original file line numberDiff line numberDiff line change
@@ -423,14 +423,17 @@ WHERE
423423
[ ui:for soc:GithubAccount; ui:use :GithubIdField ],
424424
[ ui:for soc:InstagramAccount; ui:use :InstagramIdField ],
425425
[ ui:for soc:LinkedInAccount; ui:use :LinkedInIdField ],
426-
[ ui:for soc:NostrAccount; ui:use :NostrIdField ],
427426
[ ui:for soc:MastodonAccount; ui:use :MastodonIdField ],
428427
[ ui:for soc:MatrixAccount; ui:use :MatrixIdField ],
429428
[ ui:for soc:MediumAccount; ui:use :MediumIdField ],
429+
[ ui:for soc:NostrAccount; ui:use :NostrIdField ],
430+
[ ui:for soc:OrcidAccount; ui:use :OrcidIdField ],
430431
[ ui:for soc:PinterestAccount; ui:use :PinterestIdField ],
431432
[ ui:for soc:RedditAccount; ui:use :RedditIdField ],
433+
[ ui:for soc:StravaAccount; ui:use :StravaIdField ],
432434
[ ui:for soc:SnapchatAccount; ui:use :SnapchatIdField ],
433435
[ ui:for soc:TiktokAccount; ui:use :TiktokIdField ],
436+
[ ui:for soc:TumblrAccount; ui:use :TumblrIdField ],
434437
[ ui:for soc:TwitterAccount; ui:use :TwitterIdField ],
435438
[ ui:for soc:OtherAccount; ui:use :OtherIdForm ] .
436439
@@ -506,6 +509,14 @@ WHERE
506509
ui:pattern "[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*"; # @@
507510
ui:size 70 .
508511
512+
:OrcidIdField
513+
a ui:SingleLineTextField ;
514+
ui:label "ORCiD id";
515+
ui:maxLength "200" ;
516+
ui:property foaf:accountName ;
517+
ui:pattern "[a-z0-9A-Z_-]*"; # @@
518+
ui:size 40 .
519+
509520
:PinterestIdField
510521
a ui:SingleLineTextField ;
511522
ui:label "Pinterest id";
@@ -522,6 +533,14 @@ WHERE
522533
ui:pattern "[a-z0-9A-Z_-]*"; # @@
523534
ui:size 40 .
524535
536+
:StravaIdField
537+
a ui:SingleLineTextField ;
538+
ui:label "Strava Id";
539+
ui:maxLength "200" ;
540+
ui:property foaf:accountName ;
541+
ui:pattern "[a-z0-9A-Z_-]*"; # @@
542+
ui:size 40 .
543+
525544
:SnapchatIdField
526545
a ui:SingleLineTextField ;
527546
ui:label "Snapchat Id";
@@ -538,6 +557,14 @@ WHERE
538557
ui:pattern "@[a-z0-9A-Z_-]*"; # @@
539558
ui:size 40 .
540559
560+
:TumblrIdField
561+
a ui:SingleLineTextField ;
562+
ui:label "Tumblr user name";
563+
ui:maxLength "200" ;
564+
ui:property foaf:accountName ;
565+
ui:pattern "@[a-z0-9A-Z_-]*"; # @@
566+
ui:size 40 .
567+
541568
:TwitterIdField
542569
a ui:SingleLineTextField ;
543570
ui:label "Twitter Id";
@@ -604,8 +631,8 @@ WHERE
604631
foaf:Account a rdfs:Class;
605632
rdfs:label "Online Account Provider";
606633
owl:disjointUnionOf ( :BlueSkyAccount :FacebookAccount :GithubAccount :InstagramAccount
607-
:LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount :PinterestAccount
608-
:RedditAccount :SnapchatAccount :TiktokAccount :TwitterAccount :OtherAccount) .
634+
:LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount :OrcidAccount :PinterestAccount
635+
:RedditAccount :SnapchatAccount :StravaAccount :TiktokAccount :TumblrAccount :TwitterAccount :OtherAccount) .
609636
610637
:BlueSkyAccount rdfs:subClassOf foaf:Account ;
611638
rdfs:label "Bluesky";
@@ -665,6 +692,12 @@ foaf:Account a rdfs:Class;
665692
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;
666693
foaf:homepage <https://nostr.net/> .
667694
695+
:OrcidAccount rdfs:subClassOf foaf:Account ;
696+
rdfs:label "ORCiD";
697+
foaf:userProfilePrefix "https://orcid.org/";
698+
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;
699+
foaf:homepage <https://orcid.org/> .
700+
668701
:PinterestAccount rdfs:subClassOf foaf:Account ;
669702
rdfs:label "Pinterest";
670703
foaf:userProfilePrefix "https://pin.it/";
@@ -683,12 +716,24 @@ foaf:Account a rdfs:Class;
683716
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;
684717
foaf:homepage <https://www.snapchat.com/> .
685718
719+
:StravaAccount rdfs:subClassOf foaf:Account ;
720+
rdfs:label "Strava";
721+
foaf:userProfilePrefix "https://www.strava.com/athletes/";
722+
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;
723+
foaf:homepage <https://strava.com/> .
724+
686725
:TiktokAccount rdfs:subClassOf foaf:Account ;
687726
rdfs:label "TikTok";
688727
foaf:userProfilePrefix "https://www.tiktok.com/@";
689728
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;
690729
foaf:homepage <https://www.tiktok.com/> .
691730
731+
:TumblrAccount rdfs:subClassOf foaf:Account ;
732+
rdfs:label "Tumblr";
733+
foaf:userProfilePrefix "https://www.tumblr.com/";
734+
foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;
735+
foaf:homepage <https://www.tumblr.com/> .
736+
692737
693738
:TwitterAccount rdfs:subClassOf foaf:Account ;
694739
rdfs:label "X (formerly Twitter)";

‎src/index.ts

+1-31
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ async function loadExtendedProfile(store: LiveStore, subject: NamedNode) {
1818
}
1919
}
2020

21+
2122
const Pane = {
2223
global: false,
2324
icon: icons.iconBase + "noun_15059.svg",
@@ -38,42 +39,11 @@ const Pane = {
3839
},
3940
editor: editProfileView,
4041
render: (subject: NamedNode, context: DataBrowserContext): HTMLElement => {
41-
42-
async function switchToEditor () {
43-
alert('switching to editor')
44-
target.innerHTML = '' // Clear
45-
const newPane = editProfileView.render(subject, context)
46-
const parent = target.parentNode
47-
parent.removeChild(target)
48-
parent.appendChild(newPane)
49-
}
50-
51-
5242
const target = context.dom.createElement("div");
5343
const store = context.session.store;
5444

5545
loadExtendedProfile(store, subject).then(async () => {
5646
render(await ProfileView(subject, context), target)
57-
/* Not currently used as personTR does itself
58-
const fillIns = Array.from(target.getElementsByClassName('fillInLater'))
59-
for (const ele of fillIns) {
60-
const href = ele.getAttribute('href')
61-
store.fetcher.load(href).then(()=> { // async
62-
const label = utils.label(store.sym(href))
63-
ele.children[1].textContent = label // Relabel
64-
console.log(' ele.children[0]', ele.children[1])
65-
console.log(` Relabelled ${href} to "${label}"`)
66-
})
67-
}
68-
*/
69-
const editButtons = Array.from(target.getElementsByClassName('ProfilePaneCVEditButton'))
70-
if (editButtons.length) {
71-
const editButton = editButtons[0]
72-
editButton.addEventListener('click', switchToEditor)
73-
} else {
74-
alert('No edit button')
75-
}
76-
7747
const QRCodeEles = Array.from(target.getElementsByClassName('QRCode')) // was context.dom
7848
if (!QRCodeEles.length) return console.error("QRCode Ele missing")
7949
for (const QRCodeElement of QRCodeEles as HTMLElement[]) {

0 commit comments

Comments
 (0)