remark-cloudinary-docusaurus

Remark Cloudinary Docusaurus plugin

Cloudinary offers an image CDN which can improve performance of your site. This plugin allows Docusaurus to use Cloudinary to serve optimised images.

Usage

npm i remark-cloudinary-docusaurus

We need to reference it in our docusaurus.config.js file. We do this by adding it to the rehypePlugins array:

//@ts-check
const remarkCloudinaryDocusaurus = require("remark-cloudinary-docusaurus");

const url = "https://blog.johnnyreilly.com";

/** @type {import('@docusaurus/types').Config} */
const config = {
	// ...
	presets: [
		[
			"@docusaurus/preset-classic",
			/** @type {import('@docusaurus/preset-classic').Options} */
			({
				// ...
				blog: {
					// ...
					rehypePlugins: [
						[
							docusaurusCloudinaryRemarkPlugin,
							{
								cloudName: "demo",
								baseUrl: url,
							},
						],
					],
					// ...
				},
				// ...
			}),
		],
	],
	// ...
};

Note: as is standard for Docusaurus Remark plugins at present, this is a commonjs module.

You will also need to disable the url-loader in your Docusaurus build which transforms images into base64 strings, as this will conflict with the plugin. There isn't a first class way to do this in Docusaurus at present. However by setting the environment variable WEBPACK_URL_LOADER_LIMIT to 0 you can disable it. You can see an implementation example in this pull request. It amounts to adding the cross-env package and then adding the following to your package.json:

	"build": "cross-env WEBPACK_URL_LOADER_LIMIT=0 docusaurus build",

See this package in action on: https://blog.johnnyreilly.com - the source code can be found here: https://github.com/johnnyreilly/blog.johnnyreilly.com. To read more on how this plugin came to be, see this blog post.

Development

See .github/CONTRIBUTING.md. Thanks! ❤️🌻

💙 This package is based on @JoshuaKGoldberg's template-typescript-node-package.