index.astro

---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';

import SiteNav from '../SiteNav/index.astro';

import './styles.css';

interface Props {
	url: string,
	title: string,
	summary: string,
	createdAt: Date,
	updatedAt?: Date,
	hasUpdates?: boolean,
	image?: ImageMetadata,
	imageAlt?: string,
	readingTime?: number,
	wordCount?: number,
	letterCount?: number
}

const {
	url,
	title, summary,
	createdAt, updatedAt,
	hasUpdates,
	image, imageAlt,
	readingTime, wordCount
} = Astro.props;

const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'long' });
---
<SiteNav />
<header id="post-header">
	<div id="post-header-wrapper">
		<a id="post-title" class="u-uid u-url " href={url}>
			<h1 class="p-name" itemprop="headline">{title}</h1>
		</a>

		{image && (
			<Image
				id="hero-image"
				src={image}
				alt={imageAlt ?? ''}
				itemprop="image"
				loading="eager"
			/>
		)}

		<blockquote id="post-summary" class="p-summary" itemprop="description">
			<p>{summary}</p>
		</blockquote>

		<aside id="post-metadata">
			<p>
				<small>
					Published on <time itemprop="datePublished" class="dt-published" datetime={createdAt.toISOString()}>{formatter.format(createdAt)}</time>.
				</small>
			</p>

			{updatedAt && (
				<p>
					<small>
						Updated on <time itemprop="dateModified" class="dt-updated" datetime={updatedAt.toISOString()}>{formatter.format(updatedAt)}</time>
						{hasUpdates && (
							<a href="#update-history" aria-label="Go to updates section">
								<Icon name="uil:sync-exclamation" />
							</a>
						)}
					</small>
				</p>
			)}

			{readingTime && (
				<p>
					<small>
						<time itemprop="timeRequired" class="dt-duration" datetime={`PT${readingTime}M`}>
							{readingTime} minute read
						</time>
						{wordCount && (
							<span> &mdash; {wordCount} words</span>
						)}
					</small>
				</p>
			)}
		</aside>

		<aside id="post-share" aria-label="Share options">
			<button
				id="ps-copy"
				type="button"
				title="Copy link to clipboard"
			>
				<Icon name="uil:link" title="An icon of a link." />
				<span class="visually-hidden">Copy link to clipboard</span>
			</button>
			<button
				id="ps-email"
				type="button"
				title="Send post by email"
			>
				<Icon name="uil:envelope-share" title="An icon of an mail envelope." />
				<span class="visually-hidden">Send post by email</span>
			</button>
			<button
				id="ps-native"
				type="button"
				title="Share using native app"
			>
				<Icon name="uil:share-alt" title="An icon of a share symbol, containing three dots arranged as an arrow pointing left with lines connecting them." />
				<span class="visually-hidden">Share using native app</span>
			</button>
			<script src="./script.ts"></script>
		</aside>
	</div>
</header>