mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
77 lines
2.5 KiB
Plaintext
77 lines
2.5 KiB
Plaintext
---
|
||
import cx from 'classnames';
|
||
|
||
import { getCollection } from 'astro:content';
|
||
|
||
import { sortBySortKey } from '../utils';
|
||
import { animation } from '../data/site';
|
||
|
||
import GridLayout from '../layouts/GridLayout.astro';
|
||
import PageTitle from '../components/PageTitle.astro';
|
||
import Picture from '../components/Picture.astro';
|
||
import { Link } from '../components';
|
||
import { Content as Intro } from '../text/sketchnotes/intro.mdx';
|
||
|
||
import { mapping } from '../mdx-components';
|
||
|
||
const allSketchnotes = await getCollection('sketchnotes');
|
||
allSketchnotes.sort(sortBySortKey);
|
||
|
||
const title = 'Sketchnotes';
|
||
const description = 'This is a collection of Sketchnotes I’ve drawn.';
|
||
---
|
||
|
||
<GridLayout title={title} description={description} grid="wide" backLink="/" class="grid" innerGrid>
|
||
<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
|
||
|
||
<article
|
||
class="col-start-1 col-end-17 grid print:block md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
|
||
{...animation}
|
||
>
|
||
<Intro components={mapping} />
|
||
</article>
|
||
|
||
<nav
|
||
class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
|
||
aria-label="Sketchnotes"
|
||
>
|
||
<ol
|
||
class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
|
||
>
|
||
{
|
||
allSketchnotes.map(({ slug, data }) => (
|
||
<li
|
||
class={cx({
|
||
'md:col-span-3 md:row-span-2':
|
||
data.images[0].aspectRatio > 1 && data.coverSize === 'small',
|
||
'md:col-span-2 md:row-span-3':
|
||
data.images[0].aspectRatio < 1 && data.coverSize === 'small',
|
||
'md:col-span-4 md:row-span-3':
|
||
data.images[0].aspectRatio > 1 && data.coverSize === 'medium',
|
||
'md:col-span-3 md:row-span-4':
|
||
data.images[0].aspectRatio < 1 && data.coverSize === 'medium',
|
||
'md:col-span-6 md:row-span-5':
|
||
data.images[0].aspectRatio > 1 && data.coverSize === 'large',
|
||
'md:col-span-5 md:row-span-6':
|
||
data.images[0].aspectRatio < 1 && data.coverSize === 'large',
|
||
})}
|
||
{...animation}
|
||
>
|
||
<Link title={data.title} href={`/sketchnotes/${slug}/`}>
|
||
<Picture
|
||
alt={data.title}
|
||
aspect={data.images[0].aspectRatio}
|
||
breakpoints={[500, 1000, 1500]}
|
||
class="h-full mbe-10 md:w-full md:object-cover md:!mbe-0 [&_img]:!block [&_img]:!h-full [&_img]:border-solid [&_picture]:!block [&_picture]:!h-full"
|
||
format={['avif']}
|
||
loading="eager"
|
||
src={data.images[0].src}
|
||
/>
|
||
</Link>
|
||
</li>
|
||
))
|
||
}
|
||
</ol>
|
||
</nav>
|
||
</GridLayout>
|