---
/**
 * The layout for a single piece of content — a post, a photo set, a fav, an
 * io issue. All four sites render individual entries through this.
 *
 * This is where per-article creative freedom is implemented:
 *
 *   theme:  any token from tokens.css, re-declared for this page only
 *   canvas: article | wide | bare
 *
 * `bare` gives you the tokens, the fonts and an empty page. No header, no
 * footer, no prose styles, no measure. Use it when the article *is* the
 * design; use `article` for the other ninety-five percent.
 */
import Base from './Base.astro';
import { formatDate, isoDate } from '../lib/format.js';
import type { SiteKey } from '../config.js';

interface Props {
	site: SiteKey;
	title: string;
	summary: string;
	path: string;
	pubDate: Date;
	updatedDate?: Date;
	tags?: string[];
	image?: string;
	canvas?: 'article' | 'wide' | 'bare';
	theme?: Record<string, string>;
	/** Small line under the title: reading time, photo count, whatever fits. */
	kicker?: string;
	/** Hides the built-in title block when a page draws its own. */
	showHeader?: boolean;
}

const {
	site,
	title,
	summary,
	path,
	pubDate,
	updatedDate,
	tags = [],
	image,
	canvas = 'article',
	theme,
	kicker,
	showHeader = true,
} = Astro.props;

/**
 * Turn the frontmatter theme block into inline custom properties.
 *
 * Keys are written without the leading dashes in frontmatter (`accent`), and
 * get them here. Anything that is not a plausible custom-property name is
 * dropped rather than interpolated, so a typo cannot inject CSS.
 */
const themeStyle = theme
	? Object.entries(theme)
			.filter(([key]) => /^[a-z0-9-]+$/i.test(key))
			.map(([key, value]) => `--${key}: ${String(value).replace(/[;{}]/g, '')}`)
			.join('; ')
	: undefined;

const bare = canvas === 'bare';
---

<Base
	site={site}
	title={title}
	description={summary}
	path={path}
	image={image}
	type="article"
	publishedTime={pubDate}
	modifiedTime={updatedDate}
	chrome={!bare}
	themeStyle={themeStyle}
>
	<article class:list={['entry', `entry--${canvas}`]}>
		{
			showHeader && (
				<header class="entry__header">
					{kicker && <p class="eyebrow">{kicker}</p>}
					<h1>{title}</h1>
					<p class="meta entry__meta">
						<time datetime={isoDate(pubDate)}>{formatDate(pubDate)}</time>
						{updatedDate && (
							<>
								{' · updated '}
								<time datetime={isoDate(updatedDate)}>{formatDate(updatedDate)}</time>
							</>
						)}
					</p>
				</header>
			)
		}

		<div class:list={[!bare && 'prose', canvas === 'wide' && 'prose--wide']}>
			<slot />
		</div>

		{
			tags.length > 0 && !bare && (
				<footer class="entry__tags meta">
					{tags.map((tag) => (
						<span class="tag">{tag}</span>
					))}
				</footer>
			)
		}
	</article>
</Base>

<style>
	/* The article participates in the page grid directly, so a figure inside it
	   can claim the wide or full track without a wrapper. */
	.entry {
		display: grid;
		grid-column: full;
		grid-template-columns: subgrid;
		row-gap: 0;
	}

	.entry > * {
		grid-column: content;
	}

	.entry__header {
		margin-block: var(--space-xl) var(--space-l);
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.entry__header h1 {
		font-family: var(--font-prose);
		font-size: var(--step-4);
		font-weight: 600;
		line-height: 1.08;
		letter-spacing: -0.021em;
		text-wrap: balance;
		font-optical-sizing: auto;
	}

	.entry__meta {
		font-variant-numeric: oldstyle-nums;
	}

	/* A photo essay starts in the wider track; its text still sits at the
	   reading measure because .prose sets its own max-inline-size. */
	.entry--wide > .prose--wide {
		grid-column: wide;
	}

	.entry--wide > .prose--wide > :not(figure, .u-wide, .u-full) {
		max-inline-size: var(--measure);
	}

	.entry__tags {
		margin-block-start: var(--space-2xl);
		padding-block-start: var(--space-m);
		border-block-start: 1px solid var(--rule);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
	}

	.tag::before {
		content: '#';
		color: var(--ink-faint);
	}
</style>