docs: optimized cloudinary images (#3767)

www/docs/docusaurus.config.js

@@ -130,6 +130,18 @@ const config = {
       sidebar: {
         autoCollapseCategories: true
       }
+    },
+    cloudinaryConfig: {
+      cloudName: 'dza7lstvk', // TODO replace with env variable
+      flags: [
+        'fl_lossy',
+        'f_auto'
+      ],
+      resize: {
+        action: 'pad',
+        aspectRatio: '16:9'
+      },
+      roundCorners: 16
     }
   },
   presets: [

www/docs/package.json

@@ -17,6 +17,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@cloudinary/react": "^1.11.2",
+    "@cloudinary/url-gen": "^1.9.2",
     "@docusaurus/core": "latest",
     "@docusaurus/preset-classic": "latest",
     "@docusaurus/remark-plugin-npm2yarn": "latest",

www/docs/src/components/CloudinaryImage/index.js

@@ -0,0 +1,80 @@
+import React from "react"
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { Cloudinary } from "@cloudinary/url-gen";
+import MDXImg from '@theme/MDXComponents/Img';
+import { pad, imaggaScale, imaggaCrop, crop, fit, minimumPad, fill, scale, limitFit, thumbnail, limitFill, minimumFit, limitPad, fillPad } from "@cloudinary/url-gen/actions/resize";
+import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
+
+const resizeActions = {
+  'pad': pad,
+  'imaggaScale': imaggaScale,
+  'imaggaCrop': imaggaCrop,
+  'crop': crop,
+  'fit': fit,
+  'minimumPad': minimumPad,
+  'fill': fill,
+  'scale': scale,
+  'limitFit': limitFit,
+  'thumbnail': thumbnail,
+  'limitFill': limitFill,
+  'minimumFit': minimumFit,
+  'limitPad': limitPad,
+  'fillPad': fillPad
+}
+
+const imageRegex = /^https:\/\/res.cloudinary.com\/.*\/upload\/v[0-9]+\/(?<imageId>.*)$/
+
+export default function CloudinaryImage ({ src, ...props }) {
+  const { cloudinaryConfig } = useThemeConfig();
+  const matchingRegex = src.match(imageRegex)
+  if (!cloudinaryConfig || !matchingRegex?.groups || !matchingRegex.groups.imageId) {
+    // either cloudinary isn't configured or
+    // could not match url to a cloudinary url
+    // default to docusaurus's image component
+    return <MDXImg src={src} {...props} />
+  }
+
+  const cloudinary = new Cloudinary({
+    cloud: {
+      cloudName: cloudinaryConfig.cloudName
+    }
+  });
+  let image = cloudinary.image(matchingRegex.groups.imageId.replaceAll('%20', ' '))
+
+  cloudinaryConfig.flags?.forEach((flag) => image.addTransformation(flag))
+
+  if (cloudinaryConfig.roundCorners) {
+    image.roundCorners(byRadius(cloudinaryConfig.roundCorners))
+  }
+  if (cloudinaryConfig.resize) {
+    const action = resizeActions[cloudinaryConfig.resize.action]
+    let resizeAction = action()
+    if (props.width || props.height) {
+      if (props.width) {
+        resizeAction = resizeAction.width(props.width)
+      }
+
+      if (props.height) {
+        resizeAction = resizeAction.height(props.height)
+      }
+    } else if (cloudinaryConfig.resize.aspectRatio) {
+      resizeAction = resizeAction.aspectRatio(cloudinaryConfig.resize.aspectRatio)
+    } else {
+      if (cloudinaryConfig.resize.width) {
+        resizeAction = resizeAction.width(cloudinaryConfig.resize.width)
+      }
+
+      if (cloudinaryConfig.resize.height) {
+        resizeAction = resizeAction.height(cloudinaryConfig.resize.height)
+      }
+    }
+
+    image.resize(resizeAction)
+  }
+
+  return (
+    <p className="cloudinary-image-wrapper">
+      <MDXImg {...props} src={image.toURL()} />
+    </p>
+  )
+}

www/docs/src/css/_docspage.css

@@ -200,6 +200,14 @@ details > div {
   padding-right: 0 !important;
 }
 
+.cloudinary-image-wrapper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0;
+}
+
 @media screen and (min-width: 1419px) {
   .main-wrapper {
     min-width: var(--ifm-max-content-width);

www/docs/src/css/_typography.css

@@ -53,6 +53,10 @@ p {
   margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
 }
 
+.markdown > p img {
+  margin-top: calc(var(--ifm-base-margin-vertical) / 4);;
+}
+
 .markdown a:not(.hash-link),
 .DocSearch-Prefill {
   font-weight: var(--ifm-link-weight);

www/docs/src/theme/MDXComponents/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 // Import the original mapper
 import MDXComponents from '@theme-original/MDXComponents';
 import InlineCode from './InlineCode'
+import CloudinaryImage from '../../components/CloudinaryImage';
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
-  // Map the "highlight" tag to our <Highlight /> component!
-  // `Highlight` will receive all props that were passed to `highlight` in MDX
   inlineCode: InlineCode,
+  img: CloudinaryImage
 };

www/docs/yarn.lock

@@ -1989,6 +1989,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cloudinary/html@npm:^1.11.2":
+  version: 1.11.2
+  resolution: "@cloudinary/html@npm:1.11.2"
+  dependencies:
+    "@types/lodash.clonedeep": ^4.5.6
+    "@types/lodash.debounce": ^4.0.6
+    "@types/node": ^14.14.10
+    lodash.clonedeep: ^4.5.0
+    lodash.debounce: ^4.0.8
+    typescript: ^4.1.2
+  checksum: 3517163598ab74ef78bcfbd227cf27c10432bfd3bcdd08f733d57509843222c9d03f13043f121c8d4e2df3af65db407ea7718bfbb9317a7558bdf360fb42bd71
+  languageName: node
+  linkType: hard
+
+"@cloudinary/react@npm:^1.11.2":
+  version: 1.11.2
+  resolution: "@cloudinary/react@npm:1.11.2"
+  dependencies:
+    "@cloudinary/html": ^1.11.2
+  peerDependencies:
+    react: ^16.3.0 || ^17.0.0 || ^18.0.0
+  checksum: 03f2e70f22de2ccbca9a886f4d64d353434341906684ee706ed1a9960988a81c0bea96379312a3b14ced9d12b6f68e4fdd9368487f89b54ab7570f5d210528fb
+  languageName: node
+  linkType: hard
+
+"@cloudinary/transformation-builder-sdk@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "@cloudinary/transformation-builder-sdk@npm:1.2.7"
+  dependencies:
+    "@cloudinary/url-gen": ^1.7.0
+  checksum: 2701387ecd2fde1af9f09e3a576992de7bbae7386380d7211d6255281ce09dd09c47d3ee27ba1506173a49ec42aa88e060b35bd382663ed194428a3ba0582005
+  languageName: node
+  linkType: hard
+
+"@cloudinary/url-gen@npm:^1.7.0, @cloudinary/url-gen@npm:^1.9.2":
+  version: 1.9.2
+  resolution: "@cloudinary/url-gen@npm:1.9.2"
+  dependencies:
+    "@cloudinary/transformation-builder-sdk": ^1.2.7
+  checksum: 1d986243371473e1d7e03ad3de5b3615000a6e3e07079aaa343f1011da01c8e55155da12e44b29c53296d716b3ee9c8430a4ff05bf542ea1cbbbac4c92fb172e
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -3497,6 +3540,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.clonedeep@npm:^4.5.6":
+  version: 4.5.7
+  resolution: "@types/lodash.clonedeep@npm:4.5.7"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 214c0fe6a89a5d0c75f148a8c7134e212453caace259fcf0be79e67ceff72015a2fa6335758a8cc3231222f34b3968f8c6adf6f49626594f80ccbc276dd1744d
+  languageName: node
+  linkType: hard
+
+"@types/lodash.debounce@npm:^4.0.6":
+  version: 4.0.7
+  resolution: "@types/lodash.debounce@npm:4.0.7"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 8d4063d40f82900b6ac6b52429a05bdce5925084f03b83e49fbae656986ceab836857490ee8140133d3270c6bdbc0a6e74be9e9e0bff871ded7e42e2a811b729
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.192
+  resolution: "@types/lodash@npm:4.14.192"
+  checksum: 6807402e293cb943808a444d1ef514ce13de4f870b3b382fe729f8235ea280c4d037b9514443723afd3d04b2cf9e8f1b3fc0075d947edfeb1078347dc2b471b0
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -3527,6 +3595,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^14.14.10":
+  version: 14.18.42
+  resolution: "@types/node@npm:14.18.42"
+  checksum: 24d51b5315962959b5c25925840fc16dd5dc3c61648a9890ed65c7adc822c5e2ac04d9efd57acec49baf0950980119d7b7b52947cd4aee251118633c9804dbb2
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^17.0.5":
   version: 17.0.45
   resolution: "@types/node@npm:17.0.45"
@@ -5623,6 +5698,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "docs@workspace:."
   dependencies:
+    "@cloudinary/react": ^1.11.2
+    "@cloudinary/url-gen": ^1.9.2
     "@docusaurus/core": latest
     "@docusaurus/preset-classic": latest
     "@docusaurus/remark-plugin-npm2yarn": latest
@@ -7863,6 +7940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.clonedeep@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "lodash.clonedeep@npm:4.5.0"
+  checksum: 2caf0e4808f319d761d2939ee0642fa6867a4bbf2cfce43276698828380756b99d4c4fa226d881655e6ac298dd453fe12a5ec8ba49861777759494c534936985
+  languageName: node
+  linkType: hard
+
 "lodash.curry@npm:^4.0.1":
   version: 4.1.1
   resolution: "lodash.curry@npm:4.1.1"
@@ -11521,6 +11605,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^4.1.2":
+  version: 4.9.5
+  resolution: "typescript@npm:4.9.5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 5f6cad2e728a8a063521328e612d7876e12f0d8a8390d3b3aaa452a6a65e24e9ac8ea22beb72a924fd96ea0a49ea63bb4e251fb922b12eedfb7f7a26475e5c56
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^4.1.2#~builtin<compat/typescript>":
+  version: 4.9.5
+  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=7ad353"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 897c8ac656e01b132fa82be6a8e34c4507b19be63dbf1ff1d8287d775519081a7c91dd0ca3ec62536c8137228141d65b238dfb2e8987a3f5182818f58f83e7d7
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^0.7.30":
   version: 0.7.31
   resolution: "ua-parser-js@npm:0.7.31"