Make your own Blog with SvelteKit and dev.to api

#sveltekit #api #javascript #blog

Read if:

You are interested in SvelteKit
Wanna learn about how to make your own blog.

Introduction

In this post I'm gonna show you how i created my own blog for ethercorps.io.

Visitors can see and read all the blog on your website while you gonna write them on Dev.

Here I used SvelteKit, TailwindCSS, Dev.to.

How SvelteKit Works

SvelteKit is a full-stack framework that is used with sveltejs. SvelteKit follows modern _filesystem-based _ which is like if you wanna visit a url

e.g. example.com/blog/[blogID] blogId is dynamic

then you have to make a folder by name blog in your routes directory than add a svelte file [slug].svelte file name going to be same.

As you can see the above image I have a blog directory and in which two files exists index.svelte and [slug].svelte,
When you visits

e.g. example.com/blog

your index.svelte file going to be shown and when you visit

e.g. example.com/blog/[blogID]

your [slug].svelte file going to be shown.

Index.svelte

As I mentioned above this file gonna show all of your blogs available on the dev.to,
Now question arise how we gonna do that?
It's a pretty simple thing we gonna hit dev.to api for your usernames post

https://dev.to/api/articles?username=theether0
Here theether0 is my username which you can replace by your own.

First we gonna talk about how we gonna hit api.

<script context="module">
    export async function load({ fetch }) {
        let articles;

        try {
            articles = await fetch(`https://dev.to/api/articles?username=theether0`);
            articles = await articles.json();
        } catch (e) {
            console.log(e);
        }
        return {
            props: {
                articles
            }
        };
    }
</script>

<script>
    export let articles;
</script>

In above code you can see there are two script's tag one with context module.This script tag will run first and after that every thing.So in that script tag we will fetch our all blogs then pass them as props (SvelteKit asked for it) and then that props items can be accessed from normal script tag that will run after the module tag.

Example props:{articles} here you can access it in normal script tag <script> export let articles </script>

Now we gonna see our HTML

<section class="text-secondary body-font overflow-hidden">
    <div class="container px-5 py-24 mx-auto">
        <div class="-my-8 divide-y-2 divide-gray-100">
            {#each articles as article}
                <div class="py-8 flex flex-wrap md:flex-nowrap">
                    <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
                        <span class="font-semibold title-font text-gray-700">CATEGORY</span>
                        <span{article.readable_publish_date:}</span>
                    </div>
                    <div class="md:flex-grow">
                        <h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
                            {article.title}
                        </h2>
                        <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-row space-x-2">
                            {#each article.tag_list as tag}
                                <span class="font-Basteleur-Moonlight title-font text-gray-700 capitalize"
                                    >{tag}</span
                                >
                            {/each}
                        </div>
                        <p class="leading-relaxed">
                            {article.description}
                        </p>
                        <a class="text-indigo-500 inline-flex items-center mt-4" href={`/blog/${article.id}`}
                            >Learn More
                            <svg
                                class="w-4 h-4 ml-2"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                                fill="none"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path d="M5 12h14" />
                                <path d="M12 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</section>

Above there is one <a> tag in which href's article.id will be passed as slug to your [slug].svelte page that how you make it dynamic. You pass a slug/parameter and SvelteKit uses it as slug.

This is the index.svelte file.

[Slug].svelte

<script context="module">
    export async function load({fetch, params}) {
        let article;
        try {
            article = await fetch(`https://dev.to/api/articles/${params.slug}`);
            article = await article.json();
        } catch (e) {
            console.log(e);
        }
        return {
            props: {
                article
            }
        };
    }
</script>

<script>
    export let article;
</script>

Above we are doing the same thing as we done in index.svelte difference is we are getting slug from params which is you passed to your article in index.svelte.
HTML part is more say here.

<div class="prose md:mx-auto mx-4 lg:prose-xl md:pt-40 py-20">
    <h1>{article.title}</h1>
    {@html article.body_html} //html can be served with @html in sveltekit
</div>