blueskyのweb uiを作ってみた
今回は、blueskyのweb uiを作ってみました。bluesky、楽しい。
こちらのページにアクセスして、usernameを入れると、投稿が出てきます。
https://bskyw.syui.ai
https://bskyw.syui.ai/syui
一番難儀したのがcssです。srcは/bsky
にあります。vueで書かれています。
com.atproto.repo.listRecords
<template>
<div id="app">
<div class="bluesky-avatar"><img :src="user.data.avatar"/></div>
<div v-if="user" class="bluesky-user">
<p><a :href="this.bskyurl">@{{ user.data.handle }}</a></p>
<p>{{ user.data.did }}</p>
</div>
<form @submit.prevent="submit">
<input v-model="id" placeholder="id" value="id">
<input type="submit">
</form>
<div v-if="record" class="bluesky-record">
<li v-for="i in record.data.records">
<p><span class="name">{{ name }}</span></p>
<p><span class="text">{{ i.value.text }}</span></p>
<p><span class="time"><a :href="i.uri">{{ i.value.createdAt }}</a></span></p>
</li>
</div>
</div>
</template>
なお、vueはjsのframeworkなので"jsで書かれています"という表現が正しいのですが、jsのframeworkはlangという認識でもあるので私はこのように表現することが多いです。reactとかもそうですね。