customComponent & fix menu (v0.7.7)

CHANGELOG.md

@@ -21,6 +21,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Security
 
+## [0.7.7] - 2023-05-05
+
+-   require Datamodel >= 0.6.0
+
+### Added
+
+-   PageContext
+-   Use Theme in Layout (and pages...)
+-   options props in pages, index
+-   customComponent to simplify extending theme in portal fork
+
+### Fixed
+
+-   Menu unique key
+
 ## [0.7.6] - 2023-04-21
 
 ### Added

docs/DataModel.md

@@ -21,6 +21,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Security
 
+## [0.6.1] - 2023-05-05
+
+categories
+
+-   add label
+
 ## [0.6.0] - 2023-04-13
 
 site

gatsby-config.js

@@ -162,5 +162,13 @@ module.exports = {
                 secure: false,
             })
         )
+
+        app.use(
+            "/fr/",
+            proxy.createProxyMiddleware("/fr/", {
+                target: PF_URL,
+                secure: false,
+            })
+        )
     },
 }

index.d.ts

@@ -267,6 +267,47 @@ interface ISections {
     ids: string[]
 }
 export function Sections(props: ISections): JSX.Element
+
+export interface IAction {
+    actions_id: {
+        name: string
+        url: string
+        style: string
+    }
+}
+
+export interface IService {
+    services_id: {
+        name: string
+        url: string
+        description: string
+        image: {
+            imageFile?: {
+                publicURL?: string
+            }
+        }
+        options: any
+    }
+}
+
+export interface IComponent {
+    type: string
+    actions: IAction[] | []
+    mapdid: string
+    title: string
+    subtitle: string
+    content: string
+    url_dataviz: string
+    url_map: string
+    layout: string
+    length: number
+    size: string
+    services: IService[] | []
+    images: Iimage[] | []
+    options: any
+}
+export function Component(props: IComponent): JSX.Element
+
 interface IMaps {
     layout?: "row" | "col" | "grid"
     size?: "xs" | "base" | "xl"

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, Iimage } from "./src/components/core/Image"
+export { default as Image } 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"
@@ -51,6 +51,7 @@ export { default as Data } from "./src/components/Data"
 
 // Section components
 export { default as Sections } from "./src/components/Sections"
+export { default as Component } from "./src/components/section/component"
 
 // Maps components
 export { default as Maps } from "./src/components/Maps"

package.json

 {
     "name": "@onegeo-suite/gatsby-theme-onegeo",
-    "version": "0.7.6",
+    "version": "0.7.7",
     "main": "index.js",
     "types": "index.d.ts",
     "author": "NEOGEO",
     "license": "MIT",
     "onegeosuite": {
         "portal": {
-            "datamodel": ">=0.5.0"
+            "datamodel": ">=0.6.0"
         }
     },
     "peerDependencies": {

src/components/core/Menu.tsx

@@ -68,7 +68,7 @@ const Menu = (props: Imenu) => {
             <ul className="bg-base-100 z-50 p-2 shadow-md">
                 {item.children.map((itemChild: any, idx: number) => {
                     return (
-                        <li key={idx}>
+                        <li key={"M_" + name + "_L2_" + idx}>
                             <Link to={goto(itemChild)} target="_blank">
                                 <span>{itemChild.name}</span>
                             </Link>
@@ -84,7 +84,7 @@ const Menu = (props: Imenu) => {
             <ul className="menu bg-base-100 rounded-box z-50 min-w-[12rem] p-2 shadow-md">
                 {item.children.map((itemChild: any, idx: number) => {
                     return (
-                        <li key={idx}>
+                        <li key={"M_" + name + "_L1_" + idx}>
                             <Link to={goto(itemChild)} target="_blank">
                                 <span className="grow">{itemChild.name}</span>
                                 {itemChild?.children.length > 0 && (
@@ -106,7 +106,7 @@ const Menu = (props: Imenu) => {
             <ul className={className}>
                 {menu?.map((item: any, key: number) => {
                     return (
-                        <li key={key}>
+                        <li key={"M_" + name + "_L0_" + key}>
                             <Link to={goto(item)} target="_blank">
                                 <span>{item.name}</span>
                                 {item?.children.length > 0 && (

src/components/section/component.tsx

 import React from "react"
 
 import { IGatsbyImageData } from "gatsby-plugin-image"
+import CustomComponent from "./customComponent"
 
 import Map from "../core/Map"
 import News from "../News"
@@ -14,7 +15,7 @@ import Iframe from "../core/Iframe"
 import Text from "../Text"
 import Partners from "../Partners"
 
-interface IAction {
+export interface IAction {
     actions_id: {
         name: string
         url: string
@@ -22,7 +23,7 @@ interface IAction {
     }
 }
 
-interface IService {
+export interface IService {
     services_id: {
         name: string
         url: string
@@ -36,13 +37,13 @@ interface IService {
     }
 }
 
-interface Iimage {
+export interface Iimage {
     directus_files_id: {
         imageFile: IGatsbyImageData
     }
 }
 
-interface IComponent {
+export interface IComponent {
     type: string
     actions: IAction[] | []
     mapdid: string
@@ -176,7 +177,7 @@ const Component = (props: IComponent) => {
             return <Partners />
     }
 
-    return <div></div>
+    return <CustomComponent {...props} />
 }
 
 export default Component

src/components/section/customComponent.tsx

+// To be overriden in Portal
+// Allow adding custom Component in project, need to add the new component type in Directus
+// and register this new component here in order to use it
+
+import React from "react"
+import { IComponent } from "@onegeo-suite/gatsby-theme-onegeo"
+
+// Import the custom Component
+//// import MyComponent from "../MyComponent"
+
+const CustomComponent = (props: IComponent) => {
+    const {
+        type,
+        // ...restProps
+    } = props
+
+    switch (type) {
+        // Use the 'type' added in Directus
+        case "mycomponent":
+            // Use the custom component
+            return <></>
+    }
+
+    return <></>
+}
+
+export default CustomComponent