Feat/sections

gatsby-node.js

@@ -3,5 +3,32 @@
  *
  * See: https://www.gatsbyjs.com/docs/node-apis/
  */
+const path = require("path")
 
-exports.onPreInit = () => console.log("Loaded gatsby-theme-onegeo");
+exports.onPreInit = () => console.log("Loaded gatsby-theme-onegeo")
+
+exports.createPages = async function ({ actions, graphql }) {
+    const { data } = await graphql(`
+        query getPages {
+            directus {
+                pages(limit: 1) {
+                    sections {
+                        id
+                    }
+                    content
+                    id
+                    title
+                    slug
+                }
+            }
+        }
+    `)
+
+    data.directus.pages.forEach((page) => {
+        actions.createPage({
+            path: `/${page.slug}`,
+            component: path.join(__dirname, "src", "templates", "Page.tsx"),
+            context: { ...page },
+        })
+    })
+}

index.d.ts

@@ -224,4 +224,9 @@ interface ISection {
 }
 export function Section(props: ISection): JSX.Element
 
+interface ISections {
+    ids: string[]
+}
+export function Sections(props: ISections): JSX.Element
+
 declare module "@onegeo/gatsby-theme-onegeo"

index.js

@@ -46,3 +46,6 @@ export { default as Header } from "./src/components/Header"
 
 // Section components
 export { default as Section } from "./src/components/Section"
+
+// Section components
+export { default as Sections } from "./src/components/Sections"

src/components/Sections.tsx

+import React from "react"
+
+import Section from "./Section"
+
+interface ISections {
+    ids: string[]
+}
+
+const Sections = (props: ISections) => {
+    const { ids } = props
+
+    return (
+        <div>
+            {ids.map((id) => {
+                return <Section key={id} id={id} />
+            })}
+        </div>
+    )
+}
+
+export default Sections

src/pages-doc/doc/index.tsx

 import React, { ReactElement } from "react"
 
-import { Content,Link } from "@onegeo/gatsby-theme-onegeo"
+import { Content, Link } from "@onegeo/gatsby-theme-onegeo"
 
 function index(): ReactElement {
     return (
@@ -29,6 +29,8 @@ function index(): ReactElement {
                 <Link to="/doc/footer">Footer</Link>
                 <br></br>
                 <Link to="/doc/section">Section</Link>
+                <br></br>
+                <Link to="/doc/sections">Sections</Link>
             </div>
         </Content>
     )

src/pages-doc/doc/sections.tsx

+import React, { ReactElement } from "react"
+import { Link } from "gatsby"
+
+import { Sections, Content } from "@onegeo/gatsby-theme-onegeo"
+
+function section(): ReactElement {
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc">Retour</Link>
+
+                <h1>Sections</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+interface ISections {
+    ids: string[]
+}
+`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <Sections ids={["1", "2", "3"]} />
+        </Content>
+    )
+}
+
+export default section

src/templates/Page.tsx

+import React from "react"
+import { PageProps } from "gatsby"
+
+import { Sections } from "@onegeo/gatsby-theme-onegeo"
+
+interface ISection {
+    id: string
+}
+interface IPageContext {
+    id: string
+    title: string
+    content: string
+    slug: string
+    sections: ISection[] | []
+}
+
+const PageTemplate = (props: PageProps<null, IPageContext>) => {
+    const {
+        pageContext: { sections, title, content },
+    } = props
+
+    const idsSections = sections.map((section) => section.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>
+    )
+}
+
+export default PageTemplate