working i18n conf

.astro-i18n/generated.d.ts

@@ -1,23 +1,45 @@
+type DefaultLangCode = "fr"
+type SupportedLangCode = "en"
 type LangCode = "fr" | "en"
 type RouteUri = | "/articles" | "/tags/[tag]" | "/tags" | "/" 
 type RouteParams = {"/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
-type TranslationPath = "accueil" | "tagline" | "copyright" | "contact" | "contactLien" | "contactTel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "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" | "index.title" | "index.quoi" | "index.comment" | "index.opensource" | "index.projetsRecents" | "index.articlesRecents"
-type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact": {} | undefined; "contactLien": {} | undefined; "contactTel": {} | 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; "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": {} | undefined; "index.title": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.projetsRecents": {} | undefined; "index.articlesRecents": {} | undefined; }
+type TranslationPath = "accueil" | "tagline" | "copyright" | "contact" | "contactLien" | "contactTel" | "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" | "index.title" | "index.quoi" | "index.comment" | "index.opensource" | "index.projetsRecents" | "index.articlesRecents"
+type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact": {} | undefined; "contactLien": {} | undefined; "contactTel": {} | 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": {} | undefined; "index.title": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.projetsRecents": {} | undefined; "index.articlesRecents": {} | undefined; }
 
 declare module "astro-i18n" {
 	export * from "astro-i18n/"
 	
 	export function l<Uri extends RouteUri>(
-		route: Uri,
+		route: Uri | string & {},
 		...args: undefined extends RouteParams[Uri]
 			? [params?: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
 			: [params: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
 	): string
 	
 	export function t<Path extends TranslationPath>(
-		path: Path,
+		path: Path | string & {},
 		...args: undefined extends TranslationOptions[Path]
 			? [options?: TranslationOptions[Path], langCode?: LangCode]
 			: [options: TranslationOptions[Path], langCode?: LangCode]
 	): string
+	
+	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>
+		getFormatter(name: string): InterpolationFormatter | undefined
+		setFormatter(name: string, formatter: InterpolationFormatter): void
+		deleteFormatter(name: string): void
+	}
+	export const astroI18n: AstroI18n
 }

astro.i18n.config.ts

@@ -8,5 +8,9 @@ export default defineAstroI18nConfig({
 		fr: "src/i18n/fr.json",
 		en: "src/i18n/en.json",
 	},
-	routeTranslations: {},
+	routeTranslations: {
+		en: {
+			articles: "blog",
+		},
+	},
 });

package.json

@@ -13,11 +13,15 @@
 		"i18n:sync": "astro-i18n sync"
 	},
 	"dependencies": {
-		"@astrojs/image": "^0.11.2",
-		"@astrojs/mdx": "^0.11.5",
+		"@astrojs/image": "^0.12.0",
+		"@astrojs/mdx": "^0.12.0",
 		"@astrojs/rss": "^1.0.3",
-		"astro": "^1.6.0",
-		"astro-i18n": "^1.1.7",
-		"open-props": "^1.4.24"
+		"astro": "^1.6.12",
+		"astro-i18n": "^1.2.0",
+		"open-props": "^1.5.1"
+	},
+	"devDependencies": {
+		"autoprefixer": "^10.4.13",
+		"postcss": "^8.4.19"
 	}
 }

postcss.config.cjs

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

src/components/Header.astro

@@ -4,9 +4,11 @@ import { t, l } from "astro-i18n";
 import Navigation from "../components/Navigation.astro";
 ---
 
-<header class="region" role="banner">
+<header class="" role="banner">
 	<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
-	<a class="logo" href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
+	<p class="logo">
+		<a href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
+	</p>
 	<Navigation />
 </header>
 
@@ -17,9 +19,21 @@ import Navigation from "../components/Navigation.astro";
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--space-xs-s);
+		justify-content: space-between;
+		inline-size: 100%;
 	}
 	header > .logo {
-		margin-inline-end: auto;
+		/* margin-inline-end: auto; */
+		flex-grow: 1;
+		/* flex-basis: 100%; */
+		text-align: center;
+	}
+	header > .logo a {
+		text-align: center;
+	}
+	header > :global(:last-child) {
+		flex-grow: 999;
+		margin-inline-start: auto;
 	}
 	a {
 		text-decoration: none;
@@ -47,6 +61,6 @@ import Navigation from "../components/Navigation.astro";
 	.logo {
 		font-size: var(--size-1);
 		font-weight: bold;
-		color: var(--darkBlue);
+		color: var(--color-dark-blue);
 	}
 </style>

src/components/LanguageSwitcher.astro

@@ -1,5 +1,6 @@
 ---
 import { l, astroI18n } from "astro-i18n";
+import { I18nProvider } from "astro-i18n/components";
 
 // get the locale currently in use
 const currentLocale = astroI18n.langCode;
@@ -7,15 +8,19 @@ const currentLocale = astroI18n.langCode;
 const availableLocales = astroI18n.langCodes.filter(
 	(locale) => locale !== currentLocale
 );
+// current path
+const currentRoute = Astro.url.pathname;
 ---
 
+<I18nProvider>
 	<ul role="list">
 		{
 			// create a list of available alternative locale
 			availableLocales.map((locale) => (
 				<li>
-				<a href={l("/", {}, "", locale)}>{locale}</a>
+					<a href={l(currentRoute as any, {}, {}, locale as any)}>{locale}</a>
 				</li>
 			))
 		}
 	</ul>
+</I18nProvider>

src/components/Navigation.astro

@@ -37,6 +37,7 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
 		display: flex;
 		flex-flow: row wrap;
 		gap: var(--space-2xs);
+		justify-content: center;
 	}
 	a {
 		text-decoration: none;

src/i18n/en.json

@@ -19,7 +19,8 @@
 	},
 	"article": {
 		"titre": "articles",
-		"tagline": "I blog, sometimes."
+		"tagline": "I blog, sometimes.",
+		"published": "Published on {datetime|date(options)}"
 	},
 	"meta": {
 		"publication": "Published on",

src/i18n/fr.json

@@ -19,7 +19,8 @@
 	},
 	"article": {
 		"titre": "articles",
-		"tagline": "Je blog, un peu."
+		"tagline": "Je blog, un peu.",
+		"published": "Publié le {datetime|date(options)}"
 	},
 	"meta": {
 		"publication": "Publié le",

src/layouts/BaseLayout.astro

@@ -18,10 +18,12 @@ const { pageTitle, titleColor } = Astro.props;
 		<title>{pageTitle} - Nicolas Arduin</title>
 	</head>
 	<body>
+		<div class="wrapper">
 			<Header />
 			<main id="skip-content" role="main">
 				<slot/>
 			</main>
+		</div>
 	</body>
 	<style define:vars={{ titleColor }}>
 		h1 {

src/layouts/MarkdownPostLayout.astro

@@ -1,28 +1,42 @@
 ---
+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 publishedDate = new Intl.DateTimeFormat("fr", {
+const currentLocale = astroI18n.langCode;
+
+const { frontmatter, image, title } = Astro.props;
+const publishedDate = new Date(frontmatter.pubDate);
+const localizedDate = new Intl.DateTimeFormat(currentLocale, {
 	dateStyle: "long",
-}).format(published);
+}).format(publishedDate);
 ---
 
 <BaseLayout pageTitle={title}>
-	<p>Publié le&nbsp;: {frontmatter.pubDate.slice(0, 10)}</p>
-	<time datetime={published}>
-		{publishedDate}.
+	<p>
+		Publié le&nbsp;: <time datetime={frontmatter.pubDate}>
+			{localizedDate}.
 		</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 && (

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

@@ -1,14 +1,12 @@
 ---
 title: "My First Blog Post"
+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 +14,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 +27,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/pages/articles/fr/post-0.mdx

@@ -0,0 +1,17 @@
+---
+title: "Mon premier article"
+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/pages/articles/index.astro

@@ -1,25 +1,27 @@
 ---
-import { t, l } from "astro-i18n";
+import { l, t, astroI18n } from "astro-i18n";
+
+const currentLocale = astroI18n.langCode;
 
 import "../../styles/style.css";
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import ContentPost from "../../components/ContentPost.astro";
 
-const allPosts = await Astro.glob("./*.mdx");
-
-console.log(t("index.articles.pageName", { cool: "yes" }));
+const allPosts = await Astro.glob(`./**/*.mdx`);
+const localizedPost = allPosts.filter((post) => {
+	return post.frontmatter.lang === currentLocale;
+});
 
 const pageTitle = t("index.articles.pageName");
-const titleColor = "hotpink";
 ---
 
-<BaseLayout pageTitle={pageTitle} titleColor={titleColor}>
+<BaseLayout pageTitle={pageTitle}>
 	<h2>{t("index.articles.pageName", { cool: "yes" }, "fr")}</h2>
 	<p>{t("index.articles.trad")}</p>
 	<ul>
 		{
-			allPosts.map((post) => (
+			localizedPost.map((post) => (
 				<li>
 					<ContentPost url={post.url} title={post.frontmatter.title} />
 				</li>

src/styles/global/global-styles.css

@@ -4,8 +4,8 @@
 	opacity: 0.8;
 }
 ::selection {
-	color: var(--lightBlue);
-	background-color: var(--darkBlue);
+	color: var(--color-light-blue);
+	background-color: var(--color-dark-blue);
 }
 
 body {
@@ -13,23 +13,20 @@ body {
 	font-size: var(--size-0);
 	line-height: 1.4;
 	color: var(--color-dark);
-}
-.navIsOpenBody {
-	overflow: hidden;
+	background-color: var(--color-light-white);
 }
 
 main {
 	min-block-size: 100vh;
-	background-color: var(--color-light-white);
 }
 :where(h1, h2, h3) {
 	font-family: var(--font-secondary);
 }
 h1 {
 	max-width: 20ch;
-	font-size: var(--size-7);
+	font-size: var(--size-6);
 	font-weight: bold;
-	color: var(--color-darkBlue);
+	color: var(--color-dark-blue);
 }
 
 h2,

src/styles/global/variables.css

@@ -53,16 +53,16 @@
 	/* colors */
 	--color-dark: hsl(239, 57%, 15%);
 	--color-grey: hsl(211, 12%, 35%);
-	--color-greyLight: hsl(0, 0%, 94%);
+	--color-light-grey: hsl(0, 0%, 94%);
 	--color-blue: hsl(253, 98%, 41%);
-	--color-darkBlue: hsl(218, 60%, 21%);
-	--color-lightBlue: hsl(194, 54%, 89%);
-	--color-blendBlue: hsl(253, 100%, 32%);
-	--color-softBlue: hsl(210, 73%, 94%);
+	--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-lightWhite: hsl(240, 50%, 98%);
+	--color-light-white: hsl(240, 50%, 98%);
 	--color-black: hsl(0, 0%, 0%);
 
 	/* shadows */

src/styles/style.css

@@ -3,10 +3,16 @@
 
 @import "./global/reset.css";
 @import "./global/fonts.css";
-
 @import "./global/variables.css";
 @import "./global/global-styles.css";
 
-@import-glob './blocks/*.css';
-@import-glob './compositions/*.css';
-@import-glob './utilities/*.css';
+@import "./compositions/grid.css";
+@import "./compositions/sidebar.css";
+
+@import "./utilities/flow.css";
+@import "./utilities/region.css";
+@import "./utilities/wrapper.css";
+
+/* @import-glob './blocks/*.css'; */
+/* @import-glob './compositions/*.css'; */
+/* @import-glob './utilities/*.css'; */