kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace classnames with class:list

Browse Source
This commit is contained in:
Stefan Imhoff
2024-09-11 13:21:11 +02:00
parent 526fe22cda
commit c9461b356d
48 changed files with 535 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Backlink.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro tabindex clickarea umami classnames
import cx from 'classnames';
// Cspell:words astro tabindex clickarea umami
import { ArrowLeft } from './icons';
import Link from './Link.astro';
@@ -11,18 +9,16 @@ interface Props {
}
const { backLink, class: className, ...props } = Astro.props;
const classes = cx(
'col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1',
className
);
---
{
backLink && (
<Link
aria-label="Back to overview"
class={classes}
class:list={[
'col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 md:col-span-1 print:hidden',
className,
]}
data-umami-event="Back to overview"
href={backLink}
{...props}

17
src/components/Banner.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
summary?: string;
@@ -9,14 +7,15 @@ export interface Props {
}
const { class: className, open, summary, ...props } = Astro.props;
const classes = cx(
'rounded-2 bg-black/5 p-10 mbe-10 dark:bg-white/5 [&_p:last-of-type]:mbe-0',
className
);
---
<aside class={classes} {...props}>
<aside
class:list={[
'rounded-2 bg-black/5 p-10 mbe-10 dark:bg-white/5 [&_p:last-of-type]:mbe-0',
className,
]}
{...props}
>
{
summary ? (
<details open={open} class="group">

17
src/components/Blockquote.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import TextLink from './TextLink.astro';
interface Props {
@@ -12,14 +11,16 @@ interface Props {
}
const { author, class: className, lang = 'en', source, sourceUrl, ...props } = Astro.props;
const classes = cx(
'relative overflow-hidden mbe-12 mbs-12 mie-8 mis-8 pie-8 pis-8 md:mie-10 md:mis-10',
className
);
---
<blockquote lang={lang} class={classes} {...props}>
<blockquote
lang={lang}
class:list={[
'relative overflow-hidden mbe-12 mbs-12 mie-8 mis-8 pie-8 pis-8 md:mie-10 md:mis-10',
className,
]}
{...props}
>
<slot />
{
(author || source) && (

17
src/components/Book.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro tabindex classnames
import cx from 'classnames';
// Cspell:words astro tabindex
interface Props {
alt?: string;
class?: string;
@@ -9,13 +7,14 @@ interface Props {
}
const { alt = '', class: className, src, ...props } = Astro.props;
const classes = cx(
"image-shadow relative box-border grid h-auto max-w-[250px] shrink grow justify-self-center overflow-hidden align-bottom shadow-book before:absolute before:z-10 before:block before:h-full before:w-[0.5em] before:bg-gradient-to-r before:from-black/30 before:to-transparent before:shadow-book-before before:content-[''] before:rounded-is-1",
className
);
---
<div class={classes} tabindex={0}>
<div
class:list={[
"image-shadow relative box-border grid h-auto max-w-[250px] shrink grow justify-self-center overflow-hidden align-bottom shadow-book before:absolute before:z-10 before:block before:h-full before:w-[0.5em] before:bg-gradient-to-r before:from-black/30 before:to-transparent before:shadow-book-before before:content-[''] before:rounded-is-1",
className,
]}
tabindex={0}
>
<img alt={alt} src={src} {...props} />
</div>

2
src/components/Bookshelf.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro minmax classnames
// Cspell:words astro minmax
export interface Props {
[key: string]: any;
}

46
src/components/ColorSwatch.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro subheadline backface flippable classnames
import cx from 'classnames';
// Cspell:words astro subheadline backface flippable
import Subheadline from './Subheadline.astro';
import Text from './Text.astro';
@@ -12,25 +11,29 @@ interface Props {
}
const { class: className, color, title, description, ...props } = Astro.props;
const classes = cx(
'h-[100vw] max-h-[200px] w-full max-w-[300px] [perspective:500px]',
{ 'cursor-pointer': description },
className
);
const flipperClasses = cx(
'relative transition-transform duration-500 ease-in-out [transform-style:preserve-3d]'
);
const cardClasses = cx(
'absolute box-border h-[100vw] max-h-[200px] w-full max-w-[300px] rounded-25 bg-white shadow-book inline-start-0 block-start-0 [perspective:500px] [backface-visibility:hidden] dark:bg-black dark:border-[1px] dark:border-white/20'
);
---
<div class={classes} data-flippable={description ? 'true' : 'false'} {...props}>
<div class={flipperClasses}>
<div class={cx(cardClasses, 'z-10')} data-side="front">
<div
class:list={[
'h-[100vw] max-h-[200px] w-full max-w-[300px] [perspective:500px]',
{ 'cursor-pointer': description },
className,
]}
data-flippable={description ? 'true' : 'false'}
{...props}
>
<div
class:list={[
'relative transition-transform duration-500 ease-in-out [transform-style:preserve-3d]',
]}
>
<div
class:list={[
'absolute box-border h-[100vw] max-h-[200px] w-full max-w-[300px] rounded-25 bg-white shadow-book block-start-0 inline-start-0 [backface-visibility:hidden] [perspective:500px] dark:border-[1px] dark:border-white/20 dark:bg-black',
'z-10',
]}
data-side="front"
>
<div
class="border-be-solid min-h-[5rem] bg-white border-be-[1px] border-be-black/20 rounded-bs-25 dark:bg-black dark:border-be-white/20"
style={`background-color: ${color};`}
@@ -46,7 +49,10 @@ const cardClasses = cx(
{
description && (
<div
class={cx(cardClasses, 'plb-7 pli-6 [transform:rotateY(180deg)]')}
class:list={[
'absolute box-border h-[100vw] max-h-[200px] w-full max-w-[300px] rounded-25 bg-white shadow-book block-start-0 inline-start-0 [backface-visibility:hidden] [perspective:500px] dark:border-[1px] dark:border-white/20 dark:bg-black',
'plb-7 pli-6 [transform:rotateY(180deg)]',
]}
data-side="back"
>
<Text class="text-[15px]">{description}</Text>

8
src/components/DisplayBox.astro
View File

@@ -1,17 +1,13 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
[key: string]: any;
}
const { class: className, ...props } = Astro.props;
const classes = cx('[&_img]:bg-gray-100 [&_img]:p-10', className);
---
<div class={classes} {...props}>
<div class:list={['[&_img]:bg-gray-100 [&_img]:p-10', className]} {...props}>
<slot />
</div>

17
src/components/Divider.astro
View File

@@ -1,17 +1,16 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
interface Props {
class?: string;
}
const { class: className, ...props } = Astro.props;
const classes = cx(
'border-solid border-black/[0.1] mbe-14 mbs-14 border-bs-0 border-be-1 border-is-0 border-ie-0 dark:border-white/[0.1]',
className
);
---
<hr class={classes} {...props} />
<hr
class:list={[
'border-solid border-black/[0.1] mbe-14 mbs-14 border-be-1 border-bs-0 border-ie-0 border-is-0 dark:border-white/[0.1]',
className,
]}
{...props}
/>

19
src/components/Figure.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro fullsize classnames nowrap figcaption
import cx from 'classnames';
// Cspell:words astro fullsize nowrap figcaption
export interface Props {
caption?: string;
class?: string;
@@ -9,15 +7,16 @@ export interface Props {
}
const { class: className, caption, size = 'regular', ...props } = Astro.props;
const classes = cx(
'rounded-4 bg-white/50 p-8 mbe-13 mbs-0 mie-0 mis-0 dark:bg-black/80',
{ 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize' },
className
);
---
<figure class={classes} {...props}>
<figure
class:list={[
'rounded-4 bg-white/50 p-8 mbe-13 mbs-0 mie-0 mis-0 dark:bg-black/80',
{ 'figure-wide': size === 'wide', 'figure-fullsize': size === 'fullsize' },
className,
]}
{...props}
>
<div class="flex flex-wrap gap-6 md:flex-nowrap [&_div]:flex-grow">
<slot />
</div>

27
src/components/Flag.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames darkgrey
import cx from 'classnames';
// Cspell:words astro darkgrey
import Link from './Link.astro';
export interface Props {
@@ -11,16 +10,19 @@ export interface Props {
}
const { label, class: className, href, ...props } = Astro.props;
const classes = cx(
'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80',
className
);
---
{
href ? (
<Link class={classes} href={href} title={label} {...props}>
<Link
class:list={[
'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80',
className,
]}
href={href}
title={label}
{...props}
>
<span class="hidden" aria-hidden="true">
[
</span>
@@ -30,7 +32,14 @@ const classes = cx(
</span>
</Link>
) : (
<span class={classes} title={label} {...props}>
<span
class:list={[
'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80',
className,
]}
title={label}
{...props}
>
<span class="hidden" aria-hidden="true">
[
</span>

35
src/components/GalleryDetail.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import { animation, animationDelay } from '../data/site';
import Image from './Image.astro';
@@ -31,26 +29,29 @@ const imageLength = entry.data.images.length;
</div>
</div>
<div
class={cx(
'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 print:!bg-transparent',
class:list={[
'grid grow grid-cols-5 gap-x-[2vw] gap-y-gap bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 print:!bg-transparent',
{
'lg:pbs-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))]': imageLength > 1,
'lg:justify-items-center lg:items-center': imageLength === 1,
}
)}
'lg:items-center lg:justify-items-center': imageLength === 1,
},
]}
>
{
entry.data.images.map(({ src }: { src: string }, index: number) => (
<div
class={cx('col-span-full w-full !mbe-0 lg:col-span-3 lg:max-w-full', {
'justify-self-start lg:col-start-1':
randomPosition() === 'start' && imageLength > 1 && index > 0,
'justify-self-center lg:col-start-2':
randomPosition() === 'center' && imageLength > 1 && index > 0,
'justify-self-end lg:col-start-3':
randomPosition() === 'end' && imageLength > 1 && index > 0,
'lg:col-start-2': imageLength === 1 || index === 0,
})}
class:list={[
'col-span-full w-full !mbe-0 lg:col-span-3 lg:max-w-full',
{
'justify-self-start lg:col-start-1':
randomPosition() === 'start' && imageLength > 1 && index > 0,
'justify-self-center lg:col-start-2':
randomPosition() === 'center' && imageLength > 1 && index > 0,
'justify-self-end lg:col-start-3':
randomPosition() === 'end' && imageLength > 1 && index > 0,
'lg:col-start-2': imageLength === 1 || index === 0,
},
]}
{...animation}
>
<Image alt={entry.data.title} src={src} />

17
src/components/Headline.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames keyof
import cx from 'classnames';
// Cspell:words astro keyof
export interface Props {
as?: keyof astroHTML.JSX.IntrinsicElements;
class?: string;
@@ -9,13 +7,14 @@ export interface Props {
}
const { as: Tag = 'h2', class: className, children, ...props } = Astro.props;
const classes = cx(
'text-5 font-black tracking-tight mbe-10 dark:font-extrabold [text-wrap:balance]',
className
);
---
<Tag class={classes} {...props}>
<Tag
class:list={[
'text-5 font-black tracking-tight mbe-10 [text-wrap:balance] dark:font-extrabold',
className,
]}
{...props}
>
<slot />
</Tag>

30
src/components/Image.astro
View File

@@ -1,18 +1,22 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
const { class: className, noMargin, src, ...props } = Astro.props;
const classes = cx(
'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
{ 'mbe-0': noMargin },
className
);
const imageClasses =
'rounded-1 border-1 block h-auto w-full border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10';
---
<div class={classes}>
<img class={imageClasses} decoding="async" loading="lazy" src={src} {...props} />
<div
class:list={[
'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
{ 'mbe-0': noMargin },
className,
]}
>
<img
class:list={[
'block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
]}
decoding="async"
loading="lazy"
src={src}
{...props}
/>
</div>

7
src/components/Link.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames noopener noreferrer
import cx from 'classnames';
// Cspell:words astro noopener noreferrer
interface Props {
class?: string;
href?: string;
@@ -11,11 +9,10 @@ interface Props {
const { class: className, href = '#', ...props } = Astro.props;
const isExternal = (href as string).startsWith('http');
const classes = cx('link', { external: isExternal }, className);
---
<a
class={classes}
class:list={['link', { external: isExternal }, className]}
href={href}
rel={isExternal ? 'nofollow noopener noreferrer' : undefined}
target={isExternal ? '_blank' : undefined}

8
src/components/ListItem.astro
View File

@@ -1,17 +1,13 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
[key: string]: any;
}
const { class: className, ...props } = Astro.props;
const classes = cx('mbe-2', className);
---
<li class={classes} {...props}>
<li class:list={['mbe-2', className]} {...props}>
<slot />
</li>

18
src/components/MarkdownImage.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
interface Props {
class?: string;
noMargin?: boolean;
@@ -9,14 +7,14 @@ interface Props {
}
const { class: className, noMargin, src, ...props } = Astro.props;
const classes = cx(
'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
{ 'mbe-0': noMargin },
className
);
---
<div class={classes}>
<div
class:list={[
'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
{ 'mbe-0': noMargin },
className,
]}
>
<img src={src} decoding="async" loading="lazy" {...props} />
</div>

18
src/components/NetflixFlag.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro etflix classnames
import cx from 'classnames';
// Cspell:words astro etflix
import Link from './Link.astro';
export interface Props {
@@ -10,14 +9,17 @@ export interface Props {
}
const { class: className, id, ...props } = Astro.props;
const classes = cx(
'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500',
className
);
---
<Link class={classes} href={`https://www.netflix.com/title/${id}`} title="Netflix" {...props}>
<Link
class:list={[
'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:border-gray-500 print:bg-transparent',
className,
]}
href={`https://www.netflix.com/title/${id}`}
title="Netflix"
{...props}
>
<span class="hidden" aria-hidden="true">[</span>
N
<span class="hidden" aria-hidden="true">etflix]</span>

8
src/components/OdyseeVideo.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames autoplay allowfullscreen
import cx from 'classnames';
// Cspell:words astro autoplay allowfullscreen
export interface Props {
class?: string;
id: string;
@@ -9,11 +7,9 @@ export interface Props {
}
const { class: className, id, ...props } = Astro.props;
const classes = cx('relative aspect-video mbe-10', className);
---
<div class={classes} {...props}>
<div class:list={['relative aspect-video mbe-10', className]} {...props}>
<iframe
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen

17
src/components/OrderedList.astro
View File

@@ -1,20 +1,19 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
[key: string]: any;
}
const { class: className, children, ...props } = Astro.props;
const classes = cx(
'list-decimal text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
className
);
---
<ol class={classes} {...props}>
<ol
class:list={[
'list-decimal text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
className,
]}
{...props}
>
<slot />
</ol>

16
src/components/PageHeader.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro backlink classnames shibui
import cx from 'classnames';
// Cspell:words astro backlink shibui
import Backlink from '../components/Backlink.astro';
import MainNavigation from '../components/MainNavigation.astro';
import ThemeToggle from '../components/ThemeToggle.astro';
@@ -13,13 +11,15 @@ export interface Props {
}
const { backLink, class: className, navigation = true } = Astro.props;
const classes = cx(
'sticky grid w-full grid-cols-18 grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden z-50',
className
);
---
<header class={classes} role="banner">
<header
class:list={[
'sticky z-50 grid w-full grid-cols-18 grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden',
className,
]}
role="banner"
>
<Backlink backLink={backLink} />
{navigation && <MainNavigation />}
<ThemeToggle />

25
src/components/PageTitle.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import Title from './Title.astro';
export interface Props {
@@ -11,17 +9,18 @@ export interface Props {
}
const { class: className, grid = 'narrow', innerGrid } = Astro.props;
const titleClasses = cx(
'col-start-2 col-end-18 !mbe-0',
{
'md:col-start-3 md:col-end-17': grid === 'wide',
'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
'!col-start-1 row-start-1': innerGrid,
},
className
);
---
<Title class={titleClasses}>
<Title
class:list={[
'col-start-2 col-end-18 !mbe-0',
{
'md:col-start-3 md:col-end-17': grid === 'wide',
'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
'!col-start-1 row-start-1': innerGrid,
},
className,
]}
>
<slot />
</Title>

13
src/components/PrimeVideoFlag.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import Link from './Link.astro';
export interface Props {
@@ -10,15 +9,13 @@ export interface Props {
}
const { class: className, id, ...props } = Astro.props;
const classes = cx(
'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500',
className
);
---
<Link
class={classes}
class:list={[
'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:border-gray-500 print:bg-transparent',
className,
]}
href={`https://www.amazon.de/gp/video/detail/${id}`}
title="Prime Video"
{...props}

11
src/components/ProductLink.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import TextLink from './TextLink.astro';
export interface Props {
@@ -11,10 +10,12 @@ export interface Props {
}
const { asin, class: className, text, ...props } = Astro.props;
const classes = cx('product', className);
---
<TextLink class={classes} href={`https://www.amazon.de/gp/product/${asin}`} {...props}>
<TextLink
class:list={['product', className]}
href={`https://www.amazon.de/gp/product/${asin}`}
{...props}
>
{text}
</TextLink>

8
src/components/ProjectContainer.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames halfgap figcaption
import cx from 'classnames';
// Cspell:words astro halfgap figcaption
import type { CollectionEntry } from 'astro:content';
import { animation } from '../data/site';
@@ -19,11 +17,9 @@ const {
},
project,
} = Astro.props;
const classes = cx('col-start-1 col-end-19 grid grid-cols-18', className);
---
<article class={classes} {...animation}>
<article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]} {...animation}>
{
format === '50-start' && (
<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">

2
src/components/ProjectContent.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames
// Cspell:words astro
import type { CollectionEntry } from 'astro:content';
import Headline from '../components/Headline.astro';

2
src/components/ProjectImage.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames
// Cspell:words astro
import type { CollectionEntry } from 'astro:content';
import Image from './Image.astro';

8
src/components/ProjectIntro.astro
View File

@@ -1,17 +1,13 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
[key: string]: any;
}
const { class: className, ...props } = Astro.props;
const classes = cx('max-w-[66ch]', className);
---
<div class={classes} {...props}>
<div class:list={['max-w-[66ch]', className]} {...props}>
<slot />
</div>

7
src/components/Pullquote.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
import TextLink from './TextLink.astro';
interface Props {
@@ -13,11 +12,9 @@ interface Props {
}
const { author, class: className, lang = 'en', source, sourceUrl, text, ...props } = Astro.props;
const classes = cx('pullquote mbe-10 p-9 text-center', className);
---
<blockquote lang={lang} class={classes} {...props}>
<blockquote lang={lang} class:list={['pullquote p-9 text-center mbe-10', className]} {...props}>
<p set:html={text} />
{
(author || source) && (

2
src/components/RSSLink.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames subsubheadline umami shibui
// Cspell:words astro subsubheadline umami shibui
import { Rss } from './icons';
import Link from './Link.astro';
import Subsubheadline from './Subsubheadline.astro';

2
src/components/RssXml.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames stylesheet frontmatter
// Cspell:words astro stylesheet frontmatter
import { site } from '../data/site';
import { dateToISO } from '../utils';

2
src/components/Scripts.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames swup animationend keydown
// Cspell:words astro swup animationend keydown
import '../styles/sal.css';
---

8
src/components/Spotify.astro
View File

@@ -1,20 +1,16 @@
---
// Cspell:words astro classnames autoplay fullscreen
import cx from 'classnames';
// Cspell:words astro autoplay fullscreen
interface Props {
class?: string;
id: string;
}
const { class: className, id, ...props } = Astro.props;
const classes = cx('mbe-10 w-full', className);
---
<iframe
allow="accelerometer; autoplay; encrypted-media; fullscreeen; picture-in-picture"
class={classes}
class:list={['w-full mbe-10', className]}
frameborder="0"
height="352"
loading="lazy"

17
src/components/Subheadline.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames keyof
import cx from 'classnames';
// Cspell:words astro keyof
export interface Props {
as?: keyof astroHTML.JSX.IntrinsicElements;
class?: string;
@@ -9,13 +7,14 @@ export interface Props {
}
const { as: Tag = 'h3', class: className, ...props } = Astro.props;
const classes = cx(
'text-4 font-black tracking-tight mbe-8 dark:font-extrabold [text-wrap:balance]',
className
);
---
<Tag class={classes} {...props}>
<Tag
class:list={[
'text-4 font-black tracking-tight mbe-8 [text-wrap:balance] dark:font-extrabold',
className,
]}
{...props}
>
<slot />
</Tag>

17
src/components/Subsubheadline.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames keyof
import cx from 'classnames';
// Cspell:words astro keyof
export interface Props {
as?: keyof astroHTML.JSX.IntrinsicElements;
class?: string;
@@ -9,13 +7,14 @@ export interface Props {
}
const { as: Tag = 'h4', class: className, ...props } = Astro.props;
const classes = cx(
'text-3 font-black tracking-tight mbe-5 dark:font-extrabold [text-wrap:balance]',
className
);
---
<Tag class={classes} {...props}>
<Tag
class:list={[
'text-3 font-black tracking-tight mbe-5 [text-wrap:balance] dark:font-extrabold',
className,
]}
{...props}
>
<slot />
</Tag>

40
src/components/Tag.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames shibui
import cx from 'classnames';
// Cspell:words astro shibui
import Link from './Link.astro';
interface Props {
@@ -11,25 +10,38 @@ interface Props {
}
const { active, class: className, href, ...props } = Astro.props;
const classes = cx(
'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden',
{
'!bg-shibui-550 !text-white hover:!bg-shibui-650 focus:!bg-shibui-650 dark:!border-shibui-500 dark:!bg-shibui-700 dark:hover:!bg-shibui-600 dark:focus:!bg-shibui-600':
href,
'active [&.active]:!border-black/25 !text-white [&.active]:!bg-accent': active,
},
className
);
---
{
href ? (
<Link href={href} class={classes} {...props}>
<Link
href={href}
class:list={[
'border-3 relative inline-flex min-w-[50px] items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal capitalize leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white print:hidden',
{
'!bg-shibui-550 !text-white hover:!bg-shibui-650 focus:!bg-shibui-650 dark:!border-shibui-500 dark:!bg-shibui-700 dark:hover:!bg-shibui-600 dark:focus:!bg-shibui-600':
href,
'active !text-white [&.active]:!border-black/25 [&.active]:!bg-accent': active,
},
className,
]}
{...props}
>
<slot />
</Link>
) : (
<span class={classes} {...props}>
<span
class:list={[
'border-3 relative inline-flex min-w-[50px] items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal capitalize leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white print:hidden',
{
'!bg-shibui-550 !text-white hover:!bg-shibui-650 focus:!bg-shibui-650 dark:!border-shibui-500 dark:!bg-shibui-700 dark:hover:!bg-shibui-600 dark:focus:!bg-shibui-600':
href,
'active !text-white [&.active]:!border-black/25 [&.active]:!bg-accent': active,
},
className,
]}
{...props}
>
<slot />
</span>
)

11
src/components/Text.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames keyof
import cx from 'classnames';
// Cspell:words astro keyof
interface Props {
as?: keyof astroHTML.JSX.IntrinsicElements;
class?: string;
@@ -9,10 +7,11 @@ interface Props {
}
const { as: Tag = 'p', class: className, ...props } = Astro.props;
const classes = cx('text-3 font-normal tracking-normal mbe-10 mbs-0 dark:font-light', className);
---
<Tag class={classes} {...props}>
<Tag
class:list={['text-3 font-normal tracking-normal mbe-10 mbs-0 dark:font-light', className]}
{...props}
>
<slot />
</Tag>

16
src/components/TextLink.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames shibui
import cx from 'classnames';
// Cspell:words astro shibui
import Link from './Link.astro';
interface Props {
@@ -9,13 +8,14 @@ interface Props {
}
const { class: className, ...props } = Astro.props;
const classes = cx(
'inline font-semibold text-shibui-950 underline decoration-shibui-900/20 decoration-4 underline-offset-auto no-common-ligatures hover:!decoration-accent focus:!decoration-accent dark:text-shibui-200/[0.87] dark:decoration-shibui-100/20',
className
);
---
<Link class={classes} {...props}>
<Link
class:list={[
'inline font-semibold text-shibui-950 underline decoration-shibui-900/20 decoration-4 underline-offset-auto no-common-ligatures hover:!decoration-accent focus:!decoration-accent dark:text-shibui-200/[0.87] dark:decoration-shibui-100/20',
className,
]}
{...props}
>
<slot />
</Link>

16
src/components/Title.astro
View File

@@ -1,6 +1,5 @@
---
// Cspell:words astro classnames keyof
import cx from 'classnames';
// Cspell:words astro keyof
export interface Props {
as?: keyof astroHTML.JSX.IntrinsicElements;
@@ -9,13 +8,14 @@ export interface Props {
}
const { as: Tag = 'h1', class: className, ...props } = Astro.props;
const classes = cx(
'text-7 font-black tracking-tight mbe-13 dark:font-extrabold [text-wrap:balance]',
className
);
---
<Tag class={classes} {...props}>
<Tag
class:list={[
'text-7 font-black tracking-tight mbe-13 [text-wrap:balance] dark:font-extrabold',
className,
]}
{...props}
>
<slot />
</Tag>

17
src/components/UnorderedList.astro
View File

@@ -1,20 +1,19 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
[key: string]: any;
}
const { class: className, ...props } = Astro.props;
const classes = cx(
'list-square text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
className
);
---
<ul class={classes} {...props}>
<ul
class:list={[
'list-square text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
className,
]}
{...props}
>
<slot />
</ul>

37
src/components/Verse.astro
View File

@@ -1,28 +1,29 @@
---
// Cspell:words astro classnames
import cx from 'classnames';
// Cspell:words astro
export interface Props {
class?: string;
variant?: 'center' | 'left';
}
const { class: className, variant = 'center', ...props } = Astro.props;
const classes = cx(
'flex italic [&_p]:mbe-0',
{
'm-10': variant === 'center',
'mbs-10 mbe-10 mis-0 mie-0': variant === 'left',
},
className
);
const preClasses = cx('font-sans mis-0 mie-0 whitespace-pre', {
'mbs-auto mbe-auto': variant === 'center',
});
---
<blockquote class={classes} {...props}>
<pre class={preClasses}><slot /></pre>
<blockquote
class:list={[
'flex italic [&_p]:mbe-0',
{
'm-10': variant === 'center',
'mbe-10 mbs-10 mie-0 mis-0': variant === 'left',
},
className,
]}
{...props}
>
<pre
class:list={[
'whitespace-pre font-sans mie-0 mis-0',
{
'mbe-auto mbs-auto': variant === 'center',
},
]}><slot /></pre>
</blockquote>

42
src/layouts/GridLayout.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames fullsize noindex
import cx from 'classnames';
// Cspell:words astro fullsize noindex
import BaseLayout from './BaseLayout.astro';
export interface Props {
@@ -33,24 +31,6 @@ const {
noindex,
title,
} = Astro.props;
const gridClasses = cx('grid w-full grid-cols-18', { 'gap-y-gap': gap }, className);
const wrapperClasses = cx(
{ 'col-start-1 col-end-19': grid === 'fullsize' },
{ 'col-start-2 col-end-18': grid === 'wide' || grid === 'narrow' },
{
'md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13':
grid === 'narrow',
},
{ 'md:col-start-3 md:col-end-17': grid === 'wide' },
{ 'grid w-full': innerGrid },
{ 'grid-cols-16 md:grid-cols-14': innerGrid && grid === 'wide' },
{
'grid-cols-16 md:grid-cols-10 xl:grid-cols-8 3xl:grid-cols-6':
innerGrid && grid === 'narrow',
},
{ 'gap-y-gap': gap }
);
---
<BaseLayout
@@ -63,12 +43,28 @@ const wrapperClasses = cx(
noindex={noindex}
title={title}
>
<div class={gridClasses}>
<div class:list={['grid w-full grid-cols-18', { 'gap-y-gap': gap }, className]}>
<slot name="title" />
<slot name="before-content" />
{
grid !== 'fullsize' ? (
<div class={wrapperClasses}>
<div
class:list={[
{ 'col-start-2 col-end-18': grid === 'wide' || grid === 'narrow' },
{
'md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13':
grid === 'narrow',
},
{ 'md:col-start-3 md:col-end-17': grid === 'wide' },
{ 'grid w-full': innerGrid },
{ 'grid-cols-16 md:grid-cols-14': innerGrid && grid === 'wide' },
{
'grid-cols-16 md:grid-cols-10 xl:grid-cols-8 3xl:grid-cols-6':
innerGrid && grid === 'narrow',
},
{ 'gap-y-gap': gap },
]}
>
<slot />
</div>
) : (

2
src/layouts/PageLayout.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames frontmatter
// Cspell:words astro frontmatter
import PageTitle from '../components/PageTitle.astro';
import Image from '../components/Image.astro';

8
src/pages/[...slug].astro
View File

@@ -1,6 +1,4 @@
---
import cx from 'classnames';
import type { CollectionEntry } from 'astro:content';
type Journal = CollectionEntry<'journal'>;
import { getCollection } from 'astro:content';
@@ -106,10 +104,10 @@ const schema = JSON.stringify({
}
<aside
class={cx(
class:list={[
'col-start-2 col-end-18 md:col-start-5 md:col-end-15 xl:col-start-15 xl:col-end-18 xl:row-start-2 3xl:col-start-14 3xl:col-end-18',
{ 'row-start-3': entry.data.cover }
)}
{ 'row-start-3': entry.data.cover },
]}
>
<div class="leading-none mbe-6">
<em>By</em>{' '}

46
src/pages/ai-art.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames pagefind minmax
import cx from 'classnames';
// Cspell:words astro pagefind minmax
import type { CollectionEntry } from 'astro:content';
type AiArt = CollectionEntry<'ai-art'>;
import { getCollection } from 'astro:content';
@@ -46,26 +44,28 @@ const description = 'This is a collection of AI art pieces I’ve created with S
{
allAiArt.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-3 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-4 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',
'md:col-span-6 md:row-span-6':
data.images[0].aspectRatio === 1 && data.coverSize === 'large',
})}
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-3 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-4 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',
'md:col-span-6 md:row-span-6':
data.images[0].aspectRatio === 1 && data.coverSize === 'large',
},
]}
{...animation}
>
<Link title={data.title} href={`/ai-art/${slug}/`}>

2
src/pages/cv.astro
View File

@@ -1,5 +1,5 @@
---
// Cspell:words astro classnames subheadline imhoff stefanimhoff noindex
// Cspell:words astro subheadline imhoff stefanimhoff noindex
import { animation, animationDelay } from '../data/site';
import Divider from '../components/Divider.astro';

34
src/pages/sketchnotes.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames sketchnotes pagefind minmax
import cx from 'classnames';
// Cspell:words astro sketchnotes pagefind minmax
import type { CollectionEntry } from 'astro:content';
type Sketchnotes = CollectionEntry<'sketchnotes'>;
import { getCollection } from 'astro:content';
@@ -45,20 +43,22 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
{
allSketchnotes.map(({ slug, data }: Sketchnotes) => (
<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',
})}
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',
},
]}
{...animation}
>
<Link title={data.title} href={`/sketchnotes/${slug}/`}>