diff --git a/gatsby-config.js b/gatsby-config.js
index ab5240422f75c37e5a381b46e7e417a74b7fd72c..ed377f7e3f52fa09ad041ea0a2ba8be3c2bc2415 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -83,7 +83,7 @@ module.exports = {
},
},
},
- {
+ /*{
resolve: `gatsby-plugin-typesense`,
options: {
publicDir: `./public`, // Required
@@ -144,7 +144,7 @@ module.exports = {
],
},
},
- },
+ }, */
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
diff --git a/index.d.ts b/index.d.ts
index 28467c8ea242c70027766e93050f47ba68ac2e3c..fdf80e2d71bdb0fe4af60d823ce909b32873dd2d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -45,6 +45,19 @@ interface CardProps {
}
export function Card(props: CardProps): JSX.Element;
+interface BadgeProps {
+ children?: React.ReactNode;
+ title?: string;
+ className?: string;
+}
+export function Badge(props: BadgeProps): JSX.Element;
+
+interface TocProps {
+ children?: React.ReactNode;
+ className?: string;
+}
+export function Toc(props: TocProps): JSX.Element;
+
interface LinkProps {
children?: React.ReactNode;
to: string;
@@ -56,6 +69,15 @@ export function Link(props: LinkProps): JSX.Element;
interface SearchProps {}
export function Search(props: SearchProps): JSX.Element;
+interface Ilogo {
+ to?: string;
+ className?: string;
+ src?: string;
+ title: string;
+ image: any
+}
+export function Logo(props:Ilogo): JSX.Element;
+
interface Service {
title: string;
subtitle: string;
@@ -80,24 +102,9 @@ interface HeroProps {
*/
export function Hero(props: HeroProps): JSX.Element;
-interface CardListProps {
- cards?: CardProps[];
- layout?: 'row' | 'col' | 'grid';
- className?: string;
-}
-export function CardList(props: CardListProps): JSX.Element;
-
-interface INew {
- title?: string;
- content?: string;
- image?: string | IGatsbyImageData;
- to?: string;
-}
-
-interface NewsProps {
- news?: INew[];
- toAll?: string;
+interface MapProps {
+ idMap: number;
}
-export function News(props: NewsProps): JSX.Element;
+export function Map(props: MapProps): JSX.Element;
-declare module "@onegeo/gatsby-theme-onegeo";
\ No newline at end of file
+declare module "@onegeo/gatsby-theme-onegeo";
diff --git a/index.js b/index.js
index 364aca342bedfc47f252ec0b506d7901b1572b28..a1707589bbc1f1cbc73a3ad0eee2ce9c50645eb1 100644
--- a/index.js
+++ b/index.js
@@ -9,8 +9,12 @@ export { default as Button } from "./src/components/core/Button";
export { default as Card } from "./src/components/core/Card";
export { default as Link } from "./src/components/core/Link";
export { default as Search } from "./src/components/core/Search";
-export { default as CardList } from "./src/components/core/CardList";
+export { default as Badge } from "./src/components/core/Badge";
+export { default as Toc } from "./src/components/core/Toc";
+export { default as Map } from "./src/components/core/Map";
// Feature components
export { default as Hero } from "./src/components/Hero";
-export { default as News } from "./src/components/News";
\ No newline at end of file
+
+// Logo components
+export { default as Logo } from "./src/components/core/Logo";
diff --git a/package.json b/package.json
index 81058b6950d82582f2a69688181f363ec41facf9..7935df1d2916bb8a7dc1aa7a4f6bacef0ba94c13 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"gatsby-source-graphql": "^4.12.1",
"react-autosuggest": "^10.1.0",
"react-instantsearch-dom": "^6.12.1",
+ "react-leaflet": "^3.2.5",
"typesense-instantsearch-adapter": "^1.2.2"
},
"devDependencies": {
diff --git a/src/components/core/Badge.tsx b/src/components/core/Badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c84ac6693009471623565bac89bbb9da3ce8771
--- /dev/null
+++ b/src/components/core/Badge.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props {
+ children?: React.ReactNode;
+ title?: string;
+ className?: string;
+}
+
+const Badge = (props: Props) => {
+ const { children, title = "", className = "" } = props;
+
+ return (
+ <div className={`badge ${className}`}>
+ {title}
+ {children}
+ </div>
+ );
+};
+
+export default Badge;
diff --git a/src/components/core/Card.tsx b/src/components/core/Card.tsx
index 3f3644e1d5d89392fadb9dddfd5362eda898beb1..9581d906df72a4299fdd75ce8f7d7e2c12fbf379 100644
--- a/src/components/core/Card.tsx
+++ b/src/components/core/Card.tsx
@@ -15,6 +15,19 @@ interface Props {
className?: string;
}
+const oSize = {
+ 'top': {
+ main: 'max-w-xs ',
+ content: 'h-24',
+ image: 'h-56'
+ },
+ 'left': {
+ main: 'h-52 w-full ',
+ content: '',
+ image: 'min-w-[320px] max-w-[320px]'
+ }
+}
+
const Card = (props: Props) => {
const {
@@ -32,28 +45,28 @@ const Card = (props: Props) => {
: "";
const cardside = (layout == 'left') ? "card-side " : "";
- const size = (layout == 'top') ? "max-w-xs " : "h-56 ";
- const sizeContent = (layout == 'top') ? "h-24 " : "";
+ const size = oSize[layout];
return (
<Link
to={to}
className={
"card card-compact shadow-xl bg-base-100 text-neutral " +
- size +
+ size.main +
transition +
cardside +
className
}
>
- <CardImage
- image={image}
- layout={layout}
- />
+ <div className={size.image}>
+ <CardImage
+ image={image}
+ />
+ </div>
{title ? (
<div className="card-body">
<h2 className="card-title uppercase">{title}</h2>
- {content ? <p className={`${sizeContent} text-ellipsis overflow-hidden text-justify`} dangerouslySetInnerHTML={{ __html: content }}></p> : null}
+ {content ? <p className={`${size.content} text-ellipsis overflow-hidden text-justify`} dangerouslySetInnerHTML={{ __html: content }}></p> : null}
</div>
) : null}
</Link>
diff --git a/src/components/core/Logo.tsx b/src/components/core/Logo.tsx
index 05478d6c35553a6bc762694f2e26be904e2032b8..ca5b33427345a2d44072f6a24f943964c67a2777 100644
--- a/src/components/core/Logo.tsx
+++ b/src/components/core/Logo.tsx
@@ -1,26 +1,32 @@
import React from "react";
import { Link } from "gatsby";
import { StaticImage } from "gatsby-plugin-image";
+
// import logo from "../images/logo-egeo.png";
interface Props {
to?: string;
className?: string;
src?: string;
+ title: string;
+ image: any
}
const Logo = (props: Props) => {
- const { to = "#", className = "" } = props;
+ const { to = "#", className = "", title, image } = props;
return (
- <Link to={to} className={className}>
- <StaticImage
- src="../images/logo-egeo.png"
- alt="Logo"
- height={40}
- className="m-2"
- />
- </Link>
+ <div className="flex justify-center flex-col items-center w-[150px]">
+ <Link to={to} className={className}>
+ <img
+ src={image}
+ alt="Logo"
+ height={40}
+ className="my-2"
+ />
+ </Link>
+ <div>{title}</div>
+ </div>
);
};
diff --git a/src/components/core/Map.tsx b/src/components/core/Map.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..45078ed2ed1556f25225acde3ab08640fe835c1a
--- /dev/null
+++ b/src/components/core/Map.tsx
@@ -0,0 +1,172 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState, useEffect } from "react"
+import { isArray } from "lodash"
+import {
+ MapContainer,
+ LayersControl,
+ TileLayer,
+ WMSTileLayer,
+ GeoJSON,
+} from "react-leaflet"
+import "leaflet/dist/leaflet.css"
+
+interface Props {
+ idMap: number;
+}
+
+const Map = (props: Props) => {
+ const projectUrl = process.env.PROJECT_URL as string
+ if (typeof window !== "undefined") {
+ let className = "z-40 h-full w-full"
+
+ // Default id map (from mapstore)
+ const idMap = props.idMap
+
+ // Default center, zoom
+ const center: number[] = [47.1, -1.25]
+ const zoom: number = 9
+ const layers: any[] = []
+
+ // Get current map Object when ready (whenCreated)
+ const [map, setMap] = useState(null)
+
+ // Init default map context
+ const [mapContext, setMapContext] = useState({
+ center: {
+ x: center[1],
+ y: center[0],
+ },
+ zoom: zoom,
+ layers: layers,
+ })
+
+ // Get Mapstore context
+ useEffect(() => {
+ fetch(projectUrl + "/geoportail/rest/geostore/data/" + idMap)
+ .then((response) => response.json())
+ .then((resultData) => {
+ setMapContext(resultData.map)
+ // Update map view with context data
+ if (map)
+ // @ts-ignore
+ map.setView(
+ [resultData.map.center.y, resultData.map.center.x],
+ resultData.map.zoom
+ )
+ })
+ .catch((error) => {
+ console.log(error);
+ })
+ }, [projectUrl, map, idMap])
+
+ return (
+ <>
+ <MapContainer
+ center={[mapContext.center.y, mapContext.center.x]}
+ zoom={mapContext.zoom}
+ // @ts-ignore
+ whenCreated={setMap}
+ className={className}
+ // scrollWheelZoom={false}
+ >
+ <LayersControl>
+ {
+ // BACKGROUNDS
+ mapContext.layers
+ .filter((layer) => layer.group === "background")
+ .map((layer, key) => {
+ switch (layer.type) {
+ case "osm":
+ return (
+ <LayersControl.BaseLayer
+ key={key}
+ checked={layer.visibility}
+ name={layer.title}
+ >
+ <TileLayer
+ attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ />
+ </LayersControl.BaseLayer>
+ )
+ case "wmts":
+ // URL for IGN WMTS services
+ // TODO: test for other WMTS
+ const url =
+ layer.url +
+ "?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=" +
+ layer.name +
+ "&format=" +
+ layer.format +
+ "&style=" +
+ layer.style
+ return (
+ <LayersControl.BaseLayer
+ key={key}
+ checked={layer.visibility}
+ name={layer.title}
+ >
+ <TileLayer
+ url={url}
+ tileSize={256}
+ opacity={layer.opacity}
+ />
+ </LayersControl.BaseLayer>
+ )
+ }
+ })
+ }
+
+ {
+ // OVERLAYS
+
+ // Load layers from context
+ mapContext.layers.map((layer, key) => {
+ if (isArray(layer.url)) return null
+ switch (layer.type) {
+ case "vector":
+ return (
+ <LayersControl.Overlay
+ key={key}
+ checked={layer.visibility}
+ name={layer.name}
+ >
+ <GeoJSON
+ data={layer.features}
+ pathOptions={layer.style || ""}
+ />
+ </LayersControl.Overlay>
+ )
+ case "wfs":
+ break
+ case "wms":
+ return (
+ <LayersControl.Overlay
+ key={key}
+ checked={layer.visibility}
+ name={layer.title}
+ >
+ <WMSTileLayer
+ layers={layer.name}
+ format={layer.format}
+ transparent={true}
+ url={layer.url}
+ styles={layer.style || ""}
+ opacity={layer.opacity}
+ />
+ </LayersControl.Overlay>
+ )
+ }
+ return null
+ })
+ }
+ </LayersControl>
+ </MapContainer>
+ </>
+ )
+ }
+
+ return null
+}
+
+export default Map
diff --git a/src/components/core/Toc.tsx b/src/components/core/Toc.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48cd82e0703dfd9e044af705e6c841c2c410ce69
--- /dev/null
+++ b/src/components/core/Toc.tsx
@@ -0,0 +1,141 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { useHeadsObserver } from "./utils/hook";
+
+const rnd = (() => {
+ const gen = (min, max) => max++ && [...Array(max-min)].map((s, i) => String.fromCharCode(min+i));
+
+ const sets = {
+ alphaLower: gen(97,122),
+ alphaUpper: gen(65,90)
+ };
+
+ function* iter(len, set) {
+ if (set.length < 1) set = Object.values(sets).flat();
+ for (let i = 0; i < len; i++) yield set[Math.random() * set.length|0]
+ }
+
+ return Object.assign(((len, ...set) => [...iter(len, set.flat())].join('')), sets);
+})();
+
+const navStyle = {
+ position: "sticky -webkit-sticky",
+ top: "24px",
+ maxHeight: "calc(100vh - 40px)",
+ overflow: "auto",
+} as unknown as React.CSSProperties;
+
+let navulliStyle = {
+ marginBottom: "15px",
+} as React.CSSProperties;
+
+const getClassName = (level) => {
+ switch (level) {
+ case 1:
+ navulliStyle = {
+ ...navulliStyle,
+ marginLeft: "0px",
+ };
+ return "head1";
+ case 2:
+ navulliStyle = {
+ ...navulliStyle,
+ marginLeft: "10px",
+ };
+ return "head2";
+ case 3:
+ navulliStyle = {
+ ...navulliStyle,
+ marginLeft: "20px",
+ };
+ return "head3";
+ case 4:
+ navulliStyle = {
+ ...navulliStyle,
+ marginLeft: "30px",
+ };
+ return "head4";
+ default:
+ return undefined;
+ }
+};
+
+interface Props {
+ className?: string;
+}
+
+const Toc = (props: Props) => {
+ const { className = "" } = props;
+ const [headings, setHeadings] = useState<any>([]);
+ const { activeId } = useHeadsObserver();
+
+ useEffect(() => {
+ const elements = Array.from(
+ document.querySelectorAll("h1, h2, h3, h4")
+ ).map((elem) => ({
+ id: elem.id ? elem.id : elem.id=rnd(4),
+ text: elem.textContent,
+ level: Number(elem.nodeName.charAt(1)),
+ }));
+ setHeadings(elements);
+ }, []);
+
+ return (
+ <aside
+ className={`w-[20%] fixed right-0 top-auto h-screen bg-slate-50 p-5 ${className}`}
+ >
+ <div className="text-2xl pb-5 flex flex-row">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth={1.5}
+ stroke="currentColor"
+ className="w-6 h-6 mt-2"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+ />
+ </svg>
+ <p className="px-2 mt-0.5"> Menu interne </p>
+ </div>
+ <nav style={navStyle}>
+ <ul style={navulliStyle}>
+ {headings.map((heading) => (
+ <li
+ key={heading.id}
+ className={getClassName(heading.level)}
+ style={navulliStyle}
+ >
+ <a
+ href={`#${heading.id}`}
+ onClick={(e) => {
+ e.preventDefault();
+ const element = document.querySelector(`#${heading.id}`);
+ if(element) {
+ element?.scrollIntoView({
+ behavior: "smooth",
+ });
+ }
+ else {
+ console.log("No element");
+ }
+ }}
+ style={{
+ fontWeight: activeId == heading.id ? "bold" : "normal",
+ fontFamily: "Georgia, serif",
+ }}
+ >
+ {heading.text}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </nav>
+ </aside>
+ );
+};
+
+export default Toc;
diff --git a/src/components/core/card/CardImage.tsx b/src/components/core/card/CardImage.tsx
index 79f6e0c755ed86d15582e9383e1cfbdd9afd7812..da174d2d07bbf47c7cd2632ac7ac622d365e6e34 100644
--- a/src/components/core/card/CardImage.tsx
+++ b/src/components/core/card/CardImage.tsx
@@ -3,61 +3,55 @@ import { StaticImage, IGatsbyImageData, GatsbyImage, getImage } from "gatsby-plu
interface Props {
image?: string | IGatsbyImageData;
- layout?: 'top' | 'left';
}
const CardImage = (props: Props) => {
const {
- image,
- layout
+ image
} = props;
- const classNameImage = (layout == 'top') ? 'object-cover w-full h-52' : 'h-full w-full object-cover' ;
- const classNameDivContainer = (layout == 'top') ? '' : 'min-w-[320px] max-w-[320px]' ;
-
const imageNoAvailable = (
<StaticImage
src='../../../images/no-image-available.jpg'
alt="no-image-available"
- className={classNameImage}
+ className="h-full w-full object-cover"
/>
)
if (! image || typeof image == 'undefined') {
return (
- <div className={classNameDivContainer}>
+ <>
{imageNoAvailable}
- </div>
+ </>
);
}
if (typeof image == 'string') {
return (
- <div className={classNameDivContainer}>
+ <>
<img
src={image}
alt={image}
- className={classNameImage}
+ className="h-full w-full object-cover"
/>
- </div>
+ </>
)
}
const img = getImage(image) ;
if (typeof img == 'undefined') {
return (
- <div className={classNameDivContainer}>
+ <>
{imageNoAvailable}
- </div>
+ </>
)
}
return (
- <div className={classNameDivContainer}>
- <GatsbyImage image={img} alt="gatsby-image" className={classNameImage}/>
- </div>
-
+ <>
+ <GatsbyImage image={img} alt="gatsby-image" className="h-full w-full object-cover"/>
+ </>
)
};
diff --git a/src/components/core/utils/hook.tsx b/src/components/core/utils/hook.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..352608659d061e0871952be6c7f436f79957b264
--- /dev/null
+++ b/src/components/core/utils/hook.tsx
@@ -0,0 +1,27 @@
+import { useRef, useState, useEffect } from "react";
+
+export function useHeadsObserver() {
+ const observer = useRef<any>();
+ const [activeId, setActiveId] = useState<any>("");
+
+ useEffect(() => {
+ const handleObsever = (entries) => {
+ entries.forEach((entry) => {
+ if (entry?.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ };
+
+ observer.current = new IntersectionObserver(handleObsever, {
+ rootMargin: "28% 0% -87% 0%",
+ });
+
+ const elements = document.querySelectorAll("h1, h2, h3, h4");
+ elements.forEach((elem) => observer.current.observe(elem));
+
+ return () => observer.current?.disconnect();
+ }, []);
+
+ return { activeId };
+}
diff --git a/src/pages-doc/doc/core/badge.tsx b/src/pages-doc/doc/core/badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d77661628370c5e0d0ca2a7b3303ea787e4cccff
--- /dev/null
+++ b/src/pages-doc/doc/core/badge.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Link } from "gatsby";
+import { Badge } from "@onegeo/gatsby-theme-onegeo";
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+
+function badgeIndex() {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Badge</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`interface Props {
+ children?: React.ReactNode;
+ title?: string;
+ className?: string;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Badge with brand colors</h2>
+ <Badge title="A Badge..." className="" />
+ <Badge title="A Primary Badge..." className="badge-primary" />
+ <Badge title="A Secondary Badge..." className="badge-secondary" />
+ <Badge title="An Accent Badge..." className="badge-accent" />
+ <Badge className="badge-ghost"> A Ghost Badge </Badge>
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Outline badge :</h2>
+ <Badge title="A Badge..." className="badge-outline" />
+ <Badge
+ title="A Primary Badge..."
+ className="badge-primary badge-outline"
+ />
+ <Badge
+ title="A Secondary Badge..."
+ className="badge-secondary badge-outline"
+ />
+ <Badge
+ title="An Accent Badge..."
+ className="badge-accent badge-outline"
+ />
+ <Badge className="badge-ghost badge-outline"> A Ghost Badge </Badge>
+ </div>
+ <div className="flex gap-6 m-4">
+ <h2>Badge sizes :</h2>
+ <Badge title="987,654" className="badge-lg" />
+ <Badge title="987,654" className="badge-md" />
+ <Badge title="987,654" className="badge-sm" />
+ <Badge className="badge-xs"> 987,654 </Badge>
+ </div>
+ <div className="prose">
+ <h2>More example</h2>
+ <a href="https://daisyui.com/components/badge/">Daisy UI</a>
+ </div>
+ </Content>
+ );
+}
+
+export default badgeIndex;
diff --git a/src/pages-doc/doc/core/card.tsx b/src/pages-doc/doc/core/card.tsx
index 98a3d40a79aad848a8e8adb8921e0131e085e986..ec475e782a9849db0ff77b047031229b74aa7021 100644
--- a/src/pages-doc/doc/core/card.tsx
+++ b/src/pages-doc/doc/core/card.tsx
@@ -40,6 +40,8 @@ function card(): ReactElement {
content="Action without animation for the Button"
anime={false}
/>
+ </div>
+ <div className="flex gap-6 m-4">
<Card
title="Action"
content="Action whith icon on top for the Button"
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index 2c7d26dbd18a80c0e4f553d3641fb94491191f52..cf679dcf9f2ddef3dc111075f83a1ccb2c29b11a 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/src/pages-doc/doc/core/index.tsx
@@ -17,7 +17,13 @@ function index(): ReactElement {
<br></br>
<Link to="/doc/core/hero">Hero</Link>
<br></br>
- <Link to="/doc/core/news">News</Link>
+ <Link to="/doc/core/badge">Badge</Link>
+ <br></br>
+ <Link to="/doc/core/toc">Toc</Link>
+ <br></br>
+ <Link to="/doc/core/map">Map</Link>
+ <br></br>
+ <Link to="/doc/core/logo">Logo</Link>
</div>
</Content>
);
diff --git a/src/pages-doc/doc/core/logo.tsx b/src/pages-doc/doc/core/logo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..efabc0ca106c1b7bfdc1ea7a9fd3236c691bd4f9
--- /dev/null
+++ b/src/pages-doc/doc/core/logo.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Logo } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+import image from "../../../images/logo-egeo.png"
+
+const logo = () => {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Logo</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`interface Props {
+ to?: string;
+ className?: string;
+ src?: string;
+ title: string;
+ image: any
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="flex gap-6 m-4">
+ <Logo title="My Logo" image={image} />
+ </div>
+ </Content>
+ )
+}
+
+export default logo
diff --git a/src/pages-doc/doc/core/map.tsx b/src/pages-doc/doc/core/map.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3a20dbf62d6034fa5bcab2469175f165a8e00cf
--- /dev/null
+++ b/src/pages-doc/doc/core/map.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Map } from "@onegeo/gatsby-theme-onegeo";
+
+function map(): ReactElement {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Map</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`
+interface MapProps {
+ idMap: number;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="flex gap-6 m-4 h-96">
+ <Map
+ idMap={109}
+ />
+ </div>
+ </Content>
+ );
+}
+
+export default map;
diff --git a/src/pages-doc/doc/core/toc.tsx b/src/pages-doc/doc/core/toc.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..566f4b99399d20b4d570344b956f9e84e5065097
--- /dev/null
+++ b/src/pages-doc/doc/core/toc.tsx
@@ -0,0 +1,567 @@
+import React from "react";
+import { Toc } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+
+function tocIndex() {
+ return (
+ <>
+ <Toc className="" />
+ <div className="mr-[25%] ml-4">
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`interface Props {
+ className?: string;
+}`}
+ </code>
+ </pre>
+ </div>
+ </div>
+ <br />
+ <h1>Essai h1</h1>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h1>Essai h1 no_2</h1>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h2>Essai h2</h2>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h3>Essai h3</h3>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h4>Essai h4</h4>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h4>Essai h4 no_2</h4>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h3>Essai h3 no_2</h3>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h2>Essai h2 no_2</h2>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h1>Essai h1 no_3</h1>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ <h2>Essai h2 no_3</h2>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+ vestibulum posuere ultricies. Pellentesque habitant morbi tristique
+ senectus et netus et malesuada fames ac turpis egestas. Nullam sed
+ justo dolor. Aliquam luctus sem massa, suscipit suscipit arcu pulvinar
+ at. Duis laoreet nec nisl nec condimentum. Etiam bibendum felis
+ pulvinar nisi tincidunt, eget egestas dui sodales. Suspendisse
+ lobortis mi elit, eu auctor sem convallis quis. Nullam congue eleifend
+ nisi, et consectetur est maximus non. Nulla facilisi. Aenean posuere
+ nibh nec lacus fringilla lacinia. In varius dignissim elementum. Etiam
+ ornare quam nisl. Integer in tincidunt nisl. Suspendisse laoreet, odio
+ et blandit sodales, mi mauris euismod erat, at mattis ligula neque et
+ lectus. Suspendisse ullamcorper, odio eu euismod tempus, felis ex
+ vulputate lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum
+ primis in faucibus orci luctus et ultrices posuere cubilia curae;
+ Suspendisse laoreet tortor ut eleifend tristique. Proin porta sodales
+ lectus, a condimentum justo pretium sed. Quisque sapien sapien,
+ ultricies nec feugiat et, aliquam et purus. Integer quis ipsum
+ volutpat orci faucibus blandit quis at odio. Morbi ultrices tincidunt
+ neque, in rutrum libero cursus non. Pellentesque quis cursus lorem.
+ Vivamus tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Mauris vestibulum posuere ultricies. Pellentesque
+ habitant morbi tristique senectus et netus et malesuada fames ac
+ turpis egestas. Nullam sed justo dolor. Aliquam luctus sem massa,
+ suscipit suscipit arcu pulvinar at. Duis laoreet nec nisl nec
+ condimentum. Etiam bibendum felis pulvinar nisi tincidunt, eget
+ egestas dui sodales. Suspendisse lobortis mi elit, eu auctor sem
+ convallis quis. Nullam congue eleifend nisi, et consectetur est
+ maximus non. Nulla facilisi. Aenean posuere nibh nec lacus fringilla
+ lacinia. In varius dignissim elementum. Etiam ornare quam nisl.
+ Integer in tincidunt nisl. Suspendisse laoreet, odio et blandit
+ sodales, mi mauris euismod erat, at mattis ligula neque et lectus.
+ Suspendisse ullamcorper, odio eu euismod tempus, felis ex vulputate
+ lacus, eget sagittis mi nunc in dolor. Vestibulum ante ipsum primis in
+ faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse
+ laoreet tortor ut eleifend tristique. Proin porta sodales lectus, a
+ condimentum justo pretium sed. Quisque sapien sapien, ultricies nec
+ feugiat et, aliquam et purus. Integer quis ipsum volutpat orci
+ faucibus blandit quis at odio. Morbi ultrices tincidunt neque, in
+ rutrum libero cursus non. Pellentesque quis cursus lorem. Vivamus
+ tempus vulputate nisl, eu ultricies neque pulvinar eu. Ut vel
+ pellentesque dui. Nunc sit amet erat tincidunt, vehicula neque in,
+ ultrices felis. Sed pharetra tempor ante, at ultricies est elementum
+ nec. Proin sit amet augue a nunc cursus sollicitudin. Orci varius
+ natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+ mus. Mauris euismod tempus dui. Ut nec sem ligula. Quisque
+ pellentesque blandit nulla, at ornare nisi cursus at. Aliquam erat
+ volutpat. Phasellus pulvinar, nisl sit amet imperdiet accumsan, mauris
+ felis laoreet urna, laoreet varius nisi purus vitae mi. Aenean luctus
+ turpis vel eros scelerisque tempus. Pellentesque at cursus nisi.
+ Quisque aliquam libero vel lacus auctor pellentesque ut ut purus. Duis
+ hendrerit neque eget est ullamcorper volutpat. Pellentesque rhoncus
+ vel nisl eget aliquet. Vestibulum varius congue arcu et facilisis.
+ Donec dapibus purus metus, eget sodales leo molestie ac. Cras
+ porttitor lectus orci, id pulvinar ex ultricies at. Nunc non rhoncus
+ velit. Pellentesque ullamcorper elit neque, sit amet efficitur magna
+ aliquet at. Ut in nibh ut nisl dictum egestas. Quisque vel nulla
+ imperdiet sem scelerisque consectetur. Duis suscipit, orci in volutpat
+ consequat, nunc felis volutpat nulla, vel placerat risus purus quis
+ mi. Nullam maximus consequat mi, vitae fringilla nisl hendrerit at.
+ Cras ullamcorper nisi vitae efficitur pulvinar. Nulla sodales mollis
+ semper. Sed faucibus, ante quis congue convallis, tortor dolor
+ volutpat sem, et auctor arcu nulla sed ligula. Curabitur a arcu non
+ ipsum placerat aliquam sit amet id nibh. Sed condimentum magna ac
+ fringilla maximus. Vivamus pellentesque enim eget nunc gravida, vitae
+ varius orci convallis. Quisque sagittis mi lacus, sed aliquam velit
+ tincidunt sit amet. Nam vitae tortor feugiat, efficitur nisl ac,
+ fringilla urna. Vestibulum pharetra viverra laoreet. Mauris nec tortor
+ non lacus hendrerit hendrerit.
+ </div>
+ </>
+ );
+}
+
+export default tocIndex;