finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
fix: adjustments
+45
-33
+4
-2
astro.config.mjs
+4
-2
astro.config.mjs
···
12
12
adapter: deno(),
13
13
integrations: [preact(), icon()],
14
14
i18n: {
15
-
locales: ["en", "fr"],
16
-
defaultLocale: "fr",
15
+
locales: /** @type {string[]} */ (
16
+
/** @type {unknown} */ (config.locales)
17
+
),
18
+
defaultLocale: config.defaultLocale,
17
19
routing: {
18
20
prefixDefaultLocale: false,
19
21
},
+7
-24
src/components/pages/index.astro
+7
-24
src/components/pages/index.astro
···
2
2
import Layout from "@/layouts/Layout.astro";
3
3
import "@/assets/styles/index.css";
4
4
import { Icon } from "astro-icon/components";
5
-
import { projects as projectsMetadata } from "@/data/projects";
5
+
import { projects } from "@/data/projects";
6
+
import { locale } from "@/hooks/useLocale.astro";
6
7
7
8
interface Props {
8
9
content: {
···
19
20
title: string;
20
21
description: string;
21
22
};
22
-
projects: Array<{
23
-
id: string;
24
-
name: string;
25
-
description: string;
26
-
}>;
27
23
};
28
24
}
29
25
30
26
const {
31
-
content: { intro, languages, blogSection, projectsSection, projects },
27
+
content: { intro, languages, blogSection, projectsSection },
32
28
} = Astro.props;
33
-
34
-
// Merge project descriptions with metadata
35
-
const projectsWithMetadata = projects.map((proj) => {
36
-
const metadata = projectsMetadata.find((p) => p.id === proj.id);
37
-
if (!metadata) {
38
-
throw new Error(`Project metadata not found for id: ${proj.id}`);
39
-
}
40
-
return {
41
-
...metadata,
42
-
name: proj.name,
43
-
description: proj.description,
44
-
};
45
-
});
46
29
---
47
30
48
31
<Layout>
···
82
65
83
66
<section class="container content-projects">
84
67
{
85
-
projectsWithMetadata.map((project) => (
68
+
projects.map((project) => (
86
69
<div
87
70
class="project"
88
71
{...(project.colour && {
···
96
79
/>
97
80
<img
98
81
src={project.imgs.jpg.src}
99
-
alt={project.name}
82
+
alt={project.title[locale]}
100
83
/>
101
84
</picture>
102
85
<a href={`/projects/${project.slug}`} class="cover">
103
-
{project.name}
86
+
{project.title[locale]}
104
87
</a>
105
-
<p>{project.description}</p>
88
+
<p>{project.description[locale]}</p>
106
89
<ul>
107
90
{project.tags.map((tag: string) => (
108
91
<li class="tag">{tag}</li>
+2
-2
src/components/pages/project.astro
+2
-2
src/components/pages/project.astro
···
18
18
19
19
const { content } = Astro.props;
20
20
21
-
const project = projects.find((p) => p.id === content.projectId);
21
+
const project = projects.find((p) => p.slug === content.projectId);
22
22
if (!project) {
23
23
throw new Error(`Project not found: ${content.projectId}`);
24
24
}
···
44
44
</picture>
45
45
46
46
<div class="container">
47
-
<Icon name={project.dateIcon} />
47
+
<Icon name="tabler:brand-git" />
48
48
<span>
49
49
{content.datePrefix}
50
50
{project.startDate.toLocaleDateString(locale)}
+1
src/config.ts
+1
src/config.ts
+24
-5
src/data/projects.ts
+24
-5
src/data/projects.ts
···
4
4
import karrWebp from "@/assets/img/karr_demo.webp";
5
5
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
6
6
import blogWebp from "@/assets/img/finxol_blog_home.webp";
7
+
import recaroPitchJpg from "@/assets/img/viscircle_recaro_pitch.jpg";
8
+
import recaroPitchWebp from "@/assets/img/viscircle_recaro_pitch.webp";
9
+
import { config } from "@/config.ts";
10
+
11
+
type Localised = Record<(typeof config.locales)[number], string>;
7
12
8
13
export interface ProjectMetadata {
9
-
id: string;
10
14
slug: string;
15
+
title: Localised;
16
+
description: Localised;
11
17
imgs: {
12
18
jpg: ImageMetadata;
13
19
webp: ImageMetadata;
···
15
21
tags: string[];
16
22
colour?: string;
17
23
startDate: Date;
18
-
dateIcon: string;
19
24
runtime: string;
20
25
runtimeIcon: string;
21
26
repoUrl: string;
···
24
29
25
30
export const projects: ProjectMetadata[] = [
26
31
{
27
-
id: "karr",
28
32
slug: "karr",
33
+
title: {
34
+
fr: "Karr",
35
+
en: "Karr",
36
+
},
37
+
description: {
38
+
fr: "Plateforme de covoiturage fédérée pour les entreprises",
39
+
en: "Federated carpool platform for businesses",
40
+
},
29
41
imgs: {
30
42
jpg: karrJpg,
31
43
webp: karrWebp,
32
44
},
33
45
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
34
46
startDate: new Date("10 October 2024"),
35
-
dateIcon: "tabler:brand-git",
36
47
runtime: "NodeJS",
37
48
runtimeIcon: "tabler:brand-nodejs",
38
49
repoUrl: "https://github.com/karr-mobi/karr",
39
50
repoIcon: "tabler:brand-github",
40
51
},
41
52
{
42
-
id: "blog",
43
53
slug: "blog",
54
+
title: {
55
+
fr: "Blog Technique",
56
+
en: "Technical Blog",
57
+
},
58
+
description: {
59
+
fr:
60
+
"Blog personnel technique sur lequel j'écris des articles sur la technologie",
61
+
en: "Technical blog where I write articles about technology",
62
+
},
44
63
imgs: {
45
64
jpg: blogJpg,
46
65
webp: blogWebp,