Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import type { Node as NodeType, AssetLinkBlock } from "@contentful/rich-text-types";
import { getContext } from "svelte";
import { isAssetBlock } from "../predicates";
import { linksKey, blurhashesKey, type LinksContext, imageSizeTypeKey } from "../context";
import { getSources } from "$lib/imageServices/contentful";
import Image from "$lib/components/Image";
import Link from "$lib/components/Link";
export let node: NodeType;
if (!isAssetBlock(node)) throw new Error("node is not an embedded asset");
let asset: AssetLinkBlock = node;
const linksContext = getContext<LinksContext | undefined>(linksKey);
if (!linksContext) throw new Error("no context was provided for embedded asset node");
const assetID = asset.data.target.sys.id;
const link = linksContext.linksAssetsMaps.block.get(assetID);
if (!link) throw new Error(`the asset ${assetID} was not found in the context`);
const { url } = link;
if (!url) {
throw new Error(`the asset ${assetID} was found in the context but did not have a source URL`);
}
const isImage = link.contentType?.startsWith("image/");
const blurhashes = getContext<Record<string, string> | null | undefined>(blurhashesKey);
const blurhash = blurhashes?.[assetID];
</script>
{#if isImage}
<Image
src={url}
sources={getSources}
alt={link.description ?? "Unknown image"}
width={link.width ?? undefined}
height={link.height ?? undefined}
sizeType={getContext(imageSizeTypeKey)}
{blurhash}
/>
{:else}
<p>
<Link href={url}>{link.title}</Link><br />
{#if link.description}
<em>{link.description}</em>
{/if}
</p>
{/if}
|