Merge pull request supabase#7297 from supabase/fix/blog-next-image

fix:blog posts now using @next/image

Author: MildTomato

apps/www/pages/blog/[year]/[month]/[day]/[slug].tsx

@@ -29,6 +29,13 @@ const components = {
     return <CodeBlock {...props} />
   },
   ImageGrid,
+  img: (props: any) => {
+    return (
+      <div className="next-image--dynamic-fill">
+        <Image {...props} layout="fill" className="custom-img" />
+      </div>
+    )
+  },
 }
 
 // plugins for next-mdx-remote

apps/www/styles/index.css

@@ -223,3 +223,22 @@ table {
 .sbui-typography a {
   @apply break-words;
 }
+
+/*
+* sets the image in @Next/Image components
+* to respect the height of the content
+*
+*/
+.next-image--dynamic-fill {
+  width: 100%;
+  grid-column: 1 / -1;
+}
+.next-image--dynamic-fill > span {
+  position: relative !important;
+}
+.next-image--dynamic-fill img {
+  object-fit: contain;
+  width: 100% !important;
+  position: relative !important;
+  height: unset !important;
+}