Build the Community section for new homepages #6096

goplayoutside3 · 2024-05-16T20:41:43Z

Package

app-root
lib-content

Linked Issue and/or Talk Post

Toward: #6024
Toward: #6023

Figma: https://www.figma.com/design/p6laHCEklj9YK79TC1F7NV/Homepages

Describe your changes

Built a reusable Article component that previews a blog post or published article (this component will also be re-used in the new Get Involved pages)
Built a Community section that appears on the new homepages regardless of signed-in or signed-out
- I didn't build the overall homepage layout yet, but this component can still be previewed in that app with data fetched in app-root
Created stories for the above components with some mock data for blog posts
Removed luxon from app-project. See comment: Build the Community section for new homepages #6096 (comment)

How to Review

View the Article and Community stories in lib-content
Run app-root locally and visit https://local.zooniverse.org:3000 while signed-in or signed-out
Try out dark mode and mobile via Storybook too!

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

Tests are passing locally and on Github
Documentation is up to date and changelog has been updated if appropriate
You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
FEM works in a mobile browser

goplayoutside3 · 2024-05-16T20:43:09Z

packages/app-root/src/app/page.js

-    link: post.URL, // string
-    image: post.featured_image // ?? these are always '', might need to grab attached image instead
+    url: post.URL, // string
+    imageSrc: post.featured_image // ?? these are always '', might need to grab attached image instead


I'll double check with Sean if he prefers a placeholder image for blog posts that don't have a featured_image. All of the most recent blogs posts do not include one, as seen in the blog section of PFE's homepage: https://www.zooniverse.org

goplayoutside3 · 2024-05-16T20:44:38Z

packages/lib-content/src/components/HeadingForAboutNav/SubHeading.js

This SubHeading component previously was unique to the root About page, but the same style is used in the signed-out homepage design, so I moved it to the shared components file in lib-content.

goplayoutside3 · 2024-05-16T20:45:57Z

packages/lib-content/src/screens/Home/Community/CommunityContainer.js

+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+dayjs.extend(relativeTime)


PFE's blog feed section uses Moment.js, but that package is now a legacy package.

The monorepo also uses Luxon, so you might want to consolidate on a single package for handling dates.

EDIT: the project app uses Luxon, but I'm not sure that it's actually imported anywhere (just from doing a very quick search for luxon.)

Was just going to comment the same thing 😆 I think we might be able to simply remove luxon from app-project.

I vaguely remember Roger replacing MomentJS with Luzon, but can't remember which component used it. I assume it got removed or refactored at some point.

coveralls · 2024-05-16T20:48:22Z

coverage: 80.605%. remained the same
when pulling ad80306 on community-section
into 2d469bb on master.

shaunanoordin

PR Review

Packages: app-root, ~~lib-content-pages~~ lib-content

This PR adds the Community section to the home page on app-root.

New Feature: Community section
- Appears on both signed in and signed out versions of the home page.
- Lists 4x latest articles from Daily Zooniverse, and 4x from the Zooniverse Blog.

Screenshot: the community section with a few articles from Daily Zooniverse

Functionality looks good. 👍

Testing

Tested app-root with macOS + Chrome/FF/Safari on localhost

Opened https://local.zooniverse.org:3000/
Scrolled down to view the Community section
Confirmed that 4 + 4 articles are displayed. ✔️

Additional observation: when the article contents/summaries are being fetched, there's a period where the Community Section actually lists the empty articles. But the empty boxes still have the correct timestamps. Odd.

Screenshot: view of the Community section while in the data fetching process.

Also, tested lib-content with macOS + Chrome using Storybook.

The Article story looks fine. ✔️

Dev Notes

[rambling][non-blocking]

Code and functionality look good, but if there's one thing that makes me go "huh?" (in a manner where I comically put my hands on my hips, tilt my head, and raise an eyebrow, but not in a manner that blocks this PR) is the way that the the "blog config" is kinda split across two packages.

In app-root, we have BLOG_FEEDS, which fetches 4 + 4 articles from 2 different blogs, combines them into an 8-article array, then sends them to the Community component in lib-content, which then splits the 8-article array into 2x 4-article arrays, and assigns them to the 2 different blogs. (Those 2 different blogs also have their own hardcoded URLs and names, which I'd also consider config-ish items.)

I mean, it works, but it's not easy to read outside of this PR (i.e. a dev needs to know to look at both app-root and lib-content to make changes, like increasing the number of articles) nor is it particularly robust (e.g. what if someone edits getBlogPosts() to fetch 5+5 articles and forgets to update lib-content's Community). I imagine we can improve this in a future PR, maybe put the blog data into a config object or something.

Status

Rambling dev note aside, this PR is LGTM 👍

shaunanoordin · 2024-05-22T17:11:31Z

packages/app-root/src/app/page.js

@@ -40,7 +40,7 @@ async function getBlogPosts() {
  try {
    const feeds = await Promise.all(BLOG_FEEDS.map(fetchBlogFeed))
    feeds.forEach(feed => {
-      posts = posts.concat(feed.slice(0, 3))
+      posts = posts.concat(feed.slice(0, 4))


[medium suggestion] This number 4's floating around a bit willy-nilly, it might be worth moving it ~~into a config~~ into a constant like NUMBAH_OF_BLOG_POSTS = 4 to match BLOG_FEEDS

shaunanoordin · 2024-05-22T17:14:25Z

packages/lib-content/src/screens/Home/Community/Community.js

+        </Anchor>
+      </Box>
+      <Box gap='small' margin={{ bottom: 'medium' }}>
+        {blogPosts.slice(0, 4).map(item => (


[medium suggestion] There's a magic number 4 here (and a little below at blogPosts.slice(4)) that might be worth moving into a const

shaunanoordin · 2024-05-22T17:18:06Z

packages/app-root/src/components/HomePageContainer.js

@@ -18,7 +19,7 @@ export default function HomePageContainer({ blogPosts = [] }) {
          <p>{user?.login ? 'Signed-in' : 'Signed-out'}</p>
        </Box>
      )}
-      <Box pad='medium' align='center'>Number of blog posts: {blogPosts.length}</Box>
+      <CommunityContainer blogPosts={blogPosts} />


[curiosity][query] Actually, I just realised something - why are the blog posts from two different blogs joined together into a single blogPosts array, then split up again in the Community component? Why not send two arrays?

Good catch! It's because I copied the fetching function from PFE where the UI intentionally combines the two feeds by date. However, Sean's design separates the two so each feed could be fetched as separate arrays in app-root. I'll fix that!

goplayoutside3 · 2024-05-22T19:59:40Z

Re:

Additional observation: when the article contents/summaries are being fetched, there's a period where the Community Section actually lists the empty articles. But the empty boxes still have the correct timestamps. Odd.

I think this is due to the function used to strip tags and other html entities from the title and excerpt. There might be a way to do so safely server-side, but I chose to do it client-side with DOMParser because it's a super simple implementation 🤷‍♀️ DOMParser won't work server-side, so there's probably a bit of a lag while the text-only content is calculated for title and excerpt.

build the Community section for homepages

652612b

goplayoutside3 added the enhancement New feature or request label May 16, 2024

goplayoutside3 commented May 16, 2024

View reviewed changes

goplayoutside3 requested a review from a team May 16, 2024 20:46

goplayoutside3 added 2 commits May 17, 2024 17:05

remove luxon from app-project

bb44d25

Merge branch 'master' into community-section

1389447

goplayoutside3 mentioned this pull request May 21, 2024

Build Hero and Introduction components of signed-out homepage #6101

Merged

5 tasks

shaunanoordin self-assigned this May 22, 2024

shaunanoordin self-requested a review May 22, 2024 12:12

Merge branch 'master'

30d79a5

shaunanoordin approved these changes May 22, 2024

View reviewed changes

github-actions bot added the approved This PR is approved for merging label May 22, 2024

pass Daily Zoo and Zoo Blog as two arrays to UI components

ad80306

goplayoutside3 merged commit e041fd1 into master May 22, 2024
8 checks passed

goplayoutside3 deleted the community-section branch May 22, 2024 20:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build the Community section for new homepages #6096

Build the Community section for new homepages #6096

goplayoutside3 commented May 16, 2024 •

edited

goplayoutside3 May 16, 2024

goplayoutside3 May 16, 2024

goplayoutside3 May 16, 2024

eatyourgreens May 17, 2024 •

edited

goplayoutside3 May 17, 2024

eatyourgreens May 18, 2024

coveralls commented May 16, 2024 •

edited

shaunanoordin left a comment

shaunanoordin May 22, 2024

shaunanoordin May 22, 2024

shaunanoordin May 22, 2024 •

edited

goplayoutside3 May 22, 2024

goplayoutside3 commented May 22, 2024

Build the Community section for new homepages #6096

Build the Community section for new homepages #6096

Conversation

goplayoutside3 commented May 16, 2024 • edited

Package

Linked Issue and/or Talk Post

Describe your changes

How to Review

Checklist

General

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eatyourgreens May 17, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented May 16, 2024 • edited

shaunanoordin left a comment

Choose a reason for hiding this comment

PR Review

Testing

Dev Notes

Status

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shaunanoordin May 22, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

goplayoutside3 commented May 22, 2024

goplayoutside3 commented May 16, 2024 •

edited

eatyourgreens May 17, 2024 •

edited

coveralls commented May 16, 2024 •

edited

shaunanoordin May 22, 2024 •

edited