added references page + references

This commit is contained in:
Nico 2023-04-19 18:24:40 +02:00
parent eb410418be
commit 50fdae2308
23 changed files with 297 additions and 41 deletions

View File

@ -1,10 +1,10 @@
type DefaultLangCode = "fr"
type SupportedLangCode = "en"
type LangCode = DefaultLangCode | SupportedLangCode
type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/" | "/plan-du-site"
type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/": undefined; "/plan-du-site": undefined; }
type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "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.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.allProjects" | "index.allArticles" | "index.latestSnippets" | "index.allSnippets" | "index.toc" | "contact.contenuVide"
type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | 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.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.allProjects": {} | undefined; "index.allArticles": {} | undefined; "index.latestSnippets": {} | undefined; "index.allSnippets": {} | undefined; "index.toc": {} | undefined; "contact.contenuVide": {} | undefined; }
type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/references" | "/" | "/plan-du-site"
type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/references": undefined; "/": undefined; "/plan-du-site": undefined; }
type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "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" | "references.titre" | "references.slug" | "references.cta" | "references.tagline" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.code.title" | "seo.code.description" | "seo.references.title" | "seo.references.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.references.pageName" | "index.references.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.allProjects" | "index.allArticles" | "index.latestSnippets" | "index.allSnippets" | "index.toc" | "contact.contenuVide"
type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | 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; "references.titre": {} | undefined; "references.slug": {} | undefined; "references.cta": {} | undefined; "references.tagline": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "seo.references.title": {} | undefined; "seo.references.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.references.pageName": {} | undefined; "index.references.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.allProjects": {} | undefined; "index.allArticles": {} | undefined; "index.latestSnippets": {} | undefined; "index.allSnippets": {} | undefined; "index.toc": {} | undefined; "contact.contenuVide": {} | undefined; }
declare module "astro-i18n" {
export * from "astro-i18n/"

58
.astro/types.d.ts vendored
View File

@ -324,6 +324,64 @@ declare module 'astro:content' {
collection: "fragments",
data: InferEntrySchema<"fragments">
} & { render(): Render[".md"] },
},
"references": {
"en/3w.md": {
id: "en/3w.md",
slug: "3w",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"en/natureo.md": {
id: "en/natureo.md",
slug: "natureo",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"en/parole-expression.md": {
id: "en/parole-expression.md",
slug: "parole-expression",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"en/rose-primaire.md": {
id: "en/rose-primaire.md",
slug: "rose-primaire",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"fr/3w.md": {
id: "fr/3w.md",
slug: "3w",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"fr/natureo.md": {
id: "fr/natureo.md",
slug: "natureo",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"fr/parole-expression.md": {
id: "fr/parole-expression.md",
slug: "parole-expression",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
"fr/rose-primaire.md": {
id: "fr/rose-primaire.md",
slug: "rose-primaire",
body: string,
collection: "references",
data: InferEntrySchema<"references">
} & { render(): Render[".md"] },
},
};

View File

@ -13,6 +13,7 @@ export default defineAstroI18nConfig({
"sci-hub-blocage": "sci-hub-unblock",
fragments: "snippets",
"plan-du-site": "sitemap",
references: "work",
},
},
});

View File

@ -1,20 +1,39 @@
---
import ListTags from "./ListTags.astro";
import { l, astroI18n } from "astro-i18n";
import { l, t } from "astro-i18n";
const { item, routeName } = Astro.props;
// no link on references cards
const isReference = routeName === t("references.slug");
---
<div class="card">
<div class:list={["card", { "card--link": !isReference }]}>
<div>
<h3>
<a
class="clean-link card__link"
href={`${l(`/${routeName}`)}/${item.slug}`}>{item.data.title}</a
>
{
!isReference ? (
<a
class="clean-link card__link"
href={`${l(`/${routeName}`)}/${item.slug}`}
>
{item.data.title}
</a>
) : (
<span>{item.data.title}</span>
)
}
</h3>
<h4>{item.data.subtitle}</h4>
<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>
)
}
</div>
</div>
@ -25,17 +44,20 @@ const { item, routeName } = Astro.props;
display: block;
block-size: 100%;
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-elevation-medium);
background-color: white;
}
.card:hover {
/*
* to be replaced with .card:has(a)
* when firefox supports it
*/
.card--link:hover {
box-shadow: var(--shadow-elevation-high);
}
.card:focus-within {
.card--link:focus-within {
box-shadow: var(--shadow-elevation-high);
}
.card::after {
.card--link::after {
content: "";
position: absolute;
inline-size: 30px;
@ -49,19 +71,19 @@ const { item, routeName } = Astro.props;
background-size: contain;
transform: translateX(1rem);
}
.card:hover::after,
.card:focus-within::after {
.card--link:hover::after,
.card--link:focus-within::after {
transform: translateX(0);
opacity: 1;
}
.card:hover h3 a {
.card--link:hover h3 a {
text-decoration: underline;
}
.card:hover h3 a,
.card:focus-within h3 a {
.card--link:hover h3 a,
.card--link:focus-within h3 a {
color: var(--color-brique);
}
.card::before {
.card--link::before {
content: "";
position: absolute;
top: 0;
@ -73,8 +95,8 @@ const { item, routeName } = Astro.props;
transform-origin: bottom;
background-color: var(--color-brique);
}
.card:hover::before,
.card:focus-within::before {
.card--link:hover::before,
.card--link:focus-within::before {
transform: scaleY(1);
transform-origin: top;
}

View File

@ -17,6 +17,12 @@ import LanguageSwitcher from "./LangSwitcher.astro";
>
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a href={l("/references")} class="clean-link nice-link"
>{t("references.titre")}</a
>
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a
href="mailto:contact@nardu.in"

View File

@ -34,8 +34,27 @@ const fragments = defineCollection({
}),
});
const references = defineCollection({
schema: z.object({
title: z.string(),
subtitle: z.string(),
url: z.string(),
lang: z.enum(["fr", "en"]),
tags: z.array(z.string()), // An array of strings
// Parse pubDate as a browser-standard `Date` object
createdAt: z.string().transform((str) => new Date(str)),
updatedAt: z
.string()
.transform((str) => new Date(str))
.optional(),
code: z.boolean().optional() || false,
draft: z.boolean().optional() || false,
}),
});
export const collections = {
// Don't forget 'quotes' for collection names containing dashes
articles,
fragments,
references,
};

View File

@ -0,0 +1,10 @@
---
title: 3w
subtitle: I wrote the doc!
url: https://3-w.fr
lang: en
slug: "3w"
excerpt: Développement web et compagnie.
tags: ["Front-end", "docs"]
createdAt: "2022-10-19T18:02:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Nature en Occitanie
subtitle: Sobriety is only natural.
url: https://www.natureo.org/
lang: en
slug: "natureo"
excerpt: Développement web et compagnie.
tags: ["Front-end", "accessibility", "sobriety", "CMS"]
createdAt: "2023-04-19T18:02:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Parole Expression
subtitle: A new website for the association.
url: https://www.paroleexpression.fr/
lang: en
slug: "parole-expression"
excerpt: Développement web et compagnie.
tags: ["Front-end", "sobriety", "CMS"]
createdAt: "2022-04-19T17:11:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Rose Primaire
subtitle: An agency we love.
url: https://roseprimaire.com/
lang: en
slug: "rose-primaire"
excerpt: Web dev and other things.
tags: ["Front-end", "accessibility", "sobriety", "CMS"]
createdAt: "2023-04-19T17:11:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: 3w
subtitle: J'ai fait de la doc!
url: https://3-w.fr
lang: fr
slug: "3w"
excerpt: Développement web et compagnie.
tags: ["Front-end", "documentation"]
createdAt: "2022-10-19T18:02:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Nature en Occitanie
subtitle: La sobriété au naturel.
url: https://www.natureo.org/
lang: fr
slug: "natureo"
excerpt: Développement web et compagnie.
tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
createdAt: "2023-04-19T18:02:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Parole Expression
subtitle: Un nouveau site pour l'association.
url: https://www.paroleexpression.fr/
lang: fr
slug: "parole-expression"
excerpt: Développement web et compagnie.
tags: ["Front-end", "éco-conception", "CMS"]
createdAt: "2022-04-19T17:11:00.000Z"
---

View File

@ -0,0 +1,10 @@
---
title: Rose Primaire
subtitle: Une agence comme on l'aime.
url: https://roseprimaire.com/
lang: fr
slug: "rose-primaire"
excerpt: Développement web et compagnie.
tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
createdAt: "2023-04-19T17:11:00.000Z"
---

View File

@ -27,3 +27,5 @@ When the project is larger, I call on talented partners who share the same value
- [Rose Primaire](https://roseprimaire.com/) for the monitoring and management of the project;
- [Sylvain Plantier](https://jedessinebien.com/) and/or [Benoît Etchevery](http://ben-etche.com/) for illustration and art direction.
[See some work here!](/en/work/)

View File

@ -27,3 +27,5 @@ Lorsque le projet est plus volumineux, je fais appel à des partenaires talentue
- [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet&nbsp;;
- [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
[Consultez quelques références ici&nbsp;!](/references/)

View File

@ -33,12 +33,11 @@
"titre": "snippets",
"tagline": "School with Nicool."
},
"projet": {
"titre": "projects",
"tagline": "Freelance work",
"references": {
"titre": "work",
"slug": "work",
"cta": "Visit website",
"lienTitle": "Website of",
"fenetre": "(new window)"
"tagline": "Some work."
},
"erreur": {
"introuvable": "Sorry, page not found.",
@ -50,13 +49,13 @@
"title": "Articles",
"description": "A few articles about graphic design and front-end development."
},
"projet": {
"title": "Projects",
"description": "Some of my work as a freelance web designer and developer."
},
"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."
}
}
}

View File

@ -33,12 +33,11 @@
"titre": "fragments",
"tagline": "Les tutos de Nico mdr."
},
"projet": {
"titre": "projets",
"tagline": "Mon travail en freelance",
"references": {
"titre": "références",
"slug": "references",
"cta": "Consulter le site",
"lienTitle": "Site web de",
"fenetre": "(nouvelle fenêtre)"
"tagline": "Quelques références."
},
"erreur": {
"introuvable": "Page introuvable",
@ -48,15 +47,15 @@
"seo": {
"article": {
"title": "Articles",
"description": "Quelques articles en tant que graphiste et développeur front-end à Toulouse."
},
"projet": {
"title": "Projets",
"description": "Mon travail en tant que graphiste et développeur front-end à Toulouse."
"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."
}
}
}

View File

@ -0,0 +1,9 @@
---
import Page from "../../travaux/[slug].astro"
export { getStaticPaths } from "../../travaux/[slug].astro"
const { props } = Astro
---
<Page {...props} />

View File

@ -0,0 +1,7 @@
---
import Page from "../../references/index.astro"
const { props } = Astro
---
<Page {...props} />

View File

@ -0,0 +1,4 @@
{
"pageName": "Work",
"subtitle": "Some fine websites right here."
}

View File

@ -0,0 +1,4 @@
{
"pageName": "Références",
"subtitle": "Des sites web de qualité."
}

View File

@ -0,0 +1,44 @@
---
import { l, t, astroI18n } from "astro-i18n";
astroI18n.init(Astro);
// New astro content collections
import { getCollection } from "astro:content";
import BaseLayout from "../../layouts/BaseLayout.astro";
import ListCards from "../../components/ListCards.astro";
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");
---
<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>
</BaseLayout>
<style>
.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);
}
</style>