init feat/page_context

index.d.ts

@@ -5,6 +5,7 @@ import { IGatsbyImageData } from "gatsby-plugin-image"
 interface LayoutProps {
     children: React.ReactNode
     UserMenu?: React.ReactNode
+    theme?: string
 }
 
 /**
@@ -285,4 +286,6 @@ interface IText {
 }
 export function Text(props: IText): JSX.Element
 
+export function usePageContext(): any
+
 declare module "@onegeo-suite/gatsby-theme-onegeo"

index.js

@@ -13,7 +13,7 @@ export { default as Badge } from "./src/components/core/Badge"
 export { default as Toc } from "./src/components/core/Toc"
 export { default as Footer } from "./src/components/Footer"
 export { default as Map } from "./src/components/core/Map"
-export { default as Image } from "./src/components/core/Image"
+export { default as Image, Iimage } from "./src/components/core/Image"
 export { default as Stats } from "./src/components/Stats"
 export { default as CardList } from "./src/components/core/CardList"
 export { default as TitleComponent } from "./src/components/core/TitleComponent"
@@ -62,3 +62,6 @@ export { default as Marquee } from "./src/components/core/Marquee"
 
 // Text component
 export { default as Text } from "./src/components/Text"
+
+//Page context
+export { usePageContext } from "./src/context/page"

src/context/page.ts

+import React, { createContext, useContext } from "react"
+
+export const PageContext = createContext<any>({})
+export const usePageContext = () => useContext(PageContext)

src/layouts/layout.tsx

@@ -10,6 +10,7 @@ import Footer from "../components/Footer"
 interface Props {
     children: React.ReactNode
     UserMenu?: React.ReactNode
+    theme?: string
 }
 
 /**
@@ -17,7 +18,7 @@ interface Props {
  * @param {Props} props - Page content
  * @returns {JSX.Element} The complete page
  */
-const Layout = ({ children }: Props): JSX.Element => {
+const Layout = ({ children, theme }: Props): JSX.Element => {
     const data = useStaticQuery(graphql`
         query {
             directus {
@@ -49,12 +50,15 @@ const Layout = ({ children }: Props): JSX.Element => {
                 Footer is always displayed at the bottom of the page
                 https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c
             */}
-            <div className="bg-base-100 text-base-content relative min-h-screen">
+            <div
+                className="bg-base-100 text-base-content relative min-h-screen"
+                data-theme={theme}
+            >
                 {/* 
                     pt-16 : header height
                     pb-24 : footer height
                  */}
-                <div className="pt-16 pb-24">
+                <div className="pb-24 pt-16">
                     <Header />
                     {children}
                 </div>

src/pages/index.tsx

@@ -11,18 +11,20 @@ interface IData {
                     id: string
                 }
             }[]
+            options?: any
         }
     }
 }
 
 function Index({ data }: PageProps<IData>): ReactElement {
     const sections = data.directus.site.sections
+    const options = data.directus.site.options ?? {}
 
     const ids = sections.map((section) => section.sections_id.id)
     if (!ids || ids.length == 0) return <Layout>No section !</Layout>
 
     return (
-        <Layout>
+        <Layout theme={options.theme}>
             <Sections ids={ids} />
         </Layout>
     )
@@ -39,6 +41,7 @@ export const query = graphql`
                         id
                     }
                 }
+                options
             }
         }
     }

src/templates/page.tsx

 import React from "react"
 import { graphql, PageProps } from "gatsby"
-import cx from "classix"
+import { twMerge } from "tailwind-merge"
 import {
     Layout,
     Content,
@@ -8,6 +8,7 @@ import {
     Toc,
 } from "@onegeo-suite/gatsby-theme-onegeo"
 
+import { PageContext } from "../context/page"
 interface ISection {
     sections_id: string[] | []
 }
@@ -20,6 +21,7 @@ interface IPageContext {
             slug: string
             sections: ISection[] | []
             toc: boolean
+            options?: any
         }
     }
 }
@@ -30,28 +32,43 @@ const PageTemplate = ({ data }: PageProps<IPageContext>) => {
 
     const idsSections = sections.map((section: any) => section.sections_id.id)
 
+    const options = news.options ?? {}
+    const oClass = options.class || {}
+    const oContext = options.context || {}
+
     return (
-        <Layout>
-            <Content
-                className={cx(
-                    "mt-8 flex  flex-wrap gap-6 md:flex-nowrap",
-                    toc ? "max-w-6xl" : "max-w-4xl"
-                )}
-            >
-                <div className="bg-base-100 rounded-xl p-6 shadow-lg">
-                    {content && (
-                        <div
-                            className="prose lg:prose-lg prose-headings:scroll-mt-24 max-w-4xl"
-                            dangerouslySetInnerHTML={{ __html: content }}
-                        ></div>
-                    )}
-                    {Object.keys(idsSections).length !== 0 && (
-                        <Sections ids={idsSections} />
+        <PageContext.Provider value={oContext}>
+            <Layout theme={options.theme}>
+                <Content
+                    className={twMerge(
+                        "mt-8 flex  flex-wrap gap-6 md:flex-nowrap",
+                        toc ? "max-w-6xl" : "max-w-4xl",
+                        oClass.main
                     )}
-                </div>
-                {toc ? <Toc /> : <></>}
-            </Content>
-        </Layout>
+                >
+                    <div
+                        className={twMerge(
+                            "bg-base-100 rounded-xl p-6 shadow-lg",
+                            oClass.body
+                        )}
+                    >
+                        {content && (
+                            <div
+                                className={twMerge(
+                                    "prose lg:prose-lg prose-headings:scroll-mt-24 max-w-4xl",
+                                    oClass.content
+                                )}
+                                dangerouslySetInnerHTML={{ __html: content }}
+                            ></div>
+                        )}
+                        {Object.keys(idsSections).length !== 0 && (
+                            <Sections ids={idsSections} />
+                        )}
+                    </div>
+                    {toc ? <Toc /> : <></>}
+                </Content>
+            </Layout>
+        </PageContext.Provider>
     )
 }
 
@@ -71,6 +88,7 @@ export const query = graphql`
                 title
                 slug
                 toc
+                options
             }
         }
     }