Improving images (#911)

* Adds custom image element

blogdev/2022-07-23-test-page.mdx

@@ -10,6 +10,8 @@ tags:
   - powershell
 ---
 
+![Database query response](../../imgdev/Untitled-8.png)
+
 Redownloading the media from PowerApps app is no longer available out of the box. Let’s explore the workarounds we have!
 
 ```powershell

gatsby-config.js

@@ -21,11 +21,11 @@ module.exports = {
       },
     },
     {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      path: `${__dirname}/blog${process.env.NODE_ENV === 'production' ? '' : 'dev'}`,
-      name: 'articles',
-    },
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/blog${process.env.NODE_ENV === 'production' ? '' : 'dev'}`,
+        name: 'articles',
+      },
     },
     {
       resolve: 'gatsby-source-filesystem',
@@ -34,7 +34,15 @@ module.exports = {
         name: 'images',
       },
     },
-    'gatsby-plugin-sharp',
+    `gatsby-plugin-image`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          breakpoints: [471, 942, 1920]
+        }
+      }
+    },
     'gatsby-transformer-sharp',
     {
       resolve: 'gatsby-plugin-mdx',
@@ -46,16 +54,6 @@ module.exports = {
               // name: 'uploads',
             },
           },
-          {
-            resolve: 'gatsby-remark-images',
-            options: {
-              // It's important to specify the maxWidth (in pixels) of
-              // the content container as this plugin uses this as the
-              // base for generating different widths of each image.
-              maxWidth: 1920,
-              srcSetBreakpoints: [471, 942],
-            },
-          },
           {
             resolve: 'gatsby-remark-copy-linked-files',
             options: {

src/components/Image.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { GatsbyImage } from 'gatsby-plugin-image'
+import { graphql, useStaticQuery } from 'gatsby'
+
+export const Image = ({ alt, src }) => {
+	const data = useStaticQuery(graphql`
+		query ImageQuery {
+			allFile {
+				nodes {
+					childImageSharp {
+						gatsbyImageData
+					}
+					relativePath
+					absolutePath
+				}
+				
+			}
+		}
+	`)
+	const relatedSrc = src.slice(6)
+	const relatedImage = data.allFile.nodes.find(node => node.absolutePath.includes(relatedSrc))
+
+	if (!relatedImage) return (<p style={{ color: 'red' }}>{alt} Image NOT FOUND</p>)
+
+	return (
+		<>
+			<GatsbyImage image={relatedImage.childImageSharp.gatsbyImageData} alt={alt} title={alt} />
+			<p className="image-title">{alt}</p>
+		</>
+	)
+}

src/components/Layout.js

@@ -6,6 +6,7 @@ import { NoteBlock, WarningBlock, TipBlock } from './Block'
 import { LinkToAnywhere } from './LinkToAnywhere'
 import { Header } from './Header'
 import { CodeBlock } from './CodeBlock'
+import { Image } from './Image'
 
 const TemplateWrapper = ({ children }) => {
 
@@ -24,6 +25,7 @@ const TemplateWrapper = ({ children }) => {
           h5: props => <Header level={'5'} {...props} />,
           h6: props => <Header level={'6'} {...props} />,
           pre: CodeBlock,
+          img: Image,
         }}
       >
         {children}

src/components/ReadingProgress.js

@@ -37,7 +37,6 @@ const ReadingProgress = () => {
 		'width': `${scrollProgress}%`,
 
 	};
-	console.log(scrollProgress)
 
 	return (
 		<div className="reading-progress-bar">

src/components/layout.css

@@ -354,6 +354,13 @@ h6 {
   margin-top: var(--header-top-margin);
 }
 
+p.image-title {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 /*#region Header anchors */
 .anchor.before {
   position: absolute;