working i18n conf

This commit is contained in:
Nico 2022-12-05 20:50:35 +01:00
parent 15b825bd5d
commit 1ab35db47d
19 changed files with 479 additions and 369 deletions

View File

@ -1,23 +1,45 @@
type DefaultLangCode = "fr"
type SupportedLangCode = "en"
type LangCode = "fr" | "en" type LangCode = "fr" | "en"
type RouteUri = | "/articles" | "/tags/[tag]" | "/tags" | "/" type RouteUri = | "/articles" | "/tags/[tag]" | "/tags" | "/"
type RouteParams = {"/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; } 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 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; "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 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" { declare module "astro-i18n" {
export * from "astro-i18n/" export * from "astro-i18n/"
export function l<Uri extends RouteUri>( export function l<Uri extends RouteUri>(
route: Uri, route: Uri | string & {},
...args: undefined extends RouteParams[Uri] ...args: undefined extends RouteParams[Uri]
? [params?: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode] ? [params?: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
: [params: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode] : [params: RouteParams[Uri], query?: Record<string, string>, langCode?: LangCode]
): string ): string
export function t<Path extends TranslationPath>( export function t<Path extends TranslationPath>(
path: Path, path: Path | string & {},
...args: undefined extends TranslationOptions[Path] ...args: undefined extends TranslationOptions[Path]
? [options?: TranslationOptions[Path], langCode?: LangCode] ? [options?: TranslationOptions[Path], langCode?: LangCode]
: [options: TranslationOptions[Path], langCode?: LangCode] : [options: TranslationOptions[Path], langCode?: LangCode]
): string ): 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
} }

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -4,9 +4,11 @@ import { t, l } from "astro-i18n";
import Navigation from "../components/Navigation.astro"; 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 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 /> <Navigation />
</header> </header>
@ -17,9 +19,21 @@ import Navigation from "../components/Navigation.astro";
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
gap: var(--space-xs-s); gap: var(--space-xs-s);
justify-content: space-between;
inline-size: 100%;
} }
header > .logo { 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 { a {
text-decoration: none; text-decoration: none;
@ -47,6 +61,6 @@ import Navigation from "../components/Navigation.astro";
.logo { .logo {
font-size: var(--size-1); font-size: var(--size-1);
font-weight: bold; font-weight: bold;
color: var(--darkBlue); color: var(--color-dark-blue);
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,28 +1,42 @@
--- ---
import { l, t, astroI18n } from "astro-i18n";
import AstroImage from "../components/AstroImage.astro"; import AstroImage from "../components/AstroImage.astro";
import BaseLayout from "../layouts/BaseLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
const { frontmatter, image, published, title } = Astro.props; const currentLocale = astroI18n.langCode;
const publishedDate = new Intl.DateTimeFormat("fr", {
const { frontmatter, image, title } = Astro.props;
const publishedDate = new Date(frontmatter.pubDate);
const localizedDate = new Intl.DateTimeFormat(currentLocale, {
dateStyle: "long", dateStyle: "long",
}).format(published); }).format(publishedDate);
--- ---
<BaseLayout pageTitle={title}> <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"> <div class="tags">
{ {
frontmatter.tags.map((tag) => ( frontmatter.tags.map((tag) => (
<p class="tag"> <p class="tag">
<a href={`/tags/${tag}`}>{tag}</a> <a href={l(`/tags/${[tag]}`)}>{tag}</a>
</p> </p>
)) ))
} }
</div> </div>
<p>{frontmatter.description}</p> <p>{frontmatter.description}</p>
<pre></pre>
<hr /> <hr />
{ {
!!image && ( !!image && (

View File

@ -1,14 +1,12 @@
--- ---
title: "My First Blog Post" title: "My First Blog Post"
lang: en
pubDate: 2022-07-01 pubDate: 2022-07-01
description: "This is the first post of my new Astro blog." description: "This is the first post of my new Astro blog."
author: "Astro Learner" author: "Astro Learner"
tags: ["astro", "blogging", "learning in public"] tags: ["astro", "blogging", "learning in public"]
--- ---
import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro";
export const published = new Date("2022-07-01");
export const image = { export const image = {
url: "/oui.jpg", url: "/oui.jpg",
alt: "oui oui oui", alt: "oui oui oui",
@ -16,7 +14,6 @@ export const image = {
height: "512", 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. 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 ## 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 ## What's next
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come. I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
</MarkdownPostLayout>

View File

@ -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

View File

@ -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 "../../styles/style.css";
import BaseLayout from "../../layouts/BaseLayout.astro"; import BaseLayout from "../../layouts/BaseLayout.astro";
import ContentPost from "../../components/ContentPost.astro"; import ContentPost from "../../components/ContentPost.astro";
const allPosts = await Astro.glob("./*.mdx"); const allPosts = await Astro.glob(`./**/*.mdx`);
const localizedPost = allPosts.filter((post) => {
console.log(t("index.articles.pageName", { cool: "yes" })); return post.frontmatter.lang === currentLocale;
});
const pageTitle = t("index.articles.pageName"); 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> <h2>{t("index.articles.pageName", { cool: "yes" }, "fr")}</h2>
<p>{t("index.articles.trad")}</p> <p>{t("index.articles.trad")}</p>
<ul> <ul>
{ {
allPosts.map((post) => ( localizedPost.map((post) => (
<li> <li>
<ContentPost url={post.url} title={post.frontmatter.title} /> <ContentPost url={post.url} title={post.frontmatter.title} />
</li> </li>

View File

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

View File

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

View File

@ -3,10 +3,16 @@
@import "./global/reset.css"; @import "./global/reset.css";
@import "./global/fonts.css"; @import "./global/fonts.css";
@import "./global/variables.css"; @import "./global/variables.css";
@import "./global/global-styles.css"; @import "./global/global-styles.css";
@import-glob './blocks/*.css'; @import "./compositions/grid.css";
@import-glob './compositions/*.css'; @import "./compositions/sidebar.css";
@import-glob './utilities/*.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'; */