git.stevedylan.dev

chore: removed transitions and updated method for fetching data d3ec885f

Steve · 2026-01-03 16:18 2 file(s) · +73 −61

src/layouts/Base.astro +0 −2

import Footer from "@/components/layout/Footer";
import SkipLink from "@/components/SkipLink";
import siteConfig from "@/site-config";
import { ViewTransitions } from "astro:transitions";

interface Props {
	meta: SiteMeta;

		<!-- Google tag (gtag.js) -->
		<BaseHead title={title} description={description} ogImage={ogImage} articleDate={articleDate} />
		<script defer src="https://cloud.umami.is/script.js" data-website-id="6951e531-a667-495e-b045-4f7dbe062446"></script>
		<ViewTransitions fallback="swap" />
	</head>
	<body>
		<SkipLink />

src/pages/now.astro +73 −59

	description: "What I'm up to recently",
};
---

<PageLayout meta={meta}>
  <div class="space-y-6">
    <h1 class="title">Now</h1>

      <li>Testing out different fountain pen inks</li>
      <li>Reading The Dispossessed</li>
    </ul>

    <p class="text-gray-400">Last updated: January 3rd, 2026</p>
  <h2 class="text-xl font-semibold pt-12">Updates</h2>
  <div id="posts-container">
    <p>Loading...</p>
  </div>

  <script>
    import { AtpAgent } from '@atproto/api';

    const urlParams = new URLSearchParams(window.location.search);
    const rkey = urlParams.get('rkey');
    const DID = 'did:plc:ia2zdnhjaokf5lazhxrmj6eu';
    const atUri = `at://${DID}/app.bsky.feed.post/${rkey}`;
    const PDS_URL = 'https://polybius.social';

    const agent = new AtpAgent({ service: 'https://public.api.bsky.app' });
    // Fetch posts directly from your PDS using the repo.listRecords endpoint
    async function fetchPosts() {
      try {
        const response = await fetch(
          `${PDS_URL}/xrpc/com.atproto.repo.listRecords?` +
          new URLSearchParams({
            repo: DID,
            collection: 'app.bsky.feed.post',
            limit: '20',
            filter: 'posts_no_replies'
          })
        );

    agent.app.bsky.feed.getAuthorFeed({
      actor: DID,
      limit: 20,
      filter: 'posts_no_replies'
    })
    .then(({ data }) => {
      const posts = data.feed;
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

      if (posts.length === 0) {
        document.getElementById('posts-container').innerHTML = '<p>No recent posts found.</p>';
        return;
      }
        const data = await response.json();

        if (!data.records || data.records.length === 0) {
          document.getElementById('posts-container').innerHTML = '<p>No recent posts found.</p>';
          return;
        }

        // Filter out replies (posts that have a reply reference)
        const posts = data.records.filter(record => !record.value.reply);

      const postsHTML = posts.map(feedItem => {
        const post = feedItem.post;
        const createdAt = new Date(post.record.createdAt).toLocaleDateString();
        const postsHTML = posts.map(record => {
          const post = record.value;
          const createdAt = new Date(post.createdAt).toLocaleDateString();

        // Handle images
        let imagesHTML = '';
        if (post.embed && post.embed.images) {
          const imageElements = post.embed.images.map(image => {
            return `
              <img
                src="${image.fullsize}"
                alt="${image.alt || 'Image from post'}"
                class="max-w-full h-auto"
                loading="lazy"
              />
          // Handle images
          let imagesHTML = '';
          if (post.embed && post.embed.$type === 'app.bsky.embed.images' && post.embed.images) {
            const imageElements = post.embed.images.map(image => {
              // Construct blob URL - images are stored as blobs on the PDS
              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>
            `;
          }).join('');
          }

          imagesHTML = `
            <div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}">
              ${imageElements}
            </div>
          return `
            <article class="border-b pb-6 mb-6 last:border-b-0">
              <p class="mb-2">${post.text}</p>
              ${imagesHTML}
              <time class="text-sm text-gray-500 mt-2 block">${createdAt}</time>
            </article>
          `;
        }
        }).join('');

        return `
          <article class="border-b pb-4 mb-6 last:border-b-0">
            <p class="mb-2">${post.record.text}</p>
            ${imagesHTML}
            <time class="text-sm text-gray-500 mt-2 block">${createdAt}</time>
          </article>
        document.getElementById('posts-container').innerHTML = `
          <div class="space-y-4">
            <div>${postsHTML}</div>
          </div>
        `;
      }).join('');
      } catch (err) {
        console.error('Error fetching posts:', err);
        document.getElementById('posts-container').innerHTML =
          '<p>Error loading recent posts. Make sure your PDS is accessible.</p>';
      }
    }

      document.getElementById('posts-container').innerHTML = `
        <div class="space-y-4">
          <div>${postsHTML}</div>
        </div>
      `;
    })
    .catch(err => {
      console.error('Error fetching posts:', err);
      document.getElementById('posts-container').innerHTML =
        '<p>Error loading recent posts.</p>';
    });
    fetchPosts();
  </script>
  </div>

</PageLayout>

5	5		import Footer from "@/components/layout/Footer";
6	6		import SkipLink from "@/components/SkipLink";
7	7		import siteConfig from "@/site-config";
8		-	import { ViewTransitions } from "astro:transitions";
9	8
10	9		interface Props {
11	10		meta: SiteMeta;

24	23		<!-- Google tag (gtag.js) -->
25	24		<BaseHead title={title} description={description} ogImage={ogImage} articleDate={articleDate} />
26	25		<script defer src="https://cloud.umami.is/script.js" data-website-id="6951e531-a667-495e-b045-4f7dbe062446"></script>
27		-	<ViewTransitions fallback="swap" />
28	26		</head>
29	27		<body>
30	28		<SkipLink />

5	5		description: "What I'm up to recently",
6	6		};
7	7		---
8		-
9	8		<PageLayout meta={meta}>
10	9		<div class="space-y-6">
11	10		<h1 class="title">Now</h1>

18	17		<li>Testing out different fountain pen inks</li>
19	18		<li>Reading The Dispossessed</li>
20	19		</ul>
21		-
	20	+	<p class="text-gray-400">Last updated: January 3rd, 2026</p>
22	21		<h2 class="text-xl font-semibold pt-12">Updates</h2>
23	22		<div id="posts-container">
24	23		<p>Loading...</p>
25	24		</div>
26		-
27	25		<script>
28		-	import { AtpAgent } from '@atproto/api';
29		-
30		-	const urlParams = new URLSearchParams(window.location.search);
31		-	const rkey = urlParams.get('rkey');
32	26		const DID = 'did:plc:ia2zdnhjaokf5lazhxrmj6eu';
33		-	const atUri = `at://${DID}/app.bsky.feed.post/${rkey}`;
	27	+	const PDS_URL = 'https://polybius.social';
34	28
35		-	const agent = new AtpAgent({ service: 'https://public.api.bsky.app' });
	29	+	// Fetch posts directly from your PDS using the repo.listRecords endpoint
	30	+	async function fetchPosts() {
	31	+	try {
	32	+	const response = await fetch(
	33	+	`${PDS_URL}/xrpc/com.atproto.repo.listRecords?` +
	34	+	new URLSearchParams({
	35	+	repo: DID,
	36	+	collection: 'app.bsky.feed.post',
	37	+	limit: '20',
	38	+	filter: 'posts_no_replies'
	39	+	})
	40	+	);
36	41
37		-	agent.app.bsky.feed.getAuthorFeed({
38		-	actor: DID,
39		-	limit: 20,
40		-	filter: 'posts_no_replies'
41		-	})
42		-	.then(({ data }) => {
43		-	const posts = data.feed;
	42	+	if (!response.ok) {
	43	+	throw new Error(`HTTP error! status: ${response.status}`);
	44	+	}
44	45
45		-	if (posts.length === 0) {
46		-	document.getElementById('posts-container').innerHTML = '<p>No recent posts found.</p>';
47		-	return;
48		-	}
	46	+	const data = await response.json();
	47	+
	48	+	if (!data.records \|\| data.records.length === 0) {
	49	+	document.getElementById('posts-container').innerHTML = '<p>No recent posts found.</p>';
	50	+	return;
	51	+	}
	52	+
	53	+	// Filter out replies (posts that have a reply reference)
	54	+	const posts = data.records.filter(record => !record.value.reply);
49	55
50		-	const postsHTML = posts.map(feedItem => {
51		-	const post = feedItem.post;
52		-	const createdAt = new Date(post.record.createdAt).toLocaleDateString();
	56	+	const postsHTML = posts.map(record => {
	57	+	const post = record.value;
	58	+	const createdAt = new Date(post.createdAt).toLocaleDateString();
53	59
54		-	// Handle images
55		-	let imagesHTML = '';
56		-	if (post.embed && post.embed.images) {
57		-	const imageElements = post.embed.images.map(image => {
58		-	return `
59		-	<img
60		-	src="${image.fullsize}"
61		-	alt="${image.alt \|\| 'Image from post'}"
62		-	class="max-w-full h-auto"
63		-	loading="lazy"
64		-	/>
	60	+	// Handle images
	61	+	let imagesHTML = '';
	62	+	if (post.embed && post.embed.$type === 'app.bsky.embed.images' && post.embed.images) {
	63	+	const imageElements = post.embed.images.map(image => {
	64	+	// Construct blob URL - images are stored as blobs on the PDS
	65	+	const blobUrl = `${PDS_URL}/xrpc/com.atproto.sync.getBlob?` +
	66	+	new URLSearchParams({
	67	+	did: DID,
	68	+	cid: image.image.ref.$link
	69	+	});
	70	+
	71	+	return `
	72	+	<img
	73	+	src="${blobUrl}"
	74	+	alt="${image.alt \|\| 'Image from post'}"
	75	+	class="max-w-full h-auto"
	76	+	loading="lazy"
	77	+	/>
	78	+	`;
	79	+	}).join('');
	80	+
	81	+	imagesHTML = `
	82	+	<div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}">
	83	+	${imageElements}
	84	+	</div>
65	85		`;
66		-	}).join('');
	86	+	}
67	87
68		-	imagesHTML = `
69		-	<div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}">
70		-	${imageElements}
71		-	</div>
	88	+	return `
	89	+	<article class="border-b pb-6 mb-6 last:border-b-0">
	90	+	<p class="mb-2">${post.text}</p>
	91	+	${imagesHTML}
	92	+	<time class="text-sm text-gray-500 mt-2 block">${createdAt}</time>
	93	+	</article>
72	94		`;
73		-	}
	95	+	}).join('');
74	96
75		-	return `
76		-	<article class="border-b pb-4 mb-6 last:border-b-0">
77		-	<p class="mb-2">${post.record.text}</p>
78		-	${imagesHTML}
79		-	<time class="text-sm text-gray-500 mt-2 block">${createdAt}</time>
80		-	</article>
	97	+	document.getElementById('posts-container').innerHTML = `
	98	+	<div class="space-y-4">
	99	+	<div>${postsHTML}</div>
	100	+	</div>
81	101		`;
82		-	}).join('');
	102	+	} catch (err) {
	103	+	console.error('Error fetching posts:', err);
	104	+	document.getElementById('posts-container').innerHTML =
	105	+	'<p>Error loading recent posts. Make sure your PDS is accessible.</p>';
	106	+	}
	107	+	}
83	108
84		-	document.getElementById('posts-container').innerHTML = `
85		-	<div class="space-y-4">
86		-	<div>${postsHTML}</div>
87		-	</div>
88		-	`;
89		-	})
90		-	.catch(err => {
91		-	console.error('Error fetching posts:', err);
92		-	document.getElementById('posts-container').innerHTML =
93		-	'<p>Error loading recent posts.</p>';
94		-	});
	109	+	fetchPosts();
95	110		</script>
96	111		</div>
97		-
98	112		</PageLayout>