LC18- Complete blog with Vanilla JavaScript and Contentful

Last Updated on October 1st, 2021 by Codevo

Hello and welcome, in this article you are going to learn how to build a complete blog with vanilla javascript and contentful.

In my previous article, we built a complete ecommerce website with HTML CSS and javascript. Do your best to check it out because you will learn a lot of modern CSS tricks from it.

Demo

I know in your mind you are wondering what contentful is and what it can be used for. Don't worry in a few moments you will understand how easy and fast you can build your website using contentful for managing your content.

what is contentful?

Contentful is a modern headless CMS that allows developers to manage the content of their websites or web apps without having to build a backend from scratch.

What is Contentful used for?

Contentful is a headless CMS, Contentful is an API that allows you to create, manage and publish content on any digital channel.

Resources

Video Tutorial

The video above will guide you through the blog we are going to build with vanilla javascript.

Setup Files

Download Setup File Here

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Favicon -->
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <!-- Boxicons -->
    <link
      href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css"
      rel="stylesheet"
    />
    <!-- StyleSheet -->
    <link rel="stylesheet" href="styles.css" />
    <title>Tech Blog</title>
  </head>
  <body></body>
</html>

index.html

CSS

:root {
  --primary: #4db2ec;
  --white: #fff;
  --black: #4d4d4d;
  --black2: #222;
  --grey1: #dad8d8;
  --grey2: #828282;
  --orange: #ffa238;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

html {
  box-sizing: border-box;
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  background-color: #fcfafa;
  color: var(--black);
  font-weight: 400;
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

.container {
  max-width: 110rem;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .container {
    padding: 0 3rem;
  }
}

.d-flex {
  display: flex;
  align-items: center;
}

styles.css

WEBPACK CONFIG

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, ".", "index.html"),
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "."),
    port: 3000,
    open: true,
  },
};

webpack.config.js

Package Json

{
  "name": "sourcecode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@contentful/rich-text-html-renderer": "^15.0.0",
    "@contentful/rich-text-types": "^15.0.0",
    "contentful": "^8.4.2",
    "date-fns": "^2.23.0",
    "emailjs-com": "^3.2.0",
    "sweetalert2": "^11.0.20"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

package.json

Render Options

const renderOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {
      if (node.data.target.sys.contentType.sys.id === "codeBlock") {
        return `<pre>
            <code>${node.data.target.fields.code}</code>
          </pre>`;
      }

      if (node.data.target.sys.contentType.sys.id === "videoEmbed") {
        return `<iframe
            src='${node.data.target.fields.embedUrl}'
            height='100%'
            width='100%'
            frameBorder='0'
            scrolling='no'
            title='${node.data.target.fields.title}'
            allowFullScreen=true
          />`;
      }
    },
    [INLINES.HYPERLINK]: (node, next) => {
      if (node.data.uri.includes("player.vimeo.com/video")) {
        return `<div class="iframe-container">
            <iframe
              title="${next(node.content)}"
              src="${node.data.uri}"
              frameBorder='0'
              allowFullScreen
            ></iframe>
          </div>`;
      } else if (node.data.uri.includes("youtube.com/embed")) {
        return `<div class="iframe-container">
            <iframe
              title="${next(node.content)}"
              src="${node.data.uri}"
              allow='accelerometer; encrypted-media; gyroscope; picture-in-picture'
              frameBorder='0'
              allowFullScreen
            ></iframe>
          </div>`;
      } else {
        return `<span class="color">
        <a href="${node.data.uri}">${next(node.content)}</a>
        </span>`;
      }
    },
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
      return `<div class="content-img"><img
          src="https:${node.data.target.fields.file.url}"
          height="${node.data.target.fields.file.details.image.height}"
          width="${node.data.target.fields.file.details.image.width}"
          alt="${node.data.target.fields.description}"
        /></div>`;
    },
  },
};

renderoptions

Github link

Download Code Files

2 COMMENTS

Pronoy RanjanSeptember 3rd, 2021

want full code

YuuAugust 20th, 2021

Hiyyyux