✨ Basic e-shop

src/lib/components/Masonry.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	export let items: any[] = []; // pass in data if it's dynamically updated
+
+	type GridItem = {
+		_el: HTMLElement;
+		gap: number;
+		items: HTMLElement[];
+		ncol: number;
+		mod: number;
+	};
+
+	let grids: GridItem[] = [];
+	let masonryElement: HTMLElement;
+
+	const refreshLayout = async () => {
+		masonryElement.querySelectorAll('img').forEach((img) => {
+			if (img.complete) {
+				img.classList.add('loaded');
+			}
+		});
+
+		grids.forEach(async (grid) => {
+			/* get the post relayout number of columns */
+			let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;
+
+			grid.items.forEach((c) => {
+				let new_h = c.getBoundingClientRect().height;
+
+				if (new_h !== Number(c.dataset.h)) {
+					c.dataset.h = String(new_h);
+					grid.mod++;
+				}
+			});
+
+			/* if the number of columns has changed */
+			if (grid.ncol !== ncol || grid.mod) {
+				/* update number of columns */
+				grid.ncol = ncol;
+				/* revert to initial positioning, no margin */
+				grid.items.forEach((c) => c.style.removeProperty('margin-top'));
+				/* if we have more than one column */
+				if (grid.ncol > 1) {
+					grid.items.slice(ncol).forEach((c, i) => {
+						let prev_fin =
+								grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */,
+							curr_ini = c.getBoundingClientRect().top; /* top edge of current item */
+
+						c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`;
+					});
+				}
+
+				grid.mod = 0;
+			}
+		});
+	};
+
+	const calcGrid = async (_masonryArr: HTMLElement[]) => {
+		await tick();
+		if (_masonryArr.length && getComputedStyle(_masonryArr[0]).gridTemplateRows !== 'masonry') {
+			grids = _masonryArr.map((grid) => {
+				return {
+					_el: grid,
+					gap: parseFloat(getComputedStyle(grid).rowGap),
+					items: [...(grid.childNodes as unknown as HTMLElement[])].filter(
+						(c) => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1
+					),
+					ncol: 0,
+					mod: 0
+				};
+			});
+			refreshLayout(); /* initial load */
+		}
+	};
+
+	$: if (masonryElement) {
+		calcGrid([masonryElement]);
+	}
+
+	$: if (items) {
+		// update if items are changed
+		masonryElement = masonryElement; // refresh masonryElement
+
+		if (masonryElement) {
+			const images = masonryElement.querySelectorAll('img');
+
+			images.forEach((img) => {
+				img.removeEventListener('load', refreshLayout);
+				img.addEventListener('load', refreshLayout);
+			});
+		}
+	}
+</script>
+
+<svelte:window on:resize={refreshLayout} on:load={refreshLayout} />
+
+<div bind:this={masonryElement} class="__grid--masonry">
+	<slot />
+</div>
+
+<!-- 
+$w: var(--col-width); // minmax(Min(20em, 100%), 1fr);
+$s: var(--grid-gap); // .5em;
+-->
+<style>
+	:global(.__grid--masonry) {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, var(--col-width, minmax(Min(20em, 100%), 1fr)));
+		grid-template-rows: masonry;
+		justify-content: start;
+		grid-gap: var(--grid-gap, 0.5em);
+	}
+
+	:global(.__grid--masonry > *) {
+		align-self: start;
+	}
+</style>

src/lib/server/db/index.ts

@@ -19,3 +19,4 @@ const products = createProductCollection(db);
 const { pictures, picturesFs } = createPictureCollections(db);
 
 export { client, db, pages, users, pictures, picturesFs, products };
+export const collections = { products, pictures };

src/routes/realisations/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+	import PictureComponent from '$lib/components/Picture.svelte';
+	import type { CreationsPage } from '$lib/types/Page';
+	import { marked } from 'marked';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const pageData = data.pageData as CreationsPage;
+	const pictures = data.pictures;
+
+	type PictureKey = keyof typeof pageData.pictures;
+
+	const picKeys = Object.keys(pageData.pictures).filter(
+		(key) => key.startsWith('realisation-') && pageData.pictures[key as PictureKey]
+	);
+</script>
+
+<Container>
+	<h1 class="text-4xl text-oxford mt-4">Nos réalisations</h1>
+
+	{#each picKeys as picKey, i}
+		<article
+			class="{i % 2
+				? 'bg-oxford'
+				: 'bg-sunray'} text-white text-lg md:h-xl my-16 flex flex-wrap md:flex-no-wrap rounded-3xl overflow-hidden"
+		>
+			<div class="grow h-full w-full md:w-3/6 basis-auto md:basis-0" class:md:order-last={i % 2}>
+				<PictureComponent
+					picture={pictures.find((p) => p._id === pageData.pictures[picKey])}
+					sizes="(max-width: 1024px) 50vw, 512px"
+					class="w-full h-full object-cover"
+				/>
+			</div>
+			<div class="grow basis-0 flex flex-col relative justify-center">
+				<div class="px-4 py-6">
+					{@html marked(pageData.text[picKey])}
+					<!-- svelte-ignore security-anchor-rel-noreferrer -->
+					<a
+						href="/photos/raw/{pictures.find((p) => p._id === pageData.pictures[picKey]).storage[0]
+							._id}"
+						class="underline"
+						target="_blank">Photo entière</a
+					>
+				</div>
+			</div>
+		</article>
+	{/each}
+</Container>

src/routes/vente/+page.server.ts

@@ -0,0 +1,22 @@
+import type { PageServerLoad } from './$types';
+import '$lib/server/db';
+import { collections } from '$lib/server/db';
+
+export const load: PageServerLoad = async () => {
+	const products = await collections.products.find({ state: { $ne: 'draft' } }).toArray();
+	const pictures = await collections.pictures
+		.find({ productId: { $in: products.map((p) => p._id) } })
+		.sort({ createdAt: 1 })
+		.toArray();
+
+	const byId = Object.fromEntries(products.map((p) => [p._id, p]));
+
+	for (const picture of pictures) {
+		byId[picture.productId!].photos = [...(byId[picture.productId!].photos || []), picture];
+	}
+
+	return {
+		published: products.filter((p) => p.state === 'published'),
+		retired: products.filter((p) => p.state === 'retired')
+	};
+};

src/routes/vente/+page.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+	import Masonry from '$lib/components/Masonry.svelte';
+	import Picture from '$lib/components/Picture.svelte';
+	import type { EshopPage } from '$lib/types/Page';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const pictures = data.pictures;
+	const pageData = data.pageData as EshopPage;
+
+	const { published, retired } = data;
+</script>
+
+<div class="h-full-without-banner w-full relative">
+	<Picture
+		picture={pictures.find((p) => p._id === pageData.pictures.background)}
+		class="h-full w-full object-cover absolute top-0 bottom-0 left-0 right-0 bg-brunswick text-white"
+		style="z-index: -1"
+	/>
+	<Container noPadding class="h-full flex flex-col items-stretch md:items-start">
+		<div class="grow basis-0" />
+		<div style="flex-grow: 2" class="basis-0 text-center md:px-8 xl:px-0">
+			<h1 class="text-7xl text-white text-center md:text-left">Découvrez <br />nos ventes</h1>
+			<a href="#produits" class="btn mt-10 inline-block">cliquez ici</a>
+		</div>
+	</Container>
+</div>
+
+<Container class="mb-4">
+	<h2 class="text-4xl text-oxford my-4" id="produits">Produits à la vente</h2>
+
+	<Masonry>
+		{#each published as product}
+			<a href="/vente/{product._id}" class="product">
+				<Picture picture={product.photos[0]} minStorage={1} class="picture mx-auto" />
+				<span class="name">{product.name}</span>
+				<span class="price text-right">{product.price} €</span>
+			</a>
+		{/each}
+		<!-- In case there is only one product. We don't want a product to take full row in desktop mode -->
+		<div />
+	</Masonry>
+</Container>
+
+<style>
+	.product {
+		display: grid;
+		gap: 0.5rem;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto auto;
+		grid-template-areas:
+			'picture picture'
+			'name price';
+	}
+
+	:global(.product > .picture) {
+		grid-area: picture;
+		max-height: 24rem;
+		max-width: 100%;
+	}
+
+	.product > .name {
+		grid-area: name;
+
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.product > .price {
+		grid-area: price;
+	}
+</style>