added TOC and editorial content

.astro-i18n/generated.d.ts

@@ -0,0 +1,48 @@
+type DefaultLangCode = "fr"
+type SupportedLangCode = "en"
+type LangCode = DefaultLangCode | SupportedLangCode
+type RouteUri = | "/articles/[slug]" | "/articles" | "/tags/[tag]" | "/tags" | "/" 
+type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
+type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.scihub" | "contact.contenuVide"
+type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.scihub": {} | undefined; "contact.contenuVide": {} | undefined; }
+
+declare module "astro-i18n" {
+	export * from "astro-i18n/"
+	
+	export function l<Uri extends RouteUri>(
+		route: Uri | string & {},
+		...args: undefined extends RouteParams[Uri]
+			? [params?: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
+			: [params: RouteParams[Uri], targetLangCode?: LangCode, routeLangCode?: LangCode]
+	): string
+	
+	export function t<Path extends TranslationPath>(
+		path: Path,
+		...args: undefined extends TranslationOptions[Path]
+			? [options?: TranslationOptions[Path], langCode?: LangCode]
+			: [options: TranslationOptions[Path], langCode?: LangCode]
+	): string
+	
+	export function extractRouteLangCode(route: string): LangCode | undefined
+	
+	type Translation = string | { [translationKey: string]: string | Translation }
+	type Translations = { [langCode: string]: Record<string, Translation> }
+	type RouteTranslations = { [langCode: string]: Record<string, string> }
+	type InterpolationFormatter = (value: unknown, ...args: unknown[]) => string
+	class AstroI18n {
+		defaultLangCode: DefaultLangCode
+		supportedLangCodes: SupportedLangCode[]
+		showDefaultLangCode: boolean
+		translations: Translations
+		routeTranslations: RouteTranslations
+		get langCodes(): LangCode[]
+		get langCode(): LangCode
+		set langCode(langCode: LangCode)
+		get formatters(): Record<string, InterpolationFormatter>
+		init(Astro: { url: URL }, formatters?: Record<string, InterpolationFormatter>): void
+		getFormatter(name: string): InterpolationFormatter | undefined
+		setFormatter(name: string, formatter: InterpolationFormatter): void
+		deleteFormatter(name: string): void
+	}
+	export const astroI18n: AstroI18n
+}

astro.config.mjs

@@ -1,12 +1,16 @@
 import { defineConfig } from "astro/config";
 
+// https://github.com/alexandre-fernandez/astro-i18n
+import i18n from "astro-i18n";
+
 // https://astro.build/config
 import image from "@astrojs/image";
-
-// https://astro.build/config
 import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [image(), mdx()]
+	experimental: {
-});
+		contentCollections: true,
+	},
+	integrations: [i18n(), image(), mdx()],
+});

astro.i18n.config.ts

@@ -0,0 +1,16 @@
+import { defineAstroI18nConfig } from "astro-i18n";
+
+export default defineAstroI18nConfig({
+	defaultLangCode: "fr",
+	supportedLangCodes: ["en"],
+	showDefaultLangCode: false,
+	translations: {
+		fr: "src/i18n/fr.json",
+		en: "src/i18n/en.json",
+	},
+	routeTranslations: {
+		en: {
+			"sci-hub-blocage": "sci-hub-unblock",
+		},
+	},
+});

package.json

@@ -4,17 +4,22 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "astro dev",
+		"dev": "astro-i18n sync && astro dev",
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview",
-		"astro": "astro"
+		"astro": "astro",
+		"i18n:install": "astro-i18n install",
+		"i18n:sync": "astro-i18n sync"
 	},
 	"dependencies": {
-		"@astrojs/image": "^0.11.2",
+		"@astrojs/image": "^0.12.1",
-		"@astrojs/mdx": "^0.11.5",
+		"@astrojs/mdx": "^0.13.0",
-		"@astrojs/rss": "^1.0.3",
+		"astro": "1.7.2",
-		"astro": "^1.6.0",
+		"astro-i18n": "^1.4.5"
-		"open-props": "^1.4.24"
+	},
+	"devDependencies": {
+		"autoprefixer": "^10.4.13",
+		"postcss": "^8.4.20"
 	}
 }

postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+	plugins: [require("autoprefixer")],
+};

public/assets/images/home/about.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 325 350.01">
+  <path fill="#ff826c" d="M200 0v174.86h-10V110h-30v20h-14.8v44.86H110V240h100.2v-60H230V0h-30z"/>
+  <path fill="#162e57" d="M195 85h-49.8v45H160v-20h35V85z"/>
+  <path fill="#d4ebf2" d="M50 240h64.72v60H50zm185.18-60.26V240H125v60h165V179.74h-54.82z"/>
+  <path fill="#ff826c" d="M290 205h30v20h-30z"/>
+  <path fill="#d4ebf2" d="M80 309.98h70v10.03H80zM0 300h70v10.03H0zm255 0h70v10.03h-70zm-115 29.98h70v10.03h-70zm-105 10h70v10.03H35z"/>
+  <path fill="#ff826c" d="M100 185h30v125h-30z"/>
+</svg>

public/assets/images/home/icon-desktop.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="desktop">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M15 35h120v80H15z"/>
+    <path fill="#ff826c" d="M15 35h120v8H15z"/>
+    <path fill="#162e57" d="M17.67 37.67h2.67v2.67h-2.67zm5.33 0h2.67v2.67H23zm5.33 0H31v2.67h-2.67z"/>
+    <path fill="#ff826c" d="M25.67 59H55v26.67H25.67zm0 29.33H55V91H25.67zM60.33 59h29.33v26.67H60.33zm0 29.33h29.33V91H60.33zM95 59h29.33v26.67H95zm0 29.33h29.33V91H95z"/>
+  </g>
+</svg>

public/assets/images/home/icon-heart.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="heart">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#ff826c" d="M103.57 50.43V39H80.71v11.43H69.29V39H46.43v11.43H35v34.28h11.43v11.43h11.43v11.43h11.43V119h11.42v-11.43h11.43V96.14h11.43V84.71H115V50.43h-11.43z"/>
+  </g>
+</svg>

public/assets/images/home/icon-methodo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 150 150">
+  <path fill="#162e57" d="m100.52 58.11 3.94 2.28 3.94 2.27 6.76-11.7-3.94-2.27 4.55-7.89-7.89-4.55-4.55 7.89-2.2 3.81-15.77-9.1 2.2-3.82 4.56-7.88-7.89-4.56-4.55 7.89-3.94-2.28-6.83 11.83 7.88 4.55-2.2 3.81 23.66 13.66 2.27-3.94zM51.75 87.95l-2.27 3.94-3.94-2.28-3.94-2.27-6.76 11.7 3.94 2.27-4.55 7.89 7.89 4.55 6.82-11.83 15.77 9.11-6.83 11.82 7.89 4.56 4.55-7.89 3.94 2.28 6.76-11.7-3.94-2.28-3.95-2.28 2.28-3.93-23.66-13.66z"/>
+  <path fill="#ff826c" d="m75.41 101.6-3.94-2.27L94.3 59.78l3.94 2.27h.01L74.59 48.39v.01l3.94 2.27L55.7 90.22l-3.94-2.27h-.01l23.66 13.66v-.01z"/>
+</svg>

public/assets/images/home/icon-mobile.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="mobile">
+    <path fill="#d4ebf2" d="M0 0h150v150H0z"/>
+    <path fill="#10113a" d="M48.33 25h53.33v100H48.33z"/>
+    <path fill="#162e57" d="M71.67 113.33h6.67V120h-6.67zM55 31.67h40v76.67H55z"/>
+    <path fill="#ff826c" d="M62.78 38.33h24.44v22.22H62.78zm0 24.45h24.44V65H62.78zm0 8.89h24.44v22.22H62.78zm0 24.44h24.44v2.22H62.78z"/>
+  </g>
+</svg>

public/assets/images/home/icon-philo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="articles">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M56.54 51.92v9.23H28.85v9.24H15v13.84h13.85v9.23h4.61v13.85h13.85V93.46h9.23v9.23h36.92V51.92H56.54z"/>
+    <path fill="#ff826c" d="M107.31 47.31h13.85v9.23h-13.85zm0 23.07H135v9.23h-27.69zm13.84-32.3H135v9.23h-13.85zm-13.84 55.38h13.85v9.23h-13.85zm13.84 9.23H135v9.23h-13.85z"/>
+  </g>
+</svg>

public/assets/images/home/methodo-1.svg

@@ -0,0 +1,12 @@
+<svg id="aa0241e5-d9cf-4e93-b83f-4d24f8d4da9a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 495">
+  <g>
+    <polygon points="114.46 90 0 90 0 295 34.46 295 34.46 495 64.46 495 64.46 295 79.46 295 79.46 495 109.46 495 109.46 295 114.46 295 114.46 90" fill="#162e57"/>
+    <polygon points="94.46 25.16 94.46 0 49.46 0 49.46 25.16 49.46 35.16 109.46 35.16 109.46 25.16 94.46 25.16" fill="#162e57"/>
+  </g>
+  <polygon points="280 125 280 120 285 120 290 120 290 105.16 285 105.16 285 95.16 275 95.16 275 105.16 275 110 255 110 255 105.16 255 95.16 245 95.16 245 105.16 240 105.16 240 120.16 250 120.16 250 125 255 125 255 175.16 250 175.16 250 180.16 245 180.16 240 180.16 240 195 245 195 245 205 255 205 255 190 275 190 275 205 285 205 285 195 290 195 290 180.16 285 180.16 280 180.16 280 175.16 275 175.16 275 125 280 125" fill="#10113a"/>
+  <g>
+    <polygon points="94.46 90 94.46 35.16 49.38 35.16 49.38 90 74.46 90 74.46 120 104.46 120 104.46 90 94.46 90" fill="#ff826c"/>
+    <polygon points="55 90 0 90 0 155 0 210.16 0 305 34.46 305 34.46 210.16 55 210.16 55 90" fill="#ff826c"/>
+    <polygon points="275 125 240 125 240 130 155 130 114.46 130 114.46 165 155 165 255 165 255 142.53 275 142.53 275 125" fill="#ff826c"/>
+  </g>
+</svg>

public/assets/images/home/methodo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 510 495">
+  <path fill="#162e57" d="M40 280h30v215H40zm60 0H75v125h10v90h30V280h-15z"/>
+  <path fill="#ff826c" d="M60 0v90h45V30h15V0H60z"/>
+  <path fill="#d4ebf2" d="M15 90h115v190H15z"/>
+  <path fill="#162e57" d="M85 90h15v135H85z"/>
+  <path fill="#ff826c" d="M130 110V90h-25v315h25V140h120v-30H130z"/>
+  <path fill="#162e57" d="M280 185v-15h-5v-15h-5v-55h5v-5h-30v5h5v55h-5v15h-5v15h-10v25h60v-25h-10z"/>
+  <path fill="#ff826c" d="M275 65h10v10h-10zm-15 10h5v5h-5zm0-30h10v10h-10zm130 165v-5h-10v-80h5v-5h-25v5h5v80h-10v5h-5v30h5v5h35v-5h5v-30h-5zm40-90v5h5v115h15V125h5v-5h-25z"/>
+  <path fill="#d4ebf2" d="M365 145v5h40v110h5V150h40v-5h-85z"/>
+  <path fill="#ff826c" d="M440 240h5v5h-5z"/>
+  <path fill="#162e57" d="M435 195h15v45h-15z"/>
+  <path fill="#d4ebf2" d="M510 260H180v25h10v210h310V285h10v-25z"/>
+  <path fill="#ff826c" d="M15 90v25H0v195h15v95h60V90H15z"/>
+</svg>

public/assets/images/home/offres.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="aefb6044-044f-4f8d-bc9f-2a475efc35ba" viewBox="0 0 420 390">
+  <path fill="#ff826c" d="M155 20h40v50.21h-40Zm0-20h50v20h-50Z"/>
+  <path fill="#d4ebf2" d="M255 150H155V40H70v30H40v140.57h115V180h100v-30z"/>
+  <path fill="#ff826c" d="M280 180h-25v-25h25Z"/>
+  <path fill="#10113a" d="M40 210v40h145v140h40V210Zm305-110v85h-90v12.54h110V100Z"/>
+  <path fill="#ff826c" d="M240 195h177.33v25H240Zm75 25h30v170h-30Z"/>
+  <path fill="#10113a" d="M315 220h30v15h-30Z"/>
+  <path fill="#ff826c" d="M30 250V105H0v170h10v115h20V275h80v115h20V275h10v-25Z"/>
+  <path fill="#d4ebf2" d="M410 155v-10h-30v50h30v-15h5v-5h-5v-14.95h5V175h5v-20h-10z"/>
+  <path fill="#ff826c" d="M385 55h10v20h-10Zm-10 30h10v10h-10Zm20-40h10v10h-10Zm-5 55h15v10h-15Zm10 20h5v15h-5Zm-10 20h5v5h-5Z"/>
+</svg>

src/components/CardEditorial.astro

@@ -0,0 +1,116 @@
+---
+import { l } from "astro-i18n";
+const { item, routeName } = Astro.props;
+---
+
+<div class="card">
+	<div>
+		<h3>
+			<a class="card__link" href={`${routeName}/${item.slug}`}
+				>{item.data.title}</a
+			>
+		</h3>
+		<pre>
+			{item.slug}
+		</pre>
+		<!-- <h4>{item.data.subtitle}</h4> -->
+		<!-- <tags-list list={item.tags}></tags-list> -->
+	</div>
+</div>
+
+<style scoped>
+	.card {
+		padding: 2.4rem 1.6rem;
+		position: relative;
+		display: block;
+		height: 100%;
+		cursor: pointer;
+		box-shadow: var(--shadow-elevation-medium);
+		background-color: var(--white);
+	}
+	.card:hover {
+		box-shadow: var(--shadow-elevation-high);
+	}
+	.card:focus-within {
+		box-shadow: var(--shadow-elevation-high);
+	}
+	.card:hover h3::after,
+	.card:focus-within h3::after {
+		transform: translateX(0);
+		opacity: 1;
+	}
+	.card:hover h3,
+	.card:focus-within h3 {
+		color: var(--brique);
+	}
+	.card::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		height: 100%;
+		width: 2px;
+		transform: scaleY(0);
+		transform-origin: bottom;
+		background-color: var(--brique);
+	}
+	.card:hover::before,
+	.card:focus-within::before {
+		transform: scaleY(1);
+		transform-origin: top;
+	}
+
+	h3 {
+		padding-right: 3rem;
+		position: relative;
+		font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
+		font-weight: bold;
+		text-transform: none;
+	}
+	h3::after {
+		content: url("~assets/svg/arrow-right.svg");
+		position: absolute;
+		width: 30px;
+		top: 0;
+		right: 0;
+		opacity: 0;
+		transform: translateX(1rem);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.card {
+			transition: box-shadow 0.2s ease;
+		}
+		.card::before {
+			transition: transform 0.2s ease-in-out;
+		}
+		h3 {
+			transition: color ease 0.2s;
+		}
+		h3::after {
+			transition: opacity ease 0.2s, transform ease 0.2s;
+		}
+	}
+
+	.card h4 {
+		margin-top: 0.8rem;
+		font-size: 2rem;
+		font-weight: 500;
+		color: var(--darkBlue);
+	}
+
+	@media screen and (min-width: 768px) {
+		h3 {
+			margin-top: 0;
+			margin-bottom: 0.8rem;
+		}
+		.card {
+			padding: 3.2rem 2.4rem;
+		}
+	}
+	@media screen and (min-width: 1060px) {
+		.card {
+			margin: 0;
+		}
+	}
+</style>

src/components/EditorialContent.astro

@@ -0,0 +1,32 @@
+---
+import TOC from "./TOC.astro";
+
+const { content } = Astro.props;
+const { Content, headings } = await content.render();
+
+const toc = headings.map((heading) => {
+	return heading;
+});
+---
+
+<div class="sidebar region">
+	<TOC toc={toc} />
+	<article class="flow editorial">
+		<h1>{content.data.title}</h1>
+		<p class="h2">{content.data.subtitle}</p>
+		<div class="flow content">
+			<Content />
+		</div>
+	</article>
+</div>
+
+<style>
+	h1 {
+		font-size: var(--size-4);
+	}
+	.editorial :global(h2),
+	.editorial :global(.h2) {
+		font-size: var(--size-3);
+		color: var(--color-blue);
+	}
+</style>

src/components/Header.astro

@@ -1,7 +1,61 @@
 ---
-import Navigation from '../components/Navigation.astro';
+import { t, l } from "astro-i18n";
+
+import Navigation from "../components/Navigation.astro";
 ---
 
 <header role="banner">
-	<Navigation />
+	<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
-</header>
+	<div class="container">
+		<a href={l("/")} class="logo clean-link" aria-label={t("header.homeLink")}
+			>nardu.in</a
+		>
+		<Navigation />
+	</div>
+</header>
+
+<style>
+	header {
+		container-name: header;
+		container-type: inline-size;
+	}
+	.container {
+		padding: var(--space-xs-s) 0;
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-xs-s);
+		justify-content: center;
+		align-items: baseline;
+		inline-size: 100%;
+	}
+	@container header (min-width: 31rem) {
+		.container {
+			justify-content: space-between;
+		}
+	}
+	.skip-link {
+		position: absolute;
+		top: 20px;
+		left: 20px;
+		height: 1px;
+		width: 1px;
+		-webkit-clip: rect(0 0 0 0);
+		clip: rect(0 0 0 0);
+		overflow: hidden;
+		z-index: 99999;
+		background-color: #fff;
+	}
+	.skip-link:focus {
+		padding: 6px;
+		-webkit-clip: auto;
+		clip: auto;
+		overflow: visible;
+		width: auto;
+		height: auto;
+	}
+	.logo {
+		font-size: var(--size-1);
+		font-weight: bold;
+		color: var(--color-dark-blue);
+	}
+</style>

src/components/LangSwitcher.astro

@@ -0,0 +1,26 @@
+---
+import { l, astroI18n } from "astro-i18n";
+
+// get all the locales available on the website and remove the one currently in use
+const availableLocales = astroI18n.langCodes.filter(
+	(locale) => locale !== astroI18n.langCode
+);
+// current path
+const currentRoute = Astro.url.pathname;
+---
+
+<ul role="list">
+	{
+		// create a list of available alternative locale
+		availableLocales.map((locale) => (
+			<li>
+				<a
+					href={l(currentRoute as any, {}, locale as any)}
+					class="clean-link nice-link"
+				>
+					{locale}
+				</a>
+			</li>
+		))
+	}
+</ul>

src/components/ListCards.astro

@@ -0,0 +1,15 @@
+---
+const { list, routeName } = Astro.props;
+
+import CardEditorial from "./CardEditorial.astro";
+---
+
+<ul role="list">
+	{
+		list.map((item) => (
+			<li class="list__item">
+				<CardEditorial item={item} routeName={routeName} />
+			</li>
+		))
+	}
+</ul>

src/components/Navigation.astro

@@ -1,10 +1,42 @@
 ---
+import { t, l } from "astro-i18n";
+import LanguageSwitcher from "./LangSwitcher.astro";
+---
 
----
+<nav role="navigation" aria-label={t("header.mainNav")}>
-<nav role="navigation" aria-label="Navigation principale">
+	<ul class="main-nav" role="list">
-	<ul>
+		<li>
-		<li><a href="/">Accueil</a></li>
+			<a href={l("/articles")} class="clean-link nice-link"
-		<li><a href="/articles/">Articles</a></li>
+				>{t("article.titre")}</a
-		<li><a href="/tags/">Catégories</a></li>
+			>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a href={l("/")} class="clean-link nice-link">{t("projet.titre")}</a>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a href={l("/")} class="clean-link nice-link">{t("fragments.titre")}</a>
+			<span aria-hidden="true">&middot;</span>
+		</li>
+		<li>
+			<a
+				href="mailto:contact@nardu.in"
+				class="clean-link nice-link"
+				title={t("contact.email")}>{t("contact.title")}</a
+			><span aria-hidden="true">&nbsp;&#x7C;</span>
+		</li>
+		<li>
+			<LanguageSwitcher />
+		</li>
 	</ul>
-</nav>
+</nav>
+
+<style>
+	.main-nav {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-2xs);
+		justify-content: center;
+	}
+</style>

src/components/QuickAccessCard.astro

@@ -0,0 +1,81 @@
+---
+const { item } = Astro.props;
+---
+
+<div class="card">
+	<div class="card-container">
+		<div class="card__illustration">
+			<img
+				src={item.quickImage}
+				width="150"
+				height="150"
+				alt=""
+				aria-hidden="true"
+			/>
+		</div>
+		<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
+	</div>
+</div>
+
+<style>
+	.card {
+		container-name: card;
+		container-type: inline-size;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+	.card-container {
+		padding: var(--space-xs-s);
+		position: relative;
+		display: flex;
+		block-size: 100%;
+		flex-flow: column;
+		align-items: center;
+		text-align: center;
+		gap: var(--space-xs);
+		cursor: pointer;
+		background-color: var(--color-light-blue);
+		transform: translateY(0);
+	}
+	.card:focus-within {
+		outline: dotted 3px var(--color-blue);
+	}
+	.card:focus-within .card__link:focus {
+		outline: dotted 3px transparent;
+	}
+	.card__link {
+		font-weight: normal;
+		text-decoration: none;
+		color: currentColor;
+	}
+	.card__link:hover {
+		text-decoration: none;
+	}
+	.card__link::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.card {
+			transition: all ease 0.2s;
+		}
+		.card:hover {
+			transform: translateY(-10px);
+			box-shadow: var(--shadow-elevation-high);
+		}
+		.card:focus-within {
+			transform: translateY(-10px);
+		}
+	}
+
+	@container card (min-width: 20rem) {
+		.card-container {
+			flex-direction: row;
+			text-align: left;
+		}
+		.card__illustration {
+			max-inline-size: 100px;
+		}
+	}
+</style>

src/components/TOC.astro

@@ -0,0 +1,86 @@
+---
+import { t } from "astro-i18n";
+const { toc } = Astro.props;
+---
+
+<aside class="table-of-content">
+	<details open="true">
+		<summary>{t("toc")}</summary>
+		<nav role="navigation" aria-label={t("toc")}>
+			<ul class="table-of-content__list" role="list">
+				{
+					// loop over the toc
+					toc.map((heading) =>
+						// if h2, set as a li
+						heading.depth === 2 ? (
+							<li>
+								<a href={`#${heading.slug}`} class="toc-2">
+									{heading.text}
+								</a>
+							</li>
+						) : // if h3, set as inner ul > li
+						heading.depth === 3 ? (
+							<ul role="list">
+								<li>
+									<a href={`#${heading.slug}`} class="toc-3">
+										{heading.text}
+									</a>
+								</li>
+							</ul>
+						) : null
+					)
+				}
+			</ul>
+		</nav>
+	</details>
+</aside>
+
+<style>
+	/* Table of content */
+	.table-of-content {
+		margin: 0;
+		padding: 0;
+		position: relative;
+		display: block;
+		font-size: var(--size--1);
+	}
+	.table-of-content details {
+		position: sticky;
+		top: var(--space-m);
+	}
+	.table-of-content__list {
+		padding-bottom: 2rem;
+	}
+	.table-of-content__list a {
+		position: relative;
+		display: inline-block;
+		font-weight: normal;
+		color: var(--color-grey);
+		text-decoration: none;
+	}
+
+	.table-of-content__list a::before {
+		content: "·";
+		position: absolute;
+		top: 0;
+		left: 0;
+		transform: translate(-1rem, 0);
+		color: var(--color-grey);
+	}
+	.table-of-content__list a:visited::before {
+		color: white;
+	}
+
+	.table-of-content__list a:focus,
+	.table-of-content__list a:hover {
+		color: var(--color-violet);
+		text-decoration: underline;
+	}
+	.toc-2 {
+		margin: 0.8rem 0 0.3rem;
+	}
+	.toc-3 {
+		margin-left: 1rem;
+		margin-top: 0.4rem;
+	}
+</style>

src/content/articles/en/sci-hub-blocage.md

@@ -0,0 +1,149 @@
+---
+title: "Access blocked Sci-hub"
+subtitle: "The science of sharing."
+lang: en
+slug: "sci-hub-unblock"
+key: "scihub"
+excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
+tags: ["Internet", "Science"]
+pubDate: "2019-10-18T07:47:36.000Z"
+---
+
+The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
+
+## What is this about?
+
+Not being a researcher myself, here’s an [extremely well done explanatory video](https://youtu.be/rcgxY__YXEc) on the subject of scientific publication (french audio with auto subtitle).
+
+> “This is outrageous!”​
+
+I noticed that my ISP was indeed blocking access. I have not yet been able to check for the other suppliers, but I imagine that they have all complied with the court decision.
+The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: _www.sci-hub.tw_ to an IP address: _186.2.163.90_
+It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the sci-hub domain name. As a result, no IP address is returned and the site is not accessible.
+
+## How to bypass this?
+
+- Either by using a VPN
+- Either by modifying the DNS servers of your computers/Internet box
+
+I would recommend the second solution because it allows you to protect yourself against future blockages/filtering/censorship from your ISP and does not require any financial compensation.
+I will focus on change from a computer because it will be effective wherever you are and not only from your home.
+
+### MacOs
+
+Go to:
+
+1. System Preferences
+1. Network
+1. (wi-fi or ethernet)
+1. Advanced
+1. DNS
+
+From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS network and DNS settings"
+    loading="lazy">
+</nuxt-img>
+
+### Windows (10)
+
+Go to:
+
+1. System Settings
+1. Network & Internet
+1. Change adapter options
+1. Right click your adapter then “properties”
+1. Select “internet protocol version 4” (and/or 6)
+1. Properties
+1. Use the following DNS server addresses
+
+From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows system settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network connections settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network adapter settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Which DNS?
+
+There are many DNS servers available. The best known are Google, Cloudflare and OpenDNS. If you really want to use Google’s, I’ll let you look up their address. Here are my recommendations in order of preference.
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+My favorite since it is a [french association](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+For those who want the [“fastest DNS servers in the world”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## That's it.
+
+By changing these settings, you are free from your ISPs and their content filtering rules.
+
+For the moment, these restrictions are almost symbolic because if Sci-hub were to change its url, the block would no longer work. But the publishers’ victory in court shows that they have not had their last word. We are therefore not immune to a wider and stronger block in the future.
+
+If you want to learn more about the struggle of the people who fight to ensure that research is not a paid commodity, I recommend [this documentary](https://youtu.be/y_CQATGOX2w) on Aaron Shwartz. Or [this article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) about the founder of Sci-hub.
+
+In the meantime, good readings to all of you. We stand with you!

src/content/articles/fr/sci-hub-blocage.md

@@ -0,0 +1,152 @@
+---
+title: "Sci-hub bloqué, comment contourner"
+subtitle: "La science du partage."
+lang: fr
+slug: "sci-hub-blocage"
+key: "scihub"
+excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs d’accès à internet de bloquer l’accès à sci-hub. Voici comment contourner les blocages mis en place."
+tags: ["Internet", "Science"]
+pubDate: "2019-03-31T07:47:36.000Z"
+---
+
+L'adresse actuelle de sci-hub est : [sci-hub.se](https://sci-hub.se)
+
+## Résumé de la situation
+
+N’étant pas moi-même directement chercheur, je vous laisse regarder [cette vidéo](https://youtu.be/rcgxY__YXEc) explicative extrêmement bien faite sur le sujet de la publication scientifique.
+
+> “ Mais c’est scandaleux ! ”​
+
+J’ai constaté que le blocage était actif chez SFR. Je n’ai pas encore pu vérifier pour les autres fournisseurs mais j’imagine qu’ils se sont tous conformés à la décision de justice.
+Le blocage mis en place est assez basique. Il s’agit d’un blocage “ DNS ”.
+
+Un DNS est un serveur qui sert à faire le lien entre un nom de domaine : **sci-hub.tw** et une adresse IP : **186.2.163.90**.
+
+C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait : bloquer les requêtes au nom de domaine [sci-hub.tw.](http://sci-hub.tw/) Ainsi, aucune adresse IP n’est renvoyée et le site n’est pas accessible.
+
+## Comment contourner ce blocage ?
+
+- Soit en utilisant un VPN
+- Soit en modifiant les serveurs DNS de vos ordinateurs/box internet
+
+Je recommande la deuxième solution car elle permet de se prémunir contre de futurs blocages/filtrages/censures de la part de votre FAI et ne nécessite pas de contrepartie financière.
+Je vais me focaliser sur le changement depuis un ordinateur car il sera effectif où que vous soyez.
+
+### Sur MacOs :
+
+Ouvrez :
+
+1. Préférences système
+1. Réseau
+1. Avancé
+1. DNS
+1. Serveurs DNS
+
+De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS réglages réseau et DNS"
+    loading="lazy">
+</nuxt-img>
+
+### Sur Windows (ici 10)&nbsp;:
+
+Ouvrez&nbsp;:
+
+1. Réglages
+1. Réseau et internet
+1. Modifier les options de l'adaptateur
+1. Clic droit sur les propriétés de votre interface réseau
+1. Selectionnez «&nbsp;protocole Internet version 4&nbsp;» (et/ou 6)
+1. Propriétés
+1. Utiliser l’adresse de serveur DNS suivante
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Réglages windows"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows réglages réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows régalges connections réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows options adaptateur réseau"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Quels serveurs DNS utiliser&nbsp;?
+
+Il y a de nombreux serveurs DNS accessibles. Les plus connus étant ceux de Google, Cloudflare et OpenDNS. Si vous tenez vraiment à utiliser ceux de Google, je vous laisse chercher leur adresse. Voici mes recommandations par ordre de préférence.
+
+Plusieurs fournisseurs :
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+Mes favoris puisqu’il s’agit d’une [association française.](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+Pour ceux qui veulent les serveurs DNS [“&nbsp;les plus rapides du monde&nbsp;”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## C'est tout.
+
+En modifiant ces réglages, vous vous affranchissez de vos fournisseurs d’accès et de leurs règles de filtrage du contenu.
+
+Pour l’instant, ces blocages sont presque symboliques car si Sci-hub venait à changer d’url, le blocage ne fonctionnerait plus. Mais la victoire des éditeurs au tribunal montre qu’ils n’ont pas dit leur dernier mot. Nous ne sommes donc pas à l’abri d’un futur blocage plus large et plus dur à contrer.
+
+Si vous voulez en apprendre plus sur le combat de ces gens qui se battent pour que la recherche ne soit pas une marchandise, je vous conseille [ce documentaire](https://youtu.be/y_CQATGOX2w) sur Aaron Shwartz. Ou plus simplement [cet article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) sur la fondatrice de Sci-hub.
+
+En attendant, bonnes lectures à tou·te·s. On est avec vous !

src/content/config.ts

@@ -0,0 +1,21 @@
+import { z, defineCollection } from "astro:content";
+
+const articles = defineCollection({
+	schema: {
+		title: z.string(),
+		subtitle: z.string(),
+		lang: z.enum(["fr", "en"]),
+		slug: z.string(),
+		tags: z.array(z.string()), // An array of strings
+		// Parse pubDate as a browser-standard `Date` object
+		pubDate: z
+			.string()
+			.transform((str) => new Date(str))
+			.optional(),
+	},
+});
+
+export const collections = {
+	// Don't forget 'quotes' for collection names containing dashes
+	articles,
+};

src/content/types.generated.d.ts

@@ -0,0 +1,65 @@
+declare module 'astro:content' {
+	export { z } from 'astro/zod';
+	export type CollectionEntry<C extends keyof typeof entryMap> =
+		typeof entryMap[C][keyof typeof entryMap[C]] & Render;
+
+	type BaseCollectionConfig<S extends import('astro/zod').ZodRawShape> = {
+		schema?: S;
+		slug?: (entry: {
+			id: CollectionEntry<keyof typeof entryMap>['id'];
+			defaultSlug: string;
+			collection: string;
+			body: string;
+			data: import('astro/zod').infer<import('astro/zod').ZodObject<S>>;
+		}) => string | Promise<string>;
+	};
+	export function defineCollection<S extends import('astro/zod').ZodRawShape>(
+		input: BaseCollectionConfig<S>
+	): BaseCollectionConfig<S>;
+
+	export function getEntry<C extends keyof typeof entryMap, E extends keyof typeof entryMap[C]>(
+		collection: C,
+		entryKey: E
+	): Promise<typeof entryMap[C][E] & Render>;
+	export function getCollection<
+		C extends keyof typeof entryMap,
+		E extends keyof typeof entryMap[C]
+	>(
+		collection: C,
+		filter?: (data: typeof entryMap[C][E]) => boolean
+	): Promise<(typeof entryMap[C][E] & Render)[]>;
+
+	type InferEntrySchema<C extends keyof typeof entryMap> = import('astro/zod').infer<
+		import('astro/zod').ZodObject<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type Render = {
+		render(): Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			injectedFrontmatter: Record<string, any>;
+		}>;
+	};
+
+	const entryMap: {
+		"articles": {
+"en/sci-hub-blocage.md": {
+  id: "en/sci-hub-blocage.md",
+  slug: "en/sci-hub-blocage",
+  body: string,
+  collection: "articles",
+  data: InferEntrySchema<"articles">
+},
+"fr/sci-hub-blocage.md": {
+  id: "fr/sci-hub-blocage.md",
+  slug: "fr/sci-hub-blocage",
+  body: string,
+  collection: "articles",
+  data: InferEntrySchema<"articles">
+},
+},
+
+	};
+
+	type ContentConfig = typeof import("./config");
+}

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

@@ -0,0 +1,28 @@
+---
+type: section
+id: offre
+lang: en
+image: /assets/images/home/offres.svg
+order: 1
+quickTitle: My offers
+quickImage: /assets/images/home/icon-desktop.svg
+---
+
+## Full website offer.
+
+### Small website, blog, landing page…
+
+Whether it's a creation or a redesign, I can handle everything:
+
+- graphic design,
+- custom development,
+- configuration of a content management system (if needed),
+- hosting and deploying
+- maintenance
+
+### Bigger websites, e-commerce.
+
+When the project is larger, I call on talented partners who share the same values:
+
+- [Rose Primaire](https://roseprimaire.com/) for the monitoring and management of the project,
+- [Sylvain Plantier](https://jedessinebien.com/) and/or [Benoît Etchevery](http://ben-etche.com/) for illustration and art direction

src/data/HP/en/02-methodo.md

@@ -0,0 +1,29 @@
+---
+type: section
+id: methodology
+lang: en
+image: /assets/images/home/methodo.svg
+order: 2
+quickTitle: My methodology
+quickImage: /assets/images/home/icon-methodo.svg
+---
+
+## Methodology.
+
+### Accessibility by default.
+
+Committed to a more accessible web, I create **websites** relying on the [french General Accessibility Guidelines (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/) as well as the [Opquast recommandations.](https://www.opquast.com/en/making-the-web-better/)
+
+### Sobriety by choice.
+
+I specialize in the development of **static websites**, adopting an [eco-design](https://en.wikipedia.org/wiki/Ecological_design) approach.  
+It means that the website is designed to only include the necessary functionalities for its use.
+
+This methodology has **many advantages:**
+
+- great performances
+- enhanced security
+- reduced costs
+- easier maintenance
+
+When the project requires it, I set up a content management system (CMS) decoupled from the interface. This ensures that **the website stays online** even if the CMS stops working.

src/data/HP/en/03-about.md

@@ -0,0 +1,24 @@
+---
+type: section
+id: about
+lang: en
+image: /assets/images/home/about.svg
+order: 3
+quickTitle: Me
+quickImage: /assets/images/home/icon-heart.svg
+---
+
+## About.
+
+### Trainings and certifications.
+
+In order to strengthen my skills, I have completed the following training and certifications:
+
+- [Opquast](https://directory.opquast.com/en/certificat/CTQSKP/) - Mastering Web Quality Assurance
+- [Access42](https://certification.access42.pro/) - Developing and coding accessible websites (cert number: 696fa2e0-cc67-11ec-88d2-9dabf3f992d4)
+
+### Free time.
+
+I try to contribute to [open source projects](https://git.nardu.in/explore/repos) that I enjoy.
+
+Oh and I write [articles!](/en/articles/) Articles about design and the web in general.

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

@@ -0,0 +1,28 @@
+---
+type: section
+id: offre
+lang: fr
+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 :
+
+- propositions graphiques,
+- 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

src/data/HP/fr/02-methodo.md

@@ -0,0 +1,29 @@
+---
+type: section
+id: methodology
+lang: fr
+image: /assets/images/home/methodo.svg
+order: 2
+quickTitle: Ma méthodologie
+quickImage: /assets/images/home/icon-methodo.svg
+---
+
+## Méthodologie.
+
+### Accessibilité par défaut.
+
+Engagé pour un web plus accessible, je crée des **sites web** en m'appuyant sur le [référentiel général d'amélioration de l'accessibilité (RGAA)](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/) ainsi que sur les bonnes pratiques [Opquast.](https://www.opquast.com/rendre-le-web-meilleur/)
+
+### Sobriété par choix.
+
+Je privilégie le développement de **sites statiques** en adoptant une approche [d'éco-conception numérique.](https://eco-conception.designersethiques.org/guide/fr/)  
+C'est-à-dire que le site est pensé pour n'embarquer que les fonctionnalités nécessaires à son utilisation.
+
+Cette approche présente de **nombreux avantages :**
+
+- chargement rapide des pages
+- sécurité renforcée
+- coûts serveur réduits
+- maintenance facilitée
+
+Lorsque le projet le demande, je mets en place un outil de gestion des contenus (CMS) découplé de l'interface. Cela permet de garantir que **le site reste en ligne** même si le CMS venait à ne plus fonctionner.

src/data/HP/fr/03-about.md

@@ -0,0 +1,24 @@
+---
+type: section
+id: about
+lang: fr
+image: /assets/images/home/about.svg
+order: 3
+quickTitle: Moi
+quickImage: /assets/images/home/icon-heart.svg
+---
+
+## À propos.
+
+### Formations et certifications.
+
+Afin de solidifier mes compétences, j'ai suivi les formations et passé les certifications suivantes :
+
+- [Opquast](https://directory.opquast.com/fr/certificat/CTQSKP/) - Maîtrise de la qualité en projet web
+- [Access42](https://certification.access42.pro/) - Développer et coder des sites accessibles (certificat numéro : 696fa2e0-cc67-11ec-88d2-9dabf3f992d4)
+
+### Temps libre.
+
+J’essaie de contribuer à des [projets open source](https://git.nardu.in/explore/repos) qui me tiennent à cœur et je m'engage localement avec le collectif [good-it!](https://www.good-it.org/)
+
+Ah et j’écris [des articles](/articles/) aussi ! Des articles sur le design, le développement web et l’informatique.

src/data/articles/en/post-0.mdx

@@ -1,14 +1,13 @@
 ---
 title: "My First Blog Post"
+slug: "article-1"
+lang: en
 pubDate: 2022-07-01
 description: "This is the first post of my new Astro blog."
 author: "Astro Learner"
 tags: ["astro", "blogging", "learning in public"]
 ---
 
-import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro";
-
-export const published = new Date("2022-07-01");
 export const image = {
 	url: "/oui.jpg",
 	alt: "oui oui oui",
@@ -16,7 +15,6 @@ export const image = {
 	height: "512",
 };
 
-<MarkdownPostLayout pageTitle={frontmatter.title} published={published} image={image}>
 Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
 
 ## What I've accomplished
@@ -30,5 +28,3 @@ Welcome to my _new blog_ about learning Astro! Here, I will share my learning jo
 ## What's next
 
 I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
-
-</MarkdownPostLayout>

src/data/articles/en/sci-hub-blocage.md

@@ -0,0 +1,147 @@
+---
+title: "Access blocked Sci-hub"
+subtitle: "The science of sharing."
+lang: en
+excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
+tags: ["Internet", "Science"]
+pubDate: "2019-10-18T07:47:36.000Z"
+---
+
+The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
+
+## What is this about?
+
+Not being a researcher myself, here’s an [extremely well done explanatory video](https://youtu.be/rcgxY__YXEc) on the subject of scientific publication (french audio with auto subtitle).
+
+> “This is outrageous!”​
+
+I noticed that my ISP was indeed blocking access. I have not yet been able to check for the other suppliers, but I imagine that they have all complied with the court decision.
+The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: _www.sci-hub.tw_ to an IP address: _186.2.163.90_
+It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the sci-hub domain name. As a result, no IP address is returned and the site is not accessible.
+
+## How to bypass this?
+
+- Either by using a VPN
+- Either by modifying the DNS servers of your computers/Internet box
+
+I would recommend the second solution because it allows you to protect yourself against future blockages/filtering/censorship from your ISP and does not require any financial compensation.
+I will focus on change from a computer because it will be effective wherever you are and not only from your home.
+
+### MacOs
+
+Go to:
+
+1. System Preferences
+1. Network
+1. (wi-fi or ethernet)
+1. Advanced
+1. DNS
+
+From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS network and DNS settings"
+    loading="lazy">
+</nuxt-img>
+
+### Windows (10)
+
+Go to:
+
+1. System Settings
+1. Network & Internet
+1. Change adapter options
+1. Right click your adapter then “properties”
+1. Select “internet protocol version 4” (and/or 6)
+1. Properties
+1. Use the following DNS server addresses
+
+From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows system settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network connections settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows network adapter settings"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Which DNS?
+
+There are many DNS servers available. The best known are Google, Cloudflare and OpenDNS. If you really want to use Google’s, I’ll let you look up their address. Here are my recommendations in order of preference.
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+My favorite since it is a [french association](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+For those who want the [“fastest DNS servers in the world”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## That's it.
+
+By changing these settings, you are free from your ISPs and their content filtering rules.
+
+For the moment, these restrictions are almost symbolic because if Sci-hub were to change its url, the block would no longer work. But the publishers’ victory in court shows that they have not had their last word. We are therefore not immune to a wider and stronger block in the future.
+
+If you want to learn more about the struggle of the people who fight to ensure that research is not a paid commodity, I recommend [this documentary](https://youtu.be/y_CQATGOX2w) on Aaron Shwartz. Or [this article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) about the founder of Sci-hub.
+
+In the meantime, good readings to all of you. We stand with you!

src/data/articles/en/sci-hub.mdx

@@ -0,0 +1,30 @@
+---
+title: "Sci-Hub EN"
+slug: "sci-hub"
+lang: en
+pubDate: 2022-10-11
+description: "This is the first post of my new Astro blog."
+author: "Astro Learner"
+tags: ["astro", "blogging", "learning in public"]
+---
+
+export const image = {
+	url: "/oui.jpg",
+	alt: "oui oui oui",
+	width: "394",
+	height: "512",
+};
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

src/data/articles/fr/post-0.mdx

@@ -0,0 +1,18 @@
+---
+title: "Mon premier article"
+slug: "article-1"
+lang: fr
+pubDate: 2022-07-01
+description: "youpi"
+author: "Astro Learner"
+tags: ["astro", "blogging", "learning in public"]
+---
+
+export const image = {
+	url: "/oui.jpg",
+	alt: "oui oui oui",
+	width: "394",
+	height: "512",
+};
+
+Bienvenue les men in black

src/data/articles/fr/sci-hub-blocage.md

@@ -0,0 +1,150 @@
+---
+title: "Sci-hub bloqué, comment contourner"
+subtitle: "La science du partage."
+lang: fr
+excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs d’accès à internet de bloquer l’accès à sci-hub. Voici comment contourner les blocages mis en place."
+tags: ["Internet", "Science"]
+pubDate: "2019-03-31T07:47:36.000Z"
+---
+
+L'adresse actuelle de sci-hub est : [sci-hub.se](https://sci-hub.se)
+
+## Résumé de la situation
+
+N’étant pas moi-même directement chercheur, je vous laisse regarder [cette vidéo](https://youtu.be/rcgxY__YXEc) explicative extrêmement bien faite sur le sujet de la publication scientifique.
+
+> “ Mais c’est scandaleux ! ”​
+
+J’ai constaté que le blocage était actif chez SFR. Je n’ai pas encore pu vérifier pour les autres fournisseurs mais j’imagine qu’ils se sont tous conformés à la décision de justice.
+Le blocage mis en place est assez basique. Il s’agit d’un blocage “ DNS ”.
+
+Un DNS est un serveur qui sert à faire le lien entre un nom de domaine : **sci-hub.tw** et une adresse IP : **186.2.163.90**.
+
+C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait : bloquer les requêtes au nom de domaine [sci-hub.tw.](http://sci-hub.tw/) Ainsi, aucune adresse IP n’est renvoyée et le site n’est pas accessible.
+
+## Comment contourner ce blocage ?
+
+- Soit en utilisant un VPN
+- Soit en modifiant les serveurs DNS de vos ordinateurs/box internet
+
+Je recommande la deuxième solution car elle permet de se prémunir contre de futurs blocages/filtrages/censures de la part de votre FAI et ne nécessite pas de contrepartie financière.
+Je vais me focaliser sur le changement depuis un ordinateur car il sera effectif où que vous soyez.
+
+### Sur MacOs :
+
+Ouvrez :
+
+1. Préférences système
+1. Réseau
+1. Avancé
+1. DNS
+1. Serveurs DNS
+
+De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.
+
+<nuxt-img
+    src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+    sizes="sm:100vw xl:728px"
+    width="728"
+    height="1060"
+    alt="MacOS réglages réseau et DNS"
+    loading="lazy">
+</nuxt-img>
+
+### Sur Windows (ici 10)&nbsp;:
+
+Ouvrez&nbsp;:
+
+1. Réglages
+1. Réseau et internet
+1. Modifier les options de l'adaptateur
+1. Clic droit sur les propriétés de votre interface réseau
+1. Selectionnez «&nbsp;protocole Internet version 4&nbsp;» (et/ou 6)
+1. Propriétés
+1. Utiliser l’adresse de serveur DNS suivante
+
+<picture width="728" height="319">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Réglages windows"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="803">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-network.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows réglages réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="327">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows régalges connections réseaux"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+<picture width="728" height="434">
+   <nuxt-source
+      src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
+      sizes="sm:100vw xl:728px" >
+   </nuxt-source>
+   <nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+   sizes="sm:100vw xl:728px"
+   alt="Windows options adaptateur réseau"
+   loading="lazy" >
+   </nuxt-img>
+</picture>
+
+## Quels serveurs DNS utiliser&nbsp;?
+
+Il y a de nombreux serveurs DNS accessibles. Les plus connus étant ceux de Google, Cloudflare et OpenDNS. Si vous tenez vraiment à utiliser ceux de Google, je vous laisse chercher leur adresse. Voici mes recommandations par ordre de préférence.
+
+Plusieurs fournisseurs :
+
+### [FDN DNS](https://www.fdn.fr/actions/dns/)
+
+Mes favoris puisqu’il s’agit d’une [association française.](https://www.fdn.fr/)
+
+1. IPV4
+   - 80.67.169.12
+   - 80.67.169.40
+2. IPV6
+   - 2001:910:800::12
+   - 2001:910:800::40
+
+### [Cloudflare DNS](https://1.1.1.1/)
+
+Pour ceux qui veulent les serveurs DNS [“&nbsp;les plus rapides du monde&nbsp;”.](https://www.dnsperf.com/#!dns-resolvers)
+
+1. IPV4
+   - 1.1.1.1
+   - 1.0.0.1
+2. IPV6
+   - 2606:4700:4700::1111
+   - 2606:4700:4700::1001
+
+## C'est tout.
+
+En modifiant ces réglages, vous vous affranchissez de vos fournisseurs d’accès et de leurs règles de filtrage du contenu.
+
+Pour l’instant, ces blocages sont presque symboliques car si Sci-hub venait à changer d’url, le blocage ne fonctionnerait plus. Mais la victoire des éditeurs au tribunal montre qu’ils n’ont pas dit leur dernier mot. Nous ne sommes donc pas à l’abri d’un futur blocage plus large et plus dur à contrer.
+
+Si vous voulez en apprendre plus sur le combat de ces gens qui se battent pour que la recherche ne soit pas une marchandise, je vous conseille [ce documentaire](https://youtu.be/y_CQATGOX2w) sur Aaron Shwartz. Ou plus simplement [cet article](https://arstechnica.com/tech-policy/2016/04/a-spiritual-successor-to-aaron-swartz-is-angering-publishers-all-over-again/) sur la fondatrice de Sci-hub.
+
+En attendant, bonnes lectures à tou·te·s. On est avec vous !

src/data/articles/fr/sci-hub.mdx

@@ -0,0 +1,30 @@
+---
+title: "Sci-Hub FR"
+slug: "sci-hub"
+lang: fr
+pubDate: 2022-10-11
+description: "This is the first post of my new Astro blog."
+author: "Astro Learner"
+tags: ["astro", "blogging", "learning in public"]
+---
+
+export const image = {
+	url: "/oui.jpg",
+	alt: "oui oui oui",
+	width: "394",
+	height: "512",
+};
+
+Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
+
+## What I've accomplished
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

src/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="@astrojs/image/client" />
+
+/// <reference path="../.astro-i18n/generated.d.ts" />

src/i18n/en.json

@@ -0,0 +1,62 @@
+{
+	"accueil": "home",
+	"tagline": "Freelance web designer and front-end developer.",
+	"copyright": "(re)Made with Astro",
+	"contact": {
+		"title": "contact",
+		"email": "Send me an email (open in application).",
+		"tel": "Call or text me (open in application).",
+		"contenuVide": "Soon: really nice content."
+	},
+	"header": {
+		"skipLink": "Skip to content",
+		"mainNav": "Main menu",
+		"homeLink": "Back to homepage"
+	},
+	"sitemap": "Site map",
+	"prevNext": {
+		"contenus": "Similar content",
+		"precedent": "Previous",
+		"suivant": "Next"
+	},
+	"article": {
+		"titre": "articles",
+		"tagline": "I blog, sometimes.",
+		"published": "Published on {datetime|date(options)}"
+	},
+	"meta": {
+		"publication": "Published on",
+		"modification": "Last updated on",
+		"credit": "Image by"
+	},
+	"fragments": {
+		"titre": "Snippets",
+		"tagline": "School with Nicool."
+	},
+	"projet": {
+		"titre": "Projects",
+		"tagline": "Freelance work",
+		"cta": "Visit website",
+		"lienTitle": "Website of",
+		"fenetre": "(new window)"
+	},
+	"erreur": {
+		"introuvable": "Sorry, page not found.",
+		"autre": "Oups… sorry about that.",
+		"lienRetour": "Back to the home page"
+	},
+	"seo": {
+		"article": {
+			"title": "Articles",
+			"description": "A few articles about graphic design and front-end development."
+		},
+		"projet": {
+			"title": "Projects",
+			"description": "Some of my work as a freelance web designer and developer."
+		},
+		"code": {
+			"title": "Snippets",
+			"description": "Snippets of fresh, easy and accessible code."
+		}
+	}
+}

src/i18n/fr.json

@@ -0,0 +1,62 @@
+{
+	"accueil": "accueil",
+	"tagline": "Designer et developpeur web freelance à Toulouse.",
+	"copyright": "(re)Fait avec Astro",
+	"contact": {
+		"title": "contact",
+		"email": "Envoyez-moi un mail (ouverture du logiciel automatique).",
+		"tel": "Contactez-moi par téléphone (ouverture du logiciel automatique)."
+	},
+	"contenuVide": "Bientôt ici : du contenu de qualité",
+	"header": {
+		"skipLink": "Accéder au contenu",
+		"mainNav": "Menu principal",
+		"homeLink": "Accueil du site"
+	},
+	"sitemap": "Plan du site",
+	"prevNext": {
+		"contenus": "Contenus similaires",
+		"precedent": "Précédent",
+		"suivant": "Suivant"
+	},
+	"article": {
+		"titre": "articles",
+		"tagline": "Je blog, un peu.",
+		"published": "Publié le {datetime|date(options)}"
+	},
+	"meta": {
+		"publication": "Publié le",
+		"modification": "Mis à jour le",
+		"credit": "Image par"
+	},
+	"fragments": {
+		"titre": "fragments",
+		"tagline": "Les tutos de Nico mdr."
+	},
+	"projet": {
+		"titre": "projets",
+		"tagline": "Mon travail en freelance",
+		"cta": "Consulter le site",
+		"lienTitle": "Site web de",
+		"fenetre": "(nouvelle fenêtre)"
+	},
+	"erreur": {
+		"introuvable": "Page introuvable",
+		"autre": "Oups… désolé pour cette erreur.",
+		"lienRetour": "Retour à l’accueil"
+	},
+	"seo": {
+		"article": {
+			"title": "Articles",
+			"description": "Quelques articles en tant que graphiste et développeur front-end à Toulouse."
+		},
+		"projet": {
+			"title": "Projets",
+			"description": "Mon travail en tant que graphiste et développeur front-end à Toulouse."
+		},
+		"code": {
+			"title": "Fragments",
+			"description": "Fragments de codes stylés, faciles et accessibles."
+		}
+	}
+}

src/images/home/about.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 325 350.01">
+  <path fill="#ff826c" d="M200 0v174.86h-10V110h-30v20h-14.8v44.86H110V240h100.2v-60H230V0h-30z"/>
+  <path fill="#162e57" d="M195 85h-49.8v45H160v-20h35V85z"/>
+  <path fill="#d4ebf2" d="M50 240h64.72v60H50zm185.18-60.26V240H125v60h165V179.74h-54.82z"/>
+  <path fill="#ff826c" d="M290 205h30v20h-30z"/>
+  <path fill="#d4ebf2" d="M80 309.98h70v10.03H80zM0 300h70v10.03H0zm255 0h70v10.03h-70zm-115 29.98h70v10.03h-70zm-105 10h70v10.03H35z"/>
+  <path fill="#ff826c" d="M100 185h30v125h-30z"/>
+</svg>

src/images/home/icon-desktop.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="desktop">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M15 35h120v80H15z"/>
+    <path fill="#ff826c" d="M15 35h120v8H15z"/>
+    <path fill="#162e57" d="M17.67 37.67h2.67v2.67h-2.67zm5.33 0h2.67v2.67H23zm5.33 0H31v2.67h-2.67z"/>
+    <path fill="#ff826c" d="M25.67 59H55v26.67H25.67zm0 29.33H55V91H25.67zM60.33 59h29.33v26.67H60.33zm0 29.33h29.33V91H60.33zM95 59h29.33v26.67H95zm0 29.33h29.33V91H95z"/>
+  </g>
+</svg>

src/images/home/icon-heart.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="heart">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#ff826c" d="M103.57 50.43V39H80.71v11.43H69.29V39H46.43v11.43H35v34.28h11.43v11.43h11.43v11.43h11.43V119h11.42v-11.43h11.43V96.14h11.43V84.71H115V50.43h-11.43z"/>
+  </g>
+</svg>

src/images/home/icon-methodo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 150 150">
+  <path fill="#162e57" d="m100.52 58.11 3.94 2.28 3.94 2.27 6.76-11.7-3.94-2.27 4.55-7.89-7.89-4.55-4.55 7.89-2.2 3.81-15.77-9.1 2.2-3.82 4.56-7.88-7.89-4.56-4.55 7.89-3.94-2.28-6.83 11.83 7.88 4.55-2.2 3.81 23.66 13.66 2.27-3.94zM51.75 87.95l-2.27 3.94-3.94-2.28-3.94-2.27-6.76 11.7 3.94 2.27-4.55 7.89 7.89 4.55 6.82-11.83 15.77 9.11-6.83 11.82 7.89 4.56 4.55-7.89 3.94 2.28 6.76-11.7-3.94-2.28-3.95-2.28 2.28-3.93-23.66-13.66z"/>
+  <path fill="#ff826c" d="m75.41 101.6-3.94-2.27L94.3 59.78l3.94 2.27h.01L74.59 48.39v.01l3.94 2.27L55.7 90.22l-3.94-2.27h-.01l23.66 13.66v-.01z"/>
+</svg>

src/images/home/icon-mobile.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="mobile">
+    <path fill="#d4ebf2" d="M0 0h150v150H0z"/>
+    <path fill="#10113a" d="M48.33 25h53.33v100H48.33z"/>
+    <path fill="#162e57" d="M71.67 113.33h6.67V120h-6.67zM55 31.67h40v76.67H55z"/>
+    <path fill="#ff826c" d="M62.78 38.33h24.44v22.22H62.78zm0 24.45h24.44V65H62.78zm0 8.89h24.44v22.22H62.78zm0 24.44h24.44v2.22H62.78z"/>
+  </g>
+</svg>

src/images/home/icon-philo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g data-name="articles">
+    <path fill="transparent" d="M0 0h150v150H0z"/>
+    <path fill="#162e57" d="M56.54 51.92v9.23H28.85v9.24H15v13.84h13.85v9.23h4.61v13.85h13.85V93.46h9.23v9.23h36.92V51.92H56.54z"/>
+    <path fill="#ff826c" d="M107.31 47.31h13.85v9.23h-13.85zm0 23.07H135v9.23h-27.69zm13.84-32.3H135v9.23h-13.85zm-13.84 55.38h13.85v9.23h-13.85zm13.84 9.23H135v9.23h-13.85z"/>
+  </g>
+</svg>

src/images/home/methodo-1.svg

@@ -0,0 +1,12 @@
+<svg id="aa0241e5-d9cf-4e93-b83f-4d24f8d4da9a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 495">
+  <g>
+    <polygon points="114.46 90 0 90 0 295 34.46 295 34.46 495 64.46 495 64.46 295 79.46 295 79.46 495 109.46 495 109.46 295 114.46 295 114.46 90" fill="#162e57"/>
+    <polygon points="94.46 25.16 94.46 0 49.46 0 49.46 25.16 49.46 35.16 109.46 35.16 109.46 25.16 94.46 25.16" fill="#162e57"/>
+  </g>
+  <polygon points="280 125 280 120 285 120 290 120 290 105.16 285 105.16 285 95.16 275 95.16 275 105.16 275 110 255 110 255 105.16 255 95.16 245 95.16 245 105.16 240 105.16 240 120.16 250 120.16 250 125 255 125 255 175.16 250 175.16 250 180.16 245 180.16 240 180.16 240 195 245 195 245 205 255 205 255 190 275 190 275 205 285 205 285 195 290 195 290 180.16 285 180.16 280 180.16 280 175.16 275 175.16 275 125 280 125" fill="#10113a"/>
+  <g>
+    <polygon points="94.46 90 94.46 35.16 49.38 35.16 49.38 90 74.46 90 74.46 120 104.46 120 104.46 90 94.46 90" fill="#ff826c"/>
+    <polygon points="55 90 0 90 0 155 0 210.16 0 305 34.46 305 34.46 210.16 55 210.16 55 90" fill="#ff826c"/>
+    <polygon points="275 125 240 125 240 130 155 130 114.46 130 114.46 165 155 165 255 165 255 142.53 275 142.53 275 125" fill="#ff826c"/>
+  </g>
+</svg>

src/images/home/methodo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 510 495">
+  <path fill="#162e57" d="M40 280h30v215H40zm60 0H75v125h10v90h30V280h-15z"/>
+  <path fill="#ff826c" d="M60 0v90h45V30h15V0H60z"/>
+  <path fill="#d4ebf2" d="M15 90h115v190H15z"/>
+  <path fill="#162e57" d="M85 90h15v135H85z"/>
+  <path fill="#ff826c" d="M130 110V90h-25v315h25V140h120v-30H130z"/>
+  <path fill="#162e57" d="M280 185v-15h-5v-15h-5v-55h5v-5h-30v5h5v55h-5v15h-5v15h-10v25h60v-25h-10z"/>
+  <path fill="#ff826c" d="M275 65h10v10h-10zm-15 10h5v5h-5zm0-30h10v10h-10zm130 165v-5h-10v-80h5v-5h-25v5h5v80h-10v5h-5v30h5v5h35v-5h5v-30h-5zm40-90v5h5v115h15V125h5v-5h-25z"/>
+  <path fill="#d4ebf2" d="M365 145v5h40v110h5V150h40v-5h-85z"/>
+  <path fill="#ff826c" d="M440 240h5v5h-5z"/>
+  <path fill="#162e57" d="M435 195h15v45h-15z"/>
+  <path fill="#d4ebf2" d="M510 260H180v25h10v210h310V285h10v-25z"/>
+  <path fill="#ff826c" d="M15 90v25H0v195h15v95h60V90H15z"/>
+</svg>

src/images/home/offres.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="aefb6044-044f-4f8d-bc9f-2a475efc35ba" viewBox="0 0 420 390">
+  <path fill="#ff826c" d="M155 20h40v50.21h-40Zm0-20h50v20h-50Z"/>
+  <path fill="#d4ebf2" d="M255 150H155V40H70v30H40v140.57h115V180h100v-30z"/>
+  <path fill="#ff826c" d="M280 180h-25v-25h25Z"/>
+  <path fill="#10113a" d="M40 210v40h145v140h40V210Zm305-110v85h-90v12.54h110V100Z"/>
+  <path fill="#ff826c" d="M240 195h177.33v25H240Zm75 25h30v170h-30Z"/>
+  <path fill="#10113a" d="M315 220h30v15h-30Z"/>
+  <path fill="#ff826c" d="M30 250V105H0v170h10v115h20V275h80v115h20V275h10v-25Z"/>
+  <path fill="#d4ebf2" d="M410 155v-10h-30v50h30v-15h5v-5h-5v-14.95h5V175h5v-20h-10z"/>
+  <path fill="#ff826c" d="M385 55h10v20h-10Zm-10 30h10v10h-10Zm20-40h10v10h-10Zm-5 55h15v10h-15Zm10 20h5v15h-5Zm-10 20h5v5h-5Z"/>
+</svg>

src/layouts/BaseLayout.astro

@@ -1,12 +1,15 @@
 ---
-import '../styles/style.css';
+import { astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
 
-import Header from '../components/Header.astro';
+import "../styles/style.css";
+
+import Header from "../components/Header.astro";
 
 const { pageTitle, titleColor } = Astro.props;
 ---
 
-<html lang="fr" dir="ltr">
+<html lang={astroI18n.langCode} dir="ltr">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -15,15 +18,16 @@ const { pageTitle, titleColor } = Astro.props;
 		<title>{pageTitle} - Nicolas Arduin</title>
 	</head>
 	<body>
-		<Header />
+		<div class="wrapper">
-		<main role="main">
+			<Header />
-			<h1>{pageTitle}</h1>
+			<main id="skip-content" role="main">
-			<slot/>
+				<slot />
-		</main>
+			</main>
+		</div>
 	</body>
 	<style define:vars={{ titleColor }}>
 		h1 {
-		 color: var(--titleColor);
+			color: var(--titleColor);
 		}
-	 </style>
+	</style>
 </html>

src/layouts/MarkdownPostLayout.astro

@@ -1,30 +1,42 @@
 ---
-import AstroImage from "../components/AstroImage.astro";
+import { l, t, astroI18n } from "astro-i18n";
+// import AstroImage from "../components/AstroImage.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
-const { frontmatter, image, published, title } = Astro.props;
+const { frontmatter, image, title } = Astro.props;
-const publishedDate = new Intl.DateTimeFormat("fr", {
+const publishedDate = new Date(frontmatter.pubDate);
+const localizedDate = new Intl.DateTimeFormat(astroI18n.langCode, {
 	dateStyle: "long",
-}).format(published);
+}).format(publishedDate);
 ---
 
 <BaseLayout pageTitle={title}>
-	<p>Publié le&nbsp;: {frontmatter.pubDate.slice(0, 10)}</p>
+	<p>
-	<time datetime={published}>
+		Publié le&nbsp;: <time datetime={frontmatter.pubDate}>
-		{publishedDate}.
+			{localizedDate}.
-	</time>
+		</time>
+	</p>
+	<p>
+		{
+			t("article.published", {
+				datetime: frontmatter.pubDate,
+				options: { dateStyle: "long" },
+			})
+		}
+	</p>
 	<div class="tags">
 		{
 			frontmatter.tags.map((tag) => (
 				<p class="tag">
-					<a href={`/tags/${tag}`}>{tag}</a>
+					<a href={l(`/tags/${[tag]}`)}>{tag}</a>
 				</p>
 			))
 		}
 	</div>
 	<p>{frontmatter.description}</p>
+	<pre></pre>
 	<hr />
-	{
+	<!-- {
 		!!image && (
 			<AstroImage
 				src={image.url}
@@ -33,7 +45,7 @@ const publishedDate = new Intl.DateTimeFormat("fr", {
 				height={image.height}
 			/>
 		)
-	}
+	} -->
 	<hr />
 	<slot />
 </BaseLayout>

src/pages/articles/[slug].astro

@@ -0,0 +1,29 @@
+---
+import { l, t, astroI18n } from "astro-i18n";
+import { log } from "astro/dist/core/logger/core";
+import { literal } from "astro/zod";
+astroI18n.init(Astro);
+
+import { getCollection } from "astro:content";
+import EditorialContent from "../../components/EditorialContent.astro";
+import TOC from "../../components/TOC.astro";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export async function getStaticPaths() {
+	const articles = await getCollection("articles", ({ data }) => {
+		return data.lang === astroI18n.langCode;
+	});
+	return articles.map((article) => ({
+		// temp 'split' workaround for i18n
+		params: { slug: article.data.slug },
+		props: { article },
+	}));
+}
+
+const { article } = Astro.props;
+---
+
+<BaseLayout pageTitle={article.data.title}>
+	<EditorialContent content={article} />
+</BaseLayout>

src/pages/articles/i18n/en.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Articles",
+	"subtitle": "I blog, sometimes."
+}

src/pages/articles/i18n/fr.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Articles",
+	"subtitle": "Je blog, un peu."
+}

src/pages/articles/index.astro

@@ -1,21 +1,30 @@
 ---
-import "../../styles/style.css";
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+// New astro content collections
+import { getCollection } from "astro:content";
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import ContentPost from "../../components/ContentPost.astro";
 
-const allPosts = await Astro.glob("./*.mdx");
+const localizedPost = await getCollection("articles", ({ data }) => {
+	return data.lang === astroI18n.langCode;
+});
 
-const pageTitle = "Articles";
+const pageTitle = t("index.articles.pageName");
-const titleColor = "hotpink";
 ---
 
-<BaseLayout pageTitle={pageTitle} titleColor={titleColor}>
+<BaseLayout pageTitle={pageTitle}>
+	<h2>{t("index.articles.pageName")}</h2>
+	<p>{t("index.articles.subtitle")}</p>
 	<ul>
 		{
-			allPosts.map((post) => (
+			localizedPost.map((post) => (
 				<li>
-					<ContentPost url={post.url} title={post.frontmatter.title} />
+					<a href={l("/articles/[slug]", { slug: post.data.slug })}>
+						{post.data.title}
+					</a>
 				</li>
 			))
 		}

src/pages/articles/post-1.mdx

@@ -1,15 +0,0 @@
----
-layout: ../../layouts/MarkdownPostLayout.astro
-title: My Second Blog Post
-author: Astro Learner
-description: "After learning some Astro, I couldn't stop!"
-image:
-  url: "/hackerman.png"
-  alt: "hack"
-	width: 1920
-	height: 1080
-pubDate: 2022-07-08
-tags: ["astro", "blogging", "learning in public", "successes"]
----
-
-After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

src/pages/articles/post-2.mdx

@@ -1,15 +0,0 @@
----
-layout: ../../layouts/MarkdownPostLayout.astro
-title: Special tag
-author: Astro Learner
-pubDate: 2022-07-08
-tags: ["nicool"]
----
-
-That's it bb
-
-```html
-<main>
-	<header></header>
-</main>
-```

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

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

src/pages/en/articles/index.astro

@@ -0,0 +1,7 @@
+---
+import Page from "../../articles/index.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />

src/pages/en/index.astro

@@ -0,0 +1,7 @@
+---
+import Page from "../index.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />

src/pages/en/tags/[tag].astro

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

src/pages/en/tags/index.astro

@@ -0,0 +1,7 @@
+---
+import Page from "../../tags/index.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />

src/pages/i18n/en.json

@@ -0,0 +1,11 @@
+{
+	"title": "Crafting  <a href='#methodology' clean-link>sober and accessible</a> <span class='highlight'>websites</span>",
+	"subtitle": "Learn more about…",
+	"quoi": "I design <strong>websites</strong> and <strong>web applications</strong> following <a href='https://www.a11yproject.com/' title='A11y project’s website (new window)' target='_blank' rel='noreferer noopener' >accessibility</a> best practices.",
+	"comment": "More precisely, I create web and mobile interfaces. From UX to UI, from development to deployment. I put digital accessibility standards, for which I have obtained the <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='My Opquast certificate (new window)' target='_blank' rel='noreferer noopener'>Opquast certification</a>, forwards. I also keep <a href='https://en.wikipedia.org/wiki/Ecological_design' title='eco-design definition (new window)' target='_blank' rel='noreferer noopener'>eco-design</a> in mind when working.",
+	"opensource": "I try to contribute to <a class='u-nice-links' href='https://git.nardu.in/explore/repos' title='Open source projects I worked on (new window)' target='_blank' rel='noreferer noopener'>open source projects</a> that I enjoy.",
+	"writing": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
+	"latestProjects": "Latest projects",
+	"latestArticles": "Latest articles",
+	"scihub": "schi-hub-unlock"
+}

src/pages/i18n/fr.json

@@ -0,0 +1,11 @@
+{
+	"title": "Création de <span class='highlight'>sites&nbsp;web</span> <a href='/articles/faq' clean-link>sobres et accessibles</a>",
+	"subtitle": "Apprenez-en plus sur…",
+	"quoi": "Je crée des <strong>sites</strong> et des <strong>applications web</strong> en suivant les bonnes pratiques <a href='https://access42.net/decouvrir-accessibilite' title='Définition selon Access42 (nouvelle fenêtre)' target='_blank' rel='noreferer noopener' >d’accessibilités</a>.",
+	"comment": "Plus précisément, je crée des interfaces web et mobiles. De l’ergonomie jusqu’au design final, de l’intégration jusqu’à la mise en ligne. Je mets en avant les standards d’accessibilité numérique, pour lesquels j’ai obtenu la <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='Certificat Opquast personnel (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>certification Opquast</a>. Je m’inscris également dans une démarche <a href='https://www.ademe.fr/expertises/consommer-autrement/passer-a-laction/ameliorer-pratiques/lecoconception' title='Définition de l’ADEME (nouvelle fenêtre)' rel='noopener noreferer'>d’éco-conception</a> des services que je propose.",
+	"opensource": "J’essaie de contribuer à des <a href='https://git.nardu.in/explore/repos' title='Projets sur lesquels j’ai travaillé (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>projets open source</a> qui me tiennent à cœur.",
+	"writing": "Ah et j’écris <a href='/articles/'>des articles</a> aussi&nbsp;! Des articles sur le graphisme et l’informatique.",
+	"latestProjects": "Derniers projets",
+	"latestArticles": "Derniers articles",
+	"scihub": "schi-hub-deblocage"
+}

src/pages/index.astro

@@ -1,9 +1,177 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+// init i18n
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
 
-const pageTitle = "Accueil"
+// import stuff
+import BaseLayout from "../layouts/BaseLayout.astro";
+import QuickAccessCard from "../components/QuickAccessCard.astro";
+import ListCards from "../components/ListCards.astro";
+
+const pageTitle = t("accueil");
+
+// get all HP sections
+const allSections = await Astro.glob("../data/HP/**/*.md");
+// only keep the right locale version
+const localizedSections = allSections.filter((section) => {
+	return section.frontmatter.lang === astroI18n.langCode;
+});
+
+// get all articles
+const allArticles = await Astro.glob("../data/articles/**/*.{md,mdx}");
+// only keep the right locale version
+const localizedArticles = allArticles.filter((article) => {
+	return article.frontmatter.lang === astroI18n.langCode;
+});
+// sort articles by descending publication date
+const sortedArticles = localizedArticles.sort(
+	(a, b) => b.frontmatter.pubDate - a.frontmatter.pubDate
+);
+
+// New astro content collections
+import { getCollection } from "astro:content";
+// Only return posts with `draft: true` in the frontmatter
+const newLocalizedArticles = await getCollection("articles", ({ data }) => {
+	return data.lang === astroI18n.langCode;
+});
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<h2>devvvvv</h2>
+	<section class="region intro">
+		<h1 set:html={t("index.title")} />
+		<section class="quick-access">
+			<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
+			<ul class="quick-access__list" role="list">
+				{
+					localizedSections.map((section) => (
+						<li>
+							<QuickAccessCard item={section.frontmatter} />
+						</li>
+					))
+				}
+			</ul>
+		</section>
+	</section>
+
+	{
+		localizedSections.map((section) => (
+			<section id={section.frontmatter.id} class="region section">
+				<div class="section__container">
+					<div class="flow section__content">
+						<section.Content />
+					</div>
+					<div class="section__image">
+						<img
+							src={section.frontmatter.image}
+							width="400"
+							height="350"
+							alt=""
+							aria-hidden="true"
+						/>
+					</div>
+				</div>
+			</section>
+		))
+	}
+
+	<section class="latest">
+		<div class="latest__work">
+			<h2>{t("index.latestArticles")}</h2>
+			<ListCards list={newLocalizedArticles} routeName={t("article.titre")} />
+		</div>
+	</section>
 </BaseLayout>
+
+<style>
+	/* INTRO */
+	.intro {
+		position: relative;
+	}
+	.intro::before {
+		content: "";
+		position: absolute;
+		top: -30%;
+		left: -10%;
+		max-width: 100vw;
+		width: 320px;
+		height: 320px;
+		z-index: -1;
+		border-radius: 50%;
+		background-color: var(--color-light-blue);
+	}
+	.intro h1 {
+		font-size: clamp(3.25rem, calc(1.92rem + 6.67vw), 6.25rem);
+		text-align: center;
+	}
+	.intro h1 :global(a) {
+		color: currentColor;
+		text-decoration: underline;
+		text-decoration-thickness: auto;
+		text-decoration-color: var(--color-brique);
+		text-decoration-thickness: 6px;
+	}
+	.intro h1 :global(a:hover) {
+		text-decoration: none;
+	}
+	.intro__subtitle {
+		margin: var(--space-s-m) 0;
+		font-family: "wotfard";
+		font-weight: 500;
+		text-align: center;
+		color: var(--color-dark-blue);
+	}
+	.quick-access {
+		margin-top: var(--space-xl-2xl);
+		container-type: inline-size;
+		container-name: intro;
+	}
+	.quick-access__list {
+		margin: var(--space-l-xl) auto 0;
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--space-m-l);
+	}
+	.quick-access__list > li {
+		flex-grow: 1;
+		flex-basis: 240px;
+	}
+
+	/* SECTIONS */
+	.section {
+		container-name: section;
+		container-type: inline-size;
+	}
+	.section__container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-m-l);
+	}
+
+	.section :global(h2) {
+		font-size: var(--size-3);
+		color: var(--color-blue);
+	}
+	.section :global(h3) {
+		font-size: var(--size-1);
+	}
+
+	@container section (min-width: 50rem) {
+		.section__container {
+			flex-direction: row;
+			align-items: flex-start;
+		}
+		.section__image {
+			order: 1;
+			position: sticky;
+			top: 20px;
+			flex-grow: 1;
+			flex-basis: 18rem;
+		}
+		.section__content {
+			order: 2;
+			flex-basis: 0;
+			min-width: 40ch;
+		}
+	}
+</style>

src/pages/rss.xml.js

@@ -1,9 +0,0 @@
-import rss from '@astrojs/rss';
-
-export const get = () => rss({
-  title: 'Nicolas Arduin | Articles',
-  description: 'Je blog un peu',
-  site: 'https://www.nardu.in',
-  items: import.meta.glob('./**/*.md'),
-  customData: `<language>fr-fr</language>`,
-});

src/pages/tags/[tag].astro

@@ -3,7 +3,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import ContentPost from "../../components/ContentPost.astro";
 
 export async function getStaticPaths({}) {
-	const allPosts = await Astro.glob("../articles/*.mdx");
+	const allPosts = await Astro.glob("../../data/**/*.mdx");
 	const uniqueTags = [
 		...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
 	];

src/pages/tags/index.astro

@@ -2,7 +2,7 @@
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 const pageTitle = "Tag Index";
-const allPosts = await Astro.glob("../articles/*.mdx");
+const allPosts = await Astro.glob("../../data/**/*.mdx");
 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
 ---
 

src/styles/compositions/grid.css

@@ -0,0 +1,32 @@
+/*
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-s-m)): This defines the space
+between each item.
+
+--grid-min-item-size (14rem): How large each item should be
+ideally, as a minimum.
+
+--grid-placement (auto-fill): Set either auto-fit or auto-fill
+to change how empty grid tracks are handled */
+.grid {
+	display: grid;
+	grid-template-columns: repeat(
+		var(--grid-placement, auto-fill),
+		minmax(var(--grid-min-item-size, 16rem), 1fr)
+	);
+	gap: var(--gutter, var(--space-m-l));
+}
+
+.grid[data-rows='masonry'] {
+	grid-template-rows: masonry;
+	align-items: start;
+}
+
+.grid[data-layout='50-50'] {
+	--grid-placement: auto-fit;
+	--grid-min-item-size: clamp(16rem, 50vw, 26rem);
+}
+.grid[data-layout='33-33-33'] {
+	--grid-placement: auto-fit;
+	--grid-min-item-size: clamp(18rem, 27vw, 26rem);
+}

src/styles/compositions/sidebar.css

@@ -0,0 +1,54 @@
+/*
+CUSTOM PROPERTIES AND CONFIGURATION
+--gutter (var(--space-size-1)): This defines the space
+between the sidebar and main content.
+
+--sidebar-target-width (20rem): How large the sidebar should be
+
+--sidebar-content-min-width(50%): The minimum size of the main content area
+
+EXCEPTIONS
+.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
+*/
+.sidebar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--gutter, var(--space-xs-s));
+}
+
+.sidebar > :first-child {
+	flex-basis: var(--sidebar-target-width, 20rem);
+	flex-grow: 1;
+}
+
+.sidebar > :last-child {
+	flex-basis: 0;
+	flex-grow: 999;
+	min-width: var(--sidebar-content-min-width, 50%);
+}
+
+/* 
+A flipped version where the sidebar is on the right
+*/
+.sidebar[data-direction="rtl"] {
+	flex-direction: row-reverse;
+}
+
+/* REVERSE sidebar on right*/
+
+.sidebar-reverse {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--gutter, var(--space-xs-s));
+}
+
+.sidebar-reverse > :last-child {
+	flex-basis: var(--sidebar-target-width, 20rem);
+	flex-grow: 1;
+}
+
+.sidebar-reverse > :first-child {
+	flex-basis: 0;
+	flex-grow: 999;
+	min-width: var(--sidebar-content-min-width, 50%);
+}

src/styles/global/fonts.css

@@ -0,0 +1,42 @@
+@font-face {
+	font-family: "wotfard";
+	src: url("../../fonts/wotfard/wotfard-medium-webfont.woff2") format("woff2");
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: "wotfard";
+	src: url("../../fonts/wotfard/wotfard-semibold-webfont.woff2") format("woff2");
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: "wotfard";
+	src: url("../../fonts/wotfard/wotfard-regular-webfont.woff2") format("woff2");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: "recoleta";
+	src: url("../../fonts/recoleta/Recoleta-SemiBold.woff2") format("woff2");
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
+}
+
+/*
+* reduces Cumulative Layout Shift
+* https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros/
+*/
+@font-face {
+	font-family: "ArialReplace";
+	src: local("Arial");
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+	size-adjust: 96%;
+	letter-spacing: 1px;
+}

src/styles/global/global-styles.css

@@ -0,0 +1,221 @@
+/* BASE */
+::placeholder {
+	color: var(--color-dark);
+	opacity: 0.8;
+}
+::selection {
+	color: var(--color-light-blue);
+	background-color: var(--color-dark-blue);
+}
+::marker {
+	color: var(--color-brique);
+}
+
+body {
+	font-family: var(--font-primary);
+	font-size: var(--size-0);
+	line-height: 1.4;
+	color: var(--color-dark);
+	background-color: var(--color-light-white);
+	accent-color: var(--color-brique);
+}
+
+main {
+	min-block-size: 100vh;
+}
+:where(h1, h2, h3, .h2, .h3) {
+	font-family: var(--font-secondary);
+}
+:where(h1) {
+	max-width: 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-width: 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);
+}
+
+h5,
+.h5 {
+	font-size: var(--size-1);
+	color: var(--color-darkBlue);
+}
+
+a {
+	font-weight: 500;
+	color: var(--color-blue);
+	text-decoration: underline;
+}
+a:visited {
+	color: currentColor;
+}
+a:hover,
+a:focus {
+	text-decoration: none;
+}
+
+hr {
+	margin-block: var(--space-m-l);
+	block-size: 4px;
+	background-color: var(--color-dark);
+}
+hr.small {
+	margin-block: var(--space-xs);
+	block-size: 2px;
+}
+
+ul:not([role="list"]),
+ol:not([role="list"]) {
+	padding-inline-start: 1rem;
+}
+
+ul:not([role="list"]) > li + li,
+ol:not([role="list"]) > li + li {
+	margin-block-start: var(--space-xs);
+}
+
+.sr-only {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+.clean-button {
+	appearance: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+	border: none;
+	background: none;
+}
+.btn {
+	padding: var(--space-xs) var(--space-s);
+	margin-block: var(--space-s);
+	display: inline-block;
+	font-size: var(--size--1);
+	font-weight: bold;
+	text-decoration: none;
+	border: 2px solid var(--color-red);
+	border-radius: 14px;
+	color: var(--color-red);
+	background-color: transparent;
+	transition-property: color, background-color;
+	transition-duration: 0.2s;
+	transition-timing-function: ease-in-out;
+}
+.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);
+	background-color: var(--color-white);
+}
+
+button[disabled] {
+	cursor: not-allowed;
+	color: var(--color-grey-dark);
+	border-color: var(--color-grey);
+	background-color: var(--color-white);
+}
+
+.highlight {
+	color: var(--color-blue);
+}
+
+/* clean style link */
+.clean-link {
+	text-decoration: none;
+	font-weight: normal;
+	color: currentColor;
+}
+.clean-link:hover {
+	text-decoration: none;
+}
+
+/* nice hover link */
+.nice-link {
+	position: relative;
+	display: inline-block;
+	text-align: center;
+	text-decoration: none;
+}
+.nice-link:hover {
+	text-decoration: none;
+}
+.nice-link::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	bottom: -2px;
+	width: 100%;
+	height: 2px;
+	text-decoration: none;
+	transform: scaleX(0);
+	opacity: 1;
+	transform-origin: 100% 50%;
+	background-color: var(--color-brique);
+}
+.nice-link:hover::after {
+	transform: scaleX(1);
+	transform-origin: 0% 50%;
+}
+@media (prefers-reduced-motion: no-preference) {
+	.nice-link::after {
+		transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
+	}
+}
+
+/* blockquote */
+blockquote {
+	margin: var(--space-s) 0;
+	padding: var(--space-s);
+	font-weight: normal;
+	line-height: 1.4;
+	border-left: 3px solid var(--color-blue);
+	border-radius: 3px;
+	background-color: var(--color-soft-blue);
+}
+blockquote cite {
+	font-weight: normal;
+	font-style: normal;
+	font-size: var(--size-0);
+	line-height: 1.2;
+}
+
+blockquote code {
+	font-weight: bold;
+}

src/styles/global/reset.css

@@ -0,0 +1,166 @@
+/* RESET */
+
+:root {
+	--font-tnum: "tnum" on;
+}
+
+* {
+	/* Remove default margin on everything */
+	margin: 0;
+	/* Remove default padding on everything */
+	padding: 0;
+	/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
+	line-height: calc(0.25rem + 1em + 0.25rem);
+}
+
+/* Use a more-intuitive box-sizing model on everything */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
+*:where(:not(fieldset, progress, meter)) {
+	border-width: 0;
+	border-style: solid;
+	background-origin: border-box;
+	background-repeat: no-repeat;
+}
+@supports (font-variant-numeric: tabular-nums) {
+	html {
+		--font-tnum: "____";
+		font-variant-numeric: tabular-nums;
+	}
+}
+html {
+	/* Allow percentage-based heights in the application */
+	block-size: 100%;
+	/* Making sure text size is only controlled by font-size */
+	-webkit-text-size-adjust: none;
+	/* Improve text rendering */
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	text-rendering: optimizeLegibility;
+	font-feature-settings: var(--font-tnum);
+}
+
+/* Smooth scrolling for users that don't prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	html:focus-within {
+		scroll-behavior: smooth;
+	}
+}
+
+body {
+	overflow-x: hidden;
+	font-weight: normal;
+	/* Allow percentage-based heights in the application */
+	min-block-size: 100%;
+	/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
+	-webkit-marquee-increment: 0vw;
+}
+
+/* Improve media defaults */
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+	display: block;
+}
+:where(img, svg, video) {
+	block-size: auto;
+	max-inline-size: 100%;
+}
+
+:where(details) {
+	cursor: pointer;
+}
+
+/* Remove stroke and set fill colour to the inherited font colour */
+:where(svg) {
+	stroke: none;
+	fill: currentColor;
+}
+
+/* Set a size for SVG's without a width attribute */
+:where(svg):where(:not([width])) {
+	inline-size: 5rem;
+}
+
+/* Remove built-in form typography styles */
+:where(input, button, textarea, select),
+:where(input[type="file"])::-webkit-file-upload-button {
+	color: inherit;
+	font: inherit;
+	font-size: inherit;
+	letter-spacing: inherit;
+}
+
+/* Change textarea resize to vertical only and block only if the browser supports that */
+:where(textarea) {
+	resize: vertical;
+}
+@supports (resize: block) {
+	:where(textarea) {
+		resize: block;
+	}
+}
+
+/* Avoid text overflows */
+:where(h1, h2, h3) {
+	line-height: 1.1;
+}
+:where(p, h1, h2, h3, h4, h5, h6) {
+	overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+:where(ul, ol)[role="list"] {
+	list-style: none;
+}
+
+/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
+a:not([class]) {
+	text-decoration-skip-ink: auto;
+}
+
+/* Make it clear that interactive elements are interactive */
+:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+	cursor: pointer;
+	touch-action: manipulation;
+}
+:where(input[type="file"]) {
+	cursor: auto;
+}
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+	cursor: pointer;
+}
+
+/* Animate focus outline */
+@media (prefers-reduced-motion: no-preference) {
+	:focus-visible {
+		transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
+	}
+	:where(:not(:active)):focus-visible {
+		transition-duration: 0.25s;
+	}
+}
+:where(:not(:active)):focus-visible {
+	outline-offset: 5px;
+}
+
+/* Make sure users can't select button text */
+:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	user-select: none;
+	text-align: center;
+}
+
+/* Disabled cursor for disabled buttons */
+:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
+	cursor: not-allowed;
+}
+
+/* END RESET */

src/styles/global/variables.css

@@ -0,0 +1,89 @@
+/* VARIABLES */
+
+:root {
+	/* font sizes */
+	--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);
+	--size-2: clamp(1.62rem, calc(1.47rem + 0.74vw), 1.95rem);
+	--size-3: clamp(1.94rem, calc(1.72rem + 1.11vw), 2.44rem);
+	--size-4: clamp(2.33rem, calc(2.01rem + 1.6vw), 3.05rem);
+	--size-5: clamp(2.8rem, calc(2.35rem + 2.26vw), 3.82rem);
+	--size-6: clamp(3.36rem, calc(2.73rem + 3.13vw), 4.77rem);
+	--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 */
+	--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);
+	--space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
+	--space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem);
+	--space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem);
+	--space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem);
+	--space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem);
+	--space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem);
+
+	/* One-up pairs */
+	--space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem);
+	--space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem);
+	--space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem);
+	--space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem);
+	--space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem);
+	--space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem);
+	--space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem);
+	--space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem);
+
+	/* multi steps */
+	--space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem);
+	--space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem);
+	--space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem);
+	--space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem);
+	--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-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
+
+	/* fonts */
+	--font-primary: "wotfard", "ArialReplace", sans-serif;
+	--font-secondary: "recoleta", Palatino, serif;
+	--font-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	--font-tnum: "tnum" on;
+
+	/* colors */
+	--color-dark: hsl(239, 57%, 15%);
+	--color-grey: hsl(211, 12%, 35%);
+	--color-light-grey: hsl(0, 0%, 94%);
+	--color-blue: hsl(253, 98%, 41%);
+	--color-dark-blue: hsl(218, 60%, 21%);
+	--color-light-blue: hsl(194, 54%, 89%);
+	--color-blend-blue: hsl(253, 100%, 32%);
+	--color-soft-blue: hsl(210, 73%, 94%);
+	--color-violet: hsl(248, 73%, 52%);
+	--color-brique: hsl(358, 54%, 54%);
+	--color-white: hsl(0, 0%, 100%);
+	--color-light-white: hsl(240, 50%, 98%);
+	--color-black: hsl(0, 0%, 0%);
+
+	/* shadows */
+	--shadow-color: 0deg 0% 80%;
+	--shadow-elevation-medium: 0px 0.7px 0.7px hsl(var(--shadow-color) / 0.28),
+		0px 1.5px 1.6px -0.7px hsl(var(--shadow-color) / 0.26),
+		0px 2.9px 3px -1.5px hsl(var(--shadow-color) / 0.24),
+		0px 6px 6.3px -2.2px hsl(var(--shadow-color) / 0.22),
+		0px 11.8px 12.4px -3px hsl(var(--shadow-color) / 0.2);
+	--shadow-elevation-high: 0px 0.5px 0.5px hsl(var(--shadow-color) / 0.18),
+		0px 1.4px 1.5px -0.3px hsl(var(--shadow-color) / 0.18),
+		0px 2.3px 2.4px -0.7px hsl(var(--shadow-color) / 0.17),
+		0px 3.4px 3.6px -1px hsl(var(--shadow-color) / 0.16),
+		0px 5.1px 5.4px -1.3px hsl(var(--shadow-color) / 0.16),
+		0px 7.5px 7.9px -1.7px hsl(var(--shadow-color) / 0.15),
+		0px 10.8px 11.3px -2px hsl(var(--shadow-color) / 0.15),
+		-0.1px 15.4px 16.2px -2.3px hsl(var(--shadow-color) / 0.14),
+		-0.1px 21.3px 22.4px -2.7px hsl(var(--shadow-color) / 0.13),
+		-0.1px 28.9px 30.3px -3px hsl(var(--shadow-color) / 0.13);
+
+	/* radius */
+	--radius: 20px;
+	--radius-small: 10px;
+}

src/styles/style.css

@@ -1,11 +1,18 @@
-@import "open-props/style";
+/* @import "open-props/style"; */
-@import "open-props/normalize";
+/* @import "open-props/normalize"; */
 
-/* *, *::before, *::after {
+@import "./global/reset.css";
-  box-sizing: border-box;
+@import "./global/fonts.css";
-}
+@import "./global/variables.css";
+@import "./global/global-styles.css";
 
-* {
+@import "./compositions/grid.css";
-	margin: 0;
+@import "./compositions/sidebar.css";
-	padding: 0;
+
-} */
+@import "./utilities/flow.css";
+@import "./utilities/region.css";
+@import "./utilities/wrapper.css";
+
+/* @import-glob './blocks/*.css'; */
+/* @import-glob './compositions/*.css'; */
+/* @import-glob './utilities/*.css'; */

src/styles/utilities/flow.css

@@ -0,0 +1,7 @@
+.flow > * + * {
+	margin-block-start: var(--flow-space, var(--space-s-m));
+}
+
+.flow > :where(h1, h2, h3) + * {
+	margin-block-start: var(--flow-space-title, var(--space-xs-s));
+}

src/styles/utilities/region.css

@@ -0,0 +1,4 @@
+.region {
+	padding-block-start: var(--region-space, var(--space-l-2xl));
+	padding-block-end: var(--region-space, var(--space-l-2xl));
+}

src/styles/utilities/waves.css

@@ -0,0 +1,71 @@
+.waves {
+	background: transparent;
+	height: 4px;
+	position: relative;
+}
+.waves::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-repeat: repeat;
+	height: 10px;
+	background-size: 20px 20px;
+	background-image: radial-gradient(
+		circle at 10px -5px,
+		transparent 12px,
+		var(--waves-color, var(--color-white)) 13px
+	);
+}
+.waves::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-repeat: repeat;
+	height: 15px;
+	background-size: 40px 20px;
+	background-image: radial-gradient(
+		circle at 10px 15px,
+		var(--waves-color, var(--color-white)) 12px,
+		transparent 13px
+	);
+}
+
+/* LARGE */
+.waves-container {
+	block-size: 30px;
+	position: relative;
+}
+.waves--large {
+	position: absolute;
+	height: 30px;
+	width: 100%;
+	background: var(--waves-color, var(--color-light));
+	bottom: 0;
+}
+
+.waves--large::before,
+.waves--large::after {
+	content: '';
+	display: block;
+	position: absolute;
+	border-radius: 100% 50%;
+}
+
+.waves--large::before {
+	width: 55%;
+	height: 100%;
+	background-color: var(--waves-color, var(--color-light));
+	left: -1.5%;
+	top: 40%;
+}
+.waves--large::after {
+	width: 55%;
+	height: 109%;
+	background-color: var(--waves-bg-color, var(--color-white));
+	right: -1.5%;
+	top: 60%;
+}

src/styles/utilities/wrapper.css

@@ -0,0 +1,39 @@
+.wrapper {
+	/* CLASSIC WRAPPER */
+	/* max-width: var(--wrapper-max-width, 80rem);
+	margin-inline-start: auto;
+	margin-inline-end: auto;
+	--_content-padding: var(--content-padding, var(--space-s));
+	padding-inline-start: var(--_content-padding);
+	padding-inline-end: var(--_content-padding);
+	position: relative; */
+	--content-width: 65rem;
+	--grid-wrapper: [full-start] 1fr [wrapper-start]
+		minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
+
+	/* GRID WRAPPER */
+	display: grid;
+	grid-template-columns: var(--grid-wrapper);
+	--_content-padding: var(--content-padding, var(--space-s));
+	column-gap: var(--_content-padding);
+}
+/* set content inside wrapper column */
+.wrapper > * {
+	grid-column: wrapper;
+}
+
+/* set full width content to full grid */
+.wrapper.full-width {
+	/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
+	padding-inline: max(
+		calc((100vw - var(--content-width)) / 2),
+		var(--_content-padding)
+	);
+	grid-column: full;
+}
+/* set full width color to full grid */
+.wrapper.full-width-color {
+	/* https://codepen.io/t_afif/pen/oNEaqQX */
+	border-image: conic-gradient(var(--color-full-width, var(--color-light)) 0 0)
+		fill 0 //0 100vw;;
+}

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/base"
+	"extends": "astro/tsconfigs/base",
-}
+	"compilerOptions": {
+		"strictNullChecks": true
+	}
+}