Serving Docusaurus images with Cloudinary

1. blog.johnnyreilly.com

   1 22 41 8.6 TypeScript

   This is the source code for https://johnnyreilly.com

   

   //@ts-check const visit = require('unist-util-visit'); /** * Create a remark plugin that will replace image URLs with Cloudinary URLs * @param {*} options cloudName your Cloudinary’s cloud name eg demo, baseUrl the base URL of your website eg https://blog.johnnyreilly.com - should not include a trailing slash, will likely be the same as the config.url in your docusaurus.config.js * @returns remark plugin that will replace image URLs with Cloudinary URLs */ function imageCloudinaryRemarkPluginFactory( /** @type {{ cloudName: string; baseUrl: string }} */ options ) { const { cloudName, baseUrl } = options; const srcRegex = / src={(.*)}/; /** @type {import('unified').Plugin<[], import('hast').Root>} */ return function imageCloudinaryRemarkPlugin() { return (tree) => { visit(tree, ['element', 'jsx'], (node) => { if (node.type === 'element' && node['tagName'] === 'img') { // handles nodes like this: // { // type: 'element', // tagName: 'img', // properties: { // src: 'https://some.website.com/cat.gif', // alt: null // }, // ... // } const url = node['properties'].src; node[ 'properties' ].src = `https://res.cloudinary.com/${cloudName}/image/fetch/${url}`; } else if (node.type === 'jsx' && node['value']?.includes('')) { // handles nodes like this: // { // type: 'jsx', // value: '' // } const match = node['value'].match(srcRegex); if (match) { const urlOrRequire = match[1]; node['value'] = node['value'].replace( srcRegex, ` src={${`\`https://res.cloudinary.com/${cloudName}/image/fetch/${baseUrl}\$\{${urlOrRequire}\}\``}}` ); } } }); }; }; } module.exports = imageCloudinaryRemarkPluginFactory;

2. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

3. remark

   2 47 8,274 7.7 JavaScript

   markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

   

   Now we have our Cloudinary account set up, we can use it with Docusaurus. To do so, we need to create a remark plugin. This is a plugin for the remark markdown processor. It's a plugin that will transform the markdown image syntax into a Cloudinary URL.

4. remark-cloudinary-docusaurus

   3 1 2 10.0 TypeScript

   Discontinued Cloudinary offers an image CDN which can improve performance of your site. This plugin allows Docusaurus to use Cloudinary to serve optimised images. [Moved to: https://github.com/johnnyreilly/rehype-cloudinary-docusaurus]

   But who wants to make a remark plugin? I don't. I want to use a remark plugin. So I created one. It's called remark-cloudinary-docusaurus and you can find it on npm. It's a drop-in replacement for the plugin we created above. You can add it like this (use whichever package manager CLI tool you prefer):

Suggest a related project