i18n updates + HP + components
This commit is contained in:
Nico
parent
1ab35db47d
commit
23c79e579c
67 changed files with 1355 additions and 542 deletions
26
src/pages/articles/[slug].astro
Normal file
26
src/pages/articles/[slug].astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
import { astroI18n } from "astro-i18n";
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
|
||||
export async function getStaticPaths({}) {
|
||||
const allPosts = await Astro.glob("../../data/articles/**/*.mdx");
|
||||
|
||||
const localizedPost = allPosts.filter((post) => {
|
||||
return post.frontmatter.lang === astroI18n.langCode;
|
||||
});
|
||||
|
||||
return localizedPost.map((post) => {
|
||||
return {
|
||||
params: { slug: post.frontmatter.slug },
|
||||
props: { post },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { slug } = Astro.params;
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
{post.frontmatter.title}
|
||||
</BaseLayout>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
---
|
||||
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"]
|
||||
---
|
||||
|
||||
export const image = {
|
||||
url: "/oui.jpg",
|
||||
alt: "oui oui oui",
|
||||
width: "394",
|
||||
height: "512",
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
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,7 +1,4 @@
|
|||
{
|
||||
"{route}": "blog",
|
||||
"pageName": "Blog",
|
||||
"pageName{cool:'yes'}": "Blog cools",
|
||||
"pageName{cool:'no'}": "Blog nuls",
|
||||
"trad": "hello english"
|
||||
"pageName": "Articles",
|
||||
"subtitle": "I blog, sometimes."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
{
|
||||
"pageName": "Articles",
|
||||
"pageName{cool:'yes'}": "Articles cools",
|
||||
"pageName{cool:'no'}": "Articles nuls",
|
||||
"trad": "slt sava"
|
||||
"subtitle": "Je blog, un peu."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
---
|
||||
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`);
|
||||
const allPosts = await Astro.glob(`../../data/articles/**/*.mdx`);
|
||||
const localizedPost = allPosts.filter((post) => {
|
||||
return post.frontmatter.lang === currentLocale;
|
||||
return post.frontmatter.lang === astroI18n.langCode;
|
||||
});
|
||||
|
||||
const pageTitle = t("index.articles.pageName");
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<h2>{t("index.articles.pageName", { cool: "yes" }, "fr")}</h2>
|
||||
<p>{t("index.articles.trad")}</p>
|
||||
<h2>{t("index.articles.pageName")}</h2>
|
||||
<p>{t("index.articles.subtitle")}</p>
|
||||
<ul>
|
||||
{
|
||||
localizedPost.map((post) => (
|
||||
<li>
|
||||
<ContentPost url={post.url} title={post.frontmatter.title} />
|
||||
<a href={l(`/articles/${post.frontmatter.slug}`)}>
|
||||
{post.frontmatter.title}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
layout: ../../layouts/MarkdownPostLayout.astro
|
||||
title: My Second Blog Post
|
||||
author: Astro Learner
|
||||
description: "After learning some Astro, I couldn't stop!"
|
||||
image:
|
||||
url: "/hackerman.png"
|
||||
alt: "hack"
|
||||
width: 1920
|
||||
height: 1080
|
||||
pubDate: 2022-07-08
|
||||
tags: ["astro", "blogging", "learning in public", "successes"]
|
||||
---
|
||||
|
||||
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
layout: ../../layouts/MarkdownPostLayout.astro
|
||||
title: Special tag
|
||||
author: Astro Learner
|
||||
pubDate: 2022-07-08
|
||||
tags: ["nicool"]
|
||||
---
|
||||
|
||||
That's it bb
|
||||
|
||||
```html
|
||||
<main>
|
||||
<header></header>
|
||||
</main>
|
||||
```
|
||||
9
src/pages/en/articles/[slug].astro
Normal file
9
src/pages/en/articles/[slug].astro
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import Page from "../../articles/[slug].astro"
|
||||
|
||||
export { getStaticPaths } from "../../articles/[slug].astro"
|
||||
|
||||
const { props } = Astro
|
||||
---
|
||||
|
||||
<Page {...props} />
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"title": "Crafting <a href='#methodology' clean-link>sober and accessible</a> <span class='highlight'>websites</span>",
|
||||
"subtitle": "Learn more about…",
|
||||
"quoi": "I design <strong>websites</strong> and <strong>web applications</strong> following <a href='https://www.a11yproject.com/' title='A11y project’s website (new window)' target='_blank' rel='noreferer noopener' >accessibility</a> best practices.",
|
||||
"comment": "More precisely, I create web and mobile interfaces. From UX to UI, from development to deployment. I put digital accessibility standards, for which I have obtained the <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='My Opquast certificate (new window)' target='_blank' rel='noreferer noopener'>Opquast certification</a>, forwards. I also keep <a href='https://en.wikipedia.org/wiki/Ecological_design' title='eco-design definition (new window)' target='_blank' rel='noreferer noopener'>eco-design</a> in mind when working.",
|
||||
"opensource": "I try to contribute to <a class='u-nice-links' href='https://git.nardu.in/explore/repos' title='Open source projects I worked on (new window)' target='_blank' rel='noreferer noopener'>open source projects</a> that I enjoy.",
|
||||
"articles": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
|
||||
"projetsRecents": "Latest projects",
|
||||
"articlesRecents": "Latest articles"
|
||||
"writing": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
|
||||
"latestProjects": "Latest projects",
|
||||
"latestArticles": "Latest articles"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"title": "Création de <span class='highlight'>sites web</span> <a href='/articles/faq' clean-link>sobres et accessibles</a>",
|
||||
"subtitle": "Apprenez-en plus sur…",
|
||||
"quoi": "Je crée des <strong>sites</strong> et des <strong>applications web</strong> en suivant les bonnes pratiques <a href='https://access42.net/decouvrir-accessibilite' title='Définition selon Access42 (nouvelle fenêtre)' target='_blank' rel='noreferer noopener' >d’accessibilités</a>.",
|
||||
"comment": "Plus précisément, je crée des interfaces web et mobiles. De l’ergonomie jusqu’au design final, de l’intégration jusqu’à la mise en ligne. Je mets en avant les standards d’accessibilité numérique, pour lesquels j’ai obtenu la <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='Certificat Opquast personnel (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>certification Opquast</a>. Je m’inscris également dans une démarche <a href='https://www.ademe.fr/expertises/consommer-autrement/passer-a-laction/ameliorer-pratiques/lecoconception' title='Définition de l’ADEME (nouvelle fenêtre)' rel='noopener noreferer'>d’éco-conception</a> des services que je propose.",
|
||||
"opensource": "J’essaie de contribuer à des <a href='https://git.nardu.in/explore/repos' title='Projets sur lesquels j’ai travaillé (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>projets open source</a> qui me tiennent à cœur.",
|
||||
"articles": "Ah et j’écris <a href='/articles/'>des articles</a> aussi ! Des articles sur le graphisme et l’informatique.",
|
||||
"projetsRecents": "Derniers projets",
|
||||
"articlesRecents": "Derniers articles"
|
||||
"writing": "Ah et j’écris <a href='/articles/'>des articles</a> aussi ! Des articles sur le graphisme et l’informatique.",
|
||||
"latestProjects": "Derniers projets",
|
||||
"latestArticles": "Derniers articles"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,171 @@
|
|||
---
|
||||
import { t, l } from "astro-i18n";
|
||||
// init i18n
|
||||
import { l, t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
|
||||
// import stuff
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import QuickAccessCard from "../components/QuickAccessCard.astro";
|
||||
import CardEditorial from "../components/CardEditorial.astro";
|
||||
import ListCards from "../components/ListCards.astro";
|
||||
|
||||
const pageTitle = t("accueil");
|
||||
|
||||
// get all HP sections
|
||||
const allSections = await Astro.glob("../data/HP/**/*.md");
|
||||
// only keep the right locale version
|
||||
const localizedSections = allSections.filter((section) => {
|
||||
return section.frontmatter.lang === astroI18n.langCode;
|
||||
});
|
||||
|
||||
// get all articles
|
||||
const allArticles = await Astro.glob("../data/articles/**/*.{md,mdx}");
|
||||
// only keep the right locale version
|
||||
const localizedArticles = allArticles.filter((article) => {
|
||||
return article.frontmatter.lang === astroI18n.langCode;
|
||||
});
|
||||
// sort articles by descending publication date
|
||||
const sortedArticles = localizedArticles.sort(
|
||||
(a, b) => b.frontmatter.pubDate - a.frontmatter.pubDate
|
||||
);
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<h1 set:html={t("index.title")}></h1>
|
||||
<section class="region intro">
|
||||
<h1 set:html={t("index.title")} />
|
||||
<section class="quick-access">
|
||||
<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
|
||||
<ul class="quick-access__list" role="list">
|
||||
{
|
||||
localizedSections.map((section) => (
|
||||
<li>
|
||||
<QuickAccessCard item={section.frontmatter} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{
|
||||
localizedSections.map((section) => (
|
||||
<section id={section.frontmatter.id} class="region section">
|
||||
<div class="section__container">
|
||||
<div class="flow section__content">
|
||||
<section.Content />
|
||||
</div>
|
||||
<div class="section__image">
|
||||
<img
|
||||
src={section.frontmatter.image}
|
||||
width="400"
|
||||
height="350"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
}
|
||||
|
||||
<section class="latest">
|
||||
<div class="latest__work">
|
||||
<h2>{t("index.latestArticles")}</h2>
|
||||
<ListCards list={sortedArticles} routeName={t("article.titre")} />
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
/* INTRO */
|
||||
.intro {
|
||||
position: relative;
|
||||
}
|
||||
.intro::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
left: -10%;
|
||||
max-width: 100vw;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-light-blue);
|
||||
}
|
||||
.intro h1 {
|
||||
font-size: clamp(3.25rem, calc(1.92rem + 6.67vw), 6.25rem);
|
||||
text-align: center;
|
||||
}
|
||||
.intro h1 :global(a) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: auto;
|
||||
text-decoration-color: var(--color-brique);
|
||||
text-decoration-thickness: 6px;
|
||||
}
|
||||
.intro h1 :global(a:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
.intro__subtitle {
|
||||
margin: var(--space-s-m) 0;
|
||||
font-family: "wotfard";
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: var(--color-dark-blue);
|
||||
}
|
||||
.quick-access {
|
||||
margin-top: var(--space-xl-2xl);
|
||||
container-type: inline-size;
|
||||
container-name: intro;
|
||||
}
|
||||
.quick-access__list {
|
||||
margin: var(--space-l-xl) auto 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: var(--space-m-l);
|
||||
}
|
||||
.quick-access__list > li {
|
||||
flex-grow: 1;
|
||||
flex-basis: 240px;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
container-name: section;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.section__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-m-l);
|
||||
}
|
||||
|
||||
.section :global(h2) {
|
||||
font-size: var(--size-3);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
.section :global(h3) {
|
||||
font-size: var(--size-1);
|
||||
}
|
||||
|
||||
@container section (min-width: 50rem) {
|
||||
.section__container {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.section__image {
|
||||
order: 1;
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
flex-grow: 1;
|
||||
flex-basis: 18rem;
|
||||
}
|
||||
.section__content {
|
||||
order: 2;
|
||||
flex-basis: 0;
|
||||
min-width: 40ch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import rss from '@astrojs/rss';
|
||||
|
||||
export const get = () => rss({
|
||||
title: 'Nicolas Arduin | Articles',
|
||||
description: 'Je blog un peu',
|
||||
site: 'https://www.nardu.in',
|
||||
items: import.meta.glob('./**/*.md'),
|
||||
customData: `<language>fr-fr</language>`,
|
||||
});
|
||||
|
|
@ -3,7 +3,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
|
|||
import ContentPost from "../../components/ContentPost.astro";
|
||||
|
||||
export async function getStaticPaths({}) {
|
||||
const allPosts = await Astro.glob("../articles/*.mdx");
|
||||
const allPosts = await Astro.glob("../../data/**/*.mdx");
|
||||
const uniqueTags = [
|
||||
...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
|
||||
const pageTitle = "Tag Index";
|
||||
const allPosts = await Astro.glob("../articles/*.mdx");
|
||||
const allPosts = await Astro.glob("../../data/**/*.mdx");
|
||||
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue