
This article will discuss how to create a markdown based blog using `next.js`, `typescript` and `tailwind`. This will be a static website, with all the blog posts generated from the markdown files during the build time. We will also look at rendering code blocks with syntax highlighting.

### Initialize Project

Create new `next.js` project with `typescript` using the following command.
`npx create-next-app —-typescript`

### Tailwind Setup

1. Install `tailwind` development dependencies using `npm install -D tailwindcss@latest postcss@latest autoprefixer@latest`
2. Use `npx tailwindcss init -p` command to generate tailwind configuration files `tailwind.config.js` and `postcss.config.js`
3. Since `tailwind` is a utility first library, by default, it comes with a lot of utility css classes and not all of them are used in our app. Let's use the `purge` command to tree-shake and remove any unused styles from the production builds. In `tailwind.config.js` update the `purge: []` to `purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']`.

```jsx
// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

1. Import `tailwind` into the project by adding `base`, `components` and `utilities` styles to the `globals.css` file generated by `next.js`

```css
/* ./styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Create Blog Posts Using Markdown

Let's create few sample blog posts using markdown for our blog. Create a folder called `data` and inside that create another folder `posts`. The `posts` folder will contain all the markdown files for the blog posts.

Sample blog post `hello-world.md`

````md
---
title: Hello World
description: First Markdown Based Blog Post
updatedAt: 2021-08-22
author: Bojack Horseman
---

# Hello World

## Testing

lorem ipsum....

### this is a heading 3

#### heading 4 is this

##### heading five ooooo

###### this is heading six

Random paragraph text. This is a sample markdown blog posts!!

```html
<p>dhdhfdh dhfdhf</p>
```

```js
function test(a) {
  console.log('this is a JS code');
}
```

```ruby
def test
	puts('ruby is coool!!!!')
end
```

![VercelLogo](/images/vercel.svg)
````

Apart from the regular markdown syntax and the content for the blog, `hello-world.md` file has some metadata related to the blog posts. These metadata are also referred to as the `front-matter` and they are defined in the markdown files inside the `---` block. `front-matter` will contain any additional information associated with the blog post.

```markdown
---
title: Hello World
description: First Markdown Based Blog Post
updatedAt: 2021-08-22
author: Bojack Horseman
---
```

## Defining Models

Let's define few data model that defines the blog post. Let's create a `models` folder and create couple of files `post.ts` and `frontmatter.ts`. `Post` and `Frontmatter` types collectively define the attributes of a markdown blog post.

```tsx
// models/post.ts

import Frontmatter from './frontmatter';

interface Post {
  slug: string;
  content: string;
  frontmatter: Frontmatter;
}

export default Post;
```

```tsx
// models/frontmatter.ts

interface Frontmatter {
  title: string;
  description: string;
  author?: string;
  updatedAt?: string;
  createdAt?: string;
}

export default Frontmatter;
```

### Create the Index Page

Inside `pages` folder create a `index.tsx` file. The index page will parse all the markdown files from the `data/posts` folder and render a list of posts title and description.

In Next.js, we can use `getStaticProps` to write backend code that runs on the server. Any code inside the `getStaticProps` will run on the server and is executed during the build time. We will use `getStaticProps` to read the markdown files from the file system and extract the metadata and the markdown content of the blog posts. `getStaticProps` will return an object which is passed as props to the `Home` component.

We will use the `fs` module from `node.js` to read the markdown files from the files system. Additionally, a package called `gray-matter` is used to extract the metadata object after parsing the markdown file.

Install `gray-matter` as development dependency.

`npm i --save-dev gray-matter`

Get all the files from `data/posts` directory.

```tsx
const files = fs.readdirSync(`${process.cwd()}/data/posts`);
```

Loop through each `files` and parse each file to string. Now, we can use the `matter` function from the `gray-matter` package to retrieve the `frontmatter` (metadata) and the actual markdown content of the file.

```tsx
const file = fs.readFileSync(`data/posts/${fileName}`).toString();

// matter returns an object containing data and content keys
// data will have the frontmatter
// and content will have the actual markdown content
const { data, content } = matter(file);
```

For each file, create post object using the `frontmatter` and `content` returned by the `matter` function call. We will use the file name as a `slug`. Finally, `getStaticProps` will return an Array of `Post` object which will be passed as props to the `Home` component.

```tsx
// pages/index.tsx

import fs from 'fs';
import matter from 'gray-matter';

export async function getStaticProps() {
  const files = fs.readdirSync(`${process.cwd()}/data/posts`);

  const posts: Array<Post> = files.map((fileName) => {
    const file = fs.readFileSync(`data/posts/${fileName}`).toString();

    const { data, content } = matter(file);
    const frontmatter = { title: data.title, description: data.description };

    return {
      slug: fileName.replace('.md', ''),
      content: content,
      frontmatter,
    };
  });

  return {
    props: {
      posts,
    },
  };
}
```

Create and export a `Home` component on the index page. The `Home` component will receive an array of `Post` and render a list of post title and description.

```tsx
// pages/index.tsx

import Link from 'next/link';

type HomeProps = {
  posts: Array<Post>;
};

const Home: NextPage<HomeProps> = ({ posts }: HomeProps) => {
  return (
    <div>
      <main className="container mx-auto py-8 px-4 md:px-0 flex flex-col">
        <h2 className="text-6xl text-bold font-serif text-yellow-800">
          Sloth Blog
        </h2>
        <div className="my-6 flex-col">
          {posts.map((post, idx) => {
            return (
              <Link href={`/posts/${post.slug}`} key={idx} passHref={true}>
                <div className="w-max py-2">
                  <h3 className="text-2xl text-bold font-sans">
                    {post.frontmatter.title}
                  </h3>
                  <p className="text-sm font-thin">
                    {post.frontmatter.description}
                  </p>
                </div>
              </Link>
            );
          })}
        </div>
      </main>
    </div>
  );
};

export default Home;
```

With the magic of tailwind utility classes and a simple markup, we have a basic looking index page for our blog. Notice that we have used the `Link` component provided by `next.js`. `Link` component acts as an anchor tag and accepts an `href` prop. We use the `slug` to identify each blog post and will redirect to blog post URL `/posts/{slug}`.

![Markdown-Blog-Index-page {325*576}](/images/posts/markdown-blog/index-page.png)

### Create Post Page

When clicked on one of the blog posts in the index page, it redirects to the posts page to read the post content. However, we haven't created the post page yet. Let's create a `[slug].tsx` file inside `pages/posts` directory.

We will use [dynamic route](https://nextjs.org/docs/routing/dynamic-routes) feature of Next.js to dynamically generate the posts pages. For each markdown file in `data/posts` folder, we want to tell Next.js to generate individual pages during the build time. If we have 100 markdown files in our blog, Next.js will statically generate 100 html pages during build time.

`getStaticPaths` function allows us to create dynamic routes based on the parameters passed in, which in our case is the `slug`. In `getStaticPaths` it reads all the files in `data/posts` directory and return an array of objects. Each object must have the `params` key and contain an object with the `slug` key since we are using `[slug]` in the file name. After creating a dynamic routes, `getStaticPaths` passes the current slug received as a query param to the `getStaticProps` method.

```tsx
// pages/posts/[slug].tsx
import fs from 'fs';

export async function getStaticPaths() {
  const files = fs.readdirSync(`${process.cwd()}/data/posts`);

  const paths = files.map((fileName) => {
    return {
      params: {
        slug: fileName.replace('.md', ''),
      },
    };
  });

  return {
    paths,
    fallback: false,
  };
}
```

`getStaticProps` receives the `params.slug` from `getStaticPath` . `getStaticProps` makes use of the `slug` params to parse the markdown down and pass the `frontmatter` and markdown content to the `PostPage` component.

```tsx
// pages/posts/[slug].tsx

import fs from 'fs';
import matter from 'gray-matter';

export async function getStaticProps({
  params: { slug },
}: {
  params: { slug: string };
}) {
  const file = fs.readFileSync(`data/posts/${slug}.md`).toString();
  const { data, content } = matter(file);

  return {
    props: {
      slug,
      content,
      frontmatter: { title: data.title, description: data.description },
    },
  };
}
```

Next step is to create the `PostPage` component that renders the blog post. `PostPage` component would receive a `Post` object as props from the `getStaticProps` method.

```tsx
// pages/posts/[slug].tsx

const PostPage: NextPage<Post> = ({ slug, content, frontmatter }: Post) => {
  return (
    <main className="container mx-auto px-3 py-4 md:px-0">
      <article>
        <p>{content}</p>
      </article>
    </main>
  );
};
```

The above `PostPage` component renders the markdown content as a plain text. At this point our page looks like below, entire markdown content rendered as a plain text.

![Markdown-Blog-Post-Page-Text-Only {318*531}](/images/posts/markdown-blog/post-page-text.png)

### Render Markdown as HTML

We want to convert the markdown content raw string to corresponding HTML tags and render the markdown as an HTML. For this we will use a package called `React Markdown`.

Install `react-markdown` package using `npm i react-markdown`

In `PostPage` component, let's wrap the markdown content with the `ReactMarkdown` component. `ReactMarkdown` accepts the markdown content as a children and it renders the markdown as an HTML.

```tsx
// pages/posts/[slug].tsx

import ReactMarkdown from 'react-markdown';

const PostPage: NextPage<Post> = ({ slug, content, frontmatter }: Post) => {
  return (
    <main className="container mx-auto px-3 py-4 md:px-0">
      <article>
        <ReactMarkdown>{content}</ReactMarkdown>
      </article>
    </main>
  );
};
```

Now the post page will render the markdown content as HTML.

![Markdown-Blog-Post-Page-React-Markdown {322*575}](/images/posts/markdown-blog/post-page-react-markdown.png)

### Styling the markdown content using tailwind typography

Now that the markdown content is rendered as HTML, it's time to make it look good. However, we don't want to define CSS styles on each of the markdown files. By default, tailwind CSS resets all the browsers default styles on all DOM elements, so default styles for headings, paragraphs and anchor tags are not yet defined.

Tailwind provides a typography plugin to apply sensible defaults to our HTML content rendered from Markdown.

Install tailwind typography plugin using `npm install @tailwindcss/typography` and add it to the `plugins` array in `tailwind.config.js` e.g.

`plugins: [require('@tailwindcss/typography')]`

Next step is to add `prose` class to the `html` tag wrapping the `ReactMarkdown` component.

```tsx
// [slug].tsx
// add prose css class to article tag
const PostPage: NextPage<Post> = ({ slug, content, frontmatter }: Post) => {
  return (
    <main className="container mx-auto px-3 py-4 md:px-0">
      <article className="prose">
        <ReactMarkdown>{content}</ReactMarkdown>
      </article>
    </main>
  );
};
```

With the default styles our post page now looks like this.
![Markdown-Blog-Post-Page-Using-Tailwind-Typography-Prose-Class {804*821}](/images/posts/markdown-blog/tailwind-typography-default-styling.png)

We can override default styles set by tailwind typography plugin by extending the tailwind theme.

```tsx
// tailwind.config.js
module.exports = {
  purge: ['./pages//*.{js,ts,jsx,tsx}', './components//*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      // override default styles from typography plugin
      typography: (theme) => ({
        DEFAULT: {
          css: {
            h1: {
              color: '#FF5C58',
            },
          },
        },
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};
```

### Using Syntax Highlighter to highlight codeblocks

Using tailwind typography plugin, our post page have some basic styling. However, it still lacks the syntax highlighting for the code blocks. For this we will use a package called `react-syntax-highlighter`.

Install `react-syntax-highlighter` and the it's corresponding type definitions for Typescript.

`npm install react-syntax-highlighter`

`npm install -D @types/react-syntax-highlighter`

In `PostPage` component, we used `ReactMarkdown` to convert markdown content to equivalent HTML tags. `ReactMarkdown` provides a way to overwrite the default handling of any DOM elements by passing a components params. Here, we would overwrite the default handling of `code` element by passing our custom implementation using the `react-syntax-highlighter`

```tsx
// [slug].tsx
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
  dark,
  dracula,
  prism,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';

const PostPage: NextPage<Post> = ({ slug, content, frontmatter }: Post) => {
  return (
    <main className="container mx-auto px-3 py-4 md:px-0">
      <article className="prose">
        <ReactMarkdown
          components={{
            code({ node, inline, className, children, ...props }: any) {
              const match = /language-(\w+)/.exec(className || '');
              return !inline && match ? (
                <SyntaxHighlighter
                  style={dracula} // try passing different color schemes, drak, dracula etc.
                  language={match[1]}
                  PreTag="div"
                  {...props}
                >
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
              ) : (
                <code>{children}</code>
              );
            },
          }}
        >
          {content}
        </ReactMarkdown>
      </article>
    </main>
  );
};
```

Our Post Page finally looks like this, with syntax highlighting for the specified language.

![Markdown-Blog-Post-Page-With-Syntax-Highlight {781*705}](/images/posts/markdown-blog/post-page-syntax-higlight.png)


Markdown Blog using Next.js SSG, Typescript and Tailwind

Markdown Blog with Next.js, Typescript and Tailwind


In this post, we'll look at few HTML tips and tricks that are not commonly known. Generally, it's a good idea to make use of HTML native elements whenever possible before looking for Javascript alternatives.

### Native HTML autocomplete

Use `<datalist>` element to create a native HTML autocomplete. With `datalist` element a list of pre-defined options can be specified for the associated input element. This also provides an **autocomplete** feature on the input element. Users will see a pre-populated dropdown options as they input data.

> **NOTE:** The `list` attribute of the `input` element should match the `id` attribute of the `datalist` element. This binds the input field and the `datalist` element.

```html
<div>
  <h6>Native HTML Autocomplete</h6>
  <input name="countries-input" list="countries" />

  <datalist id="countries">
    <option value="Nepal"></option>
    <option value="Congo"></option>
    <option value="Combodia"></option>
    <option value="Bosnia"></option>
    <option value="Burkina Faso"></option>
    <option value="Azerbaijan"></option>
  </datalist>
</div>
```

![native-html-autocomplete {396*230}](/images/posts/html-tips-and-tricks/native-html-autocomplete.png)

### Grouped Select Lists

Create a grouped select lists using `optgroup` element inside the `select` element. Specify a `label` attribute in `optgroup` element to give a title to the group.

```html
<select name="countries" id="countries">
  <optgroup label="Asia">
    <option value="Nepal">Nepal</option>
    <option value="Japan">Japan</option>
    <option value="Indonasia">Indonasia</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="Italy">Italy</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="France">France</option>
  </optgroup>
</select>
```

![grouped-select-list {238*263}](/images/posts/html-tips-and-tricks/grouped-select-list.png)

### Native HTML Accordion

Create Native HTML Accordion using `details` and `summary` elements. Any child elements inside the `details` tag would be rendered inside the accordion. Use the `summary` element to give the title to the accordion. If the `summary` element is not specified a default text `Details` would be used.

```html
<details>
  <summary>Title Text</summary>
  <p>This is a test</p>
</details>
```

Use the `open` attribute in `details` element to display the accordion content by default.

```html
<details open>
  <summary>Title Text</summary>
  <p>This is a test</p>
</details>
```

![native-html-accordion {694*281}](/images/posts/html-tips-and-tricks/html-accordion.png)

### Auto Refresh using HTML

Auto refresh webpage after certain interval using `meta` tag and the `HTTP equiv` attribute in the `head` element.

The duration is set in seconds in the `content` attribute.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <meta http-equiv="refresh" content="10" />
  </head>

  <body></body>
</html>
```

### The `meter` element

Display quantities using the native HTML `meter` element without using any CSS or Javascript.

The `min` and `max` attributes defines the lower and upper bounds. If unspecified, the `min` value defaults to `0` and `max` value defaults to `1`.

The `low` and `high` attributes define the low and high range of values respectively. `low` value must be greater than the `min` value and `high` value must be less than the `max` value.

The `optimum` value indicates the optimal value within the given range. Browser will use different color to render the `meter` element by comparing the meter's value with the optimum value.

```html
<label for="low"> Low </label>
<meter id="low" min="0" max="100" low="30" high="75" optimum="80" value="25" />

<label for="high"> High </label>
<meter id="high" min="0" max="100" low="30" high="75" optimum="80" value="95" />
```

![html-meter-element {347*108}](/images/posts/html-tips-and-tricks/html-meter-element.png)

### The `mark` element

Use the `mark` element to highlight a text.

```html
<p>You are an <mark>awesome</mark> person. Cheers!!</p>
```

![html-mark-element {416*112}](/images/posts/html-tips-and-tricks/html-mark-element.png)

### The `contenteditable` attribute

Set `contenteditable` attribute to `true` on any HTML element to make it editable.

```html
<p contenteditable>
  This is an editable text. Try it here for demo. Corect this stpuiddd spelling
  mistacke.
</p>
```

![html-content-editable-attribute {722*135}](/images/posts/html-tips-and-tricks/html-content-editable-attribute.png)

### The `spellcheck` attribute

Use `spellcheck` attribute to check for spelling errors whenever possible.

```html
<p contenteditable spellcheck>
  This is an editable text with spellcheck enabled. When you try to eidt tihs
  spellceck will be enbaled.
</p>
```

![html-spellcheck-attribute {714*142}](/images/posts/html-tips-and-tricks/html-spellcheck-attribute.png)

### The `start` attribute on the ordered list `ol` element

By default an ordered lists starts from `1`. Use the `start` attribute to change the default behavior and specify the starting point for the ordered lists.

```html
<ol start="100">
  <li>Pekka</li>
  <li>Giant</li>
  <li>Minions</li>
  <li>Inferno Dragon</li>
</ol>
```

![html-li-start {255*211}](/images/posts/html-tips-and-tricks/html-li-start.png)

### The `download` attribute

Use the `download` attribute in anchor elements to download the file instead of navigating to the file itself.

```html
<a href="path/to/file' download>Download File</a>
```

### The Lazy Loading attribute

Lazy loading is a widely used strategy to defer loading of any resources until they are required. Lazy loading identifies resources as non-blocking and loads then only when needed. Different events can trigger lazy loadig, user interactions like scroll or navigation are some typical examples.

While lazy loading strategies can also be used to defer the loading of resources like JS, Fonts and CSS, this tutorial will focus its use on HTML elements.

Often, webpages would have images and iframes which contributes to data usage and impacts page load time. Use the `loading="lazy"` attribute to defer loading of images and iframes that are off-screen. These elements would load only when user scrolls near them. This approach would significantly reduce data usage and speed page load time.

```html
<img src="image.jpg" alt="alt-text" loading="lazy" />
<iframe src="page-with-video.html" title="title" laoding="lazy"></iframe>
```

### Input type `color`

Use input type `color` to get a native color picker.

```html
<input type="color" />
```

![html-input-type-color ](/images/posts/html-tips-and-tricks/input-type-color.png)

### Input type `date`

Use input type `date` to create input fields that accepts a valid date from the users. It provides both the textbox and the date picker interface to make the selection.

```html
<input type="date" />
```

![html-input-type-date ](/images/posts/html-tips-and-tricks/input-type-date.png)

### Input type `datetime-local`

Use input type `datetime-local` to create input for both date and time.

```html
<input type="datetime-local" />
```

![html-input-type-datetime-loca ](/images/posts/html-tips-and-tricks/input-type-datetime-local.png)

### Input type `time`

The `time` input type only accepts valid time as an input. Unlike `date` and `datetime-local` it does not accept a date as input.

```html
<input type="time" />
```

![html-input-type-time ](/images/posts/html-tips-and-tricks/input-type-time.png)

### Input type `week`

Use `week` input type to create input fields that accepts a year's week.

```html
<input type="week" />
```

It accepts [ISO 8601 week number](https://en.wikipedia.org/wiki/ISO_8601#Week_dates). We can also limit the range by specifying the `min` and `max` attributes

```html
<input type="week" min="2020-W18" max="2020-W32" />
```

![html-input-type-week ](/images/posts/html-tips-and-tricks/input-type-week.png)

### Input type `range`

Use the range type for the `input` element to create native HTML sliders. Use the `min` and `max` attributes on the input element to define the boundary values for the slider.

```html
<label for="score">Score</label>
<input type="range" id="score" name="score" min="0" max="100" step="2" />
```

### Input type `search`

For search input fields, set the value of `type` attribute to `search` to get a clear button on the input field.

```html
<form>
  <label for="textInput">Input Type Text (Does not have clear button)</label>
  <input type="text" id="textInput" name="textInput" />

  <label for="searchInput">Input Type Search (Has clear button)</label>
  <input type="search" id="searchInput" name="searchInput" />
</form>
```

![html-input-type-search {599*139}](/images/posts/html-tips-and-tricks/html-input-type-search.png)

### Input type `reset`

Clear all existing inputs in a form using a input element of type `reset`

```html
<form>
  <label for="firstName">First Name</label>
  <input type="text" id="firstName" />
  <label for="lastName">Last Name</label>
  <input type="text" id="lastName" />
  <div>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>
```

![html-input-type-reset {719*287}](/images/posts/html-tips-and-tricks/html-input-type-reset.png)

### Links for Email, Call, SMS, Facetime, Whatsapp and Messenger

Use `mailto:` to open default email client on your device with the specified subject and body and receiver.

```html
<a href="mailto:{receiver_email}?subject={subject}&body={email_body}>Send Email</a>
```

Use `tel:` to open default phone app dialer on your device with the specified phone number.

```html
<a href="tel:{phone_number}>Call</a>
```

Use `sms:` to open default SMS app on your device with the specified phone number and message body.

```html
<a href="sms:{phone}?body={sms_content}"> Send a SMS </a>
```

Use `facetime:` to start a facetime call.

```html
<a href="facetime://{number}">Facetime</a>
```

Opening WhatsApp Chat

```html
<a href="https://wa.me/{number}?text={url_encoded_text}">WhatsApp</a>

<a href="https://wa.me/5125896536?text={hello+this+is+a+test}">WhatsApp</a>
```

Opening Facebook Messenger

```html
<a href="https://m.me/{username}">Facebook Messenger</a>
```

### Demo

[Click Here for Interactive Demo](/demo/html-tips-and-tricks)


✍🏼 Blog Posts

Markdown Blog with Next.js, Typescript and Tailwind

HTML Tips and Tricks

REST API versioning with ASP.NET Core

Trying Out Electron JS

Introudction to extension methods in C#