cleanup and refactor i18n + code
This commit is contained in:
parent
65c6003313
commit
703d1d7f08
SSH Key Fingerprint:
SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
@ -4,11 +4,11 @@ export default new Map([
|
||||
["src/content/articles/en/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/en/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/en/video-compression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fvideo-compression.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/en/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fimage-full.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/en/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/fr/buttons.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fbuttons.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/fr/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fimage-full.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/fr/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fsuper-cookies.mdx&astroContentModuleFlag=true")]]);
|
||||
["src/content/fragments/fr/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/en/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fimage-full.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/fragments/en/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
|
||||
["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")]]);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,25 +1,30 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import { defineConfig } from 'astro/config'
|
||||
|
||||
import { transformerMetaHighlight } from '@shikijs/transformers'
|
||||
|
||||
// https://astro.build/config
|
||||
import mdx from "@astrojs/mdx";
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import mdx from '@astrojs/mdx'
|
||||
import sitemap from '@astrojs/sitemap'
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://www.nardu.in",
|
||||
build: {
|
||||
format: "directory",
|
||||
},
|
||||
i18n: {
|
||||
locales: ["fr", "en"],
|
||||
defaultLocale: "fr",
|
||||
},
|
||||
image: {
|
||||
domains: ["assets.nardu.in"],
|
||||
remotePatterns: [{ protocol: "https" }],
|
||||
site: 'https://www.nardu.in',
|
||||
build: {
|
||||
format: 'directory'
|
||||
},
|
||||
integrations: [
|
||||
mdx(),
|
||||
sitemap(),
|
||||
],
|
||||
});
|
||||
i18n: {
|
||||
locales: ['fr', 'en'],
|
||||
defaultLocale: 'fr'
|
||||
},
|
||||
image: {
|
||||
domains: ['assets.nardu.in'],
|
||||
remotePatterns: [{ protocol: 'https' }]
|
||||
},
|
||||
integrations: [mdx(), sitemap()],
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: 'one-dark-pro',
|
||||
transformers: [transformerMetaHighlight()]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"sharp": "^0.33.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@shikijs/transformers": "^1.24.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"prettier": "^3.4.2",
|
||||
|
||||
@ -10,8 +10,6 @@ const { Content, headings } = await render(content)
|
||||
const toc = headings.map((heading) => {
|
||||
return heading
|
||||
})
|
||||
|
||||
import '../styles/vendor/one-dark-pro.css'
|
||||
---
|
||||
|
||||
<div class='sidebar region'>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
---
|
||||
import type { ArticleFrontmatter, FragmentFrontmatter } from '../content.config'
|
||||
|
||||
type Props = {
|
||||
item: ArticleFrontmatter | FragmentFrontmatter
|
||||
}
|
||||
|
||||
const { item } = Astro.props
|
||||
const locale: 'fr' | 'en' = item.frontmatter.lang
|
||||
const locale: 'fr' | 'en' = item.lang
|
||||
|
||||
let ui = {
|
||||
published: 'Publié le',
|
||||
@ -43,9 +49,9 @@ function rawDate(date: Date) {
|
||||
)
|
||||
}
|
||||
{
|
||||
formatDate(item.createdAt) != formatDate(item.updatedAt) &&
|
||||
!!item.createdAt &&
|
||||
!!item.updatedAt && (
|
||||
!!item.createdAt &&
|
||||
!!item.updatedAt &&
|
||||
formatDate(item.createdAt) != formatDate(item.updatedAt) && (
|
||||
<p class='meta__date'>
|
||||
{ui.updated} :
|
||||
<time datetime={rawDate(item.updatedAt)}>
|
||||
|
||||
@ -45,7 +45,7 @@ J'ai personnellement choisi de faire différemment. J'ai décidé d'utiliser un
|
||||
|
||||
### Le code
|
||||
|
||||
```css
|
||||
```css {1,4-6}
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
{
|
||||
"accueil": "home",
|
||||
"tagline": "Freelance web developer specialized in accessibility.",
|
||||
"copyright": "(re)Made with Astro",
|
||||
"contact": {
|
||||
"title": "contact",
|
||||
"email": "Send me an email (open in application).",
|
||||
"tel": "Call or text me (open in application).",
|
||||
"contenuVide": "Soon: really nice content."
|
||||
},
|
||||
"header": {
|
||||
"skipLink": "Skip to content",
|
||||
"mainNav": "Main menu",
|
||||
"homeLink": "Back to homepage"
|
||||
},
|
||||
"sitemap": "Site map",
|
||||
"prevNext": {
|
||||
"contenus": "Similar content",
|
||||
"precedent": "Previous",
|
||||
"suivant": "Next"
|
||||
},
|
||||
"article": {
|
||||
"titre": "articles",
|
||||
"tagline": "I blog, sometimes.",
|
||||
"published": "Published on {datetime|date(options)}"
|
||||
},
|
||||
"meta": {
|
||||
"publication": "Published on",
|
||||
"modification": "Last updated on",
|
||||
"credit": "Image by"
|
||||
},
|
||||
"fragments": {
|
||||
"titre": "snippets",
|
||||
"tagline": "School with Nicool."
|
||||
},
|
||||
"references": {
|
||||
"titre": "work",
|
||||
"slug": "work",
|
||||
"cta": "Visit website",
|
||||
"tagline": "Some work."
|
||||
},
|
||||
"veille": {
|
||||
"titre": "Around the web",
|
||||
"tagline": "Some links that interested me."
|
||||
},
|
||||
"erreur": {
|
||||
"introuvable": "Sorry, page not found.",
|
||||
"autre": "Oups… sorry about that.",
|
||||
"lienRetour": "Back to the home page"
|
||||
},
|
||||
"seo": {
|
||||
"meta": {
|
||||
"description": "Web developer specialized in accessibility and eco-design in Toulouse, France. Development of custom websites, RGAA compliance, maintenance, etc."
|
||||
},
|
||||
"article": {
|
||||
"title": "Articles",
|
||||
"description": "A few articles about graphic design and front-end development."
|
||||
},
|
||||
"code": {
|
||||
"title": "Snippets",
|
||||
"description": "Snippets of fresh, easy and accessible code."
|
||||
},
|
||||
"references": {
|
||||
"title": "Work",
|
||||
"description": "A few case studies I worked on as a front-end developer."
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
{
|
||||
"accueil": "accueil",
|
||||
"tagline": "Développeur web spécialisé en accessibilité.",
|
||||
"copyright": "(re)Fait avec Astro",
|
||||
"contact": {
|
||||
"title": "contact",
|
||||
"email": "Envoyez-moi un mail (ouverture du logiciel automatique).",
|
||||
"tel": "Contactez-moi par téléphone (ouverture du logiciel automatique)."
|
||||
},
|
||||
"contenuVide": "Bientôt ici : du contenu de qualité",
|
||||
"header": {
|
||||
"skipLink": "Accéder au contenu",
|
||||
"mainNav": "Menu principal",
|
||||
"homeLink": "Accueil du site"
|
||||
},
|
||||
"sitemap": "Plan du site",
|
||||
"prevNext": {
|
||||
"contenus": "Contenus similaires",
|
||||
"precedent": "Précédent",
|
||||
"suivant": "Suivant"
|
||||
},
|
||||
"article": {
|
||||
"titre": "articles",
|
||||
"tagline": "Je blog, un peu.",
|
||||
"published": "Publié le {datetime|date(options)}"
|
||||
},
|
||||
"meta": {
|
||||
"publication": "Publié le",
|
||||
"modification": "Mis à jour le",
|
||||
"credit": "Image par"
|
||||
},
|
||||
"fragments": {
|
||||
"titre": "fragments",
|
||||
"tagline": "Les tutos de Nico mdr."
|
||||
},
|
||||
"references": {
|
||||
"titre": "références",
|
||||
"slug": "references",
|
||||
"cta": "Consulter le site",
|
||||
"tagline": "Quelques références."
|
||||
},
|
||||
"veille": {
|
||||
"titre": "veille",
|
||||
"tagline": "Des liens, en vrac."
|
||||
},
|
||||
"erreur": {
|
||||
"introuvable": "Page introuvable",
|
||||
"autre": "Oups… désolé pour cette erreur.",
|
||||
"lienRetour": "Retour à l’accueil"
|
||||
},
|
||||
"seo": {
|
||||
"meta": {
|
||||
"description": "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."
|
||||
},
|
||||
"article": {
|
||||
"title": "Articles",
|
||||
"description": "Quelques articles sur le développement web front-end et l'informatique à Toulouse."
|
||||
},
|
||||
"code": {
|
||||
"title": "Fragments",
|
||||
"description": "Fragments de codes stylés, faciles et accessibles."
|
||||
},
|
||||
"references": {
|
||||
"title": "Références",
|
||||
"description": "Quelques travaux réalisés en tant que et développeur web front-end à Toulouse."
|
||||
}
|
||||
}
|
||||
}
|
||||
150
src/i18n/ui.ts
150
src/i18n/ui.ts
@ -1,150 +0,0 @@
|
||||
export const languages = {
|
||||
en: 'English',
|
||||
fr: 'Français'
|
||||
}
|
||||
|
||||
export const defaultLang = 'fr'
|
||||
|
||||
export const ui = {
|
||||
en: {
|
||||
accueil: 'home',
|
||||
tagline: 'Freelance web developer specialized in accessibility.',
|
||||
copyright: '(re)Made with Astro',
|
||||
contact: {
|
||||
title: 'contact',
|
||||
email: 'Send me an email (open in application).',
|
||||
tel: 'Call or text me (open in application).',
|
||||
contenuVide: 'Soon: really nice content.'
|
||||
},
|
||||
header: {
|
||||
skipLink: 'Skip to content',
|
||||
mainNav: 'Main menu',
|
||||
homeLink: 'Back to homepage'
|
||||
},
|
||||
sitemap: 'Site map',
|
||||
prevNext: {
|
||||
contenus: 'Similar content',
|
||||
precedent: 'Previous',
|
||||
suivant: 'Next'
|
||||
},
|
||||
article: {
|
||||
titre: 'articles',
|
||||
tagline: 'I blog, sometimes.',
|
||||
published: 'Published on {datetime|date(options)}'
|
||||
},
|
||||
meta: {
|
||||
publication: 'Published on',
|
||||
modification: 'Last updated on',
|
||||
credit: 'Image by'
|
||||
},
|
||||
fragments: {
|
||||
titre: 'snippets',
|
||||
tagline: 'School with Nicool.'
|
||||
},
|
||||
references: {
|
||||
titre: 'work',
|
||||
slug: 'work',
|
||||
cta: 'Visit website',
|
||||
tagline: 'Some work.'
|
||||
},
|
||||
veille: {
|
||||
titre: 'Around the web',
|
||||
tagline: 'Some links that interested me.'
|
||||
},
|
||||
erreur: {
|
||||
introuvable: 'Sorry, page not found.',
|
||||
autre: 'Oups… sorry about that.',
|
||||
lienRetour: 'Back to the home page'
|
||||
},
|
||||
seo: {
|
||||
meta: {
|
||||
description:
|
||||
'Web developer specialized in accessibility and eco-design in Toulouse, France. Development of custom websites, RGAA compliance, maintenance, etc.'
|
||||
},
|
||||
article: {
|
||||
title: 'Articles',
|
||||
description:
|
||||
'A few articles about graphic design and front-end development.'
|
||||
},
|
||||
code: {
|
||||
title: 'Snippets',
|
||||
description: 'Snippets of fresh, easy and accessible code.'
|
||||
},
|
||||
references: {
|
||||
title: 'Work',
|
||||
description: 'A few case studies I worked on as a front-end developer.'
|
||||
}
|
||||
}
|
||||
},
|
||||
fr: {
|
||||
accueil: 'accueil',
|
||||
tagline: 'Développeur web spécialisé en accessibilité.',
|
||||
copyright: '(re)Fait avec Astro',
|
||||
contact: {
|
||||
title: 'contact',
|
||||
email: 'Envoyez-moi un mail (ouverture du logiciel automatique).',
|
||||
tel: 'Contactez-moi par téléphone (ouverture du logiciel automatique).'
|
||||
},
|
||||
contenuVide: 'Bientôt ici : du contenu de qualité',
|
||||
header: {
|
||||
skipLink: 'Accéder au contenu',
|
||||
mainNav: 'Menu principal',
|
||||
homeLink: 'Accueil du site'
|
||||
},
|
||||
sitemap: 'Plan du site',
|
||||
prevNext: {
|
||||
contenus: 'Contenus similaires',
|
||||
precedent: 'Précédent',
|
||||
suivant: 'Suivant'
|
||||
},
|
||||
article: {
|
||||
titre: 'articles',
|
||||
tagline: 'Je blog, un peu.',
|
||||
published: 'Publié le {datetime|date(options)}'
|
||||
},
|
||||
meta: {
|
||||
publication: 'Publié le',
|
||||
modification: 'Mis à jour le',
|
||||
credit: 'Image par'
|
||||
},
|
||||
fragments: {
|
||||
titre: 'fragments',
|
||||
tagline: 'Les tutos de Nico mdr.'
|
||||
},
|
||||
references: {
|
||||
titre: 'références',
|
||||
slug: 'references',
|
||||
cta: 'Consulter le site',
|
||||
tagline: 'Quelques références.'
|
||||
},
|
||||
veille: {
|
||||
titre: 'veille',
|
||||
tagline: 'Des liens, en vrac.'
|
||||
},
|
||||
erreur: {
|
||||
introuvable: 'Page introuvable',
|
||||
autre: 'Oups… désolé pour cette erreur.',
|
||||
lienRetour: 'Retour à l’accueil'
|
||||
},
|
||||
seo: {
|
||||
meta: {
|
||||
description:
|
||||
'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.'
|
||||
},
|
||||
article: {
|
||||
title: 'Articles',
|
||||
description:
|
||||
"Quelques articles sur le développement web front-end et l'informatique à Toulouse."
|
||||
},
|
||||
code: {
|
||||
title: 'Fragments',
|
||||
description: 'Fragments de codes stylés, faciles et accessibles.'
|
||||
},
|
||||
references: {
|
||||
title: 'Références',
|
||||
description:
|
||||
'Quelques travaux réalisés en tant que et développeur web front-end à Toulouse.'
|
||||
}
|
||||
}
|
||||
}
|
||||
} as const
|
||||
@ -1,37 +1,16 @@
|
||||
---
|
||||
import { createStaticPaths } from 'astro-i18n'
|
||||
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import EditorialContent from '../../components/EditorialContent.astro'
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
export const getStaticPaths = createStaticPaths(
|
||||
async ({ langCode }) => {
|
||||
const articles = await getCollection('articles', ({ data }) => {
|
||||
console.log(langCode)
|
||||
return data.lang === langCode
|
||||
})
|
||||
return articles.map((article) => ({
|
||||
params: { id: article.data.slug },
|
||||
props: { article }
|
||||
}))
|
||||
},
|
||||
import.meta.url
|
||||
)
|
||||
|
||||
// export async function getStaticPaths() {
|
||||
// const articles = await getCollection("articles", ({ data }) => {
|
||||
// console.log(astroI18n.langCode);
|
||||
// return data.lang === astroI18n.langCode;
|
||||
// });
|
||||
// console.log(articles);
|
||||
|
||||
// return articles.map((article) => ({
|
||||
// params: { slug: article.data.slug },
|
||||
// props: { article },
|
||||
// }));
|
||||
// }
|
||||
// 1. Generate a new path for every collection entry
|
||||
export async function getStaticPaths() {
|
||||
const articles = await getCollection('articles')
|
||||
return articles.map((article) => ({
|
||||
params: { id: article.data.slug },
|
||||
props: { article }
|
||||
}))
|
||||
}
|
||||
|
||||
const { article } = Astro.props
|
||||
---
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Articles",
|
||||
"subtitle": "I blog, sometimes."
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Articles",
|
||||
"subtitle": "Je blog, un peu."
|
||||
}
|
||||
@ -1,29 +1,42 @@
|
||||
---
|
||||
import { l, t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
|
||||
// New astro content collections
|
||||
import { getCollection } from "astro:content";
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import ListCards from "../../components/ListCards.astro";
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
import ListCards from '../../components/ListCards.astro'
|
||||
|
||||
const localizedPost = await getCollection("articles", ({ data }) => {
|
||||
return data.lang === astroI18n.langCode && !data.draft;
|
||||
});
|
||||
// sort articles by descending publication date
|
||||
const sortedArticles = localizedPost.sort(
|
||||
(a, b) => b.data.createdAt - a.data.createdAt
|
||||
);
|
||||
const frArticles = await getCollection('articles', ({ data }) => {
|
||||
return data.lang === 'fr' && !data.draft
|
||||
}).then((entries) =>
|
||||
// sort results
|
||||
entries.sort(
|
||||
(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
|
||||
)
|
||||
)
|
||||
const enArticles = await getCollection('articles', ({ data }) => {
|
||||
return data.lang === 'en' && !data.draft
|
||||
}).then((entries) =>
|
||||
// sort results
|
||||
entries.sort(
|
||||
(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
|
||||
)
|
||||
)
|
||||
|
||||
const pageTitle = t("index.articles.pageName");
|
||||
const pageTitle = 'Articles'
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<section class="region flow">
|
||||
<h1>{t("index.articles.pageName")}</h1>
|
||||
<h2>{t("index.articles.subtitle")}</h2>
|
||||
<ListCards list={sortedArticles} routeName={t("article.titre")} />
|
||||
<section class='region flow'>
|
||||
<h1>{pageTitle}</h1>
|
||||
<h2>Je blog, un peu.</h2>
|
||||
<section class='flow'>
|
||||
<h3>En français</h3>
|
||||
<ListCards list={frArticles} routeName='articles' />
|
||||
</section>
|
||||
<section class='flow' lang='en'>
|
||||
<h3>In english</h3>
|
||||
<ListCards list={enArticles} routeName='articles' />
|
||||
</section>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@ -31,14 +44,10 @@ const pageTitle = t("index.articles.pageName");
|
||||
.flow h2 + :global(*) {
|
||||
margin-block-start: var(--space-m-l);
|
||||
}
|
||||
h1 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
padding-inline-start: var(--space-xs-s);
|
||||
}
|
||||
h2 {
|
||||
color: var(--color-brique);
|
||||
}
|
||||
section + section {
|
||||
margin-block-start: var(--space-l-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,38 +1,21 @@
|
||||
---
|
||||
import { createStaticPaths } from 'astro-i18n'
|
||||
// import { astroI18n } from "astro-i18n";
|
||||
|
||||
import { getCollection } from 'astro:content'
|
||||
import EditorialContent from '../../components/EditorialContent.astro'
|
||||
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
|
||||
export const getStaticPaths = createStaticPaths(
|
||||
async ({ langCode }) => {
|
||||
const snippets = await getCollection('fragments', ({ data }) => {
|
||||
return data.lang === langCode
|
||||
})
|
||||
return snippets.map((snippet) => ({
|
||||
params: { id: snippet.data.slug },
|
||||
props: { snippet }
|
||||
}))
|
||||
},
|
||||
import.meta.url
|
||||
)
|
||||
// 1. Generate a new path for every collection entry
|
||||
export async function getStaticPaths() {
|
||||
const fragments = await getCollection('fragments')
|
||||
return fragments.map((fragment) => ({
|
||||
params: { id: fragment.data.slug },
|
||||
props: { fragment }
|
||||
}))
|
||||
}
|
||||
|
||||
// export async function getStaticPaths() {
|
||||
// const snippets = await getCollection("fragments", ({ data }) => {
|
||||
// return data.lang === astroI18n.langCode;
|
||||
// });
|
||||
// return snippets.map((snippet) => ({
|
||||
// params: { slug: snippet.data.slug },
|
||||
// props: { snippet },
|
||||
// }));
|
||||
// }
|
||||
|
||||
const { snippet } = Astro.props
|
||||
const { fragment } = Astro.props
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={snippet.data.title}>
|
||||
<EditorialContent content={snippet} />
|
||||
<BaseLayout pageTitle={fragment.data.title}>
|
||||
<EditorialContent content={fragment} />
|
||||
</BaseLayout>
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Snippets",
|
||||
"subtitle": "School with Nicool."
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Fragments",
|
||||
"subtitle": "Les tutos de Nico mdr."
|
||||
}
|
||||
@ -1,29 +1,42 @@
|
||||
---
|
||||
import { l, t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
|
||||
// New astro content collections
|
||||
import { getCollection } from "astro:content";
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import ListCards from "../../components/ListCards.astro";
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
import ListCards from '../../components/ListCards.astro'
|
||||
|
||||
const localizedPost = await getCollection("fragments", ({ data }) => {
|
||||
return data.lang === astroI18n.langCode && !data.draft;
|
||||
});
|
||||
// sort snippets by descending publication date
|
||||
const sortedPosts = localizedPost.sort(
|
||||
(a, b) => b.data.createdAt - a.data.createdAt
|
||||
);
|
||||
const frFragments = await getCollection('fragments', ({ data }) => {
|
||||
return data.lang === 'fr' && !data.draft
|
||||
}).then((entries) =>
|
||||
// sort results
|
||||
entries.sort(
|
||||
(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
|
||||
)
|
||||
)
|
||||
const enFragments = await getCollection('fragments', ({ data }) => {
|
||||
return data.lang === 'en' && !data.draft
|
||||
}).then((entries) =>
|
||||
// sort results
|
||||
entries.sort(
|
||||
(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
|
||||
)
|
||||
)
|
||||
|
||||
const pageTitle = t("index.fragments.pageName");
|
||||
const pageTitle = 'Fragments'
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<section class="region flow">
|
||||
<h1>{t("index.fragments.pageName")}</h1>
|
||||
<h2>{t("index.fragments.subtitle")}</h2>
|
||||
<ListCards list={sortedPosts} routeName={t("fragments.titre")} />
|
||||
<section class='region flow'>
|
||||
<h1>{pageTitle}</h1>
|
||||
<h2>Les tutos de Nico mdr</h2>
|
||||
<section class='flow'>
|
||||
<h3>En français</h3>
|
||||
<ListCards list={frFragments} routeName='fragments' />
|
||||
</section>
|
||||
<section class='flow' lang='en'>
|
||||
<h3>In english</h3>
|
||||
<ListCards list={enFragments} routeName='fragments' />
|
||||
</section>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@ -31,14 +44,10 @@ const pageTitle = t("index.fragments.pageName");
|
||||
.flow h2 + :global(*) {
|
||||
margin-block-start: var(--space-m-l);
|
||||
}
|
||||
h1 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
padding-inline-start: var(--space-xs-s);
|
||||
}
|
||||
h2 {
|
||||
color: var(--color-brique);
|
||||
}
|
||||
section + section {
|
||||
margin-block-start: var(--space-l-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
{
|
||||
"title": "Crafting <a href='#methodology' class='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.",
|
||||
"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",
|
||||
"allProjects": "All projects",
|
||||
"allArticles": "Browse all articles",
|
||||
"latestSnippets": "Latest snippets",
|
||||
"allSnippets": "Browse all snippets",
|
||||
"toc": "table of content"
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
{
|
||||
"title": "Création de <span class='highlight'>sites web</span> <a href='/articles/faq' class='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.",
|
||||
"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",
|
||||
"allProjects": "Tous les projets",
|
||||
"allArticles": "Consulter tous les articles",
|
||||
"latestSnippets": "Derniers fragments",
|
||||
"allSnippets": "Consulter tous les fragments",
|
||||
"toc": "table des matières"
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Work",
|
||||
"subtitle": "Some fine websites right here."
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Références",
|
||||
"subtitle": "Des sites web de qualité."
|
||||
}
|
||||
@ -1,29 +1,24 @@
|
||||
---
|
||||
import { l, t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
// New astro content collections
|
||||
import { getCollection } from "astro:content";
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
import ListCards from '../../components/ListCards.astro'
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import ListCards from "../../components/ListCards.astro";
|
||||
const allReferences = await getCollection('references').then((entries) =>
|
||||
// sort results
|
||||
entries.sort(
|
||||
(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
|
||||
)
|
||||
)
|
||||
|
||||
const localizedPost = await getCollection("references", ({ data }) => {
|
||||
return data.lang === astroI18n.langCode && !data.draft;
|
||||
});
|
||||
// sort references by descending publication date
|
||||
const sortedReferences = localizedPost.sort(
|
||||
(a, b) => b.data.createdAt - a.data.createdAt
|
||||
);
|
||||
|
||||
const pageTitle = t("index.references.pageName");
|
||||
const pageTitle = 'Références'
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<section class="region flow">
|
||||
<h1>{t("index.references.pageName")}</h1>
|
||||
<h2>{t("index.references.subtitle")}</h2>
|
||||
<ListCards list={sortedReferences} routeName={t("references.slug")} />
|
||||
<section class='region flow'>
|
||||
<h1>{pageTitle}</h1>
|
||||
<h2>Des sites web de qualité.</h2>
|
||||
<ListCards list={allReferences} routeName='references' />
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
@ -31,13 +26,6 @@ const pageTitle = t("index.references.pageName");
|
||||
.flow h2 + :global(*) {
|
||||
margin-block-start: var(--space-m-l);
|
||||
}
|
||||
h1 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
padding-inline-start: var(--space-xs-s);
|
||||
}
|
||||
h2 {
|
||||
color: var(--color-brique);
|
||||
}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "External stuff",
|
||||
"subtitle": "Links, articles, videos…"
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"pageName": "Veille",
|
||||
"subtitle": "Des liens, des articles, des vidéos… en vrac."
|
||||
}
|
||||
@ -1,34 +1,35 @@
|
||||
---
|
||||
import { t, astroI18n } from "astro-i18n";
|
||||
astroI18n.init(Astro);
|
||||
import { getCollection, render } from 'astro:content'
|
||||
|
||||
const pageTitle = t("index.veille.pageName");
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro'
|
||||
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import MetaDate from "../../components/MetaDate.astro";
|
||||
const allVeille = await getCollection('veille').then(async (entries) => {
|
||||
return Promise.all(
|
||||
entries.map(async (entry) => {
|
||||
// render and return entry + content
|
||||
const { Content } = await render(entry)
|
||||
return {
|
||||
...entry,
|
||||
Content
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
// get all content
|
||||
const allSections = Object.values(
|
||||
import.meta.glob("../../data/veille/**/*.md", { eager: true })
|
||||
);
|
||||
// only keep the right locale version
|
||||
const localizedSections = allSections.filter((section) => {
|
||||
return section.frontmatter.lang === astroI18n.langCode;
|
||||
});
|
||||
const pageTitle = 'Veille'
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<section class="region flow">
|
||||
<section class='region flow'>
|
||||
<h1>{pageTitle}</h1>
|
||||
<p>{t("index.veille.subtitle")}</p>
|
||||
<p>Des liens, des articles, des vidéos… en vrac.</p>
|
||||
</section>
|
||||
|
||||
{
|
||||
localizedSections.map((section) => (
|
||||
<section class="flow content">
|
||||
<h2>{section.frontmatter.title}</h2>
|
||||
<MetaDate item={section.frontmatter} />
|
||||
<section.Content />
|
||||
allVeille.map(({ data, Content }) => (
|
||||
<section class='flow content'>
|
||||
<h2>{data.title}</h2>
|
||||
<Content />
|
||||
</section>
|
||||
))
|
||||
}
|
||||
|
||||
@ -79,13 +79,13 @@ hr.small {
|
||||
block-size: 2px;
|
||||
}
|
||||
|
||||
ul:not([role="list"]),
|
||||
ol:not([role="list"]) {
|
||||
ul:not([role='list']),
|
||||
ol:not([role='list']) {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
ul:not([role="list"]) > li + li,
|
||||
ol:not([role="list"]) > li + li {
|
||||
ul:not([role='list']) > li + li,
|
||||
ol:not([role='list']) > li + li {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
|
||||
@ -159,7 +159,7 @@ button[disabled] {
|
||||
text-decoration: none;
|
||||
}
|
||||
.nice-link::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
@ -204,24 +204,46 @@ blockquote code {
|
||||
|
||||
/* code highlight */
|
||||
|
||||
.content :not(pre) > code {
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.astro-code,
|
||||
code {
|
||||
font-size: var(--size--1);
|
||||
font-family: var(--font-code);
|
||||
}
|
||||
.astro-code {
|
||||
position: relative;
|
||||
border-radius: var(--radius-small);
|
||||
padding-block: var(--space-xs);
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
.content :not(pre) > code:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0px -1px;
|
||||
background: var(--color-light-grey);
|
||||
border-radius: 4px;
|
||||
z-index: -1;
|
||||
code {
|
||||
padding-inline: var(--space-s);
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
inline-size: fit-content;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content code[class*="language-"],
|
||||
.content pre[class*="language-"] {
|
||||
white-space: pre-wrap;
|
||||
.line {
|
||||
&.highlighted::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
inline-size: 100%;
|
||||
block-size: 1lh;
|
||||
inset-inline-start: 0;
|
||||
background-color: hsla(0, 0%, 80%, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user