Add Multiple News Items on Homepage and Single News Item Page (Closes #281) #390

3 News items are displayed on the homepage (MiniNewsCard component)
Single News item path: /news/20xx/term/20xx-xx-xx (NewsCard component)
- Purple header for the date
- News items of the same date are displayed on the same page

Screen Shot 2022-01-24 at 9.30.12 PM.png

388 KiB

Screen Shot 2022-01-25 at 12.50.42 PM.png

235 KiB

When I go to the staging site (https://csclub.uwaterloo.ca/~a3thakra/csc/support-multiple-news-homepage/) I see multiple items, but expanded rather than summaries.

image.png

98 KiB

When I go to the staging site (https://csclub.uwaterloo.ca/~a3thakra/csc/support-multiple-news-homepage/) I see multiple items, but expanded rather than summaries.

What browser are you using? Is it Internet Explorer? I implemented the truncating bit with Amy's proposed solution which was using css' -webkit-line-clamp property:

.card {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

This property apparently is not supported on IE.

Oh, I see that it doesn't display properly on Microsoft Edge either...

This is interesting - the truncating doesn't seem to work on Chrome, but it does work in Firefox.

Screenshot from the staging website in Firefox:

When I was experimenting, I was able to get -webkit-line-clamp to work in Chrome by applying the class directly to the first paragraph of the news item, though this is not ideal since sometimes the first paragraph is really short and we want to see a bit of the second paragraph as well. So I'm not quite sure what the best solution is...

image.png

90 KiB

It looks like -webkit-line-clamp is a non standard property that has some issues, according to the MDN docs (see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp), so maybe we should just avoid it?

One alternative approach could be to do the clamping on the "server"/build time (ie. in the code that fetches the content from file) instead. That way we don't need to do any clamping on client side.

This way also makes it easier to add custom short descriptions if we choose to do so later.

One alternative approach could be to do the clamping on the "server"/build time (ie. in the code that fetches the content from file) instead. That way we don't need to do any clamping on client side.

I agree that this will probably be the best solution. I personally think the cleanest approach would be to create a new function specifically for fetching the truncated version of the news (eg. getShortNewsBySlug or something), but I'll leave the final decision up to Emily. 🙂

Just a nitpick, but it looks like the bullet icons are getting cut off on mobile in Chrome:

Also interesting to note, for this particular news item, the truncating is not the same in Chrome vs. Firefox:

I suspect it has something to do with the list? This isn't a merge-blocking thing, but it would be nice to figure out why it's happening, at least.

image.png

23 KiB

image.png

28 KiB

Great job Emily! To summarize my feedback (I clicked some weird buttons by accident so idk if you can see all the comments):

pages/news/.../[date].tsx, line 42 - there's a potentially unnecessary span
pages/news/.../[date].tsx, line 76 - there's a potentially unnecessary console.log
Consider leaving a quick comment about the "fit" style in NewsCard.tsx
Other than these small details, this PR should be ready to merge!

Great job Emily! To summarize my feedback (I clicked some weird buttons by accident so idk if you can see all the comments):

pages/news/.../[date].tsx, line 42 - there's a potentially unnecessary span
pages/news/.../[date].tsx, line 76 - there's a potentially unnecessary console.log
Consider leaving a quick comment about the "fit" style in NewsCard.tsx
Other than these small details, this PR should be ready to merge!

       <address className={styles.author}>{author}</address>
       <div className={styles.content}>{children}</div>
       <Link href={permalink}>
         <span className={styles.mobileLearnMore}>Learn more</span>

   );
   const { content, data: metadata } = matter(raw);
   const slugDate = slug.split("-").slice(0, 3).join("-");
   let truncatedContent: string = content;

                   <MiniNewsCard
                     {...news.metadata}
                     date={new Date(news.metadata.date)}
                     key={news.metadata.date.toString()}

           key={idx}
           {...metadata}
           date={new Date(metadata.date)}
           fit={true}

     <div className={styles.page}>
       <Title>{["News", `${date}`]}</Title>
       <h1>
         News: <span>{date}</span>

   author: string;
   children: ReactNode;
   permalink: string;
   fit?: boolean;

   const news = await Promise.all(
     slugs.map((slug) => getNewsBySlug(year, term, slug))
   );
   console.log(slugs);

Add Multiple News Items on Homepage and Single News Item Page (Closes #281) #390

Reviewers