nardu.in/website-astro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working i18n conf

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
.astro-i18n/generated.d.ts vendored
View File

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

6
astro.i18n.config.ts
View File

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

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

File diff suppressed because it is too large Load Diff

3
postcss.config.cjs
View File

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

22
src/components/Header.astro
View File

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

25
src/components/LanguageSwitcher.astro
View File

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

1
src/components/Navigation.astro
View File

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

0
src/data/fr/articles/hello.md
View File

3
src/i18n/en.json
View File

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

3
src/i18n/fr.json
View File

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

10
src/layouts/BaseLayout.astro
View File

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

30
src/layouts/MarkdownPostLayout.astro
View File

@ -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}.
</time>
<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 && (

7
src/pages/articles/post-0.mdx → src/pages/articles/en/post-0.mdx
View File

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

17
src/pages/articles/fr/post-0.mdx Normal file
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

16
src/pages/articles/index.astro
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 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>

13
src/styles/global/global-styles.css
View File

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

12
src/styles/global/variables.css
View File

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

14
src/styles/style.css
View File

@ -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'; */