feat: first version

Signed-off-by: Florian BOUILLON <f.bouillon@aptatio.com>

src/components/Favicon/Favicon.astro

@@ -0,0 +1,24 @@
+---
+import { getImage } from 'astro:assets'
+
+export interface Props {
+	svg: ImageMetadata
+	png: ImageMetadata
+	icoPath?: string
+}
+
+if (Astro.props.icoPath !== '/favicon.ico') {
+	console.warn('It is recommanded that the ICO file should be located at /favicon.ico')
+
+}
+
+const appleTouch = await getImage({src: Astro.props.png, width: 180, height: 180})
+---
+
+<>
+	<link rel="icon" href={Astro.props.icoPath ?? "/favicon.ico"} sizes="any">
+	<link rel="icon" href={Astro.props.svg.src} type="image/svg+xml">
+	<link rel="apple-touch-icon" href={appleTouch.src} />
+	<!-- Currently not integrated until I find a way to.  -->
+	<!-- <link rel="manifest" href="/site.webmanifest" /> -->
+</>

src/components/Favicon/Manifest.ts

@@ -0,0 +1,33 @@
+import { getImage } from 'astro:assets'
+
+export default class Manifest {
+	static async create(baseImage, options) {
+		const [
+			i192,
+			i512
+		] = await Promise.all([
+			getImage({src: baseImage, format: 'png', width: 192, height: 192}),
+			getImage({src: baseImage, format: 'png', width: 512, height: 512})
+		])
+		return JSON.stringify({
+			name: options.name,
+			short_name: options.name,
+			icons: [
+				{
+					src: i192.src,
+					sizes: "192x192",
+					type: "image/png"
+				},
+				{
+					src: i512.src,
+					sizes: "512x512",
+					type: "image/png"
+				}
+			],
+			theme_color: options.color ?? "#fff",
+			background_color: options.color ?? "#fff",
+			display: "standalone"
+		}
+		)
+	}
+}

src/components/Passthrough/Passthrough.astro

@@ -0,0 +1,4 @@
+---
+const json = JSON.stringify(Astro.props)
+---
+<script id="ASTRO_DATA" is:inline type="application/json" set:html={json}></script>

src/components/Passthrough/utils.ts

@@ -1,4 +1,3 @@
----
 /**
  * note: you MUST only pass simple items that can go in JSON format natively
  */
@@ -9,7 +8,3 @@ export function load<T extends {} = {}>(): T {
 	}
 	return JSON.parse(tag.innerText)
 }
-
-const json = JSON.stringify(Astro.props)
----
-<script id="ASTRO_DATA" is:inline type="application/json" set:html={json}></script>

src/components/Picture.astro.tmp

@@ -0,0 +1,42 @@
+---
+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' && (
+	<picture class:list={[res.orig!.attributes.class, Astro.props.class]}>
+		<source srcset={res.avif!.src} type="image/avif" />
+		<source srcset={res.webp!.src} type="image/webp" />
+		<img src={res.orig!.src} class="" {...res.orig!.attributes} />
+	</picture>
+) || (
+	<img {...res.props} />
+)}

src/components/README.md

@@ -0,0 +1,3 @@
+# Components
+
+Contains big elements that can be reused by themselve