From 9a70042506808948aad25f8c6def0b33251aba73 Mon Sep 17 00:00:00 2001 From: Florian Bouillon Date: Wed, 4 Oct 2023 17:14:26 +0200 Subject: [PATCH] feat: Move to the Picture Component Signed-off-by: Florian Bouillon --- src/assets/pages/404/404.light.svg | 1 + src/assets/pages/404/404.svg | 1 + src/components/Picture.astro | 88 ++++++++++++++++++++++++ src/components/Picture.astro.tmp | 42 ----------- src/components/global/Header.astro | 5 +- src/content/config.ts | 3 +- src/content/projects/fi3d/index.md | 7 ++ src/content/projects/studiomoto/index.md | 8 +++ src/pages/404.astro | 25 +++++++ src/pages/index.astro | 5 +- src/pages/projets/[project].astro | 9 ++- 11 files changed, 143 insertions(+), 51 deletions(-) create mode 100644 src/assets/pages/404/404.light.svg create mode 100644 src/assets/pages/404/404.svg create mode 100644 src/components/Picture.astro delete mode 100644 src/components/Picture.astro.tmp create mode 100644 src/pages/404.astro diff --git a/src/assets/pages/404/404.light.svg b/src/assets/pages/404/404.light.svg new file mode 100644 index 0000000..d06fd45 --- /dev/null +++ b/src/assets/pages/404/404.light.svg @@ -0,0 +1 @@ + diff --git a/src/assets/pages/404/404.svg b/src/assets/pages/404/404.svg new file mode 100644 index 0000000..9b5bfee --- /dev/null +++ b/src/assets/pages/404/404.svg @@ -0,0 +1 @@ + diff --git a/src/components/Picture.astro b/src/components/Picture.astro new file mode 100644 index 0000000..8855d84 --- /dev/null +++ b/src/components/Picture.astro @@ -0,0 +1,88 @@ +--- +import { getImage } from 'astro:assets' +import AstroUtils from '../libs/AstroUtils' +import { objectOmit } from '@dzeio/object-util' + +const formats = [ + 'avif', + 'webp' +] + +export interface Props extends Omit { + src: ImageMetadata | string + srcDark?: ImageMetadata | string + width?: number + height?: number +} + +type PictureResult = { + format: 'new' + formats: Array<{format: string, img: Awaited>}> + src: Awaited> +} | { + format: 'raw' + src: string +} + +interface Result { + light: PictureResult + dark?: PictureResult | undefined +} + +async function resolvePicture(image: ImageMetadata | string): Promise { + const ext = typeof image === 'string' ? image.substring(image.lastIndexOf('.')) : image.format + if (ext === 'svg') { + return { + format: 'raw', + src: typeof image === 'string' ? image : image.src + } + } + + const imageFormats: Array<{format: string, img: Awaited>}> = await Promise.all( + formats.map(async (it) => ({ + img: await getImage({src: Astro.props.src, format: it, width: Astro.props.width, height: Astro.props.height}), + format: it + })) + ) + + const orig = await getImage({src: Astro.props.src, format: ext, width: Astro.props.width, height: Astro.props.height}) + + return { + format: 'new', + formats: imageFormats, + src: orig + } +} + +const res = await AstroUtils.wrap(async () => { + return { + light: await resolvePicture(Astro.props.src), + dark: Astro.props.srcDark ? await resolvePicture(Astro.props.srcDark) : undefined + } +}) + +const props = objectOmit(Astro.props, 'src', 'srcDark', 'class') + +--- + +{res.light.format === 'new' && ( + + {res.light.formats.map((it) => ( + + ))} + + +) || ( + +)} + +{res.dark && res.dark.format === 'new' && ( + + {res.dark.formats.map((it) => ( + + ))} + + +) || (res.dark && ( + +))} diff --git a/src/components/Picture.astro.tmp b/src/components/Picture.astro.tmp deleted file mode 100644 index c06f65e..0000000 --- a/src/components/Picture.astro.tmp +++ /dev/null @@ -1,42 +0,0 @@ ---- -import { LocalImageProps, RemoteImageProps, getImage } from 'astro:assets' -import AstroUtils from '../libs/AstroUtils' -type ImageProps = LocalImageProps | RemoteImageProps -export type Props = ImageProps - -const res = await AstroUtils.wrap(async () => { - const image = Astro.props.src - const ext = typeof image === 'string' ? image.substring(image.lastIndexOf('.')) : image.format - if (ext === 'svg') { - return { - format: 'raw', - props: { - ...Astro.props, - src: typeof image === 'string' ? image : image.src - } - } - } - - const avif = await getImage({src: Astro.props.src, format: 'avif'}) - const webp = await getImage({src: Astro.props.src, format: 'webp'}) - const orig = await getImage({src: Astro.props.src, format: ext}) - - return { - format: 'new', - avif, - webp, - orig - } -}) - ---- - -{res.format === 'new' && ( - - - - - -) || ( - -)} diff --git a/src/components/global/Header.astro b/src/components/global/Header.astro index 040fe45..218c543 100644 --- a/src/components/global/Header.astro +++ b/src/components/global/Header.astro @@ -1,13 +1,12 @@ --- import Logo from 'assets/logo.svg' import LogoDark from 'assets/logo.dark.svg' -import { Image } from 'astro:assets' +import Picture from 'components/Picture.astro' ---
- Avior.me Logo - +
diff --git a/src/content/config.ts b/src/content/config.ts index 9808312..5044874 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -15,7 +15,8 @@ const projectsCollection = defineCollection({ }).optional(), disabled: z.string().optional(), created: z.date().optional(), - updated: z.date().optional() + updated: z.date().optional(), + techs: z.string().array().optional() }) }) const blogCollection = defineCollection({ diff --git a/src/content/projects/fi3d/index.md b/src/content/projects/fi3d/index.md index 30f7eb8..cdd40c0 100644 --- a/src/content/projects/fi3d/index.md +++ b/src/content/projects/fi3d/index.md @@ -7,6 +7,13 @@ link: image: ./og.png created: 2022-09-03 updated: 2023-07-02 +techs: + - NextJS + - Typescript + - Appwrite + - Scrapping + - Docker + - Stylus --- ![Logo de FI3D](./logo.svg) diff --git a/src/content/projects/studiomoto/index.md b/src/content/projects/studiomoto/index.md index 619324c..b2226be 100644 --- a/src/content/projects/studiomoto/index.md +++ b/src/content/projects/studiomoto/index.md @@ -6,6 +6,14 @@ link: image: ./og.png created: 2018-09-10 updated: 2021-04-29 +techs: + - NextJS + - Typescript + - MongoDB + - Firebase + - Symphony + - Docker + - Stylus --- ![Logo de Studiomoto](./logo.svg) diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..0ff708a --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,25 @@ +--- +import Layout from 'layouts/Layout.astro' +import I404 from 'assets/pages/404/404.svg' +import I404Light from 'assets/pages/404/404.light.svg' +import Button from 'components/global/Button.astro' +import ButtonLink from 'components/global/ButtonLink.astro' +import Picture from 'components/Picture.astro' +--- + + +
+

404 La page recherché n'existe pas :(

+ +
+ Retour à la page d'accueil + +
+
+ + + diff --git a/src/pages/index.astro b/src/pages/index.astro index b9c7edc..e054dc5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,6 +2,7 @@ import { getCollection } from 'astro:content' import { Image } from 'astro:assets' import Layout from 'layouts/Layout.astro' +import Picture from 'components/Picture.astro' const projects = await getCollection('projects') const clients = await Promise.all((await getCollection('clients')).map(async (it) => ({...it, obj: await it.render()}))) @@ -18,7 +19,7 @@ const clients = await Promise.all((await getCollection('clients')).map(async (it {projects.map((it) => ( {it.data.image && ( - + )}

{it.data.title}

 @@ -43,7 +44,7 @@ const clients = await Promise.all((await getCollection('clients')).map(async (it
{client.data.logo && ( - + ) || (
{client.data.title}
)} diff --git a/src/pages/projets/[project].astro b/src/pages/projets/[project].astro index 853a065..0d83707 100644 --- a/src/pages/projets/[project].astro +++ b/src/pages/projets/[project].astro @@ -1,5 +1,6 @@ --- import { getCollection } from 'astro:content'; +import Picture from 'components/Picture.astro' import Article from 'layouts/Article.astro' export const prerender = true @@ -11,16 +12,18 @@ export async function getStaticPaths() { })) } // 2. For your template, you can get the entry directly from the prop -const { entry } = Astro.props; +const { entry } = Astro.props as Awaited>[0]['props']; const { Content } = await entry.render(); ---

{entry.data.title}

- Sortie initial le {entry.data.created.toLocaleDateString('fr')} + {entry.data.created && ( + Sortie initial le {entry.data.created.toLocaleDateString('fr')} + )}

- +