johnnyreilly/rehype-cloudinary-docusaurus

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

Rehype 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 rehype-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
import docusaurusCloudinaryRehypePlugin from "rehype-cloudinary-docusaurus";

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

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

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://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 and how it was migrated to MDX 3.

Development

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

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