Merge branch 'template_page' into 'main'

Template page

See merge request onegeo/gatsby-theme-onegeo!41

gatsby-node.js

@@ -11,13 +11,8 @@ exports.createPages = async function ({ actions, graphql }) {
     const { data } = await graphql(`
         query getPages {
             directus {
-                pages(limit: 1) {
-                    sections {
-                        id
-                    }
-                    content
+                pages {
                     id
-                    title
                     slug
                 }
             }
@@ -28,7 +23,9 @@ exports.createPages = async function ({ actions, graphql }) {
         actions.createPage({
             path: `/${page.slug}`,
             component: path.join(__dirname, "src", "templates", "Page.tsx"),
-            context: { ...page },
+            context: {
+                id: page.id,
+            }
         })
     })
 }

src/templates/Page.tsx

 import React from "react"
-import { PageProps } from "gatsby"
-
-import { Sections } from "@onegeo/gatsby-theme-onegeo"
+import { graphql, PageProps } from "gatsby"
+import { Layout, Content, Sections } from "@onegeo/gatsby-theme-onegeo"
 
 interface ISection {
-    id: string
+    sections_id: string[] | []
 }
 interface IPageContext {
-    id: string
-    title: string
-    content: string
-    slug: string
-    sections: ISection[] | []
+    directus: {
+        pages: {
+            id: string
+            title: string
+            content: string
+            slug: string
+            sections: ISection[] | []
+        }
+    }
 }
 
-const PageTemplate = (props: PageProps<null, IPageContext>) => {
-    const {
-        pageContext: { sections, title, content },
-    } = props
+const PageTemplate = ({ data }: PageProps<IPageContext>) => {
+
+    const news = data.directus.pages[0]
+    const { title, content, sections } = news
 
-    const idsSections = sections.map((section) => section.id)
+    const idsSections = sections.map((section: any) => section.sections_id.id)
 
     return (
-        <div>
-            {title && <h1 className="text-3xl font-extrabold">{title}</h1>}
-            {content && (
-                <div
-                    className="text-lg leading-8 py-4 text-justify"
-                    dangerouslySetInnerHTML={{ __html: content }}
-                ></div>
-            )}
-            {idsSections.length > 0 && <Sections ids={idsSections} />}
-        </div>
+        <Layout>
+            <Content>
+                {title && <h1 className="text-3xl font-extrabold">{title}</h1>}
+                {content && (
+                    <div
+                        className="text-lg leading-8 py-4 text-justify"
+                        dangerouslySetInnerHTML={{ __html: content }}
+                    ></div>
+                )}
+                {Object.keys(idsSections).length !== 0 && (
+                    <Sections ids={idsSections} />
+                )}
+            </Content>
+        </Layout>
     )
 }
 
 export default PageTemplate
+
+export const query = graphql`
+    query ($id: DirectusData_GraphQLStringOrFloat!) {
+        directus {
+            pages(filter: { id: { _eq: $id } }) {
+                sections {
+                    sections_id {
+                        id
+                    }
+                }
+                content
+                id
+                title
+                slug
+            }
+        }
+    }
+`