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.

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

Combine Dev.to API with Single Post UI #217

Merged
merged 21 commits into from
Jul 26, 2024
Merged

Conversation

Satoshi-Sh
Copy link
Member

@Satoshi-Sh Satoshi-Sh commented Jun 21, 2024

Web Dev Path
216

close #216

Have you updated the CHANGELOG.md file? If not, please do it.

Yes.

What is this change?

  • Replaced the blog post link of Dev.to with the internal link.
  • Combined Dev.to API with Single post UI
  • Modified styling issues accordingly(code block, youtube video, account without user summary...)

Were there any complications while making this change?

I didn't know how the getStaticPaths and getStaticProps functions work in Next.js. It was confusing at first.

How to replicate the issue?

N.A.

If necessary, please describe how to test the new feature or fix.

Please go check individual blog post from the blog page.

When should this be merged?

After reviews.

Screenshots

blog-post-demo2

P.S.

This part will be implemented after this PR?
Screenshot from 2024-06-21 13-52-36

@Satoshi-Sh Satoshi-Sh requested a review from a team June 21, 2024 18:51
@Satoshi-Sh Satoshi-Sh self-assigned this Jun 21, 2024
Copy link

netlify bot commented Jun 21, 2024

Deploy Preview for webdevpathstage ready!

Name Link
🔨 Latest commit b8fd1ed
🔍 Latest deploy log https://app.netlify.com/sites/webdevpathstage/deploys/667cb1c69f9a0d0008e031d2
😎 Deploy Preview https://deploy-preview-217--webdevpathstage.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 configuration.

@Satoshi-Sh
Copy link
Member Author

I switched server-side rendering to client-side rendering as the app was built to hit Dev.to API rate limit.

There might be a way to avoid hitting the limit while using server-side rendering, but CSR works fine here.

@cherylli
Copy link
Member

Had a good look at this today. I was not able to find any information about dev.to API limit
I have tried to set it to an extremely long delay and still getting that error (429)

What worked for me was to remove the part which fetch the user details (maybe they don't want you to use multiple endpoints too soon after another)

image

We could just have all the author's bio locally in utils/about.js, so we don't have to pull from dev.to which I think should be ok as we won't have random contributors. But we should still set a fallback.

I think we should use ISR, instead of client side rendering if possible, since the pages are crawlable which means better for SEO and also it's faster than client side rendering for the user

==========================

With the functionalities, there are a few things I noticed,

  • I think clicking on the photo or anywhere in the card should also link to the single page, instead of just "read more". I keep trying to click on the image, so this can be an expected behaviour, thoughts?
  • Maybe we should add "loading state" for the page while it's still loading?
  • I noticed the linkedIn icon doesn't link to the authors linkedIn

@Satoshi-Sh
Copy link
Member Author

We could just have all the author's bio locally in utils/about.js, so we don't have to pull from dev.to which I think should be ok as we won't have random contributors. But we should still set a fallback.

It's a bit of work to hard coding but I think not many new people join and write a blog. I will take this path.

I noticed the LinkedIn icon doesn't link to the author's linkedIn

Dev to account doesn't hold a LinkedIn account. That's why getting redirected to the WDP account as a fallback. I can use local data to put the individual account links.

@Satoshi-Sh
Copy link
Member Author

Updates

At first, I was making a call to get user data from Dev.to API as post data does't include user summary. @cherylli found that this call caused the error, and she advised me to copy the summary to our local member data and use them instead of making an extra API call.

Additionally, after this, I implemented a related/latest posts feature.

Another Issue I found

"Tips for collaborating with a new project codebase" has a styling issue and I'm unsure how to fix it. Need to update styling here components/blog/PostContent/styles.js somehow.

Screenshot from 2024-06-23 09-46-22

@cherylli
Copy link
Member

I see the card has a pointer now but nothing happens when I clicked on it.

@Satoshi-Sh
Copy link
Member Author

I see the card has a pointer now but nothing happens when I clicked on it.

Are you talking about this?

I think clicking on the photo or anywhere in the card should also link to the single page, instead of just "read more". I keep trying to click on the image, so this can be an expected behaviour, thoughts?

If so, I think this is out of the scope in this PR.

@cherylli
Copy link
Member

This is what I mean. Is anyone else getting this?
in the preview it's like this
image
on live it's like this
image
so when the cursor is pointer i'd expect it to be a clickable. The live version feels ok as it's not a pointer.

@cherylli
Copy link
Member

I think the pointer issue is just the netlify preview, it seems fine locally. 🤔
I thought the preview should resemble the actual version

Anyway, everything looks good but I would add some spacing in between each "related post"

image

Co-authored-by: Cheryl M <[email protected]>
@Satoshi-Sh
Copy link
Member Author

Thanks for the review and guidance!! @cherylli

Copy link
Member

@mariana-caldas mariana-caldas left a comment

Choose a reason for hiding this comment

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

Amazing job, @Satoshi-Sh ! 🚀 🥇

utils/about.js Show resolved Hide resolved
@mariana-caldas mariana-caldas merged commit 57eb7e2 into main Jul 26, 2024
4 checks passed
@mariana-caldas mariana-caldas deleted the feat/with-dev.to branch July 26, 2024 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Connect Single Blog Post UI with dev.to and route users to corresponding single blog post page
3 participants