add latest bluesky post

src/lib/Profile.svelte

···
 				</div>
 			{/if}
 		{/if}
-		<div class="hidden text-xs font-light @5xl/wrapper:flex">
+		<div class="hidden text-xs font-light @5xl/wrapper:block">
 			made with <a
 				href="https://blento.app"
 				target="_blank"

src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte

···
+<script lang="ts">
+	import { getAdditionalUserData } from '$lib/helper';
+	import BaseCard, { type BaseCardProps } from '../BaseCard/BaseCard.svelte';
+	import { BlueskyPost } from '@foxui/social';
+
+	let { item, ...rest }: BaseCardProps = $props();
+
+	const feed = getAdditionalUserData().recentPosts?.feed;
+
+	$inspect(feed);
+</script>
+
+<BaseCard {item} {...rest}>
+	<div class="flex max-h-full overflow-y-scroll p-4">
+		{#if feed?.[0].post}
+			<BlueskyPost showLogo showReply={false} showBookmark={false} feedViewPost={feed?.[0].post}
+			></BlueskyPost>
+		{:else}{/if}
+	</div>
+</BaseCard>

src/lib/cards/BlueskyPostCard/BlueskyPostEditingCard.svelte

···
+<script lang="ts">
+	import { getAdditionalUserData } from '$lib/helper';
+	import type { Item } from '$lib/types';
+	import BaseEditingCard, { type BaseEditingCardProps } from '../BaseCard/BaseEditingCard.svelte';
+	import { BlueskyPost } from '@foxui/social';
+
+	let { item = $bindable<Item>(), ...rest }: BaseEditingCardProps = $props();
+	const feed = getAdditionalUserData().recentPosts?.feed;
+</script>
+
+<BaseEditingCard {item} {...rest}>
+	<div class="flex max-h-full overflow-y-scroll p-4">
+		{#if feed?.[0].post}
+			<BlueskyPost showLogo showReply={false} showBookmark={false} feedViewPost={feed?.[0].post}
+			></BlueskyPost>
+		{:else}
+			Your latest bluesky post will appear here.
+		{/if}
+	</div>
+</BaseEditingCard>

src/lib/cards/BlueskyPostCard/SidebarItemBlueskyPostCard.svelte

···
+<script lang="ts">
+	import { Button } from '@foxui/core';
+
+	let { onclick }: { onclick: () => void } = $props();
+</script>
+
+<Button {onclick} variant="ghost" class="w-full" size="lg">
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="size-4" viewBox="0 0 600 530">
+		<path
+			d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+			fill="currentColor"
+		/>
+	</svg>
+	Latest Bluesky Post
+</Button>

src/lib/cards/BlueskyPostCard/index.ts

···
+import type { CardDefinition } from '../types';
+import BlueskyPostEditingCard from './BlueskyPostEditingCard.svelte';
+import BlueskyPostCard from './BlueskyPostCard.svelte';
+import SidebarItemBlueskyPostCard from './SidebarItemBlueskyPostCard.svelte';
+
+export const BlueskyPostCardDefinition = {
+	type: 'latestPost',
+	cardComponent: BlueskyPostCard,
+	editingCardComponent: BlueskyPostEditingCard,
+	createNew: (card) => {
+		card.cardType = 'latestPost';
+	},
+	sidebarComponent: SidebarItemBlueskyPostCard
+} as CardDefinition & { type: 'latestPost' };

src/lib/cards/SpecialCards/UpdatedBlentos/MainUpdatedBlentosCards.svelte

···
 <script lang="ts">
-	import { getRecentRecords } from '$lib/helper';
+	import { getAdditionalUserData } from '$lib/helper';
 	import { getProfile } from '$lib/oauth/atproto';
 	import type { ProfileViewDetailed } from '@atproto/api/dist/client/types/app/bsky/actor/defs';
 	import { onMount } from 'svelte';
 
-	const recentRecords = getRecentRecords();
+	const recentRecords = getAdditionalUserData().recentRecords;
 
 	let profiles: ProfileViewDetailed[] = $state([]);
 

src/lib/cards/index.ts

···
+import { BlueskyPostCardDefinition } from './BlueskyPostCard';
 import { ImageCardDefinition } from './ImageCard';
 import { LinkCardDefinition } from './LinkCard';
 import { UpdatedBlentosCardDefitition } from './SpecialCards/UpdatedBlentos';
···
 	TextCardDefinition,
 	LinkCardDefinition,
 	UpdatedBlentosCardDefitition,
-	YoutubeCardDefinition
+	YoutubeCardDefinition,
+	BlueskyPostCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/helper.ts

···
 
 export const [getCanEdit, setCanEdit] = createContext<() => boolean>();
 
-export const [getRecentRecords, setRecentRecords] = createContext();
+export const [getAdditionalUserData, setAdditionalUserData] = createContext();

src/lib/website/utils.ts

···
 import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords';
 import { data } from './data';
 import { client } from '$lib/oauth';
+import { AtpBaseClient } from '@atproto/api';
 
 export function parseUri(uri: string) {
 	const [did, collection, rkey] = uri.split('/').slice(2);
···
 		}
 	}
 
+	const cardTypes = new Set(
+		Object.values(downloadedData['app.blento.card']).map((v) => v.value.cardType)
+	);
+
 	let recentRecords;
-	if (handle === 'blento.app') {
+	if (cardTypes.has('updatedBlentos')) {
 		try {
 			// https://ufos-api.microcosm.blue/records?collection=app.blento.card
 			const response = await fetch(
···
 		}
 	}
 
-	return { did, data: JSON.parse(JSON.stringify(downloadedData)) as DownloadedData, recentRecords };
+	let recentPosts;
+
+	if (cardTypes.has('latestPost')) {
+		try {
+			const agent = new AtpBaseClient({ service: 'https://api.bsky.app' });
+			const authorFeed = await agent.app.bsky.feed.getAuthorFeed({
+				actor: did,
+				filter: 'posts_no_replies',
+				limit: 2
+			});
+			console.log(authorFeed.data);
+			recentPosts = JSON.parse(JSON.stringify(authorFeed.data));
+		} catch (error) {
+			console.error('failed to fetch recent posts', error);
+		}
+	}
+
+	return {
+		did,
+		data: JSON.parse(JSON.stringify(downloadedData)) as DownloadedData,
+		additionalData: {
+			recentRecords,
+			recentPosts
+		}
+	};
 }
 
 export async function uploadBlob(blob: Blob) {

src/routes/+page.svelte

···
 <script lang="ts">
-	import { setRecentRecords } from '$lib/helper.js';
+	import { setAdditionalUserData } from '$lib/helper.js';
 	import { type Item } from '$lib/types.js';
 	import Website from '$lib/Website.svelte';
 
 	let { data } = $props();
 
 	// svelte-ignore state_referenced_locally
-	setRecentRecords(data.recentRecords);
+	setAdditionalUserData(data.additionalData);
 </script>
 
 <Website

src/routes/[handle]/+page.svelte

···
 <script lang="ts">
 	import { page } from '$app/state';
-	import { setRecentRecords } from '$lib/helper.js';
+	import { setAdditionalUserData } from '$lib/helper.js';
 	import { type Item } from '$lib/types.js';
 	import Website from '$lib/Website.svelte';
 
 	let { data } = $props();
 
 	// svelte-ignore state_referenced_locally
-	setRecentRecords(data.recentRecords);
+	setAdditionalUserData(data.additionalData);
 </script>
 
 <Website

src/routes/[handle]/edit/+page.svelte

···
 <script lang="ts">
 	import { page } from '$app/state';
 	import EditableWebsite from '$lib/EditableWebsite.svelte';
-	import { setRecentRecords } from '$lib/helper.js';
+	import { setAdditionalUserData } from '$lib/helper.js';
 	import { type Item } from '$lib/types.js';
 
 	let { data } = $props();
 
 	// svelte-ignore state_referenced_locally
-	setRecentRecords(data.recentRecords);
+	setAdditionalUserData(data.additionalData);
 </script>
 
 <EditableWebsite

src/routes/edit/+page.svelte

···
 <script lang="ts">
 	import EditableWebsite from '$lib/EditableWebsite.svelte';
-	import { setRecentRecords } from '$lib/helper.js';
+	import { setAdditionalUserData } from '$lib/helper.js';
 	import { type Item } from '$lib/types.js';
 
 	let { data } = $props();
 
 	// svelte-ignore state_referenced_locally
-	setRecentRecords(data.recentRecords);
+	setAdditionalUserData(data.additionalData);
 </script>
 
 <EditableWebsite