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

v5 migration + remove i18n

Browse source
This commit is contained in:
nico 2024-12-29 12:33:22 +01:00
parent b7ce5b7f20
commit b2b6887fdf
Signed by: Nicolas
SSH key fingerprint: SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
84 changed files with 1258 additions and 1354 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/AstroImage.astro
View file

@ -1,45 +1,45 @@
---
import { Image, getImage } from "astro:assets";
import { Image, getImage } from 'astro:assets'
const { src, alt, width, height, ...attrs } = Astro.props;
const { src, alt, width, height, ...attrs } = Astro.props
// if h/w attributes are declared, use them. If not, use from the source file
const imgHeight = height ? height : src.height;
const imgWidth = width ? width : src.width;
const imgHeight = height ? height : src.height
const imgWidth = width ? width : src.width
// compute avif and webp format in order to use inside a <picture> element
const imgAvif = await getImage({
src: src,
format: "avif",
format: 'avif',
width: Number(imgWidth),
height: Number(imgHeight),
});
height: Number(imgHeight)
})
const imgWebp = await getImage({
src: src,
format: "webp",
format: 'webp',
// need Number() because sharp wants an integer and not a string for w/h
width: Number(imgWidth),
height: Number(imgHeight),
});
height: Number(imgHeight)
})
---
<picture>
<source
srcset={imgAvif.src}
sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
type="image/avif"
type='image/avif'
/>
<source
srcset={imgWebp.src}
sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
type="image/webp"
type='image/webp'
/>
<Image
src={src}
width={Number(imgWidth)}
height={Number(imgHeight)}
format="jpg"
alt={alt ? alt : ""}
format='jpg'
alt={alt ? alt : ''}
{...attrs}
/>
</picture>

35
src/components/CardEditorial.astro
View file

@ -1,20 +1,19 @@
---
import ListTags from "./ListTags.astro";
import { l, t } from "astro-i18n";
import ListTags from './ListTags.astro'
const { item, routeName } = Astro.props;
const { item, routeName } = Astro.props
// no link on references cards
const isReference = routeName === t("references.slug");
const isReference = routeName === 'references'
---
<div class:list={["card", { "card--link": !isReference }]}>
<div class:list={['card', { 'card--link': !isReference }]}>
<h3>
{
!isReference ? (
<a
class="clean-link card__link"
href={`${l(`/${routeName}`)}/${item.data.permalink}`}
class='clean-link card__link'
href={`/${routeName}/${item.data.slug}`}
>
{item.data.title}
</a>
@ -27,15 +26,15 @@ const isReference = routeName === t("references.slug");
<ListTags list={item.data.tags} />
{
isReference && (
<a href={item.data.url} rel="noopener noreferer">
{t("references.cta")}
<span class="sr-only"> {item.data.title}</span>
<a href={item.data.url} rel='noopener noreferer'>
Consulter le site
<span class='sr-only'> {item.data.title}</span>
</a>
)
}
</div>
<style define:vars={{ permalink: item.data.permalink }}>
<style define:vars={{ slug: item.data.slug }}>
.card {
padding: var(--space-s-m) var(--space-xs-s);
position: relative;
@ -56,14 +55,14 @@ const isReference = routeName === t("references.slug");
box-shadow: var(--shadow-elevation-high);
}
.card--link::after {
content: "";
content: '';
position: absolute;
inline-size: 30px;
block-size: 30px;
top: var(--space-m);
right: var(--space-s);
opacity: 0;
background-image: url("/assets/svg/arrow-right.svg");
background-image: url('/assets/svg/arrow-right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@ -82,7 +81,7 @@ const isReference = routeName === t("references.slug");
color: var(--color-brique);
}
.card--link::before {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@ -109,7 +108,7 @@ const isReference = routeName === t("references.slug");
color: var(--color-blue);
}
.card__link::after {
content: "";
content: '';
position: absolute;
inset: 0;
}
@ -121,10 +120,12 @@ const isReference = routeName === t("references.slug");
transition: transform 0.2s ease-in-out;
}
.card::after {
transition: opacity ease 0.2s, transform ease 0.2s;
transition:
opacity ease 0.2s,
transform ease 0.2s;
}
.card--link {
view-transition-name: var(--permalink);
view-transition-name: var(--slug);
}
h3 a {
transition: color ease 0.2s;

27
src/components/EditorialContent.astro
View file

@ -1,34 +1,33 @@
---
import { render } from "astro:content";
import { render } from 'astro:content'
import MetaDate from "./MetaDate.astro";
import TOC from "./TOC.astro";
import MetaDate from './MetaDate.astro'
import TOC from './TOC.astro'
const { content } = Astro.props;
const { Content, headings } = await render(content);
const { content } = Astro.props
const { Content, headings } = await render(content)
const toc = headings.map((heading) => {
return heading;
});
return heading
})
import "../styles/vendor/one-dark-pro.css";
import '../styles/vendor/one-dark-pro.css'
---
<div class="sidebar region">
<div class='sidebar region'>
<TOC toc={toc} />
<article class="flow editorial">
<article class='flow editorial'>
<h1>{content.data.title}</h1>
<p class="h3">{content.data.subtitle}</p>
<p class='h3'>{content.data.subtitle}</p>
<MetaDate item={content.data} />
<!-- <div class="flow content" set:html={html}> -->
<Content />
</article>
</div>
<style define:vars={{ permalink: content.data.permalink }}>
<style define:vars={{ slug: content.data.slug }}>
@media (prefers-reduced-motion: no-preference) {
article {
view-transition-name: var(--permalink);
view-transition-name: var(--slug);
}
}
.sidebar {

28
src/components/Footer.astro
View file

@ -1,23 +1,25 @@
---
import { l, t } from "astro-i18n";
---
<footer class="footer" role="contentinfo">
<section class="flow">
<footer class='footer' role='contentinfo'>
<section class='flow'>
<p>Nicolas Arduin</p>
<p>{t("tagline")}</p>
<ul class="flow" role="list">
<p>Développeur web spécialisé en accessibilité.</p>
<ul class='flow' role='list'>
<li>
<a href="mailto:contact@nardu.in" title={t("contact.email")}
<a
href='mailto:contact@nardu.in'
title='Envoyez-moi un mail (ouverture du logiciel automatique).'
>contact@nardu.in</a
>
</li>
<li>
<a href="tel:+33749464239" title={t("contact.tel")}>+337 49 46 42 39</a>
<a
href='tel:+33749464239'
title='Contactez-moi par téléphone (ouverture du logiciel automatique)'
>+337 49 46 42 39</a
>
</li>
<li><a href={l("/veille")}>{t("veille.titre")}</a></li>
<li><a href={l("/plan-du-site")}>{t("sitemap")}</a></li>
<li><a href={`${l("/")}rss.xml`}>RSS</a></li>
<li><a href='/veille'>Veille</a></li>
<li><a href='/plan-du-site'>Plan du site</a></li>
<li><a href='/"rss.xml'>RSS</a></li>
</ul>
</section>
</footer>

24
src/components/Head.astro
View file

@ -1,17 +1,19 @@
---
import { t } from "astro-i18n";
const { pageTitle } = Astro.props;
const { pageTitle } = Astro.props
---
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>{pageTitle} - Nicolas Arduin</title>
<meta name="description" content={t("seo.meta.description")} />
<meta name="robots" content="index,follow." />
<meta name="author" content="Nicolas Arduin" />
<meta name="subject" content="Développement de sites web, accessibilité." />
<meta name="view-transition" content="same-origin" />
<meta
name='description'
content='Développeur web spécialisé en accessibilité numérique et éco-conception à Toulouse. Création de sites web sur mesure, mise en conformité RGAA, maintenance, etc.'
/>
<meta name='robots' content='index,follow.' />
<meta name='author' content='Nicolas Arduin' />
<meta name='subject' content='Développement de sites web, accessibilité.' />
<meta name='view-transition' content='same-origin' />
</head>

14
src/components/Header.astro
View file

@ -1,15 +1,11 @@
---
import { t, l } from "astro-i18n";
import Navigation from "../components/Navigation.astro";
import Navigation from '../components/Navigation.astro'
---
<header role="banner">
<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
<div class="container">
<a href={l("/")} class="logo clean-link" aria-label={t("header.homeLink")}
>nardu.in</a
>
<header role='banner'>
<a href='#skip-content' class='skip-link'>Accéder au contenu</a>
<div class='container'>
<a href='/' class='logo clean-link'>nardu.in</a>
<Navigation />
</div>
</header>

13
src/components/LangSwitcher.astro
View file

@ -1,13 +0,0 @@
---
import { languages } from '../i18n/ui'
---
<ul>
{
Object.entries(languages).map(([lang, label]) => (
<li>
<a href={`/${lang}/`}>{label}</a>
</li>
))
}
</ul>

8
src/components/ListCards.astro
View file

@ -1,13 +1,13 @@
---
const { list, routeName } = Astro.props;
const { list, routeName } = Astro.props
import CardEditorial from "./CardEditorial.astro";
import CardEditorial from './CardEditorial.astro'
---
<ul class="list" role="list">
<ul class='list' role='list'>
{
list.map((item) => (
<li class="list__item">
<li class='list__item'>
<CardEditorial item={item} routeName={routeName} />
</li>
))

7
src/components/ListTags.astro
View file

@ -1,12 +1,13 @@
---
const { list } = Astro.props;
const { list } = Astro.props
---
<ul class="tags-list" role="list">
<ul class='tags-list' role='list'>
{
list.map((tag, index) => (
<li>
{tag}{index + 1 < list.length && <span>, </span>}
{tag}
{index + 1 < list.length && <span>, </span>}
</li>
))
}

45
src/components/MetaDate.astro
View file

@ -1,26 +1,41 @@
---
import { t, astroI18n } from "astro-i18n";
astroI18n.init(Astro);
const { item } = Astro.props
const locale: 'fr' | 'en' = item.frontmatter.lang
const { item } = Astro.props;
let ui = {
published: 'Publié le',
updated: 'Mis à jour le'
}
function formatDate(date) {
const options = { year: "numeric", month: "long", day: "numeric" };
return new Date(date).toLocaleDateString(astroI18n.langCode, options);
switch (locale) {
case 'en':
ui = {
published: 'Published on',
updated: 'Last updated on'
}
break
}
function formatDate(date: Date) {
return new Date(date).toLocaleDateString(locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
})
}
// Needed because browser will transform the value to a readable english date in 'datetime' if not forced
// see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#attr-datetime for valid formats
function rawDate(date) {
return new Date(date).toISOString();
function rawDate(date: Date) {
return new Date(date).toISOString()
}
---
<div class="meta">
<div class='meta'>
{
!!item.createdAt && (
<p class="meta__date">
{t("meta.publication")}&nbsp;:
<p class='meta__date'>
{ui.published}&nbsp;:
<time datetime={rawDate(item.createdAt)}>
{formatDate(item.createdAt)}
</time>
@ -31,8 +46,8 @@ function rawDate(date) {
formatDate(item.createdAt) != formatDate(item.updatedAt) &&
!!item.createdAt &&
!!item.updatedAt && (
<p class="meta__date">
{t("meta.modification")}&nbsp;:
<p class='meta__date'>
{ui.updated}&nbsp;:
<time datetime={rawDate(item.updatedAt)}>
{formatDate(item.updatedAt)}
</time>
@ -41,8 +56,8 @@ function rawDate(date) {
}
{
!item.createdAt && !!item.updatedAt && (
<p class="meta__date">
{t("meta.modification")}&nbsp;:
<p class='meta__date'>
{ui.updated}&nbsp;:
<time datetime={rawDate(item.updatedAt)}>
{formatDate(item.updatedAt)}
</time>

39
src/components/Navigation.astro
View file

@ -1,37 +1,24 @@
---
import { t, l } from "astro-i18n";
import LanguageSwitcher from "./LangSwitcher.astro";
---
<nav role="navigation" aria-label={t("header.mainNav")}>
<ul class="main-nav" role="list">
<nav role='navigation' aria-label='Menu principal'>
<ul class='main-nav' role='list'>
<li>
<a href={l("/articles")} class="clean-link nice-link"
>{t("article.titre")}&nbsp;</a
>
<span aria-hidden="true">&middot;</span>
<a href='/articles' class='clean-link nice-link'>Articles&nbsp;</a>
<span aria-hidden='true'>&middot;</span>
</li>
<li>
<a href={l("/fragments")} class="clean-link nice-link"
>{t("fragments.titre")}&nbsp;</a
>
<span aria-hidden="true">&middot;</span>
<a href='/fragments' class='clean-link nice-link'>Fragments&nbsp;</a>
<span aria-hidden='true'>&middot;</span>
</li>
<li>
<a href={l("/references")} class="clean-link nice-link"
>{t("references.titre")}&nbsp;</a
>
<span aria-hidden="true">&middot;</span>
<a href='/references' class='clean-link nice-link'>Références&nbsp;</a>
<span aria-hidden='true'>&middot;</span>
</li>
<li>
<a
href="mailto:contact@nardu.in"
class="clean-link nice-link"
title={t("contact.email")}>{t("contact.title")}</a
><span aria-hidden="true">&nbsp;&#x7C;</span>
</li>
<li>
<LanguageSwitcher />
href='mailto:contact@nardu.in'
class='clean-link nice-link'
title='Envoyez-moi un mail (ouverture du logiciel automatique).'
>contact</a
>
</li>
</ul>
</nav>

20
src/components/QuickAccessCard.astro
View file

@ -1,19 +1,19 @@
---
const { item } = Astro.props;
const { item } = Astro.props
---
<div class="card">
<div class="card-container">
<div class="card__illustration">
<div class='card'>
<div class='card-container'>
<div class='card__illustration'>
<img
src={item.quickImage}
width="150"
height="150"
alt=""
aria-hidden="true"
width='150'
height='150'
alt=''
aria-hidden='true'
/>
</div>
<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
<a href={`#${item.uid}`} class='card__link clean-link'>{item.quickTitle}</a>
</div>
</div>
@ -52,7 +52,7 @@ const { item } = Astro.props;
text-decoration: none;
}
.card__link::after {
content: "";
content: '';
position: absolute;
inset: 0;
}

21
src/components/TOC.astro
View file

@ -1,13 +1,12 @@
---
import { t } from "astro-i18n";
const { toc } = Astro.props;
const { toc } = Astro.props
---
<aside class="table-of-content">
<details open="true">
<summary>{t("index.toc")}</summary>
<nav role="navigation" aria-label={t("index.toc")}>
<ol class="table-of-content__list" role="list">
<aside class='table-of-content'>
<details open='true'>
<summary id='toc-title'>Table des matières</summary>
<nav role='navigation' aria-labelledby='toc-title'>
<ol class='table-of-content__list' role='list'>
{
// loop over the toc
toc.map(
@ -17,14 +16,14 @@ const { toc } = Astro.props;
) =>
heading.depth === 2 ? (
<li>
<a href={`#${heading.slug}`} class="toc-2">
<a href={`#${heading.slug}`} class='toc-2'>
{heading.text}
</a>
</li> // if h3, set as inner ol > li
) : heading.depth === 3 ? (
<ol role="list">
<ol role='list'>
<li>
<a href={`#${heading.slug}`} class="toc-3">
<a href={`#${heading.slug}`} class='toc-3'>
{heading.text}
</a>
</li>
@ -70,7 +69,7 @@ const { toc } = Astro.props;
}
.table-of-content__list a::before {
content: "";
content: '';
position: absolute;
top: 50%;
left: 0;