Example Post

General instructions

To create a local blog with the Shaker's Kit, you need to follow these steps:

1. Create a file with the .mdx extension in the content directory. The file name will be the slug for the post.
2. Write the desired content in the file.
3. Use the frontMatter in the very beginning of the file to set the metadata for the post.

• Use the title property to set the name for the post.
• Use the publishedDate property to set the publication date for the post. By default the blog posts with the future date will not be displayed on the blogs page.
• Use the summary property to set a summary for the post.

4. Each blog post required a cover image. The cover image should be placed in the public/static/images/blog/[blog-name] directory. The image name should be cover.png. To modify this behavior refer to the content-collections.ts file.
5. Done! You can navigate to the /blog/[filename] page to see the newly created blog post.

Available Components

In addition to the markdown components, the Shaker's Kit also provides the following components:

• Code blocks with the syntax highlighting powered by Shiki.
• <Image />: React component for displaying images with the Next.js image optimization.
• <Video />: React component for displaying videos.

Down below you will find examples of how to use these components.

You can extend the components by adding new to the src/components/MDXComponents.tsx file.

In addition, every heading as H1, H2, H3, H4, H5, H6 will be automatically converted to a link and will be accessible via the table of contents.

Image

In addition to the local images you can also use any accessible image from the internet.

Video

In addition, local videos can be used as well.

Code

Simple example

console.log('Hello World!');

Line highlighting example

console.log('This is a first line');
console.log('This is a second line, and it will be highlighted');
console.log('This is a third line');

Block highlighting example

console.log('This is a first line');
console.log('This is a second line, and it will be highlighted');
console.log('This is a third line, and it will be highlighted as well');
console.log('This is a fourth line');

Known issues

If the blog post file contains a syntax error, the error will be thrown in the console and the page will not be rendered.

One of the error examples - Cannot destructure property 'fields' of 'undefined' as it is undefined.