Add border to doc images, fix aspect ratio. (#992)

Author: microbit-robert

src/common/imageUrlBuilder.ts

@@ -16,12 +16,12 @@ export const imageUrlBuilder = unconfiguredImageUrlBuilder()
   .dpr(window.devicePixelRatio ?? 1)
   .quality(defaultQuality);
 
-export const getAspectRatio = (imageRef: string): number | undefined => {
+export const getAspectRatio = (imageRef: string): string | undefined => {
   const dimensionsArr = imageRef.match(/\d+x\d+/g);
   if (!dimensionsArr) {
     return undefined;
   }
   const dimensions = dimensionsArr.join().split("x");
   const [width, height] = dimensions.map((n: string) => Number(n));
-  return width / height;
+  return (width / height).toString();
 };

src/documentation/common/DocumentationContent.tsx

@@ -211,7 +211,12 @@ const serializers = {
             .url()}
           alt={props.node.alt}
           width={300}
-          sx={{ aspectRatio: getAspectRatio(props.node.asset._ref) }}
+          borderRadius="lg"
+          border="solid 1px"
+          borderColor="gray.300"
+          sx={{
+            aspectRatio: getAspectRatio(props.node.asset._ref),
+          }}
         />
       );
     },