search

data-umbrella / data-umbrella.github.io

Data Umbrella Blog website
https://blog.dataumbrella.org
3 stars 14 forks source link

Add reading time to post layout #51

Open samvmdev opened 2 years ago

samvmdev commented 2 years ago

This PR will work for individual blog posts. There will need to be some edits made to the preview page (article.html) in order to have the correct reading time to show up, perhaps due to how it is calculated. Currently, reading time shows up with the same time for all previews.

What kind of change does this PR introduce?

This PR adds the reading time indicator to the main post page (e.g. "5 minutes to read")

Does this PR introduce a breaking change?

Unsure

What needs to be documented once your changes are merged?

Perhaps a changelog or some kind of tracker indicating that reading time has been implemented. Otherwise, none.

Snapshot from local host

post-layout-reading-time
netlify[bot] commented 2 years ago

Deploy Preview for amazing-borg-b90f51 ready!

Name Link
Latest commit 54a5f710510eaf4684159264c6e1e2ddf6c3438f
Latest deploy log https://app.netlify.com/sites/amazing-borg-b90f51/deploys/63135bc818907a0008360d69
Deploy Preview https://deploy-preview-51--amazing-borg-b90f51.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

reshamas commented 2 years ago

@greenhacks Thanks for this PR. Are we able to reduce the size of the font so it matches the size of "Data Umbrella" author?

samvmdev commented 2 years ago

Hi Reshama, yes. Here is a preview. I just updated the branch.

Screen Shot 2022-09-03 at 6 48 26 AM
reshamas commented 2 years ago

Hi @greenhacks (cc: iliadeleon , not sure what the Figma design is.)

REF: https://blog.codeforscience.org/announcing-the-newest-event-fund-grantees/

Can we have it in this format, attached view as an example:

Screen Shot 2022-09-03 at 11 37 32 AM
samvmdev commented 2 years ago

Hi @reshamas, I was working off the original Figma design for this PR; I'd be glad to try working on the new design.

Figma link: https://www.figma.com/file/rs7dsdmKlxdfuQ0wobp5B2/Data-Umbrella Figma Screenshot:

Screen Shot 2022-09-06 at 7 29 30 AM
reshamas commented 2 years ago

Hi @greenhacks I think there are two places where we want to add the reading time.

  1. The home page which has thumbnails to the blogs.
  2. Each individual blog page.

I think, for both, we can do as follows:

Author dd mmm yy * x min read

Screen Shot 2022-09-06 at 10 48 36 AM