Combine Dev.to API with Single Post UI

[Satoshi-Sh]

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

P.S.

This part will be implemented after this PR?

[netlify]

✅ 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... Use your smartphone camera to open QR code link.

---

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

[Satoshi-Sh]

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]

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)

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]

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]

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.

[cherylli]

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

[Satoshi-Sh]

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]

This is what I mean. Is anyone else getting this?
in the preview it's like this

on live it's like this

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]

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"

[Satoshi-Sh]

Thanks for the review and guidance!! @cherylli

[mariana-caldas]

Amazing job, @Satoshi-Sh ! 🚀 🥇