Create the UI for the Single Blog Post page

mariana-caldas commented 5 months ago

What do we need to build or fix? We need to build a responsive single blog post page for our open-source website Web Dev Path. Currently, our blog page posts' cards' links redirect users to the dev.to platform. The goal is to keep users on our website longer by creating a page UI with the following new sections: "Single Post Content," "Author Bio," and "Related Posts."

single-blog-post

Technical details

Create the UI for the single blog post page with the following sections:

1. Single Post Content:

Display the blog post content.
The post image should be optional.

2. Author Bio:

Display the author's bio.
The author image should be optional with a placeholder default (Figma file).
Only the LinkedIn icon link is mandatory. If not provided, use the Web Dev Path LinkedIn group: Web Dev Path LinkedIn.

3. Related Posts:

Display the first 5 similar posts by considering the post's tags.

Approach suggestions

Reference the Figma mockup designed by @kimbercash . Ping @mariana-caldas to get access to the Figma file.
For design questions, please talk to @kimbercash on our Slack channel #design-gate.
This task only includes the UI creation, not the current connection from the blog page, the redirection, or the URL link creation for the single posts. These will be handled in future tasks.
Ensure the page is fully responsive by stacking elements when the screen width requires. Check the codebase for reference and consistency.

Deadline Please keep in mind that once you assign this task to yourself, you'll need to complete it in 30 days.

Acceptance criteria

Test the section and components in many screen sizes; you can use the Inspect tool for that.
Please test if the new changes added to the components do not affect the other instances.
Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
Update the CHANGELOG.md file.

cherylli commented 5 months ago

I wrote this a while ago when working on all blog post page, in the bottom of the article it shows how to retrieve a single post

https://dev.to/cherylli/displaying-devto-articles-on-your-website-using-nextjs-1bbk

Satoshi-Sh commented 5 months ago

Closed by #215

Web-Dev-Path / web-dev-path

Create the UI for the Single Blog Post page #214