website: add homepage example pages
This commit is contained in:
Emmanuel Pelletier
81
website/src/components/HomepageExample.astro
Normal file
81
website/src/components/HomepageExample.astro
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
import "@gouvfr-lasuite/integration/dist/css/homepage-full.css"
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime"
|
||||||
|
import { renderToStaticMarkup } from "react-dom/server"
|
||||||
|
import { Homepage, HomepageProconnect } from "@gouvfr-lasuite/integration"
|
||||||
|
import logo from "@/assets/logos/equipes.svg"
|
||||||
|
|
||||||
|
const { title, props } = Astro.props
|
||||||
|
|
||||||
|
const DefaultHomepage = _jsx(Homepage, {
|
||||||
|
lasuiteApiUrl: import.meta.env.PUBLIC_LASUITE_API_URL,
|
||||||
|
entity: "Gouvernement",
|
||||||
|
tagline:
|
||||||
|
"**Mon service de La Suite**, <br>un outil sécurisé et centralisé <br>pour les agents publics",
|
||||||
|
logo: logo.src,
|
||||||
|
serviceName: "Mon service de La Suite",
|
||||||
|
serviceId: "equipes",
|
||||||
|
homepageUrl: "/",
|
||||||
|
footerOptions: {
|
||||||
|
description: "Un service de la Direction interministérielle du numérique",
|
||||||
|
sitemapUrl: "~~replace~~",
|
||||||
|
a11yUrl: "~~replace~~",
|
||||||
|
a11yLevel: "~~replace~~",
|
||||||
|
termsUrl: "~~replace~~",
|
||||||
|
privacyUrl: "~~replace~~",
|
||||||
|
},
|
||||||
|
children: _jsx(HomepageProconnect, { url: "~~replace~~" }),
|
||||||
|
...props,
|
||||||
|
})
|
||||||
|
const html = renderToStaticMarkup(DefaultHomepage)
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Exemple page d'accueil {title} - La Suite numérique</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#example-info {
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#example-info p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#example-info ul {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
padding: 0 0 0 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script
|
||||||
|
is:inline
|
||||||
|
id="lasuite-gaufre-script"
|
||||||
|
async
|
||||||
|
defer
|
||||||
|
src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="example-info">
|
||||||
|
<p>Notes :</p>
|
||||||
|
<ul>
|
||||||
|
<li>n'oubliez pas de remplacer toutes les occurences de `~~replace~~` dans le code,</li>
|
||||||
|
<li>
|
||||||
|
remplacez le chemin de la photo dans `.lasuite-homepage__bg` avec l'id de votre service
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="/guides/homepage#exemples">Retour à la documentation</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div set:html={html} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -173,3 +173,10 @@ Vous pouvez récupérer le logo de votre service au format svg dans le paquet np
|
|||||||
`@gouvfr-lasuite/integration/dist/logos`.
|
`@gouvfr-lasuite/integration/dist/logos`.
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Exemples
|
||||||
|
|
||||||
|
- [Page d'accueil classique](/examples/homepage/default),
|
||||||
|
- [Avec connexion e-mail uniquement](/examples/homepage/email),
|
||||||
|
- [Avec connexion e-mail + proconnect](/examples/homepage/email-proconnect),
|
||||||
|
- [Avec contenus additionnels/personnalisés](/examples/homepage/custom).
|
||||||
|
|||||||
34
website/src/pages/examples/homepage/custom.astro
Normal file
34
website/src/pages/examples/homepage/custom.astro
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
---
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime"
|
||||||
|
import HomepageExample from "@/components/HomepageExample.astro"
|
||||||
|
---
|
||||||
|
|
||||||
|
<HomepageExample
|
||||||
|
title="contenu additionnel"
|
||||||
|
props={{
|
||||||
|
description: _jsx("div", {
|
||||||
|
children: [
|
||||||
|
_jsx("p", {
|
||||||
|
children: "Il est possible d'ajouter une description en dessous de la tagline.",
|
||||||
|
style: { marginBottom: "0.5rem" },
|
||||||
|
}),
|
||||||
|
_jsx("a", {
|
||||||
|
href: "#",
|
||||||
|
className: "fr-btn fr-btn--secondary",
|
||||||
|
children: "Comment utiliser ce service ?",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
children: _jsx("div", {
|
||||||
|
children: [
|
||||||
|
_jsx("h2", {
|
||||||
|
children: "Contenu personnalisé",
|
||||||
|
}),
|
||||||
|
_jsx("p", {
|
||||||
|
children:
|
||||||
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis beatae, quia eius voluptatem repudiandae quisquam a magnam obcaecati labore dolor ad vitae, omnis iusto deleniti error eveniet maxime! Consectetur, sint?",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
6
website/src/pages/examples/homepage/default.astro
Normal file
6
website/src/pages/examples/homepage/default.astro
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime"
|
||||||
|
import HomepageExample from "@/components/HomepageExample.astro"
|
||||||
|
---
|
||||||
|
|
||||||
|
<HomepageExample title="par défaut" />
|
||||||
15
website/src/pages/examples/homepage/email-proconnect.astro
Normal file
15
website/src/pages/examples/homepage/email-proconnect.astro
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime"
|
||||||
|
import { HomepageEmailOrProconnect } from "@gouvfr-lasuite/integration"
|
||||||
|
import HomepageExample from "@/components/HomepageExample.astro"
|
||||||
|
---
|
||||||
|
|
||||||
|
<HomepageExample
|
||||||
|
title="connexion email + proconnect"
|
||||||
|
props={{
|
||||||
|
children: _jsx(HomepageEmailOrProconnect, {
|
||||||
|
proconnectUrl: "~~replace~~",
|
||||||
|
emailForm: { action: "~~replace~~" },
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
14
website/src/pages/examples/homepage/email.astro
Normal file
14
website/src/pages/examples/homepage/email.astro
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime"
|
||||||
|
import { HomepageEmail } from "@gouvfr-lasuite/integration"
|
||||||
|
import HomepageExample from "@/components/HomepageExample.astro"
|
||||||
|
---
|
||||||
|
|
||||||
|
<HomepageExample
|
||||||
|
title="connexion email"
|
||||||
|
props={{
|
||||||
|
children: _jsx(HomepageEmail, {
|
||||||
|
action: "~~replace~~",
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
Reference in New Issue
Block a user