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

[mariana-caldas]

What do we need to build or fix? We need to implement the logic to connect our single blog post UI with dev.to. This involves automatically pulling content data from dev.to and ensuring users are directed to the corresponding single post page on our Next.js website instead of being redirected to dev.to. This will help keep users on our website longer.

Technical details 1. Set Up API Call to dev.to:

• Extend the getStaticProps function in pages/blog/posts/[id].js to fetch detailed post content from dev.to using their API.
• Use the dev.to API to fetch the content for individual blog posts based on their id.

2. Update Single Blog Post UI:

• Utilize the fetched data in the BlogPostContainer component.
• Pass the necessary data (title, content, author, etc.) to the BlogPostContainer and PostContent.

3. Routing Logic:

• Ensure that clicking on a blog post link in the blog post list routes to the new single blog post page using dynamic routing.
• Update BlogPostsContainer to link to the new [id].js page.

Approach suggestions

• https://dev.to/cherylli/displaying-devto-articles-on-your-website-using-nextjs-1bbk
• Example of implementation for pages/blog/posts/[id].js

import BlogPostContainer from '@/components/blog/BlogPostContainer';
import { useRouter } from 'next/router';

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }
  return <BlogPostContainer post={post} />;
};

export default BlogPost;

export async function getStaticPaths() {
  const res = await fetch('https://dev.to/api/articles?username=wdp');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://dev.to/api/articles/${params.id}`);
  const post = await res.json();
  const userSummary = post.user.summary;

  return {
    props: {
      post: {
        id: post.id,
        title: post.title,
        cover_image: post.cover_image,
        published_at: post.published_at,
        user: {
          name: post.user.name,
          summary: userSummary,
        },
        body_html: post.body_html,
      },
    },
    revalidate: blogRevalidate,
  };
}

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

Acceptance criteria

• Test the routing logic to ensure users are correctly navigated to the single post pages on our website.
• Test the page 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.

[mariana-caldas]

Blocked by PR #215 merge

[cherylli]

Should we use the slug instead of the id for the URL? It would look nicer and better for seo