diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..49103d2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +.DS_Store +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..282f6b0 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 4, + "semi": false, + "singleQuote": true +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..3b55eee --- /dev/null +++ b/README.md @@ -0,0 +1,59 @@ +# Next.js + Markdown + +Import markdown files in your Next.js project + +## Installation + +``` +npm install --save @blunck/next-md +``` + +## Usage + +Create a `next.config.js` in your project + +```js +// next.config.js +const withMarkdown = require('@blunck/next-md')() +module.exports = withMarkdown() +``` + +You can now import parsed strings from `.md` files + +```js +import foo from './foo.md' + +export default () =>
+``` + +### With `markdown-loader` and `html-loader` options + +Optionally you can provide [Marked.js](https://marked.js.org/#/USING_ADVANCED.md#options) and [html-loader](https://github.com/webpack-contrib/html-loader) options + +```js +// next.config.js +const withMarkdown = require('@blunck/next-md')({ + markdownLoaderOptions: { + gfm: true + }, + htmlLoaderOptions: { + minimize: true, + conservativeCollapse: false + } +}) +module.exports = withMarkdown() +``` + +### Configuring Next.js + +Optionally you can add your custom Next.js configuration as parameter + +```js +// next.config.js +const withMarkdown = require('@blunck/next-md')() +module.exports = withMarkdown({ + webpack(config, options) { + return config + } +}) +``` diff --git a/index.js b/index.js new file mode 100644 index 0000000..0688c66 --- /dev/null +++ b/index.js @@ -0,0 +1,44 @@ +const defaultHtmlOptions = { + minimize: true, + conservativeCollapse: false +} + +const defaultMarkdownOptions = { + gfm: true +} + +module.exports = ({ htmlLoaderOptions, markdownLoaderOptions } = {}) => ( + nextConfig = {} +) => { + return Object.assign({}, nextConfig, { + webpack(config, options) { + config.module.rules.push({ + test: /\.md$/, + use: [ + { + loader: 'html-loader', + options: Object.assign( + {}, + defaultHtmlOptions, + htmlLoaderOptions + ) + }, + { + loader: 'markdown-loader', + options: Object.assign( + {}, + defaultMarkdownOptions, + markdownLoaderOptions + ) + } + ] + }) + + if (typeof nextConfig.webpack === 'function') { + return nextConfig.webpack(config, options) + } + + return config + } + }) +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f4a9eea --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "@blunck/next-md", + "version": "1.0.0", + "description": "Import markdown files in your Next.js project", + "main": "index.js", + "repository": "alexblunck/next-md", + "keywords": [ + "nextjs", + "markdown-loader", + "markdown" + ], + "author": "Alexander Blunck", + "license": "MIT", + "bugs": { + "url": "https://github.com/alexblunck/next-md/issues" + }, + "homepage": "https://github.com/alexblunck/next-md#readme", + "dependencies": { + "html-loader": "0.5.5", + "markdown-loader": "4.0.0" + } +}