Skip to content
Snippets Groups Projects
Commit bfc60d16 authored by Tovohery Angelo RAMONTALAMBO's avatar Tovohery Angelo RAMONTALAMBO
Browse files

init feat/page_context

parent f1e361eb
No related branches found
No related tags found
No related merge requests found
......@@ -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"
......@@ -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"
import React, { createContext, useContext } from "react"
export const PageContext = createContext<any>({})
export const usePageContext = () => useContext(PageContext)
......@@ -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>
......
......@@ -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
}
}
}
......
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
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment