Nicolas/website-astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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