hi there, fellow devs 👀

Hashnode recently dropped their Public API 2.0, and it's honestly a game-changer. First up, let's talk growth. For us developers, the tech world is ever-evolving, and with every new framework or tool, there's a learning curve. Having a blog? It's like having a personal tech diary. Every time you jot down your learning or a solution to that annoying bug, you're not just sharing with the community, you're reinforcing your own knowledge. It's a win-win 🥇

Now, onto personal branding and authority. Imagine this: you’ve just solved a complex problem that most devs are scratching their heads over. By sharing that on your blog, you’re positioning yourself as a go-to expert in that niche. Over time, consistently sharing your insights and solutions? That's how you become an authority in the dev community. Your blog becomes more than just a platform; it's your stage, your brand, and your voice.

What's new with Hashnode Public API 2.0?

First things first, why the hype? Well, the new Hashnode API is flexible, powerful, and built incorporating some of the best practices. This means more control over our blogs, and customization just became a breeze.

Portfolio and a blog for developers? 🤔

Alright, pause. Before we dive deep, let's address and reinforce the elephant in the room. Why should you, a coder extraordinaire, even need a portfolio and a blog? Two words: Digital Identity. Your portfolio? It's your digital CV, showcasing your projects and what you bring to the table. And the blog? It’s where you rant, rave, and dissect the latest in tech. It’s your voice in this vast digital realm. Having both? It's like Batman with his utility belt - you're just more prepared for the tech world.

Setting the stage

Before we jam, let’s break down the project's beats:

1. Home: The grand entrance, aka index.html, showcasing who I am and what I do.

2. Blog: The blog.html, dynamically listing out all my musings and tech rants.

3. Blog Post: Here's where it gets juicy. blog-post.html is the dynamic container for each of my articles.

Hashnode API: The magic hero

Jumping into blog.html, here's where we make the magic happen:

<!-- Snippet from blog.html -->
<div id="articles"></div>
<script>
    // You know the drill: Fetch, parse, display!

    const username = 'danielapassos';

    fetch(`https://gql.hashnode.com/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            query: `
            {
                user(username: "${username}") {
                publication {
                    posts {
                    title
                    slug
                    }
                }
                }
            }
            `
        }),
        })
        .then(response => response.json())
        .then(data => {
        const articles = data.data.user.publication.posts;
        let articlesHtml = '';

        articles.forEach(article => {
            articlesHtml += `<a class="fact" href="blog-post.html?slug=${article.slug}">${article.title}</a><br>`;
        });


        document.getElementById('articles').innerHTML = articlesHtml;
        });
</script>

This bad boy here? It’s pulling those spicy articles from Hashnode and putting them on full display.

Deep diving one blog post at a time

With blog-post.html, every article gets its moment of fame:

<!-- Snippet from blog-post.html -->
<h1 id="post-title">Loading...</h1>
<div class="markdown-content">
    <div id="post-content">Loading...</div>
</div>
<script>
    // Magic script to get each article's details.
    document.addEventListener("DOMContentLoaded", function() {
    const urlParams = new URLSearchParams(window.location.search);
    const postSlug = urlParams.get('slug');

    fetch('https://gql.hashnode.com/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            query: `
                query Publication {
                    publication(host: "danizeres.dev") {
                        post(slug: "${postSlug}") {
                            title
                            content {
                                markdown
                                html
                            }
                        }
                    }
                }
            `
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data)
        const post = data.data.publication.post;
        document.getElementById('post-title').textContent = post.title;
        document.getElementById('post-content').innerHTML = post.content.html;
        document.title = `${post.title} - Daniela Passos`;
    })
    .catch(error => {
        console.error('There was an error:', error);
    });
});    

    var md = window.markdownit();
    var markdownText = document.getElementById('markdown-source').textContent;
    var result = md.render(markdownText);
    document.getElementById('markdown-container').innerHTML = result;
</script>

Every article slug? It has a story to tell.

That style, though 🤌🏽

style.css is the silent DJ, setting the mood and vibe 🎶
It’s the behind-the-scenes genius making sure everything’s on point.

Wrapping it up

So, when your portfolio and Hashnode's API have a secret handshake, things get lit. With a sprinkle of code, and a dash of style, you're not just showing off your coding chops, but also the tales you've got to tell.

Keep jamming, keep ranting, and always, always share your beats.

That is it for this article, thanks for reading! ⚒️

Let's connect on Twitter and LinkedIn 👋