Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AUTHORIZED_FETCH disclaimer to Actor Profile error messages #19

Merged
merged 8 commits into from
May 27, 2024
Merged

Add AUTHORIZED_FETCH disclaimer to Actor Profile error messages #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
abad02c
feat: add AUTHORIZED_FETCH disclaimer to Actor Profile error messages
akhileshthite May 14, 2024
c9fab37
feat: add UI for other activity types
akhileshthite May 14, 2024
7ebf7e5
style: add border and padding to error message component
akhileshthite May 14, 2024
1bf9527
feat (#18): dynamically update page title with actor's username in pr…
akhileshthite May 16, 2024
5f8aef7
feat (#16): improve colorblind theme menu accessibility with optgroup
akhileshthite May 16, 2024
50e05a8
fix: restore missing href assignment for getObjectPage
akhileshthite May 17, 2024
bead186
fix: ensure consistent and recognizable title format for the reader p…
akhileshthite May 17, 2024
e15c7f8
refactor: change pUserName element from 'div' to 'a' for hyperlink fu…
akhileshthite May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions actor-profile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
30 changes: 28 additions & 2 deletions actor-profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -69,6 +88,9 @@ class ActorProfile extends HTMLElement {
pUserName.href = db.getObjectPage(actorInfo)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this removed? Could we add it back? I find it useful to be able to navigate to accounts on their native web url.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added back.
It was a mistake.

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) {
Expand Down Expand Up @@ -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
}
}

Expand Down
3 changes: 3 additions & 0 deletions error-message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`

Expand Down
5 changes: 5 additions & 0 deletions outbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,8 @@
font-size: 0.875rem;
text-align: center;
}

.other-activity {
color: var(--rdp-text-color);
font-size: 16px;
}
3 changes: 3 additions & 0 deletions outbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-05-14 at 11 43 58 PM

messageElement.textContent = message
this.appendChild(messageElement)
}
Expand Down Expand Up @@ -220,13 +221,15 @@ 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)
}

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)
}
Expand Down
16 changes: 3 additions & 13 deletions profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Profile</title>
<title>Reader Profile</title>
<style>
@import url("./actor-profile.css");
@import url("./common.css");
Expand All @@ -22,18 +22,8 @@
</div>
</div>
<script>
// Pagination controls
document.addEventListener("outboxUpdated", () => {
const outboxElement = document.querySelector("distributed-outbox");
const prevButton = document.getElementById("prevPage");
const nextButton = document.getElementById("nextPage");

if (prevButton) {
prevButton.addEventListener("click", () => outboxElement.prevPage());
}
if (nextButton) {
nextButton.addEventListener("click", () => outboxElement.nextPage());
}
document.addEventListener('usernameUpdated', (event) => {
document.title += ` @${event.detail.username}`;
});

// Get actor url
Expand Down
29 changes: 19 additions & 10 deletions theme-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,37 @@ class ThemeSelector extends HTMLElement {
const select = document.createElement('select')
select.id = 'theme-select'

// Create and append the options
const options = [
{ value: 'light', text: 'Light' },
{ value: 'dark', text: 'Dark' },
{ value: '', text: '👁️ Color Blind Themes 👁️', disabled: true },
// Create and append the standard theme options
const standardGroup = document.createElement('optgroup')
standardGroup.label = 'Standard Themes';
['light', 'dark'].forEach(text => {
const option = document.createElement('option')
option.value = text
option.textContent = text.charAt(0).toUpperCase() + text.slice(1)
standardGroup.appendChild(option)
})
select.appendChild(standardGroup)

// Create and append the colorblind theme options within an optgroup
const colorBlindGroup = document.createElement('optgroup')
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-05-16 at 11 53 17 PM

colorBlindGroup.label = 'Color Blind Themes';
[
{ value: 'deuteranomaly', text: 'Deuteranomaly (Green-Weak)' },
{ value: 'protanomaly', text: 'Protanomaly (Red-Weak)' },
{ value: 'deuteranopia', text: 'Deuteranopia (Green-Blind)' },
{ value: 'protanopia', text: 'Protanopia (Red-Blind)' },
{ value: 'tritanopia', text: 'Tritanopia (Blue-Blind)' },
{ value: 'tritanomaly', text: 'Tritanomaly (Blue-Weak)' },
{ value: 'achromatopsia', text: 'Achromatopsia (All-Color-Blind)' }
]

// Create and append the options
options.forEach(({ value, text }) => {
].forEach(({ value, text }) => {
const option = document.createElement('option')
option.value = value
option.textContent = text
select.appendChild(option)
colorBlindGroup.appendChild(option)
})

select.appendChild(colorBlindGroup)

// Append the select & style to the template's content
template.content.appendChild(select)
template.content.appendChild(style)
Expand Down
Loading