Improve image validation (#561)

* Disable image checks for badges and vector graphics

* Simplify CSS width/height checking logic + improve error message

Author: adams85

website/.validationignore

@@ -82,41 +82,6 @@
 /docs/organization.mdx
 /docs/purchase.mdx
 /docs/requests.mdx
-/docs/sdk-reference/android.mdx
-/docs/sdk-reference/community/deno.mdx
-/docs/sdk-reference/community/laravel.mdx
-/docs/sdk-reference/community/vue.mdx
-/docs/sdk-reference/cpp.mdx
-/docs/sdk-reference/dart.mdx
-/docs/sdk-reference/dotnet.mdx
-/docs/sdk-reference/elixir.mdx
-/docs/sdk-reference/go.mdx
-/docs/sdk-reference/ios.mdx
-/docs/sdk-reference/java.mdx
-/docs/sdk-reference/js-ssr.mdx
-/docs/sdk-reference/js.mdx
-/docs/sdk-reference/kotlin.mdx
-/docs/sdk-reference/node.mdx
-/docs/sdk-reference/openfeature/dotnet.mdx
-/docs/sdk-reference/openfeature/go.mdx
-/docs/sdk-reference/openfeature/java.mdx
-/docs/sdk-reference/openfeature/js.mdx
-/docs/sdk-reference/openfeature/node.mdx
-/docs/sdk-reference/openfeature/overview.mdx
-/docs/sdk-reference/openfeature/php.mdx
-/docs/sdk-reference/openfeature/python.mdx
-/docs/sdk-reference/openfeature/rust.mdx
-/docs/sdk-reference/openfeature/ruby.mdx
-/docs/sdk-reference/openfeature/swift.mdx
-/docs/sdk-reference/openfeature/kotlin.mdx
-/docs/sdk-reference/overview.mdx
-/docs/sdk-reference/php.mdx
-/docs/sdk-reference/python.mdx
-/docs/sdk-reference/react.mdx
-/docs/sdk-reference/ruby.mdx
-/docs/sdk-reference/rust.mdx
-/docs/sdk-reference/unity.mdx
-/docs/sdk-reference/unreal.mdx
 /docs/service/status.mdx
 /docs/subscription-plan-limits.mdx
 /docs/targeting/feature-flag-evaluation.mdx

website/validate-document.js

@@ -49,22 +49,12 @@ const checkImageDimensions = async (imageTag, imagePath, cssWidth, cssHeight, dp
 
   const { width, height } = imageMetaData;
 
-  if (cssWidth != null) {
-    const factor = dpi / 96;
-    const expectedWidth = cssWidth * factor;
-    // NOTE: We need to account for the integer division used to calculate the value of the `width` attribute.
-    if (width < expectedWidth || expectedWidth + factor <= width) {
-      errors.push(['warn', `Horizontal image resolution doesn't correspond to attribute (width="...") in ${imageTag}. The image should be ${expectedWidth} pixels wide, considering the image DPI (${dpi}).`]);
-    }
+  if (cssWidth != null && cssWidth !== Math.trunc(width * 96 / dpi)) {
+    errors.push(['warn', `The relation \`CSS width = image width in pixels * 96 / DPI\` is not satisfied. CSS width specified via attribute (width="...") = ${cssWidth}, image width in pixels = ${width}, DPI = ${dpi}.`]);
   }
 
-  if (cssHeight != null) {
-    const factor = dpi / 96;
-    const expectedHeight = cssHeight * factor;
-    // NOTE: We need to account for the integer division used to calculate the value of the `height` attribute.
-    if (height < expectedHeight || expectedHeight + factor <= height) {
-      errors.push(['warn', `Vertical image resolution doesn't correspond to attribute (height="...") in ${imageTag}. The image should be ${expectedHeight} pixels tall, considering the image DPI (${dpi}).`]);
-    }
+  if (cssHeight != null && cssHeight !== Math.trunc(height * 96 / dpi)) {
+    errors.push(['warn', `The relation \`CSS height = image height in pixels * 96 / DPI\` is not satisfied. CSS height specified via attribute (height="...") = ${cssHeight}, image height in pixels = ${height}, DPI = ${dpi}.`]);
   }
 }
 
@@ -114,23 +104,24 @@ const checkImages = async (content) => {
   const errors = [];
 
   let i = -1;
-  for (const tag of extractImageData(content)) {
+  for (const [tag, mdImageSrc] of extractImageData(content)) {
     i++;
 
     const isMarkdown = tag.startsWith('![');
-    if (isMarkdown) {
-      // Markdown image detected
-      errors.push(['warn', `Markdown image syntax found (${tag}). Use <img src="..." alt="..." width="..." height="..." /> instead for images.`]);
+    if (isMarkdown) { // Markdown image detected
+      if (shouldCheckImage(mdImageSrc)) {
+        errors.push(['warn', `Markdown image syntax found (${tag}). Use <img src="..." alt="..." width="..." height="..." /> instead for images.`]);
+      }
       continue;
     }
 
     let [imageSrc, cssWidth, cssHeight] = checkForImageAttributes(tag, errors);
 
     const pathPrefix = "/docs/"
-    if (imageSrc.startsWith(pathPrefix)) {
-      imageSrc = imageSrc.substring(pathPrefix.length - 1);
-    } else if (/^https?:/i.test(imageSrc)) {
+    if (!shouldCheckImage(imageSrc)) {
       continue;
+    } else if (imageSrc.startsWith(pathPrefix)) {
+      imageSrc = imageSrc.substring(pathPrefix.length - 1);
     } else {
       errors.push(`Invalid image src found in ${tag}`);
       continue;
@@ -222,13 +213,19 @@ function attributeRegex(attribute) {
 function* extractImageData(content) {
   let imageTagsRegexMatch;
   while ((imageTagsRegexMatch = imageTagsRegex.exec(content)) !== null) {
-    const [tag] = imageTagsRegexMatch;
-    yield tag;
+    const [tag, , mdImageSrc] = imageTagsRegexMatch;
+    yield [tag, mdImageSrc?.trim()];
   }
 }
 
 function getImageFullPath(imagePath) {
   return path.join(__dirname, 'static', imagePath);
 }
 
+function shouldCheckImage(imageSrc) {
+  if (/^https?:/i.test(imageSrc)) return false;
+  if (path.extname(imageSrc).toLowerCase() === ".svg") return false;
+  return true;
+}
+
 checkFiles();