dep update + veille

2023-05-09 10:23:01 +02:00 · 2023-05-09 10:23:01 +02:00 · b602b45c05
commit b602b45c05
parent ff0ba456a9
13 changed files with 1052 additions and 810 deletions
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -15,6 +15,7 @@ import { l, t } from "astro-i18n";
 			<li>
 				<a href="tel:+33749464239" title={t("contact.tel")}>+337 49 46 42 39</a>
 			</li>
+			<li><a href={l("/veille")}>{t("veille.titre")}</a></li>
 			<li><a href={l("/plan-du-site")}>{t("sitemap")}</a></li>
 		</ul>
 	</section>
--- a/src/components/MetaDate.astro
+++ b/src/components/MetaDate.astro
@ -17,21 +17,38 @@ function rawDate(date) {
 ---

 <div class="meta">
-	<p class="meta__date">
-		{t("meta.publication")}&nbsp;:
-		<time datetime={rawDate(item.createdAt)}>{formatDate(item.createdAt)}</time>
-	</p>
+	{
+		!!item.createdAt && (
+			<p class="meta__date">
+				{t("meta.publication")}&nbsp;:
+				<time datetime={rawDate(item.createdAt)}>
+					{formatDate(item.createdAt)}
+				</time>
+			</p>
+		)
+	}
 	{
 		formatDate(item.createdAt) != formatDate(item.updatedAt) &&
+			!!item.createdAt &&
 			!!item.updatedAt && (
 				<p class="meta__date">
 					{t("meta.modification")}&nbsp;:
-					<time datetime={rawDate(item.createdAt)}>
+					<time datetime={rawDate(item.updatedAt)}>
 						{formatDate(item.updatedAt)}
 					</time>
 				</p>
 			)
 	}
+	{
+		!item.createdAt && !!item.updatedAt && (
+			<p class="meta__date">
+				{t("meta.modification")}&nbsp;:
+				<time datetime={rawDate(item.updatedAt)}>
+					{formatDate(item.updatedAt)}
+				</time>
+			</p>
+		)
+	}
 </div>

 <style>
--- a/src/data/veille/en/2023.md
+++ b/src/data/veille/en/2023.md
@ -0,0 +1,26 @@
+---
+lang: en
+title: 2023
+updatedAt: "2023-04-20T17:12:06.000Z"
+---
+
+- [3D in CSS](https://garden.bradwoods.io/notes/css/3d) – Explanations et examples of 3D in CSS.
+- [Fable](https://fable.app) – Motion design app.
+- [Rive](https://rive.app) – Motion design app.
+- [Cake Desk](https://cakedesk.app/) – Invoicing application.
+- [Smooth CSS shadow](https://shadows.brumm.af/) – Generator.
+- [Smol CSS](https://smolcss.dev/) – CSS snippets.
+- [Optical adjustment](https://marvelapp.com/blog/optical-adjustment-logic-vs-designers/) – Optical vs logical alignment.
+- [Datawrapper](https://blog.datawrapper.de/category/datavis-dos-and-donts/) – Advice on data visualization.
+- [Assistivlabs](https://assistivlabs.com/) – Test accessibility with real softwares.
+- [`time` input done right](https://adamsilver.io/blog/designing-a-time-input-backed-by-research/) – Article.
+- [Tabby](https://tabby.sh) – An alternative terminal app.
+- [Newglyph](https://newglyph.com/) – Independant foundry.
+- [Headless UI](https://headlessui.com/vue/dialog) – LUI librairy in vue and react.
+- [Sexy privacy](https://privacy.sexy) – Privacy tools for windows and macos.
+- [33 JavaScript concepts](https://github.com/leonardomso/33-js-concepts) – Articles.
+- [Formbricks](https://formbricks.com/) – Open source alternative to google form/typeform.
+- [SVG loader](https://github.com/n3r4zzurr0/svg-spinners) – Collection.
+- [a11yphant](https://a11yphant.com/) – Code challenges to learn accessibility.
+- [Modern CSS](https://moderncss.dev/) – CSS snippets.
+- [Moderne CSS container](https://twitter.com/KevinJPowell/status/1501555193799925761) – Tweet from Kevin Powell ❤️
--- a/src/data/veille/fr/2023.md
+++ b/src/data/veille/fr/2023.md
@ -0,0 +1,31 @@
+---
+lang: fr
+title: 2023
+updatedAt: "2023-04-20T17:12:06.000Z"
+---
+
+- [L’accessibilité n’est pas une variable d’ajustement](https://www.sophie-drouvroy.com/blog/laccessibilite-nest-pas-une-variable-dajustement/) — Sophie Drouvroy, intégratrice front-end, partage son quotidien en tant que personne sourde dans notre société.
+  > L’accessibilité doit être au cœur du projet et pas une cerise sur le gâteau.
+- [3D en CSS (english)](https://garden.bradwoods.io/notes/css/3d) – Explications et exemples des propriétés 3D en CSS.
+- [Climat&nbsp;: Comment ne pas déprimer&nbsp;?](https://www.lemonde.fr/podcasts/article/2022/06/21/climat-comment-ne-pas-deprimer_6131347_5463015.html) – Podcast.
+- [Fable (english)](https://fable.app) – Application de motion design.
+- [Rive (english)](https://rive.app) – Application de motion design.
+- [Cake Desk](https://cakedesk.app/) – Application de facturation.
+- [Ombre fluide en CSS](https://shadows.brumm.af/) – Générateur.
+- [Smol CSS](https://smolcss.dev/) – Collection de fragments CSS.
+- [Ajustement optique](https://marvelapp.com/blog/optical-adjustment-logic-vs-designers/) (english) – Aligner visuellement plutôt que techniquement.
+- [Datawrapper](https://blog.datawrapper.de/category/datavis-dos-and-donts/) (english) – Conseils pour montrer de la donnée.
+- [Assistivlabs](https://assistivlabs.com/) (english) – Service de test des technologies d'assistance (browserstack mais pour l'accessibilité).
+- [Les caractères fantaisistes et l'accessibilité](https://www.lalutineduweb.fr/detournement-unicode-emojis-accessibilite/) – Explications et exemples de l'enfer que sont les caractères Unicode pour les technologies d'assistance.
+- [Créer un champ `time` sur le web](https://adamsilver.io/blog/designing-a-time-input-backed-by-research/) (english) – Article.
+- [La cascade](https://la-cascade.io) – Collection d'articles sur le CSS.
+- [Tabby](https://tabby.sh) (english) – An alternative terminal app.
+- [Newglyph](https://newglyph.com/) – Fonderie indépendante.
+- [<span lang="en">Headless UI</span>](https://headlessui.com/vue/dialog) (english) – Librairie de composants vue et react.
+- [Vie privée sexy](https://privacy.sexy) (english) – Outils de confidentialité pour windows et macos.
+- [33 concepts JavaScript](https://github.com/leonardomso/33-js-concepts) (english) – Articles.
+- [Formbricks](https://formbricks.com/) (english) – Alternative open source à google form/typeform.
+- [Animations de chargement SVG](https://github.com/n3r4zzurr0/svg-spinners) – Collection.
+- [a11yphant](https://a11yphant.com/) (english) – Challenges de code pour apprendre l'accessibilité.
+- [CSS moderne](https://moderncss.dev/) (english) – Fragments CSS.
+- [Conteneur moderne en CSS](https://twitter.com/KevinJPowell/status/1501555193799925761) (english) – Tweet de Kevin Powell ❤️
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@ -39,6 +39,10 @@
 		"cta": "Consulter le site",
 		"tagline": "Quelques références."
 	},
+	"veille": {
+		"titre": "veille",
+		"tagline": "Des liens, en vrac."
+	},
 	"erreur": {
 		"introuvable": "Page introuvable",
 		"autre": "Oups… désolé pour cette erreur.",
--- a/src/pages/en/veille/index.astro
+++ b/src/pages/en/veille/index.astro
@ -0,0 +1,7 @@
+---
+import Page from "../../veille/index.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/plan-du-site.astro
+++ b/src/pages/plan-du-site.astro
@ -66,17 +66,16 @@ const pageTitle = t("sitemap");
 					<a href={l("/references")}>{t("references.titre")}</a>
 				</h2>
 			</li>
+			<li>
+				<h2>
+					<a href={l("/veille")}>{t("veille.titre")}</a>
+				</h2>
+			</li>
 		</ul>
 	</section>
 </BaseLayout>

 <style>
-	/* :link {
-  text-decoration: underline;
-}
-:link:hover {
-  text-decoration: none;
-} */
 	h2 {
 		text-transform: capitalize;
 	}
--- a/src/pages/veille/i18n/en.json
+++ b/src/pages/veille/i18n/en.json
@ -0,0 +1,4 @@
+{
+	"pageName": "External stuff",
+	"subtitle": "Links, articles, videos…"
+}
--- a/src/pages/veille/i18n/fr.json
+++ b/src/pages/veille/i18n/fr.json
@ -0,0 +1,4 @@
+{
+	"pageName": "Veille",
+	"subtitle": "Des liens, des articles, des vidéos… en vrac."
+}
--- a/src/pages/veille/index.astro
+++ b/src/pages/veille/index.astro
@ -0,0 +1,43 @@
+---
+import { t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+const pageTitle = t("index.veille.pageName");
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import MetaDate from "../../components/MetaDate.astro";
+
+// get all content
+const allSections = await Astro.glob("../../data/veille/**/*.md");
+// only keep the right locale version
+const localizedSections = allSections.filter((section) => {
+	return section.frontmatter.lang === astroI18n.langCode;
+});
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<section class="region flow">
+		<h1>{pageTitle}</h1>
+		<p>{t("index.veille.subtitle")}</p>
+	</section>
+
+	{
+		localizedSections.map((section) => (
+			<section class="flow content">
+				<h2>{section.frontmatter.title}</h2>
+				<MetaDate item={section.frontmatter} />
+				<section.Content />
+			</section>
+		))
+	}
+</BaseLayout>
+
+<style>
+	.content :global(ul > li) {
+		padding-block: var(--space-m);
+	}
+	.content :global(ul > li + li) {
+		margin: 0;
+		border-top: 1px solid var(--color-brique);
+	}
+</style>