feat(website): add an open graph image for the homepage

plouc · Jan 12, 2022 · 7b61ade · 7b61ade
1 parent e7e7d8a
commit 7b61ade
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -1,12 +1,29 @@
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import Home from '../components/home/Home'
 import { Seo } from '../components/Seo'
 
-const IndexPage = () => (
-    <>
-        <Seo title="Home" keywords={[`gatsby`, `application`, `react`]} />
-        <Home />
-    </>
-)
+const IndexPage = () => {
+    const {
+        image: {
+            childImageSharp: { gatsbyImageData: image },
+        },
+    } = useStaticQuery(graphql`
+        query {
+            image: file(absolutePath: { glob: "**/src/assets/captures/pages/home.png" }) {
+                childImageSharp {
+                    gatsbyImageData(layout: FIXED, width: 1200, quality: 100)
+                }
+            }
+        }
+    `)
+
+    return (
+        <>
+            <Seo title="Home" keywords={[`dataviz`, `charts`, `react`, `svg`]} image={image} />
+            <Home />
+        </>
+    )
+}
 
 export default IndexPage