Serving Docusaurus images with Cloudinary

This page summarizes the projects mentioned and recommended in the original post on dev.to

InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • blog.johnnyreilly.com

    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;

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • remark

    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.

  • remark-cloudinary-docusaurus

    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):

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Developing GROWI Plug-ins (Remark Plug-ins)

    2 projects | dev.to | 19 Jul 2024
  • I created a Markdown Note-taking App (win, mac, linux) using react, focuses on simplicity

    2 projects | /r/webdev | 1 Oct 2022
  • [AskJS] What is the best markdown lib?

    1 project | /r/javascript | 15 Jun 2022
  • Extract code block from markdown??

    1 project | /r/reactjs | 9 Jun 2022
  • How can you add new articles to a blog made from scratch in HTML, CSS and JS? (Beginner Question)

    1 project | /r/webdev | 28 Dec 2020