Fix broken image zoom, switch to pure CSS version

Image zoom broke with the recent Docusaurus update. This change fixes image zoom and also simplifies it by moving to a CSS only version.

Author: trevorgerhardt

components/image.tsx

@@ -1,37 +1,17 @@
-import useBaseUrl from '@docusaurus/useBaseUrl' 
-import React, {useState} from 'react'
+import React from 'react'
 
 export default function Image ({alt, src}) {
-  const [isActive, setIsActive] = useState(false)
-
   return (
-    <div style={{marginBottom: '20px', textAlign: 'center'}}>
+    <div className='ZoomableImage'>
       <img 
+        className='Thumbnail'
         alt={alt} 
-        className='ZoomableImage'
-        onClick={() => setIsActive(true)}
-        src={useBaseUrl(src)}
+        src={src}
+        tabIndex={0}
       />
-      {isActive && (
-        <>
-          <div 
-            className='ImageOverlayBackdrop' 
-            onClick={() => setIsActive(false)}
-          />
-          <img
-            alt={alt}
-            className='ImageOverlay'
-            onClick={() => setIsActive(false)}
-            src={useBaseUrl(src)}
-          />
-        </>
-      )}
-      <div 
-        style={{
-          fontStyle: 'italic',
-          fontSize: '75%'
-        }}
-      >{alt}</div>
+      <div className='ImageOverlayBackdrop' />
+      <img alt={alt} className='ImageOverlay' src={src} />
+      <div className='AltText'>{alt}</div>
     </div>
   )
 }

custom.css

@@ -52,6 +52,11 @@ body {
 }
 
 .ZoomableImage {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.ZoomableImage > .Thumbnail {
   box-shadow: 0 0 15px rgba(24, 96, 141, 0.2);
   margin: 15px 0 0;
   object-fit: contain;
@@ -60,7 +65,13 @@ body {
   cursor: zoom-in;
 }
 
+.ZoomableImage > .AltText {
+  font-style: italic;
+  font-size: 75%;
+}
+
 .ImageOverlayBackdrop {
+  display: none;
   cursor: zoom-out;
   position: fixed;
   top: 0;
@@ -72,6 +83,7 @@ body {
 }
 
 .ImageOverlay {
+  display: none;
   box-shadow: 0 0 15px rgba(24, 96, 141, 0.2);
   cursor: zoom-out;
   position: fixed;
@@ -83,6 +95,19 @@ body {
   transform: translate(-50%, -50%);
 }
 
+.ZoomableImage:focus-within {
+  border: 1px solid red;
+}
+
+.ZoomableImage:focus-within > .ImageOverlayBackdrop {
+  display: block;
+}
+
+.ZoomableImage:focus-within > .ImageOverlay {
+  display: block;
+}
+
+
 /* Github link taken from https://github.com/facebook/docusaurus/blob/master/website/src/css/custom.css */
 .header-github-link:hover {
   opacity: 0.6;