@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/media/image-dimensions.js

@@ -0,0 +1,34 @@
+/**
+ * Reading an image file's intrinsic pixel dimensions in the browser.
+ *
+ * A form that uploads an image wants its `width` / `height` alongside the
+ * binary, so the page that later renders it can reserve the box on first
+ * paint instead of reflowing when it loads — and the browser can decode the
+ * file for free the moment it is chosen, where a server would have to.
+ * `fields/ImageInput` measures with this; a caller with its own file control
+ * uses it directly.
+ *
+ * @module
+ */
+/** Thrown by {@link imageDimensions} where there is no `createImageBitmap` (on a server). */
+export class ImageDimensionsUnavailable extends Error {
+    name = 'ImageDimensionsUnavailable';
+}
+/**
+ * Decode `file` with `createImageBitmap` and return its pixel size.
+ *
+ * Rejects with {@link ImageDimensionsUnavailable} outside a browser, and with
+ * the browser's own error when the file does not decode as an image.
+ */
+export async function imageDimensions(file) {
+    if (typeof globalThis.createImageBitmap !== 'function') {
+        throw new ImageDimensionsUnavailable('imageDimensions needs createImageBitmap, which only a browser has.');
+    }
+    const bitmap = await globalThis.createImageBitmap(file);
+    try {
+        return { width: bitmap.width, height: bitmap.height };
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/dist/media/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * media — images, video and figures. See the package README for the family
+ * reference.
+ *
+ * @module
+ */
+export { default as Image } from './Image.svelte';
+export { default as Video } from './Video.svelte';
+export { default as Figure } from './Figure.svelte';
+export { imageDimensions, ImageDimensionsUnavailable, type ImageDimensions, } from './image-dimensions.ts';

package/dist/media/index.js

@@ -0,0 +1,10 @@
+/**
+ * media — images, video and figures. See the package README for the family
+ * reference.
+ *
+ * @module
+ */
+export { default as Image } from './Image.svelte';
+export { default as Video } from './Video.svelte';
+export { default as Figure } from './Figure.svelte';
+export { imageDimensions, ImageDimensionsUnavailable, } from "./image-dimensions.js";

package/dist/search/CommandPalette.svelte

@@ -0,0 +1,257 @@
+<!-- @component
+The ⌘K / Ctrl+K command palette: bits-ui’s `Command` inside this library’s `Dialog`.
+-->
+<!--
+  CommandPalette — the ⌘K / Ctrl+K palette: bits-ui's `Command` inside this
+  library's `Dialog`.
+
+  Two sources of rows, either of which may be absent:
+
+  - **The hotkey registry**, when one is mounted above. `paletteActions` is
+    already role-filtered and in registration order, and each row shows its
+    trigger as a `HotkeyBadge`, so the palette teaches the keyboard while it
+    is used with the mouse. The palette also binds its open state to the
+    registry's `paletteOpen`, which is what a registered `$mod+k` action
+    toggles.
+  - **`items` and `onSearch`**, which need no registry at all. That is what
+    makes this usable in an app that wants a palette but not a hotkey system.
+
+  The search lifecycle is `fields/Combobox`'s, for the same reasons: a
+  keystroke does not start a request, `debounceMs` of quiet does; each request
+  gets an `AbortController` and starting a new one aborts the last, so a slow
+  first response cannot overwrite a fast second one; and the previous rows
+  stay on screen while the next request is in flight, because clearing on
+  every keystroke makes the list strobe and costs the reader the row they were
+  about to pick.
+
+  `shouldFilter` is off exactly when `onSearch` is given: async rows are
+  already the server's answer to the query, and bits-ui re-filtering them
+  would hide rows whose match is in a field the label doesn't show. Without
+  `onSearch`, bits-ui's own scoring is better than anything here. Registry and
+  `items` rows are filtered locally by label in the async case, so they do not
+  outlive the query either.
+
+  ARIA contract: `Dialog`'s (bits-ui: `aria-modal`, the focus trap, Escape,
+  the focus return) plus `Command`'s — the input is a `combobox` owning a
+  `listbox`, each row an `option`, `aria-activedescendant` follows the arrow
+  keys and Enter selects. `label` names the command menu for assistive
+  technology and also titles the dialog. The pending row is
+  `Command.Loading`, named by `loadingLabel`, so a reader is told the list is
+  still settling instead of hearing an empty list.
+-->
+<script lang="ts">import { Command } from "bits-ui";
+import { untrack } from "svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import Dialog from "../feedback/Dialog.svelte";
+import HotkeyBadge from "../hotkeys/HotkeyBadge.svelte";
+import { tryGetHotkeyRegistry } from "../hotkeys/context.svelte.js";
+import Badge from "../ui/Badge.svelte";
+import { defaultCommandGroups } from "./types.js";
+let { open = $bindable(false), label = "Command palette", placeholder = "Type a command or search…", loadingLabel = "Searching…", emptyLabel = "No results", closeLabel = "Close", groups = defaultCommandGroups, items, onSearch, debounceMs = 150, onSelect, item } = $props();
+const context = getComponentsContext();
+const registry = tryGetHotkeyRegistry();
+let query = $state("");
+const trimmedQuery = $derived(query.trim());
+// ── Open state ───────────────────────────────────────────────────
+//
+// With a registry, `paletteOpen` and `open` are two halves of one value:
+// the registered `$mod+k` action writes the registry, a caller may write
+// the prop, and both have to end up agreeing. The trackers below make the
+// sync converge — whichever side changed is copied to the other and both
+// trackers are updated, so the effect's own writes find nothing to do on
+// the re-run.
+let lastOpen = open;
+let lastPaletteOpen = registry?.paletteOpen ?? open;
+$effect(() => {
+	if (registry === undefined) return;
+	const fromProp = open;
+	const fromRegistry = registry.paletteOpen;
+	if (fromProp !== lastOpen) {
+		lastOpen = fromProp;
+		lastPaletteOpen = fromProp;
+		registry.paletteOpen = fromProp;
+	} else if (fromRegistry !== lastPaletteOpen) {
+		lastPaletteOpen = fromRegistry;
+		lastOpen = fromRegistry;
+		open = fromRegistry;
+	}
+});
+// bits-ui's `Dialog` moves focus to the first tabbable child as it opens,
+// which here is the dialog's own close button. A palette has to open with
+// the cursor in its query box — anything else costs the reader a Tab before
+// they can type, and leaves the arrow keys (which `Command` handles on the
+// input) doing nothing. Hence the frame's delay: focusing before the
+// dialog's own focus move would simply be undone.
+let input = $state(null);
+$effect(() => {
+	const element = input;
+	if (!open || element === null) return;
+	const frame = requestAnimationFrame(() => element.focus());
+	return () => cancelAnimationFrame(frame);
+});
+const setOpen = (next) => {
+	open = next;
+	// Closing clears the query: a palette that reopens on the last search is
+	// a palette that shows yesterday's answer to today's question.
+	if (!next) query = "";
+};
+/** In async mode this component owns filtering, so local rows filter here. */
+const matchesQuery = (candidate) => {
+	if (onSearch === undefined || trimmedQuery === "") return true;
+	return candidate.label.toLowerCase().includes(trimmedQuery.toLowerCase());
+};
+const registryRows = $derived((registry?.paletteActions ?? []).map((entry) => ({
+	item: {
+		id: entry.action.id,
+		label: entry.action.label,
+		group: entry.action.group,
+		run: entry.action.run
+	},
+	trigger: entry.action.trigger
+})));
+const staticRows = $derived((items ?? []).map((candidate) => ({
+	item: candidate,
+	trigger: undefined
+})));
+let results = $state([]);
+const resultRows = $derived(results.map((candidate) => ({
+	item: candidate,
+	trigger: undefined
+})));
+const rows = $derived([
+	...registryRows,
+	...staticRows,
+	...resultRows
+].filter((row) => matchesQuery(row.item)));
+const sections = $derived(groups.map((group) => ({
+	group,
+	rows: rows.filter((row) => row.item.group === group.id)
+})).filter((section) => section.rows.length > 0));
+// ── Async search ─────────────────────────────────────────────────
+let pending = $state(false);
+let timer;
+let inFlight;
+const search = (text) => {
+	if (onSearch === undefined) return;
+	inFlight?.abort();
+	const own = new AbortController();
+	inFlight = own;
+	pending = true;
+	void onSearch(text, own.signal).then((next) => {
+		// A superseded request must not write: `inFlight` is the identity
+		// check, `signal.aborted` catches the caller aborting its own work.
+		if (own.signal.aborted || inFlight !== own) return;
+		results = next;
+		pending = false;
+	}).catch(() => {
+		if (own.signal.aborted || inFlight !== own) return;
+		pending = false;
+	});
+};
+const cancel = () => {
+	if (timer !== undefined) clearTimeout(timer);
+	timer = undefined;
+	inFlight?.abort();
+	inFlight = undefined;
+};
+const emit = (text) => {
+	if (onSearch === undefined) return;
+	if (text === "") {
+		cancel();
+		pending = false;
+		results = [];
+		return;
+	}
+	if (timer !== undefined) clearTimeout(timer);
+	timer = setTimeout(() => {
+		timer = undefined;
+		search(text);
+	}, debounceMs);
+};
+// Emit only while the palette is open; closing it emits `''`, which resets
+// the rows and cancels anything in flight.
+$effect(() => {
+	const text = open ? trimmedQuery : "";
+	untrack(() => emit(text));
+});
+$effect(() => () => cancel());
+const isEmpty = $derived(trimmedQuery.length > 0 && !pending && sections.length === 0);
+// ── Activation ───────────────────────────────────────────────────
+const activate = (candidate) => {
+	setOpen(false);
+	onSelect?.(candidate);
+	if (candidate.run !== undefined) void candidate.run();
+	if (candidate.href !== undefined) void context.navigate(context.href(candidate.href));
+};
+</script>
+
+{#snippet row(entry: Row)}
+  <Command.Item
+    value={`${entry.item.group}:${entry.item.id}`}
+    keywords={[entry.item.label]}
+    onSelect={() => activate(entry.item)}
+    class="data-selected:bg-base-200 flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2"
+  >
+    {#if item}
+      {@render item(entry.item)}
+    {:else}
+      <span class="flex min-w-0 items-baseline gap-2">
+        <span class="truncate text-sm">{entry.item.label}</span>
+        {#if entry.item.hint !== undefined}
+          <span class="text-base-content/60 truncate text-xs">{entry.item.hint}</span>
+        {/if}
+      </span>
+      {#if entry.trigger !== undefined}
+        <HotkeyBadge trigger={entry.trigger} />
+      {:else if entry.item.badge !== undefined}
+        <Badge size="sm">{entry.item.badge}</Badge>
+      {/if}
+    {/if}
+  </Command.Item>
+{/snippet}
+
+<Dialog bind:open={() => open, setOpen} title={label} {closeLabel}>
+  <Command.Root shouldFilter={onSearch === undefined} loop {label} class="flex flex-col">
+    <Command.Input
+      bind:ref={input}
+      bind:value={query}
+      {placeholder}
+      class="input border-base-300 w-full rounded-none border-0 border-b focus:outline-none"
+    />
+    <Command.List class="max-h-96 overflow-x-hidden overflow-y-auto pt-2">
+      <Command.Viewport>
+        {#each sections as section (section.group.id)}
+          <Command.Group value={section.group.id}>
+            <Command.GroupHeading
+              class="text-base-content/70 px-3 pt-3 pb-1 text-xs font-semibold tracking-wide uppercase"
+            >
+              {section.group.label}
+            </Command.GroupHeading>
+            <Command.GroupItems>
+              {#each section.rows as entry (`${entry.item.group}:${entry.item.id}`)}
+                {@render row(entry)}
+              {/each}
+            </Command.GroupItems>
+          </Command.Group>
+        {/each}
+
+        {#if pending && trimmedQuery.length > 0}
+          <!-- Through `child` so `aria-label` lands AFTER bits-ui's own
+               props: `Command.Loading` hard-codes the English "Loading...",
+               and in this library the name of anything is a prop. -->
+          <Command.Loading>
+            {#snippet child({ props })}
+              <div {...props} aria-label={loadingLabel} class="text-base-content/60 px-3 py-2 text-sm">
+                {loadingLabel}
+              </div>
+            {/snippet}
+          </Command.Loading>
+        {/if}
+
+        {#if isEmpty}
+          <p class="text-base-content/60 px-3 py-6 text-center text-sm">{emptyLabel}</p>
+        {/if}
+      </Command.Viewport>
+    </Command.List>
+  </Command.Root>
+</Dialog>

package/dist/search/CommandPalette.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+import { type CommandGroup, type CommandItem } from './types.ts';
+interface Props {
+    /**
+     * Whether the palette is shown. Bindable. Two-way bound to the hotkey
+     * registry's `paletteOpen` when a registry is mounted above.
+     */
+    open?: boolean | undefined;
+    /**
+     * Names the command menu, and titles the dialog.
+     * @defaultValue `'Command palette'`
+     */
+    label?: string | undefined;
+    /**
+     * Placeholder in the search field.
+     * @defaultValue `'Type a command or search…'`
+     */
+    placeholder?: string | undefined;
+    /**
+     * Announced while an `onSearch` request is in flight.
+     * @defaultValue `'Searching…'`
+     */
+    loadingLabel?: string | undefined;
+    /**
+     * Shown when a settled query matched nothing.
+     * @defaultValue `'No results'`
+     */
+    emptyLabel?: string | undefined;
+    /**
+     * Accessible name of the dialog's close button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /**
+     * The sections, in render order. Rows name one by `id`.
+     * @defaultValue the exported `defaultCommandGroups`
+     */
+    groups?: readonly CommandGroup[] | undefined;
+    /** Rows that are always available, registry or no registry. */
+    items?: readonly CommandItem[] | undefined;
+    /**
+     * Fetch rows for a query. Debounced by `debounceMs`; `signal` aborts when
+     * a newer query supersedes this one, so pass it to `fetch`.
+     */
+    onSearch?: ((query: string, signal: AbortSignal) => Promise<readonly CommandItem[]>) | undefined;
+    /**
+     * Quiet period before a search starts, in milliseconds.
+     * @defaultValue `150`
+     */
+    debounceMs?: number | undefined;
+    /** Called when a row is activated, before its own `run` / `href`. */
+    onSelect?: ((item: CommandItem) => void) | undefined;
+    /** Replace a row's contents. */
+    item?: Snippet<[CommandItem]> | undefined;
+}
+/** The ⌘K / Ctrl+K command palette: bits-ui’s `Command` inside this library’s `Dialog`. */
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/search/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * search — the command palette.
+ *
+ * One component, because a palette is one thing: a dialog, a query box, and
+ * rows from wherever the app has them. It composes `feedback/Dialog` and
+ * bits-ui's `Command`, lists the hotkey registry's palette actions when a
+ * registry is mounted, and works from `items` / `onSearch` alone when none
+ * is.
+ *
+ * @module
+ */
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { defaultCommandGroups, type CommandGroup, type CommandItem } from './types.ts';

package/dist/search/index.js

@@ -0,0 +1,13 @@
+/**
+ * search — the command palette.
+ *
+ * One component, because a palette is one thing: a dialog, a query box, and
+ * rows from wherever the app has them. It composes `feedback/Dialog` and
+ * bits-ui's `Command`, lists the hotkey registry's palette actions when a
+ * registry is mounted, and works from `items` / `onSearch` alone when none
+ * is.
+ *
+ * @module
+ */
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { defaultCommandGroups } from "./types.js";

package/dist/search/types.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The row and section shapes the command palette renders.
+ *
+ * A {@link CommandItem} is deliberately not a `CommandAction`: registry
+ * actions always run something, whereas a palette row can just as well be a
+ * search result that navigates, or a row whose whole behaviour is the
+ * caller's `onSelect`. The palette projects registry actions into this shape
+ * internally, so one row renderer serves both sources.
+ *
+ * @module
+ */
+/** One row of the command palette: an id, a label, the group it sits in, and what activating it does. */
+export interface CommandItem {
+    /** Stable id. Unique within its group; it is what bits-ui ranks and selects on. */
+    id: string;
+    /** The row's text — what the reader searches for and what is announced. */
+    label: string;
+    /** Which {@link CommandGroup} the row belongs in, by `id`. */
+    group: string;
+    /** Muted trailing text: a path, a date, a parent name. */
+    hint?: string | undefined;
+    /** A short chip on the right — a type, a status. */
+    badge?: string | undefined;
+    /** What activating the row does. Runs after the palette closes. */
+    run?: (() => void | Promise<void>) | undefined;
+    /** Where activating the row goes. Resolved through the components context. */
+    href?: string | undefined;
+}
+/** A palette section: an id rows point at, and the heading it renders. */
+export interface CommandGroup {
+    /** What a `CommandItem`'s `group` names. */
+    id: string;
+    /** The section heading. */
+    label: string;
+}
+/**
+ * The sections a palette shows when given none: the two group ids the hotkey
+ * registry uses (`actions`, `navigation`), then whatever `onSearch` returns.
+ */
+export declare const defaultCommandGroups: readonly CommandGroup[];

package/dist/search/types.js

@@ -0,0 +1,20 @@
+/**
+ * The row and section shapes the command palette renders.
+ *
+ * A {@link CommandItem} is deliberately not a `CommandAction`: registry
+ * actions always run something, whereas a palette row can just as well be a
+ * search result that navigates, or a row whose whole behaviour is the
+ * caller's `onSelect`. The palette projects registry actions into this shape
+ * internally, so one row renderer serves both sources.
+ *
+ * @module
+ */
+/**
+ * The sections a palette shows when given none: the two group ids the hotkey
+ * registry uses (`actions`, `navigation`), then whatever `onSearch` returns.
+ */
+export const defaultCommandGroups = [
+    { id: 'actions', label: 'Actions' },
+    { id: 'navigation', label: 'Go to' },
+    { id: 'results', label: 'Results' },
+];

package/dist/seo/Head.svelte

@@ -0,0 +1,190 @@
+<!-- @component
+Per-page `<head>` metadata: title, description, canonical URL, `hreflang` alternates, Open Graph and Twitter / X tags, `article:*` and pagination links.
+-->
+<script lang="ts">/**
+* Per-page `<head>` metadata: the title (with an optional site-name
+* suffix), description, keywords, robots directive, canonical URL,
+* `hreflang` alternates, an optional feed link, Open Graph and Twitter / X
+* card tags, the `article:*` family, and `prev` / `next` pagination links.
+*
+* **Canonical on the production origin.** The explicit `canonical` wins;
+* otherwise the page self-references `pathname` resolved through
+* `canonicalHref` (the query is never part of it), so canonical and
+* `og:url` are never empty and a preview host never becomes canonical.
+* `canonicalHref` defaults to the components context's `href` — an app
+* whose `href` returns relative paths passes its own absolute resolver
+* here. `pathname` defaults to `window.location.pathname`, which does not
+* exist during SSR: a SvelteKit app passes `pathname={page.url.pathname}`.
+*
+* **Share image, in precedence order:** an explicit `image`, then a
+* per-page card built from `shareCard` by {@link ogImageUrl}, then
+* `defaultImage` — so every share renders a card when a default is set.
+*
+* **`og:type`** is derived from the Schema.org `type` when `openGraphType`
+* is not given, and the `article:*` tags are emitted only for `article`.
+* **`og:locale`** comes from `ogLocale`, else the context locale with `-`
+* replaced by `_` (`en-AU` → `en_AU`).
+*
+* Every string is a prop: `siteName` has no default (a library cannot know
+* the site), `feed.title` defaults to `'Latest changes'`, and the share
+* card's alt text defaults to `"<title> — <siteName>"` (the title alone without a `siteName`) via `shareCardAlt`.
+*
+* Renders only into `<svelte:head>`; there is no markup in the body.
+*/
+import { getComponentsContext } from "../context.svelte.js";
+import { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH, ogImageUrl } from "./og-image.js";
+let { title, siteName = undefined, titleSeparator = " | ", description = undefined, keywords = undefined, type = undefined, openGraphType = undefined, canonical = undefined, pathname = undefined, canonicalHref = undefined, alternates = undefined, locales = undefined, ogLocale = undefined, feed = undefined, robots = undefined, image = undefined, shareCard = undefined, shareCardPath = undefined, shareCardAlt = undefined, defaultImage = undefined, published = undefined, modified = undefined, section = undefined, tags = undefined, twitterCard = "summary_large_image", twitterSite = undefined, twitterCreator = undefined, prevUrl = undefined, nextUrl = undefined } = $props();
+const context = getComponentsContext();
+/** Schema.org type → Open Graph type, so `og:type` is never empty. */
+const schemaToOpenGraph = {
+	WebPage: "website",
+	WebSite: "website",
+	CollectionPage: "website",
+	Article: "article",
+	BlogPosting: "article",
+	ProfilePage: "profile"
+};
+const resolveHref = $derived(canonicalHref ?? context.href);
+const resolvedTitle = $derived.by(() => {
+	const trimmed = title.trim();
+	if (trimmed === "") return siteName ?? "";
+	return siteName === undefined || siteName === "" ? trimmed : `${trimmed}${titleSeparator}${siteName}`;
+});
+const resolvedDescription = $derived(description === null || description === undefined || description.trim() === "" ? undefined : description);
+const resolvedCanonical = $derived.by(() => {
+	if (canonical !== undefined) return canonical;
+	const path = pathname ?? (typeof window === "undefined" ? undefined : window.location.pathname);
+	return path === undefined ? undefined : resolveHref(path);
+});
+const resolvedAlternates = $derived.by(() => {
+	if (alternates !== undefined) return alternates;
+	if (resolvedCanonical === undefined || locales === undefined || locales.length === 0) return [];
+	const href = resolvedCanonical;
+	return [...locales, "x-default"].map((lang) => ({
+		href,
+		lang
+	}));
+});
+const resolvedOgType = $derived(openGraphType ?? (type === undefined ? "website" : schemaToOpenGraph[type]));
+const resolvedOgLocale = $derived.by(() => {
+	if (ogLocale !== undefined) return ogLocale;
+	const locale = context.locale();
+	const first = typeof locale === "string" ? locale : locale?.[0];
+	return first === undefined ? undefined : first.replace(/-/g, "_");
+});
+const cardImage = $derived.by(() => {
+	if (image !== undefined || shareCard === undefined) return undefined;
+	const url = ogImageUrl(shareCard, {
+		href: resolveHref,
+		basePath: shareCardPath
+	});
+	if (url === undefined) return undefined;
+	const alt = shareCardAlt?.(shareCard) ?? (siteName === undefined || siteName === "" ? shareCard.title.trim() : `${shareCard.title.trim()} — ${siteName}`);
+	return {
+		url,
+		alt,
+		width: OG_IMAGE_WIDTH,
+		height: OG_IMAGE_HEIGHT,
+		type: "image/png"
+	};
+});
+const resolvedImage = $derived(image ?? cardImage ?? defaultImage);
+const robotsContent = $derived(`${robots?.index ?? true ? "index" : "noindex"}, ${robots?.follow ?? true ? "follow" : "nofollow"}`);
+const resolvedSection = $derived(section?.trim() === "" ? undefined : section);
+</script>
+
+{#snippet articleMeta()}
+  {#if published !== undefined}
+    <meta property="article:published_time" content={published.toISOString()} />
+  {/if}
+  {#if modified !== undefined}
+    <meta property="article:modified_time" content={modified.toISOString()} />
+  {/if}
+  {#if resolvedSection !== undefined}
+    <meta property="article:section" content={resolvedSection} />
+  {/if}
+  {#each tags ?? [] as tag}
+    <meta property="article:tag" content={tag} />
+  {/each}
+{/snippet}
+
+<svelte:head>
+  <title>{resolvedTitle}</title>
+  {#if resolvedDescription !== undefined}
+    <meta name="description" content={resolvedDescription} />
+  {/if}
+  {#if keywords !== undefined && keywords.length > 0}
+    <meta name="keywords" content={keywords.join(', ')} />
+  {/if}
+  {#if resolvedCanonical !== undefined}
+    <link rel="canonical" href={resolvedCanonical} />
+  {/if}
+  {#if feed !== undefined}
+    <link
+      rel="alternate"
+      type={feed.type ?? 'application/feed+json'}
+      href={resolveHref(feed.path)}
+      title={feed.title ?? 'Latest changes'}
+    />
+  {/if}
+  <meta name="robots" content={robotsContent} />
+
+  <meta property="og:title" content={resolvedTitle} />
+  {#if resolvedCanonical !== undefined}
+    <meta property="og:url" content={resolvedCanonical} />
+  {/if}
+  {#if siteName !== undefined && siteName !== ''}
+    <meta property="og:site_name" content={siteName} />
+  {/if}
+  <meta property="og:type" content={resolvedOgType} />
+  {#if resolvedOgLocale !== undefined}
+    <meta property="og:locale" content={resolvedOgLocale} />
+  {/if}
+  {#if resolvedDescription !== undefined}
+    <meta property="og:description" content={resolvedDescription} />
+  {/if}
+
+  <meta name="twitter:card" content={twitterCard} />
+  {#if twitterSite !== undefined}
+    <meta name="twitter:site" content={twitterSite} />
+  {/if}
+  {#if twitterCreator !== undefined}
+    <meta name="twitter:creator" content={twitterCreator} />
+  {/if}
+  <meta name="twitter:title" content={resolvedTitle} />
+  {#if resolvedDescription !== undefined}
+    <meta name="twitter:description" content={resolvedDescription} />
+  {/if}
+
+  {#if resolvedImage !== undefined}
+    <meta property="og:image" content={resolvedImage.url} />
+    <meta name="twitter:image" content={resolvedImage.url} />
+    {#if resolvedImage.alt !== undefined && resolvedImage.alt !== ''}
+      <meta property="og:image:alt" content={resolvedImage.alt} />
+      <meta name="twitter:image:alt" content={resolvedImage.alt} />
+    {/if}
+    {#if resolvedImage.width !== undefined}
+      <meta property="og:image:width" content={String(resolvedImage.width)} />
+    {/if}
+    {#if resolvedImage.height !== undefined}
+      <meta property="og:image:height" content={String(resolvedImage.height)} />
+    {/if}
+    {#if resolvedImage.type !== undefined}
+      <meta property="og:image:type" content={resolvedImage.type} />
+    {/if}
+  {/if}
+
+  {#if resolvedOgType === 'article'}
+    {@render articleMeta()}
+  {/if}
+
+  {#each resolvedAlternates as alternate}
+    <link rel="alternate" href={alternate.href} hreflang={alternate.lang} />
+  {/each}
+  {#if prevUrl !== undefined}
+    <link rel="prev" href={prevUrl} />
+  {/if}
+  {#if nextUrl !== undefined}
+    <link rel="next" href={nextUrl} />
+  {/if}
+</svelte:head>