From 98a20bbc6f9dea8891bcd0f147015aaf4749c3ce Mon Sep 17 00:00:00 2001 From: Julien MARGAIL <jmargail@neogeo.fr> Date: Mon, 17 Feb 2025 17:27:22 +0100 Subject: [PATCH] add Sections in News pages --- CHANGELOG.md | 12 +++++++- package.json | 2 +- src/templates/news.tsx | 67 +++++++++++++++++++++++++++++++++++------- 3 files changed, 68 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9f45cc..4393bd0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,17 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [0.12.0] - 2024-11-15 +## [0.14.0] - 2024-11-15 (WIP) + +### Changed + +- require Datamodel >= 0.7.0 + +### New + +- News can add Sections in the page + +## [0.12.0] - 2024-11-15 (1.3) ### Fix diff --git a/package.json b/package.json index c72d0f9..d96ae54 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "license": "MIT", "onegeosuite": { "portal": { - "datamodel": ">=0.6.1" + "datamodel": ">=0.7.0" } }, "peerDependencies": { diff --git a/src/templates/news.tsx b/src/templates/news.tsx index dfdfdb2..5e8ea45 100644 --- a/src/templates/news.tsx +++ b/src/templates/news.tsx @@ -13,8 +13,13 @@ import { Content, Link, SideBar, + Sections, } from "@onegeo-suite/gatsby-theme-onegeo" +interface ISection { + sections_id: string[] | [] +} + interface Idata { directus: { news: { @@ -47,6 +52,7 @@ interface Idata { name: string } content: string + sections: ISection[] | [] link: string } } @@ -61,11 +67,22 @@ const News = ({ pageContext, data, location }: PageProps<Idata>) => { const urlImage = data.directus.news[0].image?.imageFile?.publicURL const categoryName = data.directus.news[0].categories?.name - const { content, title, author, links, documents, date_published } = news + const { + content, + title, + author, + links, + documents, + date_published, + sections, + } = news + const idsSections = sections.map((section: any) => section.sections_id.id) const dataPub = dayjs(date_published).format("DD/MM/YYYY") - let position = "right" + const options = news.options ?? {} + const sectionsPosition = options.sectionsPosition ?? "center" + const sidebarPosition = options.sidebarPosition ?? "right" return ( <Layout> @@ -94,23 +111,44 @@ const News = ({ pageContext, data, location }: PageProps<Idata>) => { <div className="mb-8 mt-8 flex flex-wrap gap-6 lg:flex-nowrap"> {/* Todo Fix mobile mode */} - {position === "left" ? ( + {sidebarPosition === "left" ? ( <SideBar documents={documents} links={links} /> ) : null} - <div className="bg-base-100 w-full rounded-xl p-6 lg:shadow-lg"> - <div - className="prose max-w-4xl" - dangerouslySetInnerHTML={{ - __html: content, - }} - ></div> + <div> + {sectionsPosition === "top" && + Object.keys(idsSections).length !== 0 && ( + <div className="mt-8"> + <Sections ids={idsSections} /> + </div> + )} + + <div className="bg-base-100 w-full rounded-xl p-6 lg:shadow-lg"> + <div + className="prose max-w-4xl" + dangerouslySetInnerHTML={{ + __html: content, + }} + ></div> + {sectionsPosition === "center" && + Object.keys(idsSections).length !== 0 && ( + <Sections ids={idsSections} /> + )} + </div> + + {sectionsPosition === "bottom" && + Object.keys(idsSections).length !== 0 && ( + <div className="mt-8"> + <Sections ids={idsSections} /> + </div> + )} </div> - {position === "right" ? ( + {sidebarPosition === "right" ? ( <SideBar documents={documents} links={links} /> ) : null} </div> + <div className="mb-24 flex justify-center"> <div className="flex w-5/6 space-x-4"> {pageContext.prev ? ( @@ -187,6 +225,13 @@ export const query = graphql` categories { name } + sections(sort: "sort") { + sections_id { + id + } + sort + } + options } } } -- GitLab