Get Dev.to posts on your personal site, with ease!

{
  "id": 150589,
  "title": "Byte Sized Episode 2: The Creation of Graph Theory ",
  "description": "The full story of Leonhard Euler and the creation of this fundamental computer science principle, delivered in a few minutes.",
  "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--qgutBUrH--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/88e62fzblbluz1dm7xjf.png",
...
  "body_html": "<p>Today's episode of Byte Sized is about Leonhard Euler and the creation of <a href=\"https://en.wikipedia.org/wiki/Graph_theory\">Graph Theory</a>.</p>\n\n<p>For more about how Graph Theory works, check out this video from BaseCS!</p>...\n",
  "body_markdown": "---\r\ntitle: Byte Sized Episode 2: The Creation of Graph Theory \r\npublished: true\r\ndescription: The full story of Leonhard Euler and the creation of this fundamental computer science principle, delivered in a few minutes.\r\ntags: computerscience, graphtheory, bytesized, history\r\ncover_image: https://thepracticaldev.s3.amazonaws.com/i/88e62fzblbluz1dm7xjf.png\r\nseries: Byte Sized Season 1\r\n---\r\n\r\nToday's episode of Byte Sized is about Leonhard Euler and the creation of [Graph Theory](https://en.wikipedia.org/wiki/Graph_theory).\r\n\r\nFor more about how Graph Theory works, check out this video from BaseCS!...",
  "user": {},
  "organization": {}
}

#!/usr/bin/env node

const path = require('path');
const fs = require('fs');
const fetch = require('node-fetch');

(async () => {
    // get list of 100 posts of user, for a list of posts id's.
    const response = await fetch('https://dev.to/api/articles?username=dechamp&per_page=100');

    // abstract out date in json format.
    const posts = await response.json();

    // Write the data to a json file, we use this on the site to make a list of our posts.
    fs.writeFileSync(`${path.join(__dirname, postPath)}posts.json`, JSON.stringify(posts));

    // loop through the list of posts for us to process each post.
    for (const post of Array.from(posts)) {

        // Skip if we already have a matching file by id.
        if (!fs.existsSync(path.join(__dirname, `${postPath}${post.id}.json`))) {
            // We have to pause so we don't upset the api by hitting the rate limit.
            await new Promise(resolve => setTimeout(resolve, 3100));

            // Grab the individual post.
            const postResponse = await fetch(`https://dev.to/api/articles/${post.id}`)

            // abstract out data in json format.
            const json = await postResponse.json();

            // Write the post to a file for us to consume on the site later.
            fs.writeFileSync(path.join(__dirname, `${postPath}${post.id}.json`), JSON.stringify(json))
        }
    }

    // alert the user we are done.
    console.log('done');
})();

import React, {ReactNode, useEffect, useState} from "react";
import DefaultLayout from "../../layout/DefaultLayout";
import Post from "../../layout/Post";
import posts from '../../assets/data/posts/posts.json';
import {useNavigate} from "react-router-dom";

export default function Blog() {
    const navigation = useNavigate();

    const [content, setContent] = useState<ReactNode[]>([]);

    useEffect(() => {
        (async () => {

            let finalContent = posts.map<ReactNode>((post, index) => {
                return [
                    <Post className="post" onClick={() => navigation(`/blog/post/${post.id}`)} key={index} title={post.title} date={post.published_timestamp}>
                        <div dangerouslySetInnerHTML={{__html: post.description}}/>
                    </Post>
                ];
            });

            setContent(finalContent);
        })();
    }, []);

    return (
        <DefaultLayout>
            {content}
        </DefaultLayout>
    );
}

import React, {ReactNode, useEffect, useState} from "react";
import DefaultLayout from "../../layout/DefaultLayout";
import Post from "../../layout/Post";
import {Link, useParams} from "react-router-dom";

export default function BlogPost() {
    const {id} = useParams();

    const [content, setContent] = useState<ReactNode>(null);

    useEffect(() => {
        (async () => {
            const post = await import((`../../assets/data/posts/${Number(id)}.json`));

            const finalContent = (
                <Post title={post.title} date={post.published_timestamp}>
                    <div dangerouslySetInnerHTML={{__html: post.body_html}}/>
                </Post>
            );

            setContent(finalContent);
        })();
    }, []);

    return (
        <DefaultLayout>
            <div><Link to="/blog">Back to posts</Link></div>
            {content}
        </DefaultLayout>
    );
}

<BrowserRouter>
     <Routes>
         <Route path="/" element={<Home />}/>
         <Route path="/blog" element={<Blog />}/>
         <Route path="/blog/post/:id" element={<BlogPost />}/>
         <Route path="/projects" element={<Projects />}/>
     </Routes>
</BrowserRouter>