Implementation of UI for webmention reactions. #2572

SaptakS · 2021-11-22T13:11:57Z

I have added the UI implementation for the webmention reactions corresponding to like, reposts, replies and mentions of the chapter link. The tabs are keyboard navigable and have aria-notations similar to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

Screenshot for likes in 2021 restructured data:

Screenshot for reposts in 2021 restructured data:

Screenshot for replies in 2021 restructured data:

Screenshot for mention in 2021 restructured data:

Things that can still be improved or added:

HTML sanitizing or DOM purifying: In the content for replies and mentions, we want to keep some HTML tags but santizie maybe the rest of them to prevent any kind of XSS attack. I know https://github.com/cure53/DOMPurify allows such implementation telling which tags and attributes to allow. Does anyone have any other suggestion?
Pagination: If the number of replies or mentions become a lot, then it might cause a lot of scroll. Also, in likes and reposts, more number of likes mean more images to load. So might want to think about that?
Homepage reactions: I and @tunetheweb had a little discussion that it might be worth adding webmentions (like replies and mentions) in the homepage in the form of testimonials like in https://www.11ty.dev/#dont-take-my-word-for-it-%F0%9F%8C%88

Staged URL: https://20211122t101742-dot-webalmanac.uk.r.appspot.com/en/2021/

This helps in local development to check that the webmentions are actually getting fetched and rendered properly.

src/static/js/webmentions.js

src/templates/en/base.html

rviscomi · 2021-11-22T15:52:43Z

I've staged the PR here: https://20211122t101742-dot-webalmanac.uk.r.appspot.com/en/2021/

@SaptakS @tunetheweb I'm getting 0 reactions on all chapters. Is that a dev env CORS issue? How did it work for the screenshots above?

SaptakS · 2021-11-22T15:53:56Z

Not sure if it's available in all chapters. I saw webmentions data in structured-data and third-parties. I tested in structured-data. And seems it's showing up there: https://20211122t101742-dot-webalmanac.uk.r.appspot.com/en/2021/structured-data

rviscomi · 2021-11-22T15:59:35Z

Very weird. It only seems to work some of the time. Here's a side by side comparison of the same URL loaded twice

src/static/js/webmentions.js

rviscomi · 2021-11-22T19:31:49Z

src/templates/base/base_chapter.html

+        id="likes-tab"
+        tabindex="0"
+      >
+        <span id="likes-count">0</span> {{ self.likes() }}


I think we'd need additional logic to handle singular and plural grammar, ie "1 like" vs "2 likes".

This is complicated for translations that follow different rules than simply 1 or not-1. @tunetheweb do we have any precedent for how to handle that in the translations?

Yup:

almanac.httparchive.org/src/static/js/almanac.js

Lines 471 to 479 in 4b332ca

if (comments === 1) {

document.querySelectorAll('.comment-singular').forEach(el => {

el.removeAttribute('data-translation');

});

} else {

document.querySelectorAll('.comment-plural').forEach(el => {

el.removeAttribute('data-translation');

});

}

Though suspect we need more than that for Slavic languages that have more than just singlar and plural. We have a plural_ru macro for that but looks like we never implemented that for the comment/comments. Can look at that later.

Ah ok. Let's get basic singular/plural support into this PR then we can worry about the more complex rules in a separate issue.

I also just came across Intl.PluralRules.select() which looks like it could be useful.

- use textContent instead of innerHTML where only text is added - use key instead of keyCode which is deprecated - use DOMParser and appendChild instead of innerHTML - removes DOMContentLoaded eventListener

SaptakS · 2021-11-22T22:04:12Z

I have tried to address most of the comments above.

tunetheweb

This is fantastic work @SaptakS !

Particularly appreciate the effort to make it accessible (and today I learned how to make accessible tablists!).

Got some requested changes though.

src/static/css/page.css

src/static/js/webmentions.js

src/templates/base/base_chapter.html

src/static/js/webmentions.js

src/templates/base/base_chapter.html

- Uses the text part of content in replies and mentions - Unifies the rendering logic for different render types - Rewrites the code using createElement instead of string parse

SaptakS · 2021-11-23T09:55:36Z

@tunetheweb I have addressed all the comments.

tunetheweb

Looks much cleaner. Will have a deeper look later but a few quick comments for you upfront.

src/static/js/webmentions.js

tunetheweb

I'm pretty happy with this now. I think these last few suggestions will make CI pass and allow us to merge this.

src/static/css/page.css

src/static/js/webmentions.js

src/templates/base/base_chapter.html

Co-authored-by: Barry Pollard <[email protected]>

tunetheweb

I think this is good to go! Great work on it.

@rviscomi you wanna have another look or happy to merge?

LGTM

src/templates/nl/base.html

tunetheweb · 2021-11-25T19:38:41Z

Great job @SaptakS ! Thanks a lot for this.

Btw there's another tab index dev issue if interested?: #1325 (comment)

src/templates/fr/base.html

tunetheweb · 2021-11-25T19:52:33Z

FYI @SaptakS I forgot to add you to the Developers team with this so added that to #2590 too.

SaptakS · 2021-11-26T09:43:59Z

Great job @SaptakS ! Thanks a lot for this.

Btw there's another tab index dev issue if interested?: #1325 (comment)

I can take a stab at it after the security chapter related stuff is done with.

SaptakS added 5 commits November 22, 2021 18:28

Initial UI implementation for webmentions

aab5cbb

Adds mentions tab

8f3b9a9

Adds basic styling for like and reposts

d456e3b

Adds styling and template for replies and mentions

a6f5d36

Always have base url as production website instead of localhost

ec861b6

This helps in local development to check that the webmentions are actually getting fetched and rendered properly.

SaptakS requested a review from tunetheweb November 22, 2021 13:12

Fixes CSS linting

f7aa840

rviscomi added the development Building the Almanac tech stack label Nov 22, 2021

rviscomi added this to the 2021 Launch 🚀 milestone Nov 22, 2021

rviscomi previously requested changes Nov 22, 2021

View reviewed changes

src/static/js/webmentions.js Outdated Show resolved Hide resolved

src/static/js/webmentions.js Outdated Show resolved Hide resolved

src/static/js/webmentions.js Outdated Show resolved Hide resolved

src/static/js/webmentions.js Outdated Show resolved Hide resolved

rviscomi assigned SaptakS and tunetheweb Nov 22, 2021

rviscomi reviewed Nov 22, 2021

View reviewed changes

src/templates/en/base.html Outdated Show resolved Hide resolved

VictorLeP reviewed Nov 22, 2021

View reviewed changes

src/static/js/webmentions.js Outdated Show resolved Hide resolved

rviscomi reviewed Nov 22, 2021

View reviewed changes

SaptakS added 2 commits November 23, 2021 02:50

Fixes some JS codes

637cd65

- use textContent instead of innerHTML where only text is added - use key instead of keyCode which is deprecated - use DOMParser and appendChild instead of innerHTML - removes DOMContentLoaded eventListener

Adds translateable strings for JS code

7c75f43

tunetheweb requested changes Nov 23, 2021

View reviewed changes

SaptakS added 4 commits November 23, 2021 14:56

Rewrites the rendering logic

1f4cdcb

- Uses the text part of content in replies and mentions - Unifies the rendering logic for different render types - Rewrites the code using createElement instead of string parse

Adds some fixes for the base_chapter template

3912910

Updates tab logic to change tab on key focus navigation

df1a356

Moves processMentions in the renderReactions function

8155a35

tunetheweb reviewed Nov 23, 2021

View reviewed changes

src/static/js/webmentions.js Outdated Show resolved Hide resolved

src/static/js/webmentions.js Outdated Show resolved Hide resolved

Rearranges the logic for webmention property argument

bc90170

tunetheweb requested changes Nov 23, 2021

View reviewed changes

SaptakS and others added 2 commits November 24, 2021 14:58

Apply suggestions from code review

8cf505e

Co-authored-by: Barry Pollard <[email protected]>

Formatting nits

5faf119

tunetheweb approved these changes Nov 25, 2021

View reviewed changes

Internationalise labels

64882ca

tunetheweb merged commit b2fcafe into HTTPArchive:main Nov 25, 2021

VictorLeP reviewed Nov 25, 2021

View reviewed changes

src/templates/nl/base.html Show resolved Hide resolved

VictorLeP reviewed Nov 25, 2021

View reviewed changes

src/templates/fr/base.html Show resolved Hide resolved

tunetheweb mentioned this pull request Nov 25, 2021

Web mentions translations #2590

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of UI for webmention reactions. #2572

Implementation of UI for webmention reactions. #2572

SaptakS commented Nov 22, 2021 •

edited by rviscomi

Loading

rviscomi commented Nov 22, 2021

SaptakS commented Nov 22, 2021 •

edited

Loading

rviscomi commented Nov 22, 2021

rviscomi Nov 22, 2021

tunetheweb Nov 22, 2021

rviscomi Nov 22, 2021 •

edited

Loading

SaptakS commented Nov 22, 2021

tunetheweb left a comment

SaptakS commented Nov 23, 2021

tunetheweb left a comment

tunetheweb left a comment

tunetheweb left a comment

tunetheweb commented Nov 25, 2021

tunetheweb commented Nov 25, 2021

SaptakS commented Nov 26, 2021

	if (comments === 1) {
	document.querySelectorAll('.comment-singular').forEach(el => {
	el.removeAttribute('data-translation');
	});
	} else {
	document.querySelectorAll('.comment-plural').forEach(el => {
	el.removeAttribute('data-translation');
	});
	}

Implementation of UI for webmention reactions. #2572

Implementation of UI for webmention reactions. #2572

Conversation

SaptakS commented Nov 22, 2021 • edited by rviscomi Loading

rviscomi commented Nov 22, 2021

SaptakS commented Nov 22, 2021 • edited Loading

rviscomi commented Nov 22, 2021

rviscomi Nov 22, 2021

Choose a reason for hiding this comment

tunetheweb Nov 22, 2021

Choose a reason for hiding this comment

rviscomi Nov 22, 2021 • edited Loading

Choose a reason for hiding this comment

SaptakS commented Nov 22, 2021

tunetheweb left a comment

Choose a reason for hiding this comment

SaptakS commented Nov 23, 2021

tunetheweb left a comment

Choose a reason for hiding this comment

tunetheweb left a comment

Choose a reason for hiding this comment

tunetheweb left a comment

Choose a reason for hiding this comment

tunetheweb commented Nov 25, 2021

tunetheweb commented Nov 25, 2021

SaptakS commented Nov 26, 2021

SaptakS commented Nov 22, 2021 •

edited by rviscomi

Loading

SaptakS commented Nov 22, 2021 •

edited

Loading

rviscomi Nov 22, 2021 •

edited

Loading