working i18n conf
This commit is contained in:
parent
15b825bd5d
commit
1ab35db47d
|
@ -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
|
||||
}
|
||||
|
|
|
@ -8,5 +8,9 @@ export default defineAstroI18nConfig({
|
|||
fr: "src/i18n/fr.json",
|
||||
en: "src/i18n/en.json",
|
||||
},
|
||||
routeTranslations: {},
|
||||
routeTranslations: {
|
||||
en: {
|
||||
articles: "blog",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
14
package.json
14
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"
|
||||
}
|
||||
}
|
||||
|
|
622
pnpm-lock.yaml
622
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("autoprefixer")],
|
||||
};
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
---
|
||||
|
||||
<ul role="list">
|
||||
{
|
||||
// create a list of available alternative locale
|
||||
availableLocales.map((locale) => (
|
||||
<li>
|
||||
<a href={l("/", {}, "", locale)}>{locale}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<I18nProvider>
|
||||
<ul role="list">
|
||||
{
|
||||
// create a list of available alternative locale
|
||||
availableLocales.map((locale) => (
|
||||
<li>
|
||||
<a href={l(currentRoute as any, {}, {}, locale as any)}>{locale}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</I18nProvider>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -18,10 +18,12 @@ const { pageTitle, titleColor } = Astro.props;
|
|||
<title>{pageTitle} - Nicolas Arduin</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main id="skip-content" role="main">
|
||||
<slot/>
|
||||
</main>
|
||||
<div class="wrapper">
|
||||
<Header />
|
||||
<main id="skip-content" role="main">
|
||||
<slot/>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<style define:vars={{ titleColor }}>
|
||||
h1 {
|
||||
|
|
|
@ -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 : {frontmatter.pubDate.slice(0, 10)}</p>
|
||||
<time datetime={published}>
|
||||
{publishedDate}.
|
||||
</time>
|
||||
<p>
|
||||
Publié le : <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 && (
|
||||
|
|
|
@ -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>
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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'; */
|
||||
|
|
Loading…
Reference in New Issue