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`.
|
||||
|
||||
:::
|
||||
|
||||
## 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