From a7b57e8201380caec14c207a2436b109f32fcd2e Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 7 Apr 2023 12:24:53 +0300 Subject: [PATCH] docs: optimized cloudinary images (#3767) --- www/docs/docusaurus.config.js | 12 ++ www/docs/package.json | 2 + .../src/components/CloudinaryImage/index.js | 80 ++++++++++++++ www/docs/src/css/_docspage.css | 8 ++ www/docs/src/css/_typography.css | 4 + www/docs/src/theme/MDXComponents/index.js | 4 +- www/docs/yarn.lock | 104 ++++++++++++++++++ 7 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 www/docs/src/components/CloudinaryImage/index.js diff --git a/www/docs/docusaurus.config.js b/www/docs/docusaurus.config.js index 7bb8287bce..96d49addb7 100644 --- a/www/docs/docusaurus.config.js +++ b/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: [ diff --git a/www/docs/package.json b/www/docs/package.json index f37fb6abbd..6554b40e71 100644 --- a/www/docs/package.json +++ b/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", diff --git a/www/docs/src/components/CloudinaryImage/index.js b/www/docs/src/components/CloudinaryImage/index.js new file mode 100644 index 0000000000..f87f9e8a26 --- /dev/null +++ b/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]+\/(?.*)$/ + +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 + } + + 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 ( +

+ +

+ ) +} \ No newline at end of file diff --git a/www/docs/src/css/_docspage.css b/www/docs/src/css/_docspage.css index 0db9c5b952..bb9705137f 100644 --- a/www/docs/src/css/_docspage.css +++ b/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); diff --git a/www/docs/src/css/_typography.css b/www/docs/src/css/_typography.css index 2f2c4f60b9..c21edd64e7 100644 --- a/www/docs/src/css/_typography.css +++ b/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); diff --git a/www/docs/src/theme/MDXComponents/index.js b/www/docs/src/theme/MDXComponents/index.js index 726ca83f15..7900a870c3 100644 --- a/www/docs/src/theme/MDXComponents/index.js +++ b/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 component! - // `Highlight` will receive all props that were passed to `highlight` in MDX inlineCode: InlineCode, + img: CloudinaryImage }; \ No newline at end of file diff --git a/www/docs/yarn.lock b/www/docs/yarn.lock index b352daa502..3d82ae81f1 100644 --- a/www/docs/yarn.lock +++ b/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": + version: 4.9.5 + resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin::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"