git.stevedylan.dev

chore: style updates for updates eed7b70b

Steve · 2026-01-09 07:28 1 file(s) · +13 −68

packages/client/src/pages/now/[slug].astro +13 −68

let description = "A post from my PDS";
let contentHTML = "";
let publishedAt = "";
let isPost = false;
let postText = "";
let imagesHTML = "";
let atUri = "";

try {

	}

	if (!documentFound) {
		// Fall back to fetching as a post
		const postResponse = await fetch(
			`${PDS_URL}/xrpc/com.atproto.repo.getRecord?` +
				new URLSearchParams({
					repo: DID,
					collection: "app.bsky.feed.post",
					rkey: slug,
				}),
		);

		if (!postResponse.ok) {
			return new Response(null, {
				status: 404,
				statusText: "Not Found",
			});
		}

		const data = await postResponse.json();
		const post = data.value;
		isPost = true;
		postText = post.text;
		title = post.text.slice(0, 60) + (post.text.length > 60 ? "..." : "");
		description = post.text.slice(0, 160);
		publishedAt = new Date(post.createdAt).toLocaleDateString();

		// Handle images
		if (
			post.embed &&
			post.embed.$type === "app.bsky.embed.images" &&
			post.embed.images
		) {
			const imageElements = post.embed.images
				.map((image: any) => {
					const blobUrl =
						`${PDS_URL}/xrpc/com.atproto.sync.getBlob?` +
						new URLSearchParams({
							did: DID,
							cid: image.image.ref.$link,
						});

					return `<img src="${blobUrl}" alt="${image.alt || "Image from post"}" class="max-w-full h-auto" loading="lazy" />`;
				})
				.join("");

			imagesHTML = `<div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? "grid-cols-1" : "grid-cols-2"}">${imageElements}</div>`;
		}
		return new Response(null, {
			status: 404,
			statusText: "Not Found",
		});
	}
} catch (err) {
	console.error("Error fetching post:", err);

---

<PageLayout meta={meta}>
	<article class="max-w-2xl mx-auto">
		{isPost ? (
			<>
				<p class="mb-2">{postText}</p>
				<Fragment set:html={imagesHTML} />
			</>
		) : (
			<>
				<h1 class="text-2xl font-bold mb-4">{title}</h1>
				<div class="prose prose-invert max-w-none mb-4">
					<Fragment set:html={contentHTML} />
				</div>
			</>
		)}
		<div class="flex items-center justify-between mt-4">
			<time class="text-sm text-gray-500">{publishedAt}</time>
	<article>
		<h1 class="text-2xl font-bold mb-2">{title}</h1>
		<time class="text-sm text-gray-400">{publishedAt}</time>
		<div class="prose prose-invert max-w-none my-4">
			<Fragment set:html={contentHTML} />
		</div>
		<p class="text-xs text-gray-400 mt-4 break-all">{atUri}</p>
		<div class="mt-12 flex items-center justify-between">
			<a class="style-link" href="/now">&larr; Now</a>
			<button
				id="share-btn"
				class="text-sm text-gray-500 hover:text-gray-700 transition-colors"
			>
				Share
			</button>
		</div>
		<div class="mt-12">
			<a class="style-link" href="/now">&larr; Now</a>
		</div>
	</article>
</PageLayout>

23	23		let description = "A post from my PDS";
24	24		let contentHTML = "";
25	25		let publishedAt = "";
26		-	let isPost = false;
27		-	let postText = "";
28		-	let imagesHTML = "";
29	26		let atUri = "";
30	27
31	28		try {

101	98		}
102	99
103	100		if (!documentFound) {
104		-	// Fall back to fetching as a post
105		-	const postResponse = await fetch(
106		-	`${PDS_URL}/xrpc/com.atproto.repo.getRecord?` +
107		-	new URLSearchParams({
108		-	repo: DID,
109		-	collection: "app.bsky.feed.post",
110		-	rkey: slug,
111		-	}),
112		-	);
113		-
114		-	if (!postResponse.ok) {
115		-	return new Response(null, {
116		-	status: 404,
117		-	statusText: "Not Found",
118		-	});
119		-	}
120		-
121		-	const data = await postResponse.json();
122		-	const post = data.value;
123		-	isPost = true;
124		-	postText = post.text;
125		-	title = post.text.slice(0, 60) + (post.text.length > 60 ? "..." : "");
126		-	description = post.text.slice(0, 160);
127		-	publishedAt = new Date(post.createdAt).toLocaleDateString();
128		-
129		-	// Handle images
130		-	if (
131		-	post.embed &&
132		-	post.embed.$type === "app.bsky.embed.images" &&
133		-	post.embed.images
134		-	) {
135		-	const imageElements = post.embed.images
136		-	.map((image: any) => {
137		-	const blobUrl =
138		-	`${PDS_URL}/xrpc/com.atproto.sync.getBlob?` +
139		-	new URLSearchParams({
140		-	did: DID,
141		-	cid: image.image.ref.$link,
142		-	});
143		-
144		-	return `<img src="${blobUrl}" alt="${image.alt \|\| "Image from post"}" class="max-w-full h-auto" loading="lazy" />`;
145		-	})
146		-	.join("");
147		-
148		-	imagesHTML = `<div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? "grid-cols-1" : "grid-cols-2"}">${imageElements}</div>`;
149		-	}
	101	+	return new Response(null, {
	102	+	status: 404,
	103	+	statusText: "Not Found",
	104	+	});
150	105		}
151	106		} catch (err) {
152	107		console.error("Error fetching post:", err);

164	119		---
165	120
166	121		<PageLayout meta={meta}>
167		-	<article class="max-w-2xl mx-auto">
168		-	{isPost ? (
169		-	<>
170		-	<p class="mb-2">{postText}</p>
171		-	<Fragment set:html={imagesHTML} />
172		-	</>
173		-	) : (
174		-	<>
175		-	<h1 class="text-2xl font-bold mb-4">{title}</h1>
176		-	<div class="prose prose-invert max-w-none mb-4">
177		-	<Fragment set:html={contentHTML} />
178		-	</div>
179		-	</>
180		-	)}
181		-	<div class="flex items-center justify-between mt-4">
182		-	<time class="text-sm text-gray-500">{publishedAt}</time>
	122	+	<article>
	123	+	<h1 class="text-2xl font-bold mb-2">{title}</h1>
	124	+	<time class="text-sm text-gray-400">{publishedAt}</time>
	125	+	<div class="prose prose-invert max-w-none my-4">
	126	+	<Fragment set:html={contentHTML} />
	127	+	</div>
	128	+	<p class="text-xs text-gray-400 mt-4 break-all">{atUri}</p>
	129	+	<div class="mt-12 flex items-center justify-between">
	130	+	<a class="style-link" href="/now">← Now</a>
183	131		<button
184	132		id="share-btn"
185	133		class="text-sm text-gray-500 hover:text-gray-700 transition-colors"
186	134		>
187	135		Share
188	136		</button>
189		-	</div>
190		-	<div class="mt-12">
191		-	<a class="style-link" href="/now">← Now</a>
192	137		</div>
193	138		</article>
194	139		</PageLayout>