@phosart/common 0.4.22

package/src/lib/OpengraphMeta.svelte

@@ -0,0 +1,125 @@
+<script lang="ts" module>
+	import { asString } from './Postcard/ArtistLink.svelte';
+	import { normalizeArtist, type ResourceRef } from './util/art.ts';
+	import { useLibraryConfig } from './util/phosart_config.svelte.ts';
+
+	interface OpengraphMeta {
+		title: string | null;
+		description: string | null;
+		siteName: string | null;
+		image: string | null;
+		width: number | null;
+		height: number | null;
+	}
+
+	function getMeta(resource: ResourceRef, siteName?: string | null): OpengraphMeta {
+		const base: OpengraphMeta = {
+			title: null,
+			description: null,
+			siteName: siteName ?? null,
+			image: null,
+			width: null,
+			height: null
+		};
+
+		if (!resource.type || !resource.resource) {
+			return base;
+		}
+
+		switch (resource.type) {
+			case 'artist':
+				base.title = `@${resource.resource.info?.name ?? resource.resource.name}`;
+				break;
+			case 'character': {
+				base.title = `${resource.resource.info?.name ?? resource.resource.name}`;
+				if (resource.resource.from) {
+					base.title += ` by @${resource.resource.from}`;
+				}
+				const image =
+					resource.resource.info?.thumbnail?.full.fallback ??
+					resource.resource.info?.picture.full.fallback ??
+					null;
+
+				base.image = image?.src ?? null;
+				base.width = image?.w ?? null;
+				base.height = image?.h ?? null;
+				base.description =
+					resource.resource.info?.short_description ?? resource.resource.info?.description ?? null;
+
+				break;
+			}
+			case 'piece': {
+				base.title = resource.resource.name;
+				const artists = normalizeArtist(resource.resource.artist);
+				if (artists.length > 0) {
+					base.title += ` by ${asString(artists)}`;
+				}
+				base.description = resource.resource.description || resource.resource.alt;
+				base.image = resource.resource.image.full.fallback.src;
+				base.width = resource.resource.image.full.fallback.w;
+				base.height = resource.resource.image.full.fallback.h;
+				break;
+			}
+			case 'tag':
+				base.title = `#${resource.resource}`;
+				break;
+		}
+
+		if (base.siteName) {
+			base.title += ` | ${base.siteName}`;
+		}
+		return base;
+	}
+</script>
+
+<script lang="ts">
+	type Props = ResourceRef &
+		// If unspecified, the following will be inferred from above
+		Partial<OpengraphMeta> & {
+			setPageTitle?: boolean;
+		};
+
+	const {
+		setPageTitle,
+		height: userHeight,
+		image: userImage,
+		siteName: userSiteName,
+		description: userDescription,
+		title: userTitle,
+		width: userWidth,
+		...resourceRef
+	}: Props = $props();
+
+	const config = useLibraryConfig();
+
+	const inferred = getMeta(resourceRef, config.siteName);
+	const height = $derived(userHeight ?? inferred.height);
+	const image = $derived(userImage ?? inferred.image);
+	const siteName = $derived(userSiteName ?? inferred.siteName);
+	const description = $derived(userDescription ?? inferred.description);
+	const title = $derived(userTitle ?? inferred.title);
+	const width = $derived(userWidth ?? inferred.width);
+</script>
+
+<svelte:head>
+	{#if resourceRef.type && resourceRef.resource}
+		{#if siteName}
+			<meta property="og:site_name" content={siteName} />
+		{/if}
+		{#if title}
+			<meta property="og:title" content={title} />
+			{#if setPageTitle}
+				<title>{title}</title>
+			{/if}
+		{/if}
+		{#if description}
+			<meta property="og:description" content={description} />
+		{/if}
+		{#if image && width && height}
+			<meta property="og:image" content={image} />
+			<meta property="og:image:width" content={String(width)} />
+			<meta property="og:image:height" content={String(height)} />
+			<meta name="twitter:card" content="summary_large_image" />
+		{/if}
+	{/if}
+</svelte:head>

package/src/lib/Postcard/ArtistLink.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	/* eslint-disable svelte/no-useless-mustaches */
+	export function asString(artists: Array<NormalizedArtist>) {
+		let s = '';
+		for (let i = 0; i < artists.length; i++) {
+			const artist = artists[i];
+			const hasLink = !!artist.info?.links?.[0];
+			if (hasLink) {
+				s += '@' + (artist.info?.name || artist.name);
+			} else {
+				s += artist.info?.name || artist.name;
+			}
+			if (i < artists.length - 2) {
+				s += ', ';
+			}
+			if (i === artists.length - 2) {
+				s += ' and ';
+			}
+		}
+		return s;
+	}
+</script>
+
+<script lang="ts">
+	import type { NormalizedArtist } from '../util/art.ts';
+	interface Props {
+		artists: Array<NormalizedArtist>;
+	}
+
+	let { artists }: Props = $props();
+</script>
+
+{#each artists as artist, i (artist.name)}
+	{@const link = Object.values(artist.info?.links ?? {})[0] ?? null}
+	{#if link}
+		<a target="_blank" rel="noreferrer nofollow noopener" href={link} style="font-weight: 700;">
+			@{artist.info?.name || artist.name}
+		</a>
+	{:else if artist}
+		<span style="font-weight: 700;">
+			{artist.info ? `@${artist.name}` : artist.name}</span
+		>{/if}{#if i < artists.length - 2},{' '}
+	{:else if i === artists.length - 2}
+		{' '}and{' '}
+	{/if}
+{/each}

package/src/lib/Postcard/Chip.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" module>
+	import {
+		useChipConfig,
+		type ChipOptionsByType,
+		type DataType
+	} from '../util/phosart_config.svelte.ts';
+</script>
+
+<script lang="ts">
+	import Character from './Description/Character.svelte';
+
+	interface Props<K extends keyof ChipOptionsByType> {
+		type: K;
+		data: DataType<K>;
+	}
+
+	type ChipProps = NonNullable<
+		{
+			[K in keyof ChipOptionsByType]: Props<K>;
+		}[keyof ChipOptionsByType]
+	>;
+
+	let props: ChipProps = $props();
+
+	const config = $derived(useChipConfig(props.type));
+	const action = $derived(config?.action ?? null);
+	const href = $derived(action?.makeHref?.(props.data));
+	const clickHandler = $derived(
+		config?.action?.onclick ? () => action?.onclick?.(props.data) : null
+	);
+
+	const info = $derived.by(() => {
+		switch (props.type) {
+			case 'artist':
+				return props.data.info ? `@${props.data.info.name || props.data.name}` : props.data.name;
+			case 'character':
+				return '';
+			case 'permalink':
+				return 'Permalink';
+			case 'tag':
+				return `#${props.data}`;
+		}
+	});
+
+	const icon = $derived.by(() => {
+		switch (props.type) {
+			case 'artist':
+				return 'fa-paintbrush';
+			case 'character':
+				return 'n/a';
+			case 'permalink':
+				return '';
+			case 'tag':
+				return '';
+		}
+	});
+</script>
+
+<span class="chip-root">
+	{#if props.type == 'character'}
+		<Character character={props.data} />
+	{:else}
+		<svelte:element
+			this={href ? 'a' : 'span'}
+			style={href || clickHandler ? 'cursor: pointer;' : undefined}
+			href={href ?? undefined}
+			onclick={clickHandler ?? undefined}
+			role="button"
+			tabindex="0"
+		>
+			{#if icon}
+				<span class="fa solid {icon}"></span>
+			{/if}
+			{info}
+		</svelte:element>
+	{/if}
+</span>
+
+<style lang="postcss">
+	.chip-root {
+		line-height: 1.3em;
+		display: inline-block;
+		padding: 2px 6px;
+		border-radius: 4px;
+		border: 1px solid #fff4;
+		background-color: #0001;
+		transition: border-color 0.35s ease-in-out;
+		white-space: nowrap;
+
+		& :global(a) {
+			border: 0;
+		}
+		&:first-child {
+			margin-left: 0;
+		}
+		&:has(:global(a:hover)) {
+			border-color: var(--color-accent);
+		}
+	}
+</style>

package/src/lib/Postcard/Description/Character.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+
+	import type { Artist, NormalizedCharacter } from '../../util/art.ts';
+	import { useArtists } from '../../util/artistcontext.svelte.ts';
+	import { useChipConfig } from '../../util/phosart_config.svelte.ts';
+
+	interface Props {
+		character: NormalizedCharacter;
+	}
+
+	let { character }: Props = $props();
+	const artists = useArtists();
+
+	let cname = $derived(character.name);
+	let characterObj = $derived(character.info ?? null);
+	let artist = $derived(character.from);
+	let artistObj: Artist | null = $derived(artist ? (artists[artist] ?? null) : null);
+	let artistUrl = $derived(artistObj?.links ? Object.values(artistObj.links)[0] : null);
+
+	let name = $derived(characterObj?.name ?? cname);
+
+	const config = useChipConfig('character');
+	const href = $derived(config?.action?.makeHref?.(character));
+	const clickHandler = $derived(
+		config?.action?.onclick ? () => config?.action?.onclick?.(character) : null
+	);
+</script>
+
+{#if !config?.hidden}
+	{#if artist}
+		<span class="character">
+			<svelte:element
+				this={artistUrl ? 'a' : 'span'}
+				href={artistUrl ?? undefined}
+				target={!artistUrl ? undefined : artistUrl.startsWith('http') ? '_blank' : '_self'}
+				rel={!artistUrl
+					? undefined
+					: artistUrl.startsWith('http')
+						? 'noreferrer noopener nofollow'
+						: ''}
+			>
+				<span class="fa solid fa-user-group"></span>
+				<span>
+					{artistObj?.name ? `@${artistObj.name}` : artist}'s
+				</span>
+				<span>
+					{name}
+				</span>
+			</svelte:element>
+		</span>
+	{:else if href}
+		<span class="character">
+			<a {href}>
+				<span class="fa solid fa-user"></span>
+				{name}
+			</a>
+		</span>
+	{:else if clickHandler}
+		<span class="character">
+			<!-- svelte-ignore a11y_invalid_attribute -->
+			<a href="#" onclick={clickHandler}>
+				<span class="fa solid fa-user"></span>
+				{name}
+			</a>
+		</span>
+	{:else}
+		<span class="character">
+			<span class="fa solid fa-user"></span>
+			{name}
+		</span>
+	{/if}
+{/if}
+
+<style>
+	.fa {
+		font-size: 0.85em;
+	}
+</style>

package/src/lib/Postcard/Description.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+
+	import { markdown } from '../util/markdown.ts';
+	import { type ArtPiece, normalizeArtist, normalizeCharacter } from '../util/art.ts';
+
+	import { formatDate } from '../util/date.ts';
+	import Chip from './Chip.svelte';
+	import { useCharacters } from '../util/charactercontext.svelte.ts';
+	import { useArtists } from '../util/artistcontext.svelte.ts';
+
+	interface Props {
+		piece: ArtPiece;
+		visible: boolean;
+		showName: boolean;
+		selectedAlt: number | null;
+		onselectalt?: (index: number | null) => void;
+	}
+
+	let {
+		piece,
+		visible = $bindable(),
+		showName,
+		selectedAlt,
+		onselectalt = undefined
+	}: Props = $props();
+
+	const characters = useCharacters();
+	const artists = useArtists();
+</script>
+
+<div class="description-inner" class:showing-description={visible}>
+	<div style="overflow: hidden;">
+		<div>
+			{#if showName}
+				<div style="margin-bottom: 0.5rem;">
+					<span style="border-bottom: 1px dashed #8886; font-style: italic;">
+						{piece.name}
+					</span>
+				</div>
+			{/if}
+		</div>
+
+		<div
+			style="font-size:0.8em; line-height: 1.2em; {piece.description ? 'margin-bottom: 1rem;' : ''}"
+			class="no-p"
+		>
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html markdown(
+				(selectedAlt && piece.alts?.[selectedAlt]?.description) || piece.description || ''
+			)}
+		</div>
+
+		{#if piece.alts && Object.keys(piece.alts).length > 0}
+			<div style="font-size: 0.7em; line-height: 1.2em; margin-bottom: 1rem" class="tags">
+				This piece as multiple versions:
+				{#if selectedAlt !== null}
+					<span>
+						<!-- svelte-ignore a11y_invalid_attribute -->
+						<a
+							href="#"
+							onclick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								onselectalt?.(null);
+							}}
+						>
+							Original Version
+						</a>
+					</span>
+				{/if}
+
+				{#each piece.alts as alt, i (alt.name)}
+					{#if i !== selectedAlt}
+						<span>
+							<!-- svelte-ignore a11y_invalid_attribute -->
+							<a
+								href="#"
+								onclick={(e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									onselectalt?.(i);
+								}}
+							>
+								{alt.name}
+							</a>
+						</span>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+
+		<div style="font-size: 0.7em; line-height: 1.2em; margin-bottom: 1rem" class="tags">
+			<Chip type="permalink" data={piece} />
+		</div>
+
+		<div style="font-size: 0.7em" class="tags">
+			{#each normalizeArtist(piece.artist, artists) as artist (artist.name)}
+				<Chip type="artist" data={artist} />
+			{/each}
+			{#each piece.characters ?? [] as character, i (i)}
+				<Chip type="character" data={normalizeCharacter(character, characters)} />
+			{/each}
+			{#if piece.tags}
+				{#each piece.tags as tag (tag)}
+					<Chip type="tag" data={tag} />
+				{/each}
+			{/if}
+		</div>
+		{#if piece.date}
+			<div
+				style="font-size: 0.7em; opacity: 0.8; font-style: italic; margin-top: 0.4rem; line-height: 1em"
+			>
+				{formatDate(piece.date)}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style lang="postcss">
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		line-height: 2em;
+		row-gap: 0.25rem;
+		column-gap: 0.25rem;
+	}
+	.description-inner {
+		display: grid;
+		grid-template-rows: 0fr;
+		width: 100%;
+		text-align: left;
+		padding: 0 2rem 0 2rem;
+		transition:
+			grid-template-rows 0.2s ease-in-out,
+			padding 0.2s ease-in-out;
+		pointer-events: auto;
+	}
+	.description-inner.showing-description {
+		grid-template-rows: 1fr;
+		padding: 1rem 2rem 1rem 2rem;
+	}
+	.no-p > :global(p) {
+		margin-bottom: 0.25rem;
+	}
+</style>

package/src/lib/Postcard/Headline.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { normalizeArtist, type ArtPiece } from '../util/art.ts';
+	import { useArtists } from '../util/artistcontext.svelte.ts';
+	import ArtistLink from './ArtistLink.svelte';
+
+	const allArtists = useArtists();
+
+	interface Props {
+		piece: ArtPiece;
+		showName: boolean;
+		/* bind */
+		showingDescription: boolean;
+	}
+
+	let { piece, showName, showingDescription = $bindable() }: Props = $props();
+	let artists = $derived(normalizeArtist(piece.artist, allArtists));
+</script>
+
+<div class="headline-container">
+	<div style="font-style: italic; padding-left: 2rem;" class="byline">
+		{#if artists && artists.length > 0}
+			by <ArtistLink {artists} />
+		{/if}
+	</div>
+	<div style="display: flex">
+		{#if showName}
+			<div style="padding-right: 2rem" class="piece-name">
+				{piece.name}
+			</div>
+		{/if}
+		<div
+			role="button"
+			tabindex={-1}
+			onclick={() => (showingDescription = !showingDescription)}
+			onkeypress={() => (showingDescription = !showingDescription)}
+			class="details-toggle"
+		>
+			{showingDescription ? 'hide' : 'show'} details
+		</div>
+	</div>
+</div>
+
+<style>
+	.headline-container {
+		display: flex;
+		padding: 0 2rem;
+		flex-direction: row-reverse;
+		justify-content: space-between;
+		align-items: center;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		white-space: nowrap;
+		container: headline / size;
+	}
+
+	.details-toggle {
+		color: #6389da;
+		cursor: pointer;
+		font-size: 0.9em;
+		font-style: italic;
+		user-select: none;
+	}
+
+	@container headline (width < 300px) {
+		.byline {
+			visibility: hidden;
+		}
+	}
+</style>

package/src/lib/index.ts

@@ -0,0 +1,20 @@
+// Reexport your entry components here
+export { default as FullGallery } from './FullGallery.svelte';
+export { default as Gallery } from './Gallery.svelte';
+export { default as GalleryPreview } from './GalleryPreview.svelte';
+export { default as HighResContext } from './HighResContext.svelte';
+export { default as Image } from './Image.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as ModalGallery } from './ModalGallery.svelte';
+
+export { default as Carousel } from './ModalGallery/Carousel.svelte';
+export { default as ImageSection } from './ModalGallery/ImageSection.svelte';
+export { default as ImageView } from './ModalGallery/ImageView.svelte';
+export { default as Spinner } from './ModalGallery/Spinner.svelte';
+
+export { default as ArtistLink, asString } from './Postcard/ArtistLink.svelte';
+export { default as Description } from './Postcard/Description.svelte';
+export { default as Character } from './Postcard/Description/Character.svelte';
+export { default as Headline } from './Postcard/Headline.svelte';
+
+export { default as OpengraphMeta } from './OpengraphMeta.svelte';

package/src/lib/server/artist.ts

@@ -0,0 +1,50 @@
+import { $DATA } from './directories.ts';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import * as yaml from 'yaml';
+import type { z } from 'zod';
+import { Artist } from './models/Artist.ts';
+import { cacheVersion, getCache } from './util.ts';
+import { normalizeArtist, type NormalizedArtist } from '../util/art.ts';
+import { galleries } from './gallery.ts';
+
+export type ArtistCache = Record<string, z.infer<typeof Artist>>;
+
+export async function artists() {
+	const cached = getCache().artistCache;
+	const nextVersion = await cacheVersion();
+	if (cached.cache && cached.version === nextVersion) {
+		return cached.cache;
+	}
+	let artists: ArtistCache;
+	try {
+		artists = yaml.parse(
+			await fs.readFile(path.join($DATA(), 'artists.yaml'), { encoding: 'utf-8' })
+		);
+	} catch {
+		return {};
+	}
+
+	await Promise.all(Object.values(artists).map((v) => Artist.parseAsync(v)));
+
+	getCache().artistCache.cache = artists;
+	getCache().artistCache.version = nextVersion;
+	return artists;
+}
+
+export async function getAllArtists(): Promise<Array<NormalizedArtist>> {
+	const all = await artists();
+	const mapped: NormalizedArtist[] = Object.values(await galleries())
+		.flatMap((g) => g.pieces)
+		.flatMap((p) => p.artist)
+		.flatMap((a) => normalizeArtist(a, all))
+		.concat(Object.values(all).flatMap((a) => normalizeArtist(a.name, all)));
+
+	// Collapse by name
+	const record: Record<string, NormalizedArtist> = {};
+	for (const m of mapped) {
+		record[m.name] = m;
+	}
+
+	return Object.values(record);
+}