diff --git a/actor-profile.css b/actor-profile.css index e50fbc9..5d9e668 100644 --- a/actor-profile.css +++ b/actor-profile.css @@ -47,6 +47,15 @@ overflow-wrap: break-word; } +.disclaimer { + color: var(--rdp-text-color); + font-size: 1rem; +} + +.disclaimer-link{ + color: var(--rdp-link-color); +} + follow-button { appearance: none; border: 1px solid var(--rdp-border-color); diff --git a/actor-profile.js b/actor-profile.js index d04a676..9e34f34 100644 --- a/actor-profile.js +++ b/actor-profile.js @@ -12,9 +12,28 @@ class ActorProfile extends HTMLElement { connectedCallback () { this.url = this.getAttribute('url') + this.renderDisclaimer() // Render the disclaimer regarding AUTHORIZED_FETCH this.fetchAndRenderActorProfile(this.url) } + renderDisclaimer () { + const disclaimer = document.createElement('div') + disclaimer.classList.add('disclaimer') + + const disclaimerText = document.createElement('p') + disclaimerText.textContent = 'Some features may not be available for servers with AUTHORIZED_FETCH enabled. ' + + const learnMoreLink = document.createElement('a') + learnMoreLink.classList.add('disclaimer-link') + learnMoreLink.setAttribute('href', 'https://github.com/hyphacoop/distributed-press-organizing/issues/147') + learnMoreLink.setAttribute('target', '_blank') + learnMoreLink.textContent = 'Learn more.' + + disclaimerText.appendChild(learnMoreLink) + disclaimer.appendChild(disclaimerText) + this.prepend(disclaimer) + } + async fetchAndRenderActorProfile (url) { try { const actorInfo = await db.getActor(url) @@ -69,6 +88,9 @@ class ActorProfile extends HTMLElement { pUserName.href = db.getObjectPage(actorInfo) pUserName.textContent = `@${actorInfo.preferredUsername}` actorContainer.appendChild(pUserName) // Append to the actor container + + // Dispatch event with username + this.dispatchEvent(new CustomEvent('usernameUpdated', { bubbles: true, detail: { username: actorInfo.preferredUsername } })) } if (actorInfo.summary) { @@ -102,10 +124,14 @@ class ActorProfile extends HTMLElement { } renderError (message) { - this.innerHTML = '' // Clear existing content + // Clear the actor profile content only, leaving the disclaimer intact + while (this.lastChild && this.lastChild !== this.firstChild) { + this.removeChild(this.lastChild) + } + const errorComponent = document.createElement('error-message') errorComponent.setAttribute('message', message) - this.appendChild(errorComponent) + this.appendChild(errorComponent) // Append below the disclaimer } } diff --git a/error-message.js b/error-message.js index b8d5ad5..20098dc 100644 --- a/error-message.js +++ b/error-message.js @@ -16,6 +16,9 @@ class ErrorMessage extends HTMLElement { text-align: center; margin: 20px; font-size: 1rem; + border: 1px solid var(--rdp-border-color); + border-radius: 4px; + padding: 6px; } ` diff --git a/outbox.css b/outbox.css index 6957cd9..4290804 100644 --- a/outbox.css +++ b/outbox.css @@ -3,3 +3,8 @@ font-size: 0.875rem; text-align: center; } + +.other-activity { + color: var(--rdp-text-color); + font-size: 16px; +} \ No newline at end of file diff --git a/outbox.js b/outbox.js index 330b9d5..0989b90 100644 --- a/outbox.js +++ b/outbox.js @@ -170,6 +170,7 @@ class DistributedActivity extends HTMLElement { displayUnimplemented () { const message = `Activity type ${this.activityType} is not implemented yet.` const messageElement = document.createElement('p') + messageElement.classList.add('other-activity') messageElement.textContent = message this.appendChild(messageElement) } @@ -220,6 +221,7 @@ class DistributedActivity extends HTMLElement { const to = this.activityData.object const message = `New follow request from ${from} to ${to}` const messageElement = document.createElement('p') + messageElement.classList.add('other-activity') messageElement.textContent = message this.appendChild(messageElement) } @@ -227,6 +229,7 @@ class DistributedActivity extends HTMLElement { displayLikeActivity () { const message = `New like on ${this.activityData.object}` const messageElement = document.createElement('p') + messageElement.classList.add('other-activity') messageElement.textContent = message this.appendChild(messageElement) } diff --git a/profile.html b/profile.html index 83c9e8b..e411610 100644 --- a/profile.html +++ b/profile.html @@ -1,7 +1,7 @@ -User Profile +Reader Profile