Asset Modules & Dependency Managment help me to make a site theme for bloggers in this journey | 100DaysOfCode

I've started yesterday #100DaysOfCode challenge with my new project which is for bloggers. I want make a site theme with JAMSTACK architecture by Nextjs.

I want to share with you which methods help me to in this journey :)

What's the challenge in this projects so far:

• Read .md and yaml
• Import .md files from _posts directory
• Create Dynamic pages for posts.
• Make template for post.

Read .md and yaml | 🪓 Webpack 5

I want to use .md file for posts and yaml for configuration. Since, I have to dealing with these files that is non-javaScript I need to use webpack. Prior to webpack 5 raw-loader was common to import a file as a string. But now, you can use Asset Modules in webpack 5.

There are 4 new module types:

1. asset/resource
2. asset/inline
3. asset/source [exactly what I need it to import file as string instead of raw-loader]
4. asset

By default webpack 5 is adopted in nextjs. so I've configured my 'next.config.js' without any dependency:

const nextConfig = {
  reactStrictMode: true,
  webpack: function (config) {
    config.module.rules.push({
      test: /\.md$|\.yml$/,
      type: 'asset/source',
    });
    return config;
  },
};

Import .md files from posts | 🪓 Webpack 5

This challenge is related to Dependency management, that for this case I use Webpack Dependency management.

So I need create my own context for import md files from posts directory, according to the webpack 5 document, the require.context() function will help me.

The require.context() function allows me to search for specific files in the "posts" directory.

 const context = require.context('../_posts', false, /\.md$/);

So now, I have a context with files from the '_posts' directory that it can be required with a request ending with .md.

Also, I've set flag false to second argument because I don't want search for in "posts" subdirectories.

My context now has 3 properties (resolve, keys, id), that I use keys property beacause it returns an array of all possible requests.

  // Dependency management by webpack..  has 3 properties: resolve, keys, id
  const context = require.context('../_posts', false, /\.md$/);

  const contextWithPostLink = context
    .keys() // returns an array of all possible requests that the context module can handle.
    .slice(context.keys().length / 2); // there are two type of data in array. one of them is like '_posts/blog.md' and another is like './blog.md'

I will share my other challenges in next days.

Motivate me with your feedback, like 👍, follow and subscribe in my Weekly newsletter.

Thanks for reading.