added references page + references

src/components/CardEditorial.astro

@@ -1,20 +1,39 @@
 ---
 import ListTags from "./ListTags.astro";
-import { l, astroI18n } from "astro-i18n";
+import { l, t } from "astro-i18n";
 
 const { item, routeName } = Astro.props;
+
+// no link on references cards
+const isReference = routeName === t("references.slug");
 ---
 
-<div class="card">
+<div class:list={["card", { "card--link": !isReference }]}>
 	<div>
 		<h3>
-			<a
-				class="clean-link card__link"
-				href={`${l(`/${routeName}`)}/${item.slug}`}>{item.data.title}</a
-			>
+			{
+				!isReference ? (
+					<a
+						class="clean-link card__link"
+						href={`${l(`/${routeName}`)}/${item.slug}`}
+					>
+						{item.data.title}
+					</a>
+				) : (
+					<span>{item.data.title}</span>
+				)
+			}
 		</h3>
 		<h4>{item.data.subtitle}</h4>
 		<ListTags list={item.data.tags} />
+		{
+			isReference && (
+				<a href={item.data.url} rel="noopener noreferer">
+					{t("references.cta")}
+					<span class="sr-only"> {item.data.title}</span>
+				</a>
+			)
+		}
 	</div>
 </div>
 
@@ -25,17 +44,20 @@ const { item, routeName } = Astro.props;
 		display: block;
 		block-size: 100%;
 		overflow: hidden;
-		cursor: pointer;
 		box-shadow: var(--shadow-elevation-medium);
 		background-color: white;
 	}
-	.card:hover {
+	/*
+	* to be replaced with .card:has(a)
+	* when firefox supports it
+	*/
+	.card--link:hover {
 		box-shadow: var(--shadow-elevation-high);
 	}
-	.card:focus-within {
+	.card--link:focus-within {
 		box-shadow: var(--shadow-elevation-high);
 	}
-	.card::after {
+	.card--link::after {
 		content: "";
 		position: absolute;
 		inline-size: 30px;
@@ -49,19 +71,19 @@ const { item, routeName } = Astro.props;
 		background-size: contain;
 		transform: translateX(1rem);
 	}
-	.card:hover::after,
-	.card:focus-within::after {
+	.card--link:hover::after,
+	.card--link:focus-within::after {
 		transform: translateX(0);
 		opacity: 1;
 	}
-	.card:hover h3 a {
+	.card--link:hover h3 a {
 		text-decoration: underline;
 	}
-	.card:hover h3 a,
-	.card:focus-within h3 a {
+	.card--link:hover h3 a,
+	.card--link:focus-within h3 a {
 		color: var(--color-brique);
 	}
-	.card::before {
+	.card--link::before {
 		content: "";
 		position: absolute;
 		top: 0;
@@ -73,8 +95,8 @@ const { item, routeName } = Astro.props;
 		transform-origin: bottom;
 		background-color: var(--color-brique);
 	}
-	.card:hover::before,
-	.card:focus-within::before {
+	.card--link:hover::before,
+	.card--link:focus-within::before {
 		transform: scaleY(1);
 		transform-origin: top;
 	}

src/components/Navigation.astro

@@ -17,6 +17,12 @@ import LanguageSwitcher from "./LangSwitcher.astro";
 			>
 			<span aria-hidden="true">&middot;</span>
 		</li>
+		<li>
+			<a href={l("/references")} class="clean-link nice-link"
+				>{t("references.titre")}</a
+			>
+			<span aria-hidden="true">&middot;</span>
+		</li>
 		<li>
 			<a
 				href="mailto:contact@nardu.in"

src/content/config.ts

@@ -34,8 +34,27 @@ const fragments = defineCollection({
 	}),
 });
 
+const references = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		subtitle: z.string(),
+		url: z.string(),
+		lang: z.enum(["fr", "en"]),
+		tags: z.array(z.string()), // An array of strings
+		// Parse pubDate as a browser-standard `Date` object
+		createdAt: z.string().transform((str) => new Date(str)),
+		updatedAt: z
+			.string()
+			.transform((str) => new Date(str))
+			.optional(),
+		code: z.boolean().optional() || false,
+		draft: z.boolean().optional() || false,
+	}),
+});
+
 export const collections = {
 	// Don't forget 'quotes' for collection names containing dashes
 	articles,
 	fragments,
+	references,
 };

src/content/references/en/3w.md

@@ -0,0 +1,10 @@
+---
+title: 3w
+subtitle: I wrote the doc!
+url: https://3-w.fr
+lang: en
+slug: "3w"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "docs"]
+createdAt: "2022-10-19T18:02:00.000Z"
+---

src/content/references/en/natureo.md

@@ -0,0 +1,10 @@
+---
+title: Nature en Occitanie
+subtitle: Sobriety is only natural.
+url: https://www.natureo.org/
+lang: en
+slug: "natureo"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "accessibility", "sobriety", "CMS"]
+createdAt: "2023-04-19T18:02:00.000Z"
+---

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

@@ -0,0 +1,10 @@
+---
+title: Parole Expression
+subtitle: A new website for the association.
+url: https://www.paroleexpression.fr/
+lang: en
+slug: "parole-expression"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "sobriety", "CMS"]
+createdAt: "2022-04-19T17:11:00.000Z"
+---

src/content/references/en/rose-primaire.md

@@ -0,0 +1,10 @@
+---
+title: Rose Primaire
+subtitle: An agency we love.
+url: https://roseprimaire.com/
+lang: en
+slug: "rose-primaire"
+excerpt: Web dev and other things.
+tags: ["Front-end", "accessibility", "sobriety", "CMS"]
+createdAt: "2023-04-19T17:11:00.000Z"
+---

src/content/references/fr/3w.md

@@ -0,0 +1,10 @@
+---
+title: 3w
+subtitle: J'ai fait de la doc!
+url: https://3-w.fr
+lang: fr
+slug: "3w"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "documentation"]
+createdAt: "2022-10-19T18:02:00.000Z"
+---

src/content/references/fr/natureo.md

@@ -0,0 +1,10 @@
+---
+title: Nature en Occitanie
+subtitle: La sobriété au naturel.
+url: https://www.natureo.org/
+lang: fr
+slug: "natureo"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
+createdAt: "2023-04-19T18:02:00.000Z"
+---

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

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

src/content/references/fr/rose-primaire.md

@@ -0,0 +1,10 @@
+---
+title: Rose Primaire
+subtitle: Une agence comme on l'aime.
+url: https://roseprimaire.com/
+lang: fr
+slug: "rose-primaire"
+excerpt: Développement web et compagnie.
+tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
+createdAt: "2023-04-19T17:11:00.000Z"
+---

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

@@ -27,3 +27,5 @@ When the project is larger, I call on talented partners who share the same value
 
 - [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.
+
+[See some work here!](/en/work/)

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

@@ -27,3 +27,5 @@ Lorsque le projet est plus volumineux, je fais appel à des partenaires talentue
 
 - [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet ;
 - [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
+
+[Consultez quelques références ici !](/references/)

src/i18n/en.json

@@ -33,12 +33,11 @@
 		"titre": "snippets",
 		"tagline": "School with Nicool."
 	},
-	"projet": {
-		"titre": "projects",
-		"tagline": "Freelance work",
+	"references": {
+		"titre": "work",
+		"slug": "work",
 		"cta": "Visit website",
-		"lienTitle": "Website of",
-		"fenetre": "(new window)"
+		"tagline": "Some work."
 	},
 	"erreur": {
 		"introuvable": "Sorry, page not found.",
@@ -50,13 +49,13 @@
 			"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."
+		},
+		"references": {
+			"title": "Work",
+			"description": "A few case studies I worked on as a front-end developer."
 		}
 	}
 }

src/i18n/fr.json

@@ -33,12 +33,11 @@
 		"titre": "fragments",
 		"tagline": "Les tutos de Nico mdr."
 	},
-	"projet": {
-		"titre": "projets",
-		"tagline": "Mon travail en freelance",
+	"references": {
+		"titre": "références",
+		"slug": "references",
 		"cta": "Consulter le site",
-		"lienTitle": "Site web de",
-		"fenetre": "(nouvelle fenêtre)"
+		"tagline": "Quelques références."
 	},
 	"erreur": {
 		"introuvable": "Page introuvable",
@@ -48,15 +47,15 @@
 	"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."
+			"description": "Quelques articles sur le développement web front-end et l'informatique à Toulouse."
 		},
 		"code": {
 			"title": "Fragments",
 			"description": "Fragments de codes stylés, faciles et accessibles."
+		},
+		"references": {
+			"title": "Références",
+			"description": "Quelques travaux réalisés en tant que et développeur web front-end à Toulouse."
 		}
 	}
 }

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

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

src/pages/en/work/index.astro

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

src/pages/references/i18n/en.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Work",
+	"subtitle": "Some fine websites right here."
+}

src/pages/references/i18n/fr.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Références",
+	"subtitle": "Des sites web de qualité."
+}

src/pages/references/index.astro

@@ -0,0 +1,44 @@
+---
+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 ListCards from "../../components/ListCards.astro";
+
+const localizedPost = await getCollection("references", ({ data }) => {
+	return data.lang === astroI18n.langCode && !data.draft;
+});
+// sort references by descending publication date
+const sortedReferences = localizedPost.sort(
+	(a, b) => b.data.createdAt - a.data.createdAt
+);
+
+const pageTitle = t("index.references.pageName");
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<section class="region flow">
+		<h1>{t("index.references.pageName")}</h1>
+		<h2>{t("index.references.subtitle")}</h2>
+		<ListCards list={sortedReferences} routeName={t("references.slug")} />
+	</section>
+</BaseLayout>
+
+<style>
+	.flow h2 + :global(*) {
+		margin-block-start: var(--space-m-l);
+	}
+	h1 {
+		text-transform: capitalize;
+	}
+	h1,
+	h2 {
+		padding-inline-start: var(--space-xs-s);
+	}
+	h2 {
+		color: var(--color-brique);
+	}
+</style>