adding clickable image

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "endOfLine": "lf",
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "bracketSpacing": true
+  }

front-end/content/index/hero.md

@@ -1,6 +1,7 @@
 ---
 id: hero
 alt: true
+imgClickUrl: ../../gov-au_observatory-funtional-behaviour.png
 imgUrl: ../../hero-jellyfish--white.png
 imgAlt: A network graph of 38 nodes showing the connections of government web sites and services.
 imgCaption: "The Jelly Fish: Graphic visualisation of two weeks of user traffic across 38 gov.au websites from May 2019."

front-end/src/components/layouts/hero.tsx

@@ -3,13 +3,15 @@ import React from "react";
 interface Props {
   children: React.ReactElement;
   alt?: Boolean;
+  imgClickUrl: string;
   imgUrl: string;
   imgAlt: string;
   imgCaption: string;
 }
 
 const Hero: React.FC<Props> = ({
   children,
+  imgClickUrl,
   imgUrl,
   imgAlt,
   imgCaption,
@@ -25,11 +27,13 @@ const Hero: React.FC<Props> = ({
 
           <div className="col-md-6 col-xs-12">
             <figure className="hero-image">
-              <img
-                className="au-responsive-media-img"
-                src={imgUrl}
-                alt={imgAlt}
-              />
+              <a href={imgClickUrl}>
+                <img
+                  className="au-responsive-media-img"
+                  src={imgUrl}
+                  alt={imgAlt}
+                />
+              </a>
               <figcaption className="hero-image__caption">
                 {imgCaption}
               </figcaption>

front-end/src/pages/index.tsx

@@ -20,6 +20,7 @@ const IndexPage = () => {
             frontmatter {
               id
               alt
+              imgClickUrl
               imgUrl
               imgAlt
               imgCaption
@@ -49,6 +50,7 @@ const IndexPage = () => {
         <Hero
           alt={hero.frontmatter.alt}
           imgAlt={hero.frontmatter.imgAlt}
+          imgClickUrl={hero.frontmatter.imgClickUrl}
           imgUrl={hero.frontmatter.imgUrl}
           imgCaption={hero.frontmatter.imgCaption}
         >