DEV Community: Wesley Mutwiri

Create a blog with Contentful and Sveltekit

Wesley Mutwiri — Wed, 16 Mar 2022 14:28:28 +0000

I know you're wondering why another "create a blog tutorial" but that's the simplest project I could come up with for this tutorial. I also needed another excuse to spread the svelte gospel to everyone out there. Since there is currently no other Contentful and sveltekit tutorial out there (at time of writing of course), I am here to save the day, with my poor writing skills.

Contentful is an API first content platform to build digital experiences (according to their site description of course). If you only need to check out the code, without the hustle of reading this entire blog, you can find the live deployed site here and the repo for reference here

Prerequisites

Contentful account, API key and secret key
Text editor or JavaScript coding environment
Time
Familiarity with HTML, CSS and JavaScript(ES6+),
Node.js and npm installed on your development machine.
Basic knowledge of svelte and svelte kit

Initial Setup

You could use codesandbox or svelte playground for a plain svelte application to play around with Contentful (Without routing of course) or create a local svelte kit application, for dynamic routes. Open a new terminal and run the following command:

    npm init svelte@next content-kit

Accept the prompt to proceed and afterwards select the skeleton project since we don't want to have a lot of demo data. Choose no when prompted whether to use TypeScript, enable ESLint, enable Prettier and disable testing since we won't be covering testing.

Navigate into the newly created project folder and install the dependencies locally using:

    cd content-kit
    npm i

You'll also need to install Contentful SDK using:

    npm install contentful

Run the development server using:

    npm run dev

The dev server will be listening from the http://localhost:3000 address. Any changes made to the application will be automatically rebuilt and reloaded using Vite into the running app as long as the dev server is still running.

Contentful Setup

I would go into the details of how to create an account and setup your contentful API but that would be free marketing for them and we don't do that here. However, I'll try my best to explain how to easily do so with screenshots.

On the content model page of your dashboard, create a new content model that will host the structure of how your blog will look like and name it blog.

Add the fields as shown below, making them mandatory and configuring the dateField to only include the date. Also, make sure the slugField is auto-generated from the title for SEO purposes.

On the content page is where you'll add sample blog posts so that we can have data to play around with. So add one post and another one.

On the settings page, copy the API key and space ID and paste them somewhere safe, we'll add them to the sveltekit project in a moment.

The Sveltekit project

Since this isn't a styling tutorial, we'll create a very basic UI or if you'd like, you can use the layout from this repo, (yes, I'm shamelessly advertising my own repos), and tweak it to your liking.

Create a .env file in the root of your project and add your API key and space ID as shown below.

VITE_CONTENTFUL_DELIVERY_API_TOKEN=<insert_contentful_api_key_here>
VITE_CONTENTFUL_SPACE_ID=<insert_contentful_space_id_here>

If you need a quick explanation of what all folders and files represent or if you're new to svelte kit, you can checkout here.

We'll create a lib folder inside the src folder that will contain all the components and library files that we'll require.

This is a simple alias to src/lib, or whatever directory is specified as config.kit.files.lib. It allows you to access common components and utility modules without ../../../../ nonsense.

Create a contentfulClient.js inside the lib folder to intialize the contentful SDK.

import contentful from 'contentful';

export const client = contentful.createClient({
    space: import.meta.env.VITE_CONTENTFUL_SPACE_ID,
    accessToken: import.meta.env.VITE_CONTENTFUL_DELIVERY_API_TOKEN
});

Create an data.json.js file in the routes folder. This file will include the logic that gets data from the contentful CMS. The retrieved blogs are then passed onto the body of the index.svelte file.

import { client } from '$lib/contentfulClient';

export async function get() {
    // get all blogs from Contentful
    const blogs = await client.getEntries({
        content_type: 'blog'
    });

    if (blogs) {
        return {
            status: 200,
            body: {
                blogs
            }
        };
    }

    return {
        status: 404
    };
}

The content_type can be found from the content model sidebar on the right labeled as CONTENT TYPE ID. This will be used to return all entries in the content type model you created.

The routes folder contains the routes, hence the index.svelte site represents the root path.

Delete everything in the index.svelte file and add the following.

<script context="module">
    export async function load({ fetch }) {
        const [{ blogs }] = await Promise.all([fetch('/data.json').then((r) => r.json())]);
        return {
            props: {
                blogs
            }
        };
    }
</script>

<script>
    import { base } from '$app/paths';
    export let blogs;
</script>

<div class="row">
    {#each blogs.items as blog}
        <div class="column">
        <a href={`${base}/${blog.fields.slugField}`}>
            {blog.fields.title}
        </a>
        <p>{blog.fields.datePublished}</p>
        </div>
    {/each}

</div>

<style>
</style>

In the module script, we fetch the blogs variable we had instantiated from the data.json.js file. The <script context="module"> is necessary because load runs before the component is rendered. Code that is per-component instance should go into a second <script> tag.

The {base} is a string that matches config.kit.paths.base. It must begin, but not end, with a /.

The slugField will be used to uniquely identify a specific blog post while maintaining SEO for the entire site. We now need a way to access a specific blog post and have the content retrieved from the API as markdown to be rendered as HTML.

For the rendering, we'll need to install an extra package. We'll need

marked - a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time.**

npm i marked

Create a folder called components inside the lib folder which will contain different components. Afterwards, create a file RichContent.svelte that will contain the code necessary to convert rich text to HTML.

<script>
    import { marked } from 'marked';
    export let richContent = '';
    const renderer = new marked.Renderer();
    $: pageContent = marked(richContent, { renderer });
</script>

<div>{@html pageContent}</div>

We'll need a way for svelte kit to fetch dynamic content based on the route. We'll create a [slug].json.js file inside the routes folder that will allow us to fetch dynamic content based on the route visited.

Dynamic parameters are encoded using [brackets]. For example, a blog post might be defined by src/routes/blog/[slug].svelte. These parameters can be accessed in a load function or via the page store.

A file or directory can have multiple dynamic parts, like [id]-[category].svelte. (Parameters are 'non-greedy'; in an ambiguous case like x-y-z, id would be x and category would be y-z.)

import { client } from '$lib/contentfulClient';

export async function get({ params }) {
    // the `slug` parameter is available because this file
    // is called [slug].json.js
    const blog = await client.getEntries({
        'fields.slugField': params.slug,
        content_type: 'blog'
    });

    if (blog) {
        return {
            body: {
                blog
            }
        };
    }

    return {
        status: 404
    };
}

The code is almost similar to the one in the data.json.js file but only one post is retrieved since we're matching posts with the slugField that is similar to the url visited. We'll create a [slug].svelte file that will be used to define how the page will be rendered and to be able to use the content retrieved from the Contentful CMS.

<script context="module">
    export async function load({ fetch, params }) {
        const url = `/${params.slug}.json`;
        const res = await fetch(url);

        if (res.ok) {
            const { blog } = await res.json();

            return {
                props: {
                    blog: blog.items[0]
                }
            };
        }

        return {
            status: res.status,
            error: new Error(`Could not load ${url}`)
        };
    }
</script>

<script>
    import RichContent from '$lib/components/RichContent.svelte';

    export let blog;
</script>

<div class="container application-form">
    <div class="row">
        <div class="col-lg-12">
            <h1>Course: {blog.fields.title}</h1>
            <p>Date From: {blog.fields.datePublished}</p>

            <RichContent richContent={blog.fields.content} />
        </div>
    </div>
</div>

<style>
</style>

We import our RichContent.svelte component and use it to convert rich text to html. The site is now ready for testing and deployment.

Deployment will be done on netlify since it is one of the easiest and simplest to use. You can deploy the site on Github, Gitlab and/or Bitbucket which will allow for automatic deployments anytime you push to your hosted repository. You'll need an account, a netlify.toml file in your root folder and the svelte kit netlify adapter in order to deploy the site. Extra instructions can be found on the netlify-adapter GitHub README

Let's install the svelte kit netlify adapter first and tweak the svelte config file.

npm i -D @sveltejs/adapter-netlify@next

Change the svelte.config.js file to use the netlify adapter instead of the default adapter-auto. The svelte.config.js should look something like this:

import adapter from '@sveltejs/adapter-netlify';
import { join } from 'path';
import { readFileSync } from 'fs';
import { cwd } from 'process';

const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            split: false
        }),
        vite: {
            ssr: {
                noExternal: Object.keys(pkg.dependencies || {})
            }
        }
    }
};

export default config;

Afterwards, create a netlify.toml file in the root folder of your application.

This will determine where to write static assets based on the build.publish settings.

[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

Remember to add your environment variables in the environment sub section inside the build and deploy section on Netlify in order to secure your API token while ensuring your app has access to the environment variables.

And voilà, we are ready to connect to netlify and deploy this application. All you need is to follow the instructions on the netlify site and you'll have your site up and running after the build is complete.

Thank you very much for your time, any comments, reviews, news and critics will be highly appreciated. Till next time.

Free design resources you probably didn't know about Part 1

Wesley Mutwiri — Mon, 14 Feb 2022 09:05:34 +0000

Recently, I started on the Daily UI 100 days of design challenge and the biggest challenge I've faced so far, obviously not counting consistency and procrastination issues, is finding inspiration and design resources.

This post is mainly for me to bookmark different design resources so that I'll be able to come back to them every time I need to create a new design. Most resources fall in various categories such as illustrations, icons, images, videos, inspiration, fonts, colors or animations.

I should probably mention that I am not being paid to advertise these resources, so this is an unbiased opinion(it is biased but let's pretend it is not for now). The listing is also random and is not a ranking of any kind.

Without further ado, let's get started on the different resources.

Typography Resources

A good font pairing, especially for a website can be what determines whether your design looks professional, creative or just plain when designing. They include:

1. Google fonts

Google Fonts (formerly known as Google Web Fonts) is a font embedding service library. This includes free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android.

Quoted from Wikipedia

As the description says, Google fonts' catalog places typography front and center. All fonts on the site are free and open-source, making their fonts available to everyone.

Link: Google Fonts

2. Font Joy

Getting font pairs is a very difficult task, but with font joy, you can easily pair different fonts and see how they would look in real-time.

Link: Font joy

3. Font squirrel

If all the fonts on google fonts are not tickling your fancy, this is what we might call, the boss level of font resources. All fonts hosted are free for commercial use.

Link: Font squirrel

4. Font pair

Don't have the time and energy to generate different font pairings and only need to get a simple pair, or maybe you need inspiration on which font pairs you can use. This is the site that helps you do all that. Find font pairings as well as how they've been used together.

Link: Font pair

5. Typio

Another font inspiration site where you can find out how to use different font pairs. You can also easily find font pairs for different categories of work such as travel, hotels etc.

Link: Typ

Color resources

Is it color or colour, that all depends on whether you use American or British English, either way, color(using this spelling because of auto correct nothing serious) has a huge impact on design. Decades of work has gone into researching how different people passive color and the impact it has on businesses in general.

1. Coolors

A color palette generator that helps you visually see how different colors will look when used together.

Link: Coolors

2. Happy hues

A simple color palette inspiration site that shows you a real world example of how to combine different colors in your design project. The colors used here, however, might backfire as I've painfully come to see, so use with caution.

Link: Happy Hues

3. Color Wise

Another color palette generator where one can get different colors that can easily be used together.

Link: ColorWise

4. Palettable

This is basically just tinder but for colors. Like if you want to continue with the color and dislike otherwise, it then automatically suggests the next color that can be used with the current color liked.

Link: Palettable

5. Picular

If palettable is a tindr for colors, then picular is a google for colors. Just search for any word and it will automatically provide you with different colors associated with the word you've searched.

Link: Picular

6. 99 Designs

I'll add blog resources on how to choose colors and a short blog on the psychology of color which is very important when deciding which palette one should use.

Link for psychology of colors: Psychology of colors
Link for color generator: 99Designs color Generator

Icon Resources

1. Feather icons

One of my favorite go to places for getting icon resources. Free SVG icons that can easily be copied and pasted in your website code or UI designs without much stress.

Link: Feather Icons

2. Font Awesome

If, you're a web developer you've definitely come across this resource, if you haven't then it's definitely worth your time

Link: Font Awesome

3. Flaticon

If you ever see an icon and have no idea where to find it? This is probably the place to look for it.

Link: Flaticon

4. Icons8

Another one . This site also includes images, illustrations and even music.

Link: Icons8

5. Streamline

Just like Icons8, they also do almost everything from illustrations, icons and emojis

Link: Streamline

6. Ionicons

Font awesome alternative that contains only free and open source icons

Link: Ionic

Illustrations

Need drawings and animated characters, look no further.

1. Undraw

Get free illustrations for anything you want. Change the colors and click to download whichever illustration fits you best. With a search powered by algolia you can be assured you'll find things easily.

Link: Undraw

2. Open doodles

A free set of illustrations. The illustration's design is quite unique and interesting. You can either download the image or use a link to the resource.

Link: Open Doodles

3. Icons8

Seems like the only thing they don't offer is financial aid

Link: Icons8

4. Illustrations co

Download either SVG or PNG illustrations for free, all with unique designs.

Link: Illustrations co

5. IRA design

Create and customize your illustrations with this free site. Change the background, the characters, colors etc and create your own custom illustration

Link: IRA Design

6. Blush

Small PNGs are the only illustrations you can download but that is more than plenty.

Link: Blush Design

7. Streamline

Not quite sure, how this might help when you can't customize the colors without an upgrade but at least it's a resource that one can download either SVG, PDF or PNG formats

Link: Streamline

Let's take a break

The list is not exhausted but I believe in short blog posts and not 30 minute reads so I'll break this into two parts. Part two coming soon, so stay tuned.

Create Beautiful Charts with Svelte and Chart js

Wesley Mutwiri — Thu, 10 Feb 2022 15:33:31 +0000

Svelte is a JavaScript compiler that compiles its code to HTML, CSS and vanilla JavaScript hence creating a very performant website. On the official website, there is a tutorial that explains Svelte step-by-step. If you just want to see the completed code and figure it out by yourself, go to the code for this article.

Now that the introduction and pleasantries are out of the way, it is time for the main event. I'll be assuming that the desktop environment being used in this tutorial is Linux based for the initial setup of a svelte application and you already have node and npm installed.

Prerequisites

So as to be able to fully work on the application at hand, you'll need:

Familiarity with HTML, CSS and JavaScript(ES6+),
Node.js and npm installed on your development machine.
Working machine

For this tutorial, we shall be using the Chart js library for creating basic charts.

Why Chart.js

That's a pretty good question actually, why would anyone decide to use chart JS whereas there are very many other charting libraries out there that are more performant? The simple answer is that Chart JS(According to sources called "this is my opinion") is easier to use. Some of the alternative charting libraries include:

pancake which has very scarce documentation and is in thorough experimentation(at the time of writing). Since it has been created by Rich Harris, you can rest assured that it might probably never get documentation or a stable release just like our fallen soldier sapper (a moment of silence in remembrance)
Chartist - Really impressive charting library that is only 10KB (Gzip) with no dependencies. Round of applause for this awesome library that should play nice with svelte since it does not have any dependencies. I honestly can't remember why I didn't go with this for this tutorial but there's always time for another tutorial, am I right 😉?
d3.js - Great library, but it would take me to long to explain whereas I'm trying to write a super simple tutorial. I would also recommend this library, though those examples they present are thoroughly intimidating, like this example where you create a chart of Obama's face using Voronoi Stippling(not a clue what that is and my furniture just started floating around once I spoke those words out loud)

Getting Started

You could use codesandbox for your initial setup or create a local svelte application using the degit tool. Open a new terminal and run the following command:

    npx degit sveltejs/template standard-charter

Navigate into the newly created project folder and install the dependencies locally using:

    cd standard-charter
    npm install

Run the development server using:

    npm run dev

The dev server will be listening from the http://localhost:5000 address. Any changes made to the application will be automatically rebuilt and reloaded into the running app as long as the dev server is still running.

You'll also need to install Chart js using:

        npm install chart.js

In the App.svelte file, delete everything leaving only the script tags. Since this is a relatively simple app, this is where all our code will reside in.

    <script>
      import { onMount } from 'svelte';
      import Chart from 'chart.js/auto/auto.js';

      let portfolio;
      const data = {
            labels: ['Expenses', 'Savings', 'Investments'],
            datasets: [
                {
                    label: 'My First Dataset',
                    data: [300, 50, 100],
                    backgroundColor: ['#7000e1', '#fc8800', '#00b0e8'],
                    // hoverOffset: 4,
                    borderWidth: 0
                }
            ]
        };
        const config = {
            type: 'doughnut',
            data: data,
            options: {
                borderRadius: '30',
                responsive: true,
                cutout: '95%',
                spacing: 2,
                plugins: {
                    legend: {
                        position: 'bottom',
                        display: true,
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 14
                            }
                        }
                    },
                    title: {
                        display: true,
                        text: 'My Personal Portfolio'
                    }
                }
            }
        };
      onMount(()=> {
        const ctx = portfolio.getContext('2d');
        // Initialize chart using default config set
        var myChart = new Chart(ctx, config);
      })
    </script>
    <canvas bind:this={portfolio} width={400} height={400} />

And there you have it folks, a very good looking doughnut chart that showcases your "sample budget".

We add the creation of the chart on the svelte onMount function so that the chart is created and added to the layout before it is mounted on the page. Note that the value of canvas will be undefined until the component has mounted, so we put the logic inside the onMount lifecycle function.

The read-only this binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a <canvas> element:

svelte bind example

Chart JS receives the data from the data variable we created. We have customized the labels as well as the background color of the doughnut lines.

The config variable is what we've used to define the type of chart and to style the chart we've created. The type can be either bar, line, pie, radar etc etc depending on the type of chart you want to render. You can play around with the sample data we've provided to see what kind of chart will be formed.

In a real life situation, the data to be displayed would be provided from an external service such as an API rather than have it hard coded as a variable.

Reducing the cutout percentage will make the doughnut chart slightly less hollow and a 0% cutout will make it a pie chart.

If you need to make multiple charts on the same page then it would be simpler and easier to copy the code and convert it into a component where you export defaults. But that is all the time I have for this week folks, stay tuned for more next week.

PS. Shameless plug - Visit my blog at Wesley's Blog

DEV Community: Wesley Mutwiri

Create a blog with Contentful and Sveltekit

Other Content Management Systems

Prerequisites

Initial Setup

Contentful Setup

The Sveltekit project

Free design resources you probably didn't know about Part 1

Typography Resources

1. Google fonts

2. Font Joy

3. Font squirrel

4. Font pair

5. Typio

Color resources

1. Coolors

2. Happy hues

3. Color Wise

4. Palettable

5. Picular

6. 99 Designs

Icon Resources

1. Feather icons

2. Font Awesome

3. Flaticon

4. Icons8

5. Streamline

6. Ionicons

Illustrations

1. Undraw

2. Open doodles

3. Icons8

4. Illustrations co

5. IRA design

6. Blush

7. Streamline

Let's take a break

Create Beautiful Charts with Svelte and Chart js

Prerequisites

Why Chart.js

Getting Started