feat: add an image component.

leaf/ts/components.ts

@@ -1,5 +1,5 @@
 import { BorshSchema } from 'borsher';
-import { Component, LinkSchema, type Link } from './index';
+import { Component, LinkSchema, type Link, type LeafBlob, LeafBlobSchema } from './index';
 
 export class Utf8 extends Component {
 	value: string = '';
@@ -179,23 +179,52 @@ Embed could be useful for:
 	}
 }
 
-/*
+export type ImageSize = {
+	width: number;
+	height: number;
+};
+export const ImageSizeSchema = BorshSchema.Struct({
+	width: BorshSchema.u32,
+	height: BorshSchema.u32
+});
+
+export class Image extends Component {
+	mimeType: string;
+	size: ImageSize;
+	data: LeafBlob;
+
+	constructor(mimeType: string, size: ImageSize, data: LeafBlob) {
+		super();
+		this.mimeType = mimeType;
+		this.size = size;
+		this.data = data;
+	}
+	static componentName(): string {
+		return 'Image';
+	}
+	static borshSchema(): BorshSchema {
+		return BorshSchema.Struct({
+			mimeType: BorshSchema.String,
+			size: ImageSizeSchema,
+			data: LeafBlobSchema
+		});
+	}
+	static specification(): Component[] {
+		return [
+			new CommonMark(`An image associated with the entity.
 
-Components to port from Rust.
+The \`Image\` component usually represents the "feature image", icon, avatar, or other primary image
+associated to the entity. This image would often be displayed in link previews.
 
-#[derive(BorshDeserialize, BorshSerialize, HasBorshSchema, Component, Debug)]
-#[component(
-    specification = "leaf-schemas/Image",
-    schema_id = "b7yadsp7e2lt6swf7d6lc6e4244h2xk327k3aekzafcp4jnxi2jq"
-)]
-pub struct Image {
-    mime_type: String,
-    size: ImageSize,
-    data: Blob,
-}
-#[derive(BorshDeserialize, BorshSerialize, HasBorshSchema, Debug)]
-pub struct ImageSize {
-    width: u32,
-    height: u32,
+The \`Image\` component might also be used for an entity that is primarily an image, such as an image
+file in an image in an image gallery.
+
+Multiple \`Image\` components may be added to an entity when there are multiple formats or sizes
+available for the same image. This can be useful, for example, to allow using a smaller image for a
+link preview than you would use when displaying a full-sized feature image on a blog post.
+
+In most cases, multiple distinct images should be stored in separate entities or a different
+component.`)
+		];
+	}
 }
-*/

leaf/ts/index.ts

@@ -221,6 +221,9 @@ export const LinkSchema = BorshSchema.Struct({
 	snapshot: BorshSchema.Option(DigestSchema)
 });
 
+export type LeafBlob = Digest;
+export const LeafBlobSchema = DigestSchema;
+
 export type LeafBorshFormat = {
 	Null: Unit;
 	Bool: boolean;