|
| 1 | +/** |
| 2 | + * Profile view pane — renders a urn:solid:Person as a beautiful "this is me" page. |
| 3 | + * |
| 4 | + * Schema-aware (reads Person fields: name, nick, email, homepage, img, knows) |
| 5 | + * but bespoke layout — hero photo, large italic name, contact pills, knows |
| 6 | + * network. The custom counterpart to the generic schema-view. |
| 7 | + * |
| 8 | + * Same data, different lens. Drop in alongside schema-pane (Edit) and |
| 9 | + * schema-view (generic View) — LOSOS shows all three as tabs. |
| 10 | + * |
| 11 | + * AGPL-3.0 — part of solid-apps |
| 12 | + */ |
| 13 | + |
| 14 | +import { html, render } from 'https://losos.org/losos/html.js' |
| 15 | + |
| 16 | +const initial = (s) => (s || '?').trim().charAt(0).toUpperCase() |
| 17 | +const stripScheme = (u) => (u || '').replace(/^https?:\/\//, '').replace(/\/$/, '') |
| 18 | +const niceLink = (u) => { |
| 19 | + try { |
| 20 | + const url = new URL(u) |
| 21 | + return url.host + (url.pathname === '/' ? '' : url.pathname) |
| 22 | + } catch { return u } |
| 23 | +} |
| 24 | + |
| 25 | +export default { |
| 26 | + label: 'Profile', |
| 27 | + icon: '\ud83d\udc64', |
| 28 | + |
| 29 | + canHandle(subject, store) { |
| 30 | + const node = store.get(subject.value) |
| 31 | + if (!node) return false |
| 32 | + const t = store.type(node) |
| 33 | + if (!t) return false |
| 34 | + return Array.isArray(t) |
| 35 | + ? t.some(x => /Person/i.test(x)) |
| 36 | + : /Person/i.test(t) |
| 37 | + }, |
| 38 | + |
| 39 | + render(subject, lionStore, container, rawData) { |
| 40 | + let data = rawData |
| 41 | + if (!data) { |
| 42 | + const dataEl = document.querySelector('script[type="application/ld+json"]') |
| 43 | + try { data = JSON.parse(dataEl.textContent) } catch { return } |
| 44 | + } |
| 45 | + |
| 46 | + const name = data.name || data.nick || data['@id'] || 'Unknown' |
| 47 | + const nick = data.nick |
| 48 | + const email = data.email |
| 49 | + const homepage = data.homepage |
| 50 | + const img = data.img |
| 51 | + const knows = Array.isArray(data.knows) ? data.knows : (data.knows ? [data.knows] : []) |
| 52 | + const id = data['@id'] || '' |
| 53 | + const showId = id && id !== '#this' && !id.startsWith('#') |
| 54 | + |
| 55 | + render(container, html` |
| 56 | + <style> |
| 57 | + .pv-bg { |
| 58 | + min-height: 100vh; |
| 59 | + background: |
| 60 | + radial-gradient(circle at 20% 0%, rgba(99,102,241,0.08) 0%, transparent 40%), |
| 61 | + radial-gradient(circle at 80% 100%, rgba(236,72,153,0.06) 0%, transparent 40%), |
| 62 | + linear-gradient(180deg, #fafaf8 0%, #f0efeb 100%); |
| 63 | + padding: 64px 24px 96px; |
| 64 | + } |
| 65 | + .pv-card { |
| 66 | + max-width: 600px; margin: 0 auto; text-align: center; |
| 67 | + } |
| 68 | + .pv-photo { |
| 69 | + width: 200px; height: 200px; border-radius: 50%; |
| 70 | + object-fit: cover; margin: 0 auto 32px; |
| 71 | + box-shadow: 0 12px 40px rgba(0,0,0,0.15); |
| 72 | + border: 4px solid #fff; |
| 73 | + display: block; |
| 74 | + } |
| 75 | + .pv-photo-fallback { |
| 76 | + width: 200px; height: 200px; border-radius: 50%; |
| 77 | + background: linear-gradient(135deg, #6366f1, #8b5cf6); |
| 78 | + color: #fff; font: 600 80px/200px Georgia, serif; |
| 79 | + margin: 0 auto 32px; |
| 80 | + box-shadow: 0 12px 40px rgba(0,0,0,0.15); |
| 81 | + border: 4px solid #fff; |
| 82 | + } |
| 83 | + .pv-name { |
| 84 | + font: italic 400 56px/1.05 Georgia, serif; |
| 85 | + color: #1a1a1a; margin: 0 0 6px; |
| 86 | + letter-spacing: -1.2px; |
| 87 | + } |
| 88 | + .pv-nick { |
| 89 | + font: 500 16px/1.5 'Inter', -apple-system, sans-serif; |
| 90 | + color: #888; margin: 0 0 24px; |
| 91 | + } |
| 92 | + .pv-id { |
| 93 | + display: inline-block; |
| 94 | + font: 400 11px/1.5 ui-monospace, SFMono-Regular, monospace; |
| 95 | + color: #aaa; margin-bottom: 40px; |
| 96 | + word-break: break-all; max-width: 100%; |
| 97 | + padding: 4px 10px; border-radius: 4px; |
| 98 | + background: rgba(0,0,0,0.03); |
| 99 | + } |
| 100 | + .pv-contact { |
| 101 | + display: flex; gap: 10px; justify-content: center; |
| 102 | + flex-wrap: wrap; margin-bottom: 56px; |
| 103 | + } |
| 104 | + .pv-link { |
| 105 | + display: inline-flex; align-items: center; gap: 8px; |
| 106 | + padding: 10px 18px; background: #fff; |
| 107 | + border: 1px solid #e5e3de; border-radius: 999px; |
| 108 | + color: #1a1a1a; text-decoration: none; |
| 109 | + font: 500 14px/1 'Inter', -apple-system, sans-serif; |
| 110 | + transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; |
| 111 | + } |
| 112 | + .pv-link:hover { |
| 113 | + transform: translateY(-2px); |
| 114 | + box-shadow: 0 6px 20px rgba(0,0,0,0.08); |
| 115 | + border-color: #6366f1; |
| 116 | + } |
| 117 | + .pv-link-icon { font-size: 16px; opacity: 0.85; } |
| 118 | + .pv-knows { |
| 119 | + padding-top: 40px; |
| 120 | + border-top: 1px solid #e5e3de; |
| 121 | + } |
| 122 | + .pv-knows-title { |
| 123 | + font: 600 11px/1 'Inter', -apple-system, sans-serif; |
| 124 | + letter-spacing: 0.12em; text-transform: uppercase; |
| 125 | + color: #999; margin: 0 0 20px; |
| 126 | + } |
| 127 | + .pv-knows-list { |
| 128 | + list-style: none; padding: 0; margin: 0; |
| 129 | + display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; |
| 130 | + } |
| 131 | + .pv-knows-link { |
| 132 | + padding: 7px 14px; background: #fff; |
| 133 | + border: 1px solid #e5e3de; border-radius: 999px; |
| 134 | + font: 400 13px/1 'Inter', sans-serif; |
| 135 | + color: #1a5276; text-decoration: none; |
| 136 | + transition: border-color 0.18s, color 0.18s; |
| 137 | + } |
| 138 | + .pv-knows-link:hover { border-color: #6366f1; color: #6366f1; } |
| 139 | + </style> |
| 140 | +
|
| 141 | + <div class="pv-bg"> |
| 142 | + <div class="pv-card"> |
| 143 | + ${img |
| 144 | + ? html`<img class="pv-photo" src="${img}" alt="${name}" onerror="${function(e) { const f = document.createElement('div'); f.className = 'pv-photo-fallback'; f.textContent = initial(name); e.target.replaceWith(f) }}" />` |
| 145 | + : html`<div class="pv-photo-fallback">${initial(name)}</div>` |
| 146 | + } |
| 147 | +
|
| 148 | + <h1 class="pv-name">${name}</h1> |
| 149 | + ${nick ? html`<div class="pv-nick">@${nick}</div>` : null} |
| 150 | + ${showId ? html`<div class="pv-id">${id}</div>` : null} |
| 151 | +
|
| 152 | + ${(email || homepage) ? html` |
| 153 | + <div class="pv-contact"> |
| 154 | + ${email ? html`<a class="pv-link" href="${'mailto:' + email}"><span class="pv-link-icon">\u2709</span>${email}</a>` : null} |
| 155 | + ${homepage ? html`<a class="pv-link" href="${homepage}" target="_blank" rel="noopener"><span class="pv-link-icon">\ud83c\udf10</span>${niceLink(homepage)}</a>` : null} |
| 156 | + </div> |
| 157 | + ` : null} |
| 158 | +
|
| 159 | + ${knows.length > 0 ? html` |
| 160 | + <div class="pv-knows"> |
| 161 | + <div class="pv-knows-title">Knows</div> |
| 162 | + <ul class="pv-knows-list"> |
| 163 | + ${knows.map(function(k) { |
| 164 | + const ref = (typeof k === 'string') ? k : (k && k['@id']) |
| 165 | + if (!ref) return null |
| 166 | + const label = (typeof k === 'object' && k.name) ? k.name : niceLink(ref) |
| 167 | + return html`<li><a class="pv-knows-link" href="${ref}" target="_blank" rel="noopener">${label}</a></li>` |
| 168 | + })} |
| 169 | + </ul> |
| 170 | + </div> |
| 171 | + ` : null} |
| 172 | + </div> |
| 173 | + </div> |
| 174 | + `) |
| 175 | + } |
| 176 | +} |
0 commit comments