extract slice to layout

site/package.json

@@ -2,7 +2,7 @@
   "name": "@kontent-ai/gatsby-starter-kontent-hello-world",
   "private": true,
   "description": "A simplified bare-bones testing site for Gatsby",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",

site/src/components/footer.js

@@ -1,15 +1,17 @@
 import React from "react";
 import { graphql } from 'gatsby';
 
-const Footer = ({data}) => {
-    return (
-    <footer style={{"padding-top": "16px"}}>
-        <p>This footer is created using Slice API</p> 
-        <p>Author: {data.author.elements.name.value}</p>
+const Footer = ({ data }) => {
+  return (
+    <footer style={{ paddingTop: "16px" }}>
+      <p>This footer is created using Slice API</p>
+      <p>Author: {data.author.elements.name.value}</p>
     </footer>
-    )
+  )
 }
 
+export default Footer
+
 export const query = graphql`
 {
     author: kontentItemAuthor {
@@ -21,7 +23,3 @@ export const query = graphql`
     }
 }
 `
-
-
-
-export default Footer

site/src/components/layout.css

@@ -0,0 +1,9 @@
+.page {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+}

site/src/components/layout.js

@@ -0,0 +1,14 @@
+import { Slice } from "gatsby";
+import React from "react";
+import "./layout.css"
+
+export const Layout = ({ children }) => {
+  return (
+    <div className="page">
+      <div className="content">
+        {children}
+      </div>
+      <Slice alias="footer" />
+    </div >
+  )
+}

site/src/pages/articles.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { graphql, Slice } from "gatsby"
+import { graphql } from "gatsby"
+import { Layout } from "../components/layout";
 
 const Articles = (props) => {
   const { data } = props;
@@ -40,12 +41,11 @@ const Articles = (props) => {
     );
   });
   return (
-    <>
-    <div style={{ display: "flex", flexWrap: "wrap" }}>
-      {articles}
-    </div>
-    <Slice alias="footer"></Slice>
-    </>
+    <Layout>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {articles}
+      </div>
+    </Layout>
   )
 }
 

site/src/pages/author.js

@@ -1,8 +1,9 @@
 import React from "react"
-import { graphql, Slice } from "gatsby"
+import { graphql } from "gatsby"
 import { stringify } from "qs"
 import { ImageElement, getGatsbyImageData } from "@kontent-ai/gatsby-components"
 import { ImageUrlTransformationBuilder } from "@kontent-ai/delivery-sdk"
+import { Layout } from "../components/layout"
 
 const Author = ({ data }) => {
   if (!data.author.elements.avatar_image.value.length) {
@@ -39,7 +40,7 @@ const Author = ({ data }) => {
   const imageGatsbyData = getGatsbyImageData(imageData)
 
   return (
-    <>
+    <Layout>
       <header>
         <h1>{data.author.elements.name.value}</h1>
       </header>
@@ -141,8 +142,7 @@ const Author = ({ data }) => {
         }
 
       </article>
-      <Slice alias="footer"></Slice>
-    </>
+    </Layout>
   )
 }
 

site/src/pages/index.js

@@ -1,18 +1,18 @@
-import React from "react"
-import { RichTextElement } from "@kontent-ai/gatsby-components"
-import { Link, Slice } from "gatsby"
-
-const Index = () => {
-  return (
-    <>
-      <RichTextElement value="<div>Hello Kontent.ai!</div>" />
-      <ul>
-        <li><Link to="author">Image resolution example</Link></li>
-        <li><Link to="articles">Article listing example</Link></li>
-      </ul>
-      <Slice alias="footer"></Slice>
-    </>
-  )
-}
-
-export default Index;
+import React from "react"
+import { RichTextElement } from "@kontent-ai/gatsby-components"
+import { Link } from "gatsby"
+import { Layout } from "../components/layout"
+
+const Index = () => {
+  return (
+    <Layout>
+      <RichTextElement value="<div>Hello Kontent.ai!</div>" />
+      <ul>
+        <li><Link to="author">Image resolution example</Link></li>
+        <li><Link to="articles">Article listing example</Link></li>
+      </ul>
+    </Layout>
+  )
+}
+
+export default Index;