changed offres + added reference to HP

src/components/EditorialContent.astro

@@ -1,17 +1,19 @@
 ---
+import { renderContent } from "astro-i18n";
 import MetaDate from "./MetaDate.astro";
 import TOC from "./TOC.astro";
 
 const { content } = Astro.props;
-const { Content, headings } = await content.render();
+// const { Content, headings } = await content.render();
+const { html, headings } = await renderContent(Astro, content);
 
 const toc = headings.map((heading) => {
 	return heading;
 });
 
-// if (content.data.code) {
-// 	import "../styles/vendor/one-dark-pro.css";
-// }
+if (content.data.code) {
+	import "../styles/vendor/one-dark-pro.css";
+}
 ---
 
 <div class="sidebar region">
@@ -20,8 +22,8 @@ const toc = headings.map((heading) => {
 		<h1>{content.data.title}</h1>
 		<p class="h3">{content.data.subtitle}</p>
 		<MetaDate item={content.data} />
-		<div class="flow content">
-			<Content />
+		<div class="flow content" set:html={html}>
+			<!-- <Content /> -->
 		</div>
 	</article>
 </div>

src/content/references/fr/parole-expression.md

@@ -3,7 +3,7 @@ title: Parole Expression
 subtitle: Un nouveau site pour l'association.
 url: https://www.paroleexpression.fr/
 lang: fr
-slug: "parole-expression"
+slug: parole-expression
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "éco-conception", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"

src/data/HP/fr/01-offre.md

@@ -1,31 +0,0 @@
----
-type: section
-id: offre
-lang: fr
-slug:
-createdAt:
-image: /assets/images/home/offres.svg
-order: 1
-quickTitle: Mes offres en freelance
-quickImage: /assets/images/home/icon-desktop.svg
----
-
-## Offres site web.
-
-### Petit site vitrine, blog, landing page.
-
-Qu'il s'agisse d'une création ou d'une refonte, je m'occupe de tout :
-
-- développement sur-mesure ;
-- configuration d'un outil de gestion des contenus (si pertinent) ;
-- hébergement et mise en ligne ;
-- maintenance.
-
-### Plus gros site, e-commerce.
-
-Lorsque le projet est plus volumineux, je fais appel à des partenaires talentueux partageant les mêmes valeurs :
-
-- [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet ;
-- [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
-
-[Consultez quelques références ici !](/references/)

src/data/HP/fr/01.1-offre.md

@@ -0,0 +1,19 @@
+---
+type: section
+id: offre
+lang: fr
+createdAt:
+image: /assets/images/home/offre-1.1.svg
+order: 1
+quickTitle: Mes offres en freelance
+quickImage: /assets/images/home/icon-desktop.svg
+reference: parole-expression
+---
+
+## L'offre site web classique
+
+Cette offre est destinée à un public souhaitant **se doter d'un site web.** Sans forcément chercher une conformité totale au [référentiel général d'amélioration de l'accessibilité](https://accessibilite.numerique.gouv.fr/) (<abbr>RGAA</abbr>), le site sera malgré tout développé au plus proche des règles du référentiel.
+
+L'objectif principal de cette offre étant d'**établir une présence en ligne** pour le client. Que cette dernière ait un but informatif et/ou éditorial.
+
+<a href="/offres/web-classique" class="btn">L'offre classique en détails.</a>

src/data/HP/fr/01.2-offre.md

@@ -0,0 +1,17 @@
+---
+type: section
+lang: fr
+image: /assets/images/home/offre-1.2.svg
+reference: rose-primaire
+---
+
+## L'offre accessibilité avancée
+
+Cette offre s'adresse plus spécifiquement aux entités pour lesquelles **l'accessibilité du site est un critère majeur.** Qu'il s'agisse d'une création de zéro ou d'une mise en conformité après un audit d'accessibilité.
+
+Lorsque le projet le nécessite, je fais appel à des partenaires talentueux partageant les mêmes valeurs :
+
+- [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet ;
+- [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
+
+<a href="/offres/accessibilite" class="btn">L'offre accessibilité en détails.</a>

src/pages/articles/[slug].astro

@@ -1,26 +1,34 @@
 ---
-import { astroI18n } from "astro-i18n";
-astroI18n.init(Astro);
+import { createStaticPaths } from "astro-i18n";
 
 import { getCollection } from "astro:content";
-import EditorialContent from "../../components/EditorialContent.astro";
 
+import EditorialContent from "../../components/EditorialContent.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
-export async function getStaticPaths() {
+export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 	const articles = await getCollection("articles", ({ data }) => {
-		return data.lang === astroI18n.langCode;
+		return data.lang === langCode;
 	});
 	return articles.map((article) => ({
 		params: { slug: article.slug },
 		props: { article },
 	}));
-}
+}, import.meta.url);
+
+// export async function getStaticPaths() {
+// 	const articles = await getCollection("articles", ({ data }) => {
+// 		return data.lang === astroI18n.langCode;
+// 	});
+// 	return articles.map((article) => ({
+// 		params: { slug: article.slug },
+// 		props: { article },
+// 	}));
+// }
 
 const { article } = Astro.props;
 ---
 
 <BaseLayout pageTitle={article.data.title}>
-	{article.data.lang}
 	<EditorialContent content={article} />
 </BaseLayout>

src/pages/en/articles/[...slug].astro

@@ -1,9 +0,0 @@
----
-import Page from "../../articles/[...slug].astro"
-
-export { getStaticPaths } from "../../articles/[...slug].astro"
-
-const { props } = Astro
----
-
-<Page {...props} />

src/pages/en/articles/[slug].astro

@@ -0,0 +1,15 @@
+---
+import Page from "../../articles/[slug].astro"
+import { getStaticPaths as proxyGetStaticPaths } from "../../articles/[slug].astro"
+import { extractRouteLangCode } from "astro-i18n"
+
+/* @ts-ignore */
+export const getStaticPaths = (props) => proxyGetStaticPaths({
+	...props,
+	langCode: extractRouteLangCode(import.meta.url),
+})
+
+const { props } = Astro
+---
+
+<Page {...props} />

src/pages/en/articles/index.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../../articles/index.astro"
-
 const { props } = Astro
 ---
 

src/pages/en/index.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../index.astro"
-
 const { props } = Astro
 ---
 

src/pages/en/sitemap.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../plan-du-site.astro"
-
 const { props } = Astro
 ---
 

src/pages/en/snippets/[slug].astro

@@ -1,7 +1,13 @@
 ---
 import Page from "../../fragments/[slug].astro"
+import { getStaticPaths as proxyGetStaticPaths } from "../../fragments/[slug].astro"
+import { extractRouteLangCode } from "astro-i18n"
 
-export { getStaticPaths } from "../../fragments/[slug].astro"
+/* @ts-ignore */
+export const getStaticPaths = (props) => proxyGetStaticPaths({
+	...props,
+	langCode: extractRouteLangCode(import.meta.url),
+})
 
 const { props } = Astro
 ---

src/pages/en/snippets/index.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../../fragments/index.astro"
-
 const { props } = Astro
 ---
 

src/pages/en/veille/index.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../../veille/index.astro"
-
 const { props } = Astro
 ---
 

src/pages/en/work/index.astro

@@ -1,6 +1,5 @@
 ---
 import Page from "../../references/index.astro"
-
 const { props } = Astro
 ---
 

src/pages/fragments/[slug].astro

@@ -1,21 +1,30 @@
 ---
-import { l, t, astroI18n } from "astro-i18n";
-astroI18n.init(Astro);
+import { createStaticPaths } from "astro-i18n";
 
 import { getCollection } from "astro:content";
 import EditorialContent from "../../components/EditorialContent.astro";
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
-export async function getStaticPaths() {
+export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 	const snippets = await getCollection("fragments", ({ data }) => {
-		return data.lang === astroI18n.langCode;
+		return data.lang === langCode;
 	});
 	return snippets.map((snippet) => ({
 		params: { slug: snippet.slug },
 		props: { snippet },
 	}));
-}
+}, import.meta.url);
+
+// export async function getStaticPaths() {
+// 	const snippets = await getCollection("fragments", ({ data }) => {
+// 		return data.lang === astroI18n.langCode;
+// 	});
+// 	return snippets.map((snippet) => ({
+// 		params: { slug: snippet.slug },
+// 		props: { snippet },
+// 	}));
+// }
 
 const { snippet } = Astro.props;
 ---

src/pages/index.astro

@@ -3,10 +3,13 @@
 import { l, t, astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
+import { getEntry } from "astro:content";
+
 // import stuff
 import BaseLayout from "../layouts/BaseLayout.astro";
 import QuickAccessCard from "../components/QuickAccessCard.astro";
 import ListCards from "../components/ListCards.astro";
+import CardEditorial from "../components/CardEditorial.astro";
 
 const pageTitle = t("accueil");
 
@@ -35,6 +38,9 @@ const localizedSnippets = await getCollection("fragments", ({ data }) => {
 const sortedSnippets = localizedSnippets.sort(
 	(a, b) => b.data.createdAt - a.data.createdAt
 );
+const localizedReferences = await getCollection("references", ({ data }) => {
+	return data.lang === astroI18n.langCode && !data.draft;
+});
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -44,11 +50,14 @@ const sortedSnippets = localizedSnippets.sort(
 			<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
 			<ul class="quick-access__list" role="list">
 				{
-					localizedSections.map((section) => (
-						<li>
-							<QuickAccessCard item={section.frontmatter} />
-						</li>
-					))
+					localizedSections.map(
+						(section) =>
+							section.frontmatter.id && (
+								<li>
+									<QuickAccessCard item={section.frontmatter} />
+								</li>
+							)
+					)
 				}
 			</ul>
 		</section>
@@ -60,6 +69,16 @@ const sortedSnippets = localizedSnippets.sort(
 				<div class="section__container">
 					<div class="flow section__content">
 						<section.Content />
+						{section.frontmatter.reference && (
+							<div class="section__reference">
+								<ListCards
+									list={localizedReferences.filter((ref) => {
+										return ref.slug === section.frontmatter.reference;
+									})}
+									routeName={t("references.slug")}
+								/>
+							</div>
+						)}
 					</div>
 					<div class="section__image">
 						<img
@@ -149,6 +168,7 @@ const sortedSnippets = localizedSnippets.sort(
 
 	/* SECTIONS */
 	.section {
+		--region-space: var(--space-l-3xl);
 		container-name: section;
 		container-type: inline-size;
 	}
@@ -156,7 +176,7 @@ const sortedSnippets = localizedSnippets.sort(
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--space-m-l);
+		gap: var(--space-m-xl);
 	}
 
 	.section :global(h2) {
@@ -177,20 +197,33 @@ const sortedSnippets = localizedSnippets.sort(
 
 	@container section (min-width: 50rem) {
 		.section__container {
+			position: relative;
 			flex-direction: row;
 			align-items: flex-start;
 		}
 		.section__image {
 			order: 1;
 			position: sticky;
-			top: 20px;
+			top: var(--space-3xl);
 			flex-grow: 1;
 			flex-basis: 18rem;
 		}
 		.section__content {
 			order: 2;
 			flex-basis: 0;
-			min-inline-size: 40ch;
+			min-inline-size: 32ch;
+			font-size: var(--size-1);
+		}
+		.section__content :global(h2) {
+			font-size: var(--size-5);
+			line-height: 1.2;
+		}
+		.section__reference {
+			margin-block-start: 50vh;
+			padding-block-end: var(--space-3xl);
+		}
+		.section__reference :global(.card a) {
+			font-size: var(--size-0);
 		}
 	}
 </style>

src/styles/global/global-styles.css

@@ -14,7 +14,7 @@
 body {
 	font-family: var(--font-primary);
 	font-size: var(--size-0);
-	line-height: 1.4;
+	line-height: 1.5;
 	color: var(--color-dark);
 	background-color: var(--color-light-white);
 	accent-color: var(--color-brique);
@@ -23,34 +23,30 @@ body {
 main {
 	min-block-size: 100vh;
 }
-:where(h1, h2, h3, .h2, .h3) {
-	font-family: var(--font-secondary);
+:where(h1, h2, h3, h4, .h2, .h3, .h4) {
+	font-weight: bold;
 }
 :where(h1) {
 	max-inline-size: 20ch;
 	font-size: var(--size-6);
-	font-weight: bold;
 	color: var(--color-dark-blue);
 }
 
 h2,
 .h2 {
 	font-size: var(--size-4);
-	font-weight: bold;
 }
 
 h3,
 .h3 {
 	max-inline-size: initial;
 	font-size: var(--size-2);
-	font-weight: bold;
 	letter-spacing: 0.05rem;
 }
 
 h4,
 .h4 {
 	font-size: var(--size-2);
-	font-weight: bold;
 	color: var(--color-dark);
 }
 
@@ -111,39 +107,28 @@ ol:not([role="list"]) > li + li {
 	background: none;
 }
 .btn {
-	padding: var(--space-xs) var(--space-s);
+	padding: var(--space-2xs) var(--space-xs);
 	margin-block: var(--space-s);
 	display: inline-block;
-	font-size: var(--size--1);
+	font-size: var(--size-0);
 	font-weight: bold;
 	text-decoration: none;
-	border: 2px solid var(--color-red);
-	border-radius: 14px;
-	color: var(--color-red);
-	background-color: transparent;
+	border: 2px solid var(--color-blue);
+	border-radius: var(--radius-small);
+	color: var(--color-white);
+	background-color: var(--color-blue);
 	transition-property: color, background-color;
-	transition-duration: 0.2s;
-	transition-timing-function: ease-in-out;
+	transition-duration: 0.3s;
+	transition-timing-function: ease;
 }
-.btn:hover {
-	color: var(--color-light);
-	background-color: var(--color-red);
-}
-
-.reset-button {
-	padding: var(--space-3xs) var(--space-2xs);
-	/* margin-inline-start: auto; */
-	font-size: var(--size--1);
-	color: var(--color-light);
-	border: 1px solid transparent;
-	background-color: var(--color-dark);
-	border-radius: var(--radius);
-}
-.reset-button:not([disabled]):hover {
-	color: var(--color-dark);
-	border: 1px solid var(--color-dark);
+.btn:hover,
+.btn:focus {
+	color: var(--color-blue);
 	background-color: var(--color-white);
 }
+.btn:visited {
+	color: var(--color-white);
+}
 
 button[disabled] {
 	cursor: not-allowed;
@@ -159,7 +144,7 @@ button[disabled] {
 /* clean style link */
 .clean-link {
 	text-decoration: none;
-	font-weight: normal;
+	font-weight: inherit;
 	color: currentColor;
 }
 .clean-link:hover {

src/styles/global/variables.css

@@ -1,7 +1,9 @@
 /* VARIABLES */
 
 :root {
-	/* font sizes */
+	/* font sizes
+	https://utopia.fyi/type/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,m-xl&g=s,l,xl,12
+	*/
 	--size--1: clamp(0.94rem, calc(0.91rem + 0.14vw), 1rem);
 	--size-0: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
 	--size-1: clamp(1.35rem, calc(1.26rem + 0.47vw), 1.56rem);
@@ -13,7 +15,9 @@
 	--size-7: clamp(4.03rem, calc(3.17rem + 4.29vw), 5.96rem);
 	--size-8: clamp(4.84rem, calc(3.68rem + 5.81vw), 7.45rem);
 
-	/* spaces */
+	/* spaces
+	https://utopia.fyi/space/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,m-xl&g=s,l,xl,12
+	*/
 	--space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
 	--space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem);
 	--space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem);
@@ -42,7 +46,9 @@
 	--space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem);
 	--space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem);
 	--space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem);
+	--space-m-xl: clamp(1.69rem, calc(0.77rem + 4.58vw), 3.75rem);
 	--space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
+	--space-l-3xl: clamp(2.25rem, calc(-0.08rem + 11.67vw), 7.5rem);
 
 	/* fonts */
 	--font-primary: "wotfard", "ArialReplace", sans-serif;