small fixes, more docs

README.md

···
 # blento
 
-WORK IN PROGRESS, not ready for use yet, but you can test it out at: https://blento.app (no guarantee that your blento wont be broken at some point though and might have to be recreated).
+Alpha version can be tried at https://blento.app 
 
-your personal website in a bento style layout, using your bluesky PDS as a backend.
+Your personal website in a bento style layout, using your bluesky personal data server as a backend.
 
 made with svelte, tailwind and hosted on cloudflare workers.
 
-## Development
+## Why?
 
-```
-git clone https://github.com/flo-bit/blento.git
-cd blento
-cp .env.example .env
-pnpm install
-pnpm run dev
-```
+This started as a replacement/alternative for bento.me which is shutting down in a few weeks (Feb 2026) after being bought by a competitor ^^ I wanted to build a version that couldn't just shut down or where it would be very easy to spin up a new version (with all the data) should the old one disappear.
+
+That's why all your data is saved on your bluesky personal data server, so you can start setting up your website on blento.app, but then anytime you want to start self hosting you easily take your data with you (dedicated forks optimized for self hosting on different platforms coming soon).
+
+Should blento.app shut down at some point, someone else can also spin up a new version that shows all blentos (note: it's MIT licensed so you *could* do that now too and offer a competing service, but please don't (except for self-hosting your own profile ofc), legal != nice).
+
+One other note: for most independence I encourage everyone to get their own domain and either self host or redirect to blento.app/your-profile (still working on a way to make this as easy as possible for non-technical users, if you have any suggestions please reach out).
 
 ## Selfhosting
 
···
 
 ## Making Custom cards
 
-See [docs/CustomCards](./docs/CustomCards.md)
+See [docs/CustomCards](./docs/CustomCards.md)
+
+## Contributing
+
+See [docs/Contributing](./docs/Contributing.md)
+
+## Idea for a card?
+
+Open an issue
+
+## License 
+
+MIT

docs/Beta.md

···
-# Todo for beta
+# Todo for beta version
 
 - fix opengraph image stuff
 
 - site.standard
-  - move subpages to own lexicon
+  - move subpages to own lexicon (app.blento.page)
   - move description to markdownDescription and set description as text only
 
-- fix recent blentos only showing the last ~5
+- fix recent blentos only showing the last ~5 blentos
 
 - card with big call to action button
 
 - link card: save favicon and og image as blobs
 
-- video card
+- video card?
 
 - allow changing profile picture
 

docs/Contributing.md

···
+# Contributing Guidelines
+
+Contributions are very welcome 🎉
+
+For creating new cards see [here](CustomCards.md) (and check out [existing card ideas](CardIdeas.md))
+
+## Development
+
+```
+git clone https://github.com/flo-bit/blento.git
+cd blento
+cp .env.example .env
+pnpm install
+pnpm run dev
+```
+
+## AI assisted development
+
+You can submit PRs written with AI but please make sure:
+
+- there's no extra unnecessary changes/unnecessary verbose code (keep it simple)
+- you test everything yourself (in light/dark mode, with and without colored cards, in edit mode and not in edit mode)

docs/CustomCards.md

···
 # Custom Cards
 
-WORK IN PROGRESS, EARLY STATE, MIGHT CHANGE.
-
 see `src/lib/cards` for how cards are made (and e.g. `src/lib/cards/EmbedCard/` and `src/lib/cards/LivestreamCard/` for examples of implementation).
 
 Notes:
 
-Cards should be styled to work in light and dark mode (with dark: class modifier) as well as when cards are colorful (= bg-color-500 for the card) (with accent: modifier).
+- Cards should be styled to work in light and dark mode (with dark: class modifier) as well as when cards are colorful (= bg-color-500 for the card) (with accent: modifier).
+- Please test newly created cards both when editing (/your-user/edit) and in your user profile when saved (/your-user)

package.json

···
 {
 	"name": "blento",
 	"private": true,
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/cards/BlueskyMediaCard/SidebarItemBlueskyMediaCard.svelte

···
+<script lang="ts">
+	import { Button } from '@foxui/core';
+
+	let { onclick }: { onclick: () => void } = $props();
+</script>
+
+<Button {onclick} variant="ghost" class="w-full justify-start">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="text-accent-600 dark:text-accent-400"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16" /><path
+			d="M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"
+		/><circle cx="13" cy="7" r="1" fill="currentColor" /><rect
+			x="8"
+			y="2"
+			width="14"
+			height="14"
+			rx="2"
+		/></svg
+	>
+
+	Bluesky media
+</Button>

src/lib/cards/BlueskyMediaCard/index.ts

···
 import type { CardDefinition } from '../types';
 import BlueskyMediaCard from './BlueskyMediaCard.svelte';
 import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
+import SidebarItemBlueskyMediaCard from './SidebarItemBlueskyMediaCard.svelte';
 
 export const BlueskyMediaCardDefinition = {
 	type: 'blueskyMedia',
 	contentComponent: BlueskyMediaCard,
 	createNew: (card) => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
-	sidebarButtonText: 'Bluesky Media'
+	sidebarButtonText: 'Bluesky Media',
+	sidebarComponent: SidebarItemBlueskyMediaCard
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/SectionCard/index.ts

···
 		card.mobileW = COLUMNS;
 	},
 
-	sidebarButtonText: 'Section Headline',
 	defaultColor: 'transparent',
 	maxH: 1,
 	canResize: false

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

···
 	import type { ContentComponentProps } from '$lib/cards/types';
 	import { getAdditionalUserData } from '$lib/website/context';
 	import type { ProfileViewDetailed } from '@atproto/api/dist/client/types/app/bsky/actor/defs';
-	import { onMount } from 'svelte';
 
 	let { item }: ContentComponentProps = $props();
 
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
 	const profiles = data[item.cardType] as ProfileViewDetailed[];
+
+	$inspect(profiles);
 </script>
 
-<div class="h-full flex flex-col">
-	<div class="text-2xl font-bold px-4 py-2">Recently updated blentos</div>
-	<div class="flex grow max-w-full items-center gap-4 overflow-x-scroll overflow-y-hidden px-4">
+<div class="flex h-full flex-col">
+	<div class="px-4 py-2 text-2xl font-bold">Recently updated blentos</div>
+	<div class="flex max-w-full grow items-center gap-4 overflow-x-scroll overflow-y-hidden px-4">
 		{#each profiles as profile}
 			<a
 				href="/{profile.handle}"
-				class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl transition-colors duration-150 p-2 accent:bg-accent-200/30 accent:hover:bg-accent-200/50"
+				class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 accent:bg-accent-200/30 accent:hover:bg-accent-200/50 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
 				target="_blank"
 			>
-				<img src={profile.avatar} class="aspect-square size-28 rounded-full" alt="" />
-				<div class="line-clamp-1 text-md font-bold text-center">{profile.displayName || profile.handle}</div>
+				<img
+					src={profile.avatar}
+					class="bg-base-200 dark:bg-base-700 accent:bg-accent-300 aspect-square size-28 rounded-full"
+					alt=""
+				/>
+				<div class="text-md line-clamp-1 text-center font-bold">
+					{profile.displayName || profile.handle}
+				</div>
 			</a>
 		{/each}
 	</div>

src/lib/website/EditableWebsite.svelte

···
 					variant="ghost"
 					class="backdrop-blur-none"
 					onclick={() => {
+						newCard('section');
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
+					>
+				</Button>
+
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => {
 						newCard('text');
 					}}
 				>
···
 							stroke="currentColor"
 							stroke-linecap="round"
 							stroke-linejoin="round"
-							stroke-width="1.5"
+							stroke-width="2"
 							d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
 						/></svg
 					>
···
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="-2 -2 28 28"
-								stroke-width="1.5"
+								stroke-width="2"
 								stroke="currentColor"
 							>
 								<path
···
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
 							viewBox="0 0 24 24"
-							stroke-width="1.5"
+							stroke-width="2"
 							stroke="currentColor"
 							class="size-6"
 						>
···
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
-						stroke-width="1.5"
+						stroke-width="2"
 						stroke="currentColor"
 					>
 						<path
···
 				</Button>
 
 				{#if dev}
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						videoInputRef?.click();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
+					<Button
+						size="iconLg"
+						variant="ghost"
+						class="backdrop-blur-none"
+						onclick={() => {
+							videoInputRef?.click();
+						}}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
-						/>
-					</svg>
-				</Button>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+							/>
+						</svg>
+					</Button>
 				{/if}
 
 				<Button