Guide NextJS MDX Kit

After deciding that we want to start a blog, many of us don't know whether to choose an existing blogging platform or create our own blog from scratch.

Each option has advantages and disadvantages. The purpose of the kit is to be able to have your blog a little more configurable, without having to create it from scratch, by having something different from the normal.

What can you do? 🤔

In the config.js file you can:

• Configure your name.
• Configure your career.
• Configure your avatar image (by default with GitHub).
• Choose if you want blur effect.

With the kit you can:

• Publish your blog posts.
• Search blog posts with the name, category or both.
• Have a contact section through a form (powered by Formspree).

Tech stack 💪

• Next JS as framework.
• Chakra UI as component library.
• MDX for blog posts.
• Framer Motion for animations.

How to? ⚙️

In this section you will see how to make various cifigurations of the kit.

Name and career.

{
    name: 'YOUR NAME'
    career: 'YOUR CAREER'
    ...
}

Title and description.

{
    ...
    seo:{
        title: 'YOUR TITLE',
        description: 'YOUR DESCRIPTION'
    }
    ...
}

Avatar

You can change your GitHub image link, but if you want an image from another domain, like twitter you need to add the domain in next.config.js file.

{
    avatar: 'https://pbs.twimg.com/profile_images/1374023592523005952/lfkEIHsx_400x400.jpg'
}

{
    images: {
        domains: ['pbs.twimg.com'];
    }
}

Blur Effect.

{
    blurEffect: '10px',
}

Enable/Disable blur effect for image

When you host your images in a service (like Cloudinary), you can use only image and leave imageBlur empty, so you will disable the blur effect, and if you use imageBlur you will have the blur effect.

---
image: NORMAL IMAGE LINK
imageBlur: BLUR IMAGE LINK
---

Mark lines of code.

You can make enphasis on lines in code adding {}, and the numbers of lines that you can mark separated by a comma {4,5} (without a blak space).

```javascript{4,5}
{
    ...
    seo:{
        title: 'YOUR TITLE',
        description: 'YOUR DESCRIPTION'
    }
    ...
}
```

{
    ...
    seo:{
        title: 'YOUR TITLE',
        description: 'YOUR DESCRIPTION'
    }
    ...
}

Title for block code's

If you want name the block code you need tell the name after set the languae for the block code.

```markdown:post.mdx
---
image: NORMAL IMAGE LINK
imageBlur: BLUR IMAGE LINK
---
```

---
image: NORMAL IMAGE LINK
imageBlur: BLUR IMAGE LINK
---

Mark and Title

If you want the both features just need tell the name after the laguage and the lines of code that you want mark.

```javascript{4,5}:config.js
{
    ...
    seo:{
        title: 'YOUR TITLE',
        description: 'YOUR DESCRIPTION'
    }
    ...
}
```

{
    ...
    seo:{
        title: 'YOUR TITLE',
        description: 'YOUR DESCRIPTION'
    }
    ...
}