diff --git a/gatsby-config.js b/gatsby-config.js
index ab5240422f75c37e5a381b46e7e417a74b7fd72c..974c880a88000e0738d45fe6530160cc909226c6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -83,6 +83,7 @@ module.exports = {
},
},
},
+ /*
{
resolve: `gatsby-plugin-typesense`,
options: {
@@ -145,7 +146,7 @@ module.exports = {
},
},
},
-
+ */
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
diff --git a/index.d.ts b/index.d.ts
index 5c7f20af9651b6fafb5b9c1788ab0efdbd254e96..77b5388f80b0ecdad78d7d0623aab8ab1df7a90d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,5 +1,8 @@
declare module "*";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+
interface LayoutProps {
children: React.ReactNode;
UserMenu?: React.ReactNode;
@@ -33,13 +36,13 @@ interface ButtonProps {
export function Button(props: ButtonProps): JSX.Element;
interface CardProps {
- to?: string;
- className?: string;
- anime?: boolean;
- side?: boolean;
- icon?: string;
title?: string;
content?: string;
+ image?: string;
+ to?: string;
+ anime?: boolean;
+ layout?: "top" | "left";
+ className?: string;
}
export function Card(props: CardProps): JSX.Element;
interface Icookies {
@@ -54,6 +57,19 @@ interface Icookies {
}
export function CookiesComponent(props: Icookies): 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;
@@ -62,9 +78,25 @@ interface LinkProps {
}
export function Link(props: LinkProps): JSX.Element;
+interface DataImage {
+ src: string;
+}
+interface Image {
+ images: Array<DataImage>;
+ isLogo: boolean;
+ delay?: number;
+}
+export function Carousel(props: Image): JSX.Element;
+
interface SearchProps {}
export function Search(props: SearchProps): JSX.Element;
+interface IMenu {}
+export function Menu(props: IMenu): JSX.Element;
+
+interface IMenuMobile {}
+export function MenuMobile(props: IMenu): JSX.Element;
+
interface Ilogo {
to?: string;
className?: string;
@@ -103,4 +135,32 @@ interface MapProps {
}
export function Map(props: MapProps): JSX.Element;
+interface FeatureProps {
+ title?: string;
+ content?: string;
+ image?: string | IGatsbyImageData;
+ idMap?: number;
+ layout?: 'left' | 'right';
+ backgroundImage?: string;
+ action?: {
+ title?: string;
+ to?: string;
+ className?: string;
+ };
+ custom?: JSX.Element;
+}
+export function Feature(props: FeatureProps): JSX.Element;
+interface ImageProps {
+ image?: string | IGatsbyImageData;
+ classname?: string;
+}
+export function Image(props: ImageProps): JSX.Element;
+interface CardListProps {
+ cards?: CardProps[];
+ layout?: 'row' | 'col' | 'grid';
+ className?: string;
+ anime?: boolean;
+}
+export function CardList(props: CardListProps): JSX.Element;
+
declare module "@onegeo/gatsby-theme-onegeo";
diff --git a/index.js b/index.js
index a3659bb2fda7f329df9deded17b5b0023099bd8a..e6d0f9a76098c5e37b051521895f8022d69d9cda 100644
--- a/index.js
+++ b/index.js
@@ -9,13 +9,29 @@ 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";
+export { default as Image } from "./src/components/core/Image";
+export { default as CardList } from "./src/components/core/CardList";
// Feature components
export { default as Hero } from "./src/components/Hero";
+export { default as Feature } from "./src/components/Feature";
+
+//Carousel components
+export { default as Carousel } from "./src/components/core/Carousel";
// Logo components
export { default as Logo } from "./src/components/core/Logo";
// Cookies components
export { default as CookiesComponent } from "./src/components/core/CookiesComponent";
+
+// Menu components
+export { default as Menu } from "./src/components/core/Menu";
+
+// Menu components
+export { default as MenuMobile } from "./src/components/core/MenuMobile";
+
diff --git a/src/components/Feature.tsx b/src/components/Feature.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..582d3ceb98e924e5b1fcce469e1d5fe3eaec849e
--- /dev/null
+++ b/src/components/Feature.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+import Image from "./core/Image";
+import Map from "./core/Map";
+import Button from "./core/Button";
+
+interface Props {
+ title?: string;
+ content?: string;
+ image?: string | IGatsbyImageData;
+ idMap?: number;
+ layout?: 'left' | 'right';
+ backgroundImage?: string;
+ action?: {
+ title?: string;
+ to?: string;
+ className?: string;
+ };
+ custom?: JSX.Element;
+}
+interface FeatureComponentProps {
+ image?: string | IGatsbyImageData;
+ idMap?: number;
+ custom?: JSX.Element;
+}
+
+
+const oClassName = {
+ 'left' : {
+ 'container': 'flex-col lg:flex-row',
+ 'content': 'pt-10 lg:pl-10'
+ },
+ 'right' : {
+ 'container': 'flex-col-reverse lg:flex-row-reverse',
+ 'content': 'pt-10 pb-10 lg:pr-10 lg:pb-0'
+ }
+}
+
+
+const FeatureComponent = (props: FeatureComponentProps) => {
+ const {
+ image,
+ idMap,
+ custom
+ } = props;
+
+ if (idMap) {
+ return (
+ <>
+ <Map
+ idMap={idMap}
+ />
+ </>
+ )
+ }
+
+ if (image) {
+ return (
+ <>
+ <Image
+ image={image}
+ />
+ </>
+ )
+ }
+
+ return (
+ <>
+ {custom && custom}
+ </>
+ );
+}
+
+
+const Feature = (props: Props) => {
+ const {
+ layout='left',
+ title='',
+ content='',
+ image,
+ idMap,
+ backgroundImage,
+ action,
+ custom
+ } = props;
+
+ const className = oClassName[layout];
+ const bTextOnly = ( ! (idMap || image || custom));
+ const classNameContent = (bTextOnly) ? 'grow' : `lg:w-1/2 ${className['content']}`;
+ const classNameBackground = (backgroundImage) ? "bg-[url('" + backgroundImage + "')] bg-cover bg-no-repeat bg-center " : '';
+
+ return (
+ <div className={`flex ${className['container']} ${classNameBackground}`}>
+ {
+ ! bTextOnly && (
+ <div className="h-[480px] lg:w-1/2">
+ <FeatureComponent
+ idMap={idMap}
+ image={image}
+ custom={custom}
+ />
+ </div>
+ )
+ }
+ <div className={classNameContent}>
+ <h2 className="font-extrabold sm:text-4xl">{title}</h2>
+ <p className="text-xl leading-8 pt-10 text-justify">{content}</p>
+ {
+ action && (
+ <Button
+ title={action.title}
+ to={action.to}
+ className={`mt-10 ${action.className}`}
+ />
+ )
+ }
+ </div>
+ </div>
+ );
+};
+
+export default Feature;
\ No newline at end of file
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 a5bd7944fde0dcbbde894a9783f016e3748d5a44..9581d906df72a4299fdd75ce8f7d7e2c12fbf379 100644
--- a/src/components/core/Card.tsx
+++ b/src/components/core/Card.tsx
@@ -1,62 +1,76 @@
import React from "react";
import { Link } from "gatsby";
-import { StaticImage } from "gatsby-plugin-image";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+import CardImage from "./card/CardImage";
+
interface Props {
- to?: string;
- className?: string;
- anime?: boolean;
- side?: boolean;
- icon?: string;
title?: string;
content?: string;
+ image?: string | IGatsbyImageData;
+ to?: string;
+ anime?: boolean;
+ layout?: "top" | "left";
+ 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 {
to = "#",
className = "",
anime = true,
- side = true,
+ layout = 'top',
title,
content,
- icon,
+ image
} = props;
const transition = anime
? "lg:transition duration-200 ease-in-out lg:hover:-translate-y-2 lg:hover:shadow-2xl "
: "";
- const cardside = side ? "card-side " : "";
+ const cardside = (layout == 'left') ? "card-side " : "";
+ const size = oSize[layout];
return (
<Link
to={to}
className={
- "card card-compact shadow-xl bg-base-100 text-neutral max-w-xs " +
+ "card card-compact shadow-xl bg-base-100 text-neutral " +
+ size.main +
transition +
cardside +
className
}
>
- {icon ? (
- <figure className="pl-4 py-4">
- {/* TODO: Manage dynamic image from Db ... GatsbyImage */}
- <StaticImage
- src="../images/hero/datastore.png"
- alt={icon}
- className="p-4 w-12 h-12"
- />
- </figure>
- ) : null}
+ <div className={size.image}>
+ <CardImage
+ image={image}
+ />
+ </div>
{title ? (
- <div className="card-body ">
+ <div className="card-body">
<h2 className="card-title uppercase">{title}</h2>
- {content ? <p>{content}</p> : null}
+ {content ? <p className={`${size.content} text-ellipsis overflow-hidden text-justify`} dangerouslySetInnerHTML={{ __html: content }}></p> : null}
</div>
) : null}
</Link>
);
};
-export default Card;
+export default Card;
\ No newline at end of file
diff --git a/src/components/core/CardList.tsx b/src/components/core/CardList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e9ae0a43217ce230bc46a32fa4fc21f1e4fe317
--- /dev/null
+++ b/src/components/core/CardList.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+import Card from "./Card";
+
+
+interface CardProps {
+ title?: string;
+ content?: string;
+ image?: string | IGatsbyImageData;
+ to?: string;
+ anime?: boolean;
+ layout?: "top" | "left";
+ className?: string;
+}
+
+interface Props {
+ cards?: CardProps[];
+ layout?: 'row' | 'col' | 'grid';
+ className?: string;
+ anime?: boolean;
+}
+
+
+const oCardProps = {
+ 'row': {
+ layout: 'left',
+ className: ''
+ },
+ 'col': {
+ layout: 'top',
+ className: ''
+ },
+ 'grid': {
+ layout: 'top',
+ className: 'max-w-full'
+ }
+}
+
+
+const CardList = (props: Props) => {
+ const {
+ cards = [],
+ layout = 'row',
+ className = '',
+ anime = true
+ } = props;
+
+ const oListClassName = {
+ 'row': `space-y-10 w-full ${className}`,
+ 'col': `flex space-x-12 flex-nowrap justify-center ${className}`,
+ 'grid': `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 ${className}`
+ }
+
+ const tmpProps = oCardProps[layout];
+
+ const listCards = cards.map((card, index) => {
+ let cardProps = {
+ ...card,
+ ...tmpProps,
+ anime
+ };
+
+ return (
+ <Card
+ key={index}
+ {...(cardProps as CardProps)}
+ />
+ )
+ })
+
+ return (
+ <div
+ className={oListClassName[layout]}
+ >
+ {listCards}
+ </div>
+ )
+};
+
+
+export default CardList;
\ No newline at end of file
diff --git a/src/components/core/Carousel.tsx b/src/components/core/Carousel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17ccc30e8ffc5c83125b0913655f8ebfd3b18373
--- /dev/null
+++ b/src/components/core/Carousel.tsx
@@ -0,0 +1,118 @@
+import React, {useEffect, useState} from "react";
+
+interface DataImage {
+ src: string;
+}
+
+interface Props {
+ images: Array<DataImage>;
+ isLogo: boolean;
+ delay?: number;
+}
+
+const Carousel = (props: Props) => {
+ const { images, isLogo, delay } = props;
+ const [index, setIndex] = useState(1);
+ // const [leftAndRightDisabled, setLeftAndRightDisabled] = React.useState(false);
+ // const [stateSlides, setStateSlides] = React.useState<any[]>([]);
+
+ const nbr_image: number = images.length;
+
+ const updateIndex = (newIndex: number) => {
+ if (newIndex < 0) {
+ newIndex = nbr_image - 1;
+ } else if (newIndex >= nbr_image) {
+ newIndex = 0;
+ }
+
+ setIndex(newIndex);
+ };
+
+ // React.useEffect(() => {
+ // const slidesWithClones = [...images];
+ // slidesWithClones.unshift(slidesWithClones[slidesWithClones.length - 1]);
+ // slidesWithClones.push(slidesWithClones[1]);
+ // setStateSlides(slidesWithClones);
+
+ // // ...
+ // }, []);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (delay != 0) {
+ updateIndex(index + 1);
+ }
+ }, delay);
+
+ return () => {
+ if (interval) {
+ clearInterval(interval);
+ }
+ };
+ });
+
+ return (
+ <div className="block relative">
+ <div
+ className={`carousel ${isLogo ? "w-1/2 ml-20" : "w-full"} truncate`}
+ >
+ <div
+ className={`whitespace-nowrap ${isLogo ? "w-1/4" : "w-full"} `}
+ style={{
+ transform:
+ isLogo ?
+ nbr_image > 4
+ ? `translateX(-${index * 60 }%)`
+ : `translateX(0)`
+ : `translateX(-${index * 100}%)`,
+ transition: "transform 0.3s",
+ }}
+ >
+ {images.map((item: any, key: any) => {
+ return (
+ <div
+ className={`carousel-item relative w-full inline-block`}
+ key={key}
+ >
+ {isLogo ? (
+ <div className="flex justify-center items-center w-full">
+ <img
+ src={item.src}
+ className="w-28 h-28 border border-gray-600 p-4"
+ />
+ </div>
+ ) : (
+ <img src={item.src} className="w-full h-[384px]" />
+ )}
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ <div
+ className={`absolute flex justify-between pl-5 pr-5 ${
+ isLogo ? "w-[62%]" : "w-full"
+ } ${isLogo ? "top-9" : "top-[47%]"} `}
+ >
+ <button
+ onClick={() => updateIndex(index - 1)}
+ className={`bg-neutral rounded-3xl ${
+ isLogo ? "w-5" : "w-10"
+ } h-10 text-base-100`}
+ >
+ â®
+ </button>
+ <button
+ onClick={() => updateIndex(index + 1)}
+ className={`bg-neutral rounded-3xl ${
+ isLogo ? "w-5" : "w-10"
+ } h-10 text-base-100`}
+ >
+ â¯
+ </button>
+ </div>
+ </div>
+ );
+};
+
+export default Carousel;
diff --git a/src/components/core/Image.tsx b/src/components/core/Image.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9aea9640cf7ad79526970401d22171e7caca729
--- /dev/null
+++ b/src/components/core/Image.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { StaticImage, IGatsbyImageData, GatsbyImage, getImage } from "gatsby-plugin-image";
+
+interface Props {
+ image?: string | IGatsbyImageData;
+ classname?: string;
+}
+
+
+const Image = (props: Props) => {
+ const {
+ image,
+ classname = ""
+ } = props;
+
+ const imageClassname = `h-full w-full object-cover ${classname}`;
+
+ const imageNoAvailable = (
+ <StaticImage
+ src='../../images/no-image-available.jpg'
+ alt="no-image-available"
+ className={imageClassname}
+ />
+ )
+
+ if (! image || typeof image == 'undefined') {
+ return (
+ <>
+ {imageNoAvailable}
+ </>
+ );
+ }
+
+ if (typeof image == 'string') {
+ return (
+ <>
+ <img
+ src={image}
+ alt={image}
+ className={imageClassname}
+ />
+ </>
+ )
+ }
+
+ const img = getImage(image) ;
+ if (typeof img == 'undefined') {
+ return (
+ <>
+ {imageNoAvailable}
+ </>
+ )
+ }
+
+ return (
+ <>
+ <GatsbyImage image={img} alt="gatsby-image" className={imageClassname}/>
+ </>
+ )
+};
+
+
+export default Image;
\ No newline at end of file
diff --git a/src/components/core/Menu.tsx b/src/components/core/Menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c482e83dcc45baa7ca51e6c1ed87578c1b96102
--- /dev/null
+++ b/src/components/core/Menu.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+const Menu = () => {
+ const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];
+
+ return (
+ <>
+ {/* MENU MOBILE */}
+ <ul className="menu menu-horizontal p-0">
+ {menu.map((item: any, key: number) => {
+ return (
+ <li key={key}>
+ <a>
+ {item.title}
+ {item.subMenu && (
+ <svg
+ className="fill-current"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ >
+ <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+ </svg>
+ )}
+ </a>
+ {item.subMenu && (
+ <ul className="p-2 z-50 bg-slate-200">
+ {item.subMenu.map((itemsm: any, idx: number) => {
+ return (
+ <li key={idx}>
+ <a className="text-neutral-content hover:bg-submenu active:bg-allsubmenu z-50">
+ {itemsm.title}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ );
+ })}
+ </ul>
+ {/* END MENU MOBILE */}
+ </>
+ );
+};
+
+export default Menu;
diff --git a/src/components/core/MenuMobile.tsx b/src/components/core/MenuMobile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d566f56c10b66cc41527bdf8eb42c00fc795954
--- /dev/null
+++ b/src/components/core/MenuMobile.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+const MenuMobile = () => {
+ const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];
+
+ return (
+ <>
+ {/* MENU CLASSIQUE */}
+ <ul
+ tabIndex={0}
+ className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"
+ >
+ {menu.map((item: any, key: number) => {
+ return (
+ <li key={key}>
+ <a>
+ {item.title}
+ {item.subMenu && (
+ <svg
+ className="fill-current"
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ >
+ <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+ </svg>
+ )}
+ </a>
+ {item.subMenu && (
+ <ul className="p-2 z-10">
+ {item.subMenu.map((itemsm: any, idx: number) => {
+ return (
+ <li key={idx}>
+ <a>{itemsm.title}</a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ );
+ })}
+ </ul>
+ {/* END MENU CLASSIQUE */}
+ </>
+ );
+};
+
+export default MenuMobile;
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
new file mode 100644
index 0000000000000000000000000000000000000000..da174d2d07bbf47c7cd2632ac7ac622d365e6e34
--- /dev/null
+++ b/src/components/core/card/CardImage.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { StaticImage, IGatsbyImageData, GatsbyImage, getImage } from "gatsby-plugin-image";
+
+interface Props {
+ image?: string | IGatsbyImageData;
+}
+
+
+const CardImage = (props: Props) => {
+ const {
+ image
+ } = props;
+
+ const imageNoAvailable = (
+ <StaticImage
+ src='../../../images/no-image-available.jpg'
+ alt="no-image-available"
+ className="h-full w-full object-cover"
+ />
+ )
+
+ if (! image || typeof image == 'undefined') {
+ return (
+ <>
+ {imageNoAvailable}
+ </>
+ );
+ }
+
+ if (typeof image == 'string') {
+ return (
+ <>
+ <img
+ src={image}
+ alt={image}
+ className="h-full w-full object-cover"
+ />
+ </>
+ )
+ }
+
+ const img = getImage(image) ;
+ if (typeof img == 'undefined') {
+ return (
+ <>
+ {imageNoAvailable}
+ </>
+ )
+ }
+
+ return (
+ <>
+ <GatsbyImage image={img} alt="gatsby-image" className="h-full w-full object-cover"/>
+ </>
+ )
+};
+
+
+export default CardImage;
\ No newline at end of file
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/images/no-image-available.jpg b/src/images/no-image-available.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bc3abf6754aa9283d2a589f7ce688985cf826105
Binary files /dev/null and b/src/images/no-image-available.jpg differ
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 a00265ba79371eae15982c98db53c17eff53aa5b..ec475e782a9849db0ff77b047031229b74aa7021 100644
--- a/src/pages-doc/doc/core/card.tsx
+++ b/src/pages-doc/doc/core/card.tsx
@@ -16,13 +16,13 @@ function card(): ReactElement {
<pre>
<code>
{`interface CardProps {
- to?: string;
- className?: string;
- anime?: boolean;
- side?: boolean;
- icon?: string;
title?: string;
content?: string;
+ image?: string | IGatsbyImageData;
+ to?: string;
+ anime?: boolean;
+ layout?: "top" | "left";
+ className?: string;
}`}
</code>
</pre>
@@ -34,19 +34,18 @@ function card(): ReactElement {
<Card
title="Action"
content="Action description for the Button"
- icon="todo"
/>
<Card
title="Action"
content="Action without animation for the Button"
- icon="todo"
anime={false}
/>
+ </div>
+ <div className="flex gap-6 m-4">
<Card
title="Action"
content="Action whith icon on top for the Button"
- icon="todo"
- side={false}
+ layout="left"
/>
</div>
</Content>
diff --git a/src/pages-doc/doc/core/cardlist.tsx b/src/pages-doc/doc/core/cardlist.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ee93189dd13b44a83b590a6bb4900a3f4e42699d
--- /dev/null
+++ b/src/pages-doc/doc/core/cardlist.tsx
@@ -0,0 +1,88 @@
+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { CardList } from "@onegeo/gatsby-theme-onegeo";
+
+function card(): ReactElement {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>CardList</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`
+interface CardProps {
+ title?: string;
+ content?: string;
+ image?: string | IGatsbyImageData;
+ to?: string;
+ anime?: boolean;
+ layout?: "top" | "left";
+ className?: string;
+ anime?: boolean;
+}
+interface CardListProps {
+ cards?: CardProps[];
+ layout?: 'row' | 'col' | 'grid';
+ className?: string;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="space-y-20">
+ <CardList
+ cards={[{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ }]}
+ layout='row'
+ anime={false}
+ />
+ <CardList
+ cards={[{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ }]}
+ layout='col'
+ />
+ </div>
+ <div className="mt-20">
+ <CardList
+ cards={[{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ },{
+ title: 'Action',
+ content: 'Action description for the Button'
+ }]}
+ layout='grid'
+ />
+ </div>
+ </Content>
+ );
+}
+
+export default card;
diff --git a/src/pages-doc/doc/core/carousel.tsx b/src/pages-doc/doc/core/carousel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7404610257faad6c85abe995806ee4b82835cbc
--- /dev/null
+++ b/src/pages-doc/doc/core/carousel.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Carousel } from "@onegeo/gatsby-theme-onegeo";
+
+
+const carousel = () => {
+ const dataImage = [
+ {
+ src: "https://placeimg.com/800/200/arch",
+ },
+ {
+ src: "https://placeimg.com/800/200/arch",
+ },
+ {
+ src: "https://placeimg.com/800/200/arch",
+ },
+ {
+ src: "https://placeimg.com/800/200/arch",
+ },
+
+ ];
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Carousel</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`
+interface DataImage {
+ src: string;
+ }
+
+ interface Props {
+ images: Array<DataImage>;
+ isLogo: boolean;
+ delay?: number;
+ }
+
+ const dataImage = [
+ {
+ src: logo1,
+ },
+ {
+ src: logo2,
+ },
+ {
+ src: logo3,
+ },
+ {
+ src: logo4,
+ },
+ {
+ src: logo5,
+ },
+];
+`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <Carousel images = {dataImage} isLogo = {false} delay={3000}/>
+ </Content>
+ )
+}
+
+export default carousel
diff --git a/src/pages-doc/doc/core/feature.tsx b/src/pages-doc/doc/core/feature.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fdf05e483b40bcee8db9cbfd932d8e9aeada1d4f
--- /dev/null
+++ b/src/pages-doc/doc/core/feature.tsx
@@ -0,0 +1,94 @@
+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Feature } from "@onegeo/gatsby-theme-onegeo";
+
+function feature(): ReactElement {
+
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Feature</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`
+interface FeatureProps {
+title?: string;
+content?: string;
+image?: string | IGatsbyImageData;
+idMap?: number;
+layout?: 'left' | 'right';
+backgroundImage?: string;
+action?: {
+ title?: string;
+ to?: string;
+ className?: string;
+};
+custom?: JSX.Element;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="mt-10">
+ <h1 className="text-2xl font-semibold p-4">Custom component</h1>
+ <Feature
+ title="Action"
+ content="Action description for the Button"
+ layout="left"
+ custom={<div>Custom component</div>}
+ action={{
+ to: '#',
+ title: 'Action'
+ }}
+ />
+ </div>
+ <div className="mt-10">
+ <h1 className="text-2xl font-semibold p-4">Image</h1>
+ <Feature
+ title="Action"
+ content="Action description for the Button"
+ layout="right"
+ image="https://fakeimg.pl/480x480/"
+ action={{
+ to: '#',
+ title: 'Action'
+ }}
+ />
+ </div>
+ <div className="mt-10">
+ <h1 className="text-2xl font-semibold p-4">Text only</h1>
+ <Feature
+ title="Action"
+ content="Action description for the Button"
+ action={{
+ to: '#',
+ title: 'Action'
+ }}
+ />
+ </div>
+ <div className="mt-10">
+ <h1 className="text-2xl font-semibold p-4">Map</h1>
+ <Feature
+ title="Action"
+ content="Action description for the Button"
+ action={{
+ to: '#',
+ title: 'Action'
+ }}
+ layout="left"
+ idMap={109}
+ />
+ </div>
+ </Content>
+ );
+}
+
+export default feature;
\ No newline at end of file
diff --git a/src/pages-doc/doc/core/image.tsx b/src/pages-doc/doc/core/image.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3cbb629a827d69f22506602aa966546263c6b0da
--- /dev/null
+++ b/src/pages-doc/doc/core/image.tsx
@@ -0,0 +1,43 @@
+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Image } from "@onegeo/gatsby-theme-onegeo";
+
+function map(): ReactElement {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Image</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`
+interface ImageProps {
+ image?: string | IGatsbyImageData;
+ classname?: string;
+}`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className="flex gap-6 m-4">
+ <Image
+ image="https://fakeimg.pl/480x480/"
+ />
+ <Image
+ image="https://fakeimg.pl/480x480/"
+ />
+ <Image
+ />
+ </div>
+ </Content>
+ );
+}
+
+export default map;
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index ca2823c2f7896551fea8a927a4baca080cc972b3..7cc170986520726181f2c5d6062154dc05c265ae 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/src/pages-doc/doc/core/index.tsx
@@ -13,13 +13,28 @@ function index(): ReactElement {
<br></br>
<Link to="/doc/core/card">Card</Link>
<br></br>
+ <Link to="/doc/core/cardlist">CardList</Link>
+ <br></br>
<Link to="/doc/core/hero">Hero</Link>
<br></br>
+ <Link to="/doc/core/carousel">Carousel</Link>
+ <br></br>
+ <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/feature">Feature</Link>
+ <br></br>
<Link to="/doc/core/logo">Logo</Link>
<br></br>
<Link to="/doc/core/cookies">Cookies</Link>
+ <br></br>
+ <Link to="/doc/core/menu">Menu</Link>
+ <br></br>
+ <Link to="/doc/core/image">Image</Link>
+
</div>
</Content>
);
diff --git a/src/pages-doc/doc/core/menu.tsx b/src/pages-doc/doc/core/menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..270f5dd90686446b725001102bb57e9822ba27fe
--- /dev/null
+++ b/src/pages-doc/doc/core/menu.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Menu, MenuMobile } from "@onegeo/gatsby-theme-onegeo";
+import { Link } from "gatsby";
+
+const menu = () => {
+ return (
+ <Content>
+ <div className="prose">
+ <Link to="/doc/core">Retour</Link>
+
+ <h1>Menu</h1>
+ <h2>Props</h2>
+ <div className="mockup-code">
+ <pre>
+ <code>
+ {`const menu = [
+ {
+ title: "Decouvrir",
+ },
+ {
+ title: "Actualités",
+ },
+ {
+ title: "A propos",
+ },
+ {
+ title: "Mentions légales",
+ },
+ {
+ title: "Parents",
+ subMenu: [
+ {
+ title: "sousmenu1",
+ },
+ {
+ title: "sousmenu2",
+ },
+ ],
+ },
+ ];`}
+ </code>
+ </pre>
+ </div>
+
+ <h2>Example</h2>
+ </div>
+ <div className='mt-5'>
+ <h3 className='underline underline-offset-1'>Menu classique</h3>
+ <div className="flex gap-6 m-4">
+ <Menu />
+ </div>
+ </div>
+
+ <div>
+ <h3 className='underline underline-offset-1'>Menu mobile</h3>
+ <div className="flex gap-6 m-4">
+ <MenuMobile />
+ </div>
+ </div>
+ </Content>
+ )
+}
+
+export default menu
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;