diff --git a/gatsby-node.js b/gatsby-node.js index 036b2c8761dfc84e614ea1f1304ec775c2c0e0b3..1444bd616319657a7d675998938d3d06d33f6b08 100644 --- a/gatsby-node.js +++ b/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, + } }) }) } diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx index d4a068f07fe9ce6aa6292f212f9a37b61c351247..488fda0c562614036ce9dd85f7898bebace808e5 100644 --- a/src/templates/Page.tsx +++ b/src/templates/Page.tsx @@ -1,38 +1,63 @@ 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 + } + } + } +`