mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
74 lines
2.5 KiB
Plaintext
74 lines
2.5 KiB
Plaintext
---
|
||
import type { CollectionEntry } from 'astro:content';
|
||
type Sketchnotes = CollectionEntry<'sketchnotes'>;
|
||
import { getCollection } from 'astro:content';
|
||
|
||
import { sortBySortKey } from '../utils';
|
||
|
||
import GridLayout from '../layouts/GridLayout.astro';
|
||
import Image from '../components/Image.astro';
|
||
import Link from '../components/Link.astro';
|
||
import PageTitle from '../components/PageTitle.astro';
|
||
import { Content as Intro } from '../text/sketchnotes/intro.mdx';
|
||
|
||
import { mapping } from '../mdx-components';
|
||
|
||
const allSketchnotes: Sketchnotes[] = 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 md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11 print:block"
|
||
>
|
||
<Intro components={mapping} />
|
||
</article>
|
||
|
||
<nav
|
||
aria-label="Sketchnotes"
|
||
class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
|
||
data-pagefind-ignore
|
||
>
|
||
<ol
|
||
class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px] print:block"
|
||
>
|
||
{
|
||
allSketchnotes.map(({ slug, data }: Sketchnotes) => (
|
||
<li
|
||
class:list={[
|
||
{
|
||
'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',
|
||
},
|
||
]}
|
||
>
|
||
<Link title={data.title} href={`/sketchnotes/${slug}/`}>
|
||
<Image
|
||
alt={data.title}
|
||
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"
|
||
loading="eager"
|
||
src={data.images[0].src}
|
||
/>
|
||
</Link>
|
||
</li>
|
||
))
|
||
}
|
||
</ol>
|
||
</nav>
|
||
</GridLayout>
|