## 経緯
<div class="link-card">
<div class="link-card-header">
<img src="https://bsky.app/static/favicon-32x32.png" class="link-card-site-icon"/>
<span class="link-card-site-name">Bluesky Social</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">hann-solo (@hnsol.bsky.social)</p>
<p class="link-card-description">個人的な希望としては、Obsidianのvaultに画像ファイルは置かず、リンク貼り付けにしたい。Blueskyに投稿するとき、画像を貼りたい（キーボード関係はとくに）。などとおもっております。Obsidianに投稿するだけならあまり必要性を感じず、Memosも含めて試しては中断を繰り返していたのですが、Osidian→SNS投稿、はまったく意味が変わって、すごくありがたいですね〜！MFDIをつかうためだけでも、X比率下げてBluesky比率を上げようかなとおもっています ... </p>
</div>
</div>
<a href="https://bsky.app/profile/hnsol.bsky.social/post/3koemcsdunw2k"></a>
</div>
## 対応方法検討
以下の関数で`meta`に`HTMLMeta`以外を渡せるようにする。
```ts
postToBluesky(
identifier: string,
password: string,
text: string,
meta?: HTMLMeta
): Promise<{ uri: string; cid: string }>
```
渡しているMetaは以下のような感じ。
```ts
const [htmlMetas, setHtmlMetas] = useState<HTMLMeta[]>([]);
const [imageMetas, setImageMetas] = useState<ImageMeta[]>([]);
const [twitterMetas, setTwitterMetas] = useState<TwitterMeta[]>([]);
const meta = htmlMetas.first();
```
なので、`ImageMeta`も渡せるようにすればよさそう。
```ts
export type Meta = HTMLMeta | ImageMeta | TwitterMeta;
export interface HTMLMeta {
type: "html";
siteName: string;
title: string;
description?: string;
faviconUrl: string;
coverUrl?: string;
originUrl: string;
}
export interface ImageMeta {
type: "image";
data: Blob;
originUrl: string;
}
```
どちらも`originUrl`はあるのでそれで処理はできるはず。画像の渡し方が内部で少し変わるだけ。
## 画像の埋め込み方
https://docs.bsky.app/docs/tutorials/creating-a-post#images-embeds より
```ts
const image = 'data:image/png;base64,...'
const { data } = await agent.uploadBlob(convertDataURIToUint8Array(image), {
encoding,
})
await agent.post({
text: 'I love my cat',
embed: {
$type: 'app.bsky.embed.images',
images: [
// can be an array up to 4 values
{
alt: 'My cat mittens', // the alt text
image: data.blob,
aspectRatio: {
// a hint to clients
width: 1000,
height: 500
}
}],
},
createdAt: new Date().toISOString()
})
```
## タスク
- [x] postToBlueskyのImageMeta対応
- [x] postToBlueskyのImageMetaの呼び出し対応
- [x] 動作確認
- [x] HTML
- [x] Image
- [x] HTML & Image