My personal site hosted @ https://indexx.dev
indexx.dev
1import { useEffect, useState } from "react";
2const actorDid = import.meta.env.PUBLIC_ACTOR_DID;
3
4if (!actorDid) {
5 console.error(
6 "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",
7 );
8}
9
10export default function Status() {
11 const [data, setData] = useState(null);
12 const [error, setError] = useState(null);
13
14 useEffect(() => {
15 console.log("gettin dat damn sattus directly from bsky");
16 const fetchStatus = async () => {
17 if (!actorDid) {
18 setError("Configuration error: Actor DID is missing.");
19 return;
20 }
21 try {
22 const res = await fetch(
23 `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,
24 );
25 if (!res.ok) throw new Error(`HTTP ${res.status}`);
26
27 const json = await res.json();
28 const latestPost = json.feed[0].post;
29
30 const status = {
31 text: latestPost.record.text,
32 createdAt: latestPost.record.createdAt,
33 link: `https://bsky.app/profile/${actorDid}/post/${
34 latestPost.uri.split("/")[4]
35 }`,
36 };
37 setData(status);
38 } catch (err) {
39 console.error("Fetch failed:", err);
40 setError(err.message);
41 }
42 };
43
44 fetchStatus();
45 }, [actorDid]);
46
47 if (error) return <span>Error: {error}</span>;
48 if (!data) return <span>Loading status...</span>;
49
50 const date = new Date(data.createdAt);
51 const now = new Date();
52 const diff = now.getTime() - date.getTime();
53
54 const minutes = Math.floor(diff / 60000);
55 const hours = Math.floor(minutes / 60);
56 const days = Math.floor(hours / 24);
57
58 let timeAgo = "just now";
59 if (days > 0) timeAgo = `${days} days ago`;
60 else if (hours > 0) timeAgo = `${hours} hours ago`;
61 else if (minutes > 0) timeAgo = `${minutes} minutes ago`;
62
63 const oldStatusClasses = days > 3
64 ? "opacity-75 text-decoration-line-through"
65 : "";
66
67 return (
68 <a
69 href={data.link}
70 target="_blank"
71 className={`badge bg-white ${oldStatusClasses}`}
72 >
73 Index is.. "{data.text}", {timeAgo}
74 </a>
75 );
76}