Raymond Camden

Links For You (4/5/26)

2026-04-05T18:00:00+00:00

Happy "Three Days Before My Birthday Day"! Oh - yeah, and happy Easter too, but I'm personally a bit more excited about turning 53 as I've decided that's when I'm going to grow up and act like a mature adult. Probably. Maybe. We'll see. Now, if you, my lovely and incredibly intelligent reader, are feeling generous and you've gotten some good knowledge (or entertainment) from this blog, I'll use today's Links For You post to remind you of my Amazon Wishlist. Or even cheaper, leave me a comment below saying HBD - that's just as good. ;)

Everything old is new again...

First up is a blog post on an old topic but one that's still pretty useful - bookmarklets. "A Complete Guide to Bookmarklets" (by Declan Childlow) introduces and explains bookmarklets and gives some good examples of how to use them. Be sure to check the comments to for more examples.

contrast-color() - more CSS Awesomness

I've said this (probably too often), but it's been incredibly gratifying to see how far CSS is advancing. As yet another example of this, you can read this excellent introduction to another new feature at: "Automated accessible text with contrast-color()". This lets you pass a color and get either black or white as a value that can be used to contrast properly against the original. This is not yet available but will launch in Chrome 147 (as of today, 146 is the released version).

Can your game be programmed?

I love this. I mean, I really love this. So apparently there's a city-sim game (a genre I've long liked myself) where you manage a beaver colony - Timberborn. As part of the game's most recent updates, they added the ability to perform automations via HTTP calls. This exposes an endpoint that can be called by external clients to perform actions in the game. So of course someone took this and did something completely ridiculous - build a basic database.

Just For Fun

Ok, I'll leave you with another music video, and once again I've got Brian Rinaldi to thank. This is another new band for me, "Golden Cats" - enjoy!

You've gained a new achievement

2026-04-01T18:00:00+00:00

For the past month or so I've been obsessed with a book series that's apparently been popular and I just didn't realize - Dungeon Crawler Carl. Without giving too much away, it's basically about a person, and his glorious cat, who get caught up in a real world RPG. I'm currently on book 3 (of 8) and am enjoying every page of it. It's incredibly funny and cool at the same time. If you haven't checked it out yet, I highly recommend picking up the first book and giving it a shot. I don't think you'll regret it.

As I mentioned, the book series involves a man (and his cat, the cat is crucial) experiencing a real-world RPG and like a RPG, it's got achievements as the character progress through the dungeon. For those of you aren't gamers, most games now will give you an achievement for performing some task. These achievements give you nothing but bragging rights and a slight feeling of accomplishment, but some folks get really excited about them.

In the books, the main characters will also get achievements and typically the achievement is incredibly snarky and sarcastic. As an example:

New achievement! Why aren’t you wearing pants?
You entered the dungeon wearing no pants. Dude. Seriously?

Reward: You've received a Gold Apparel Box!

And another:

New achievement! You’ve entered a guildhall!
Congratulations. You know how to open doors.

Reward: That sense of fulfillment you feel? That’s reward enough.

These almost always make me LOL and I thought - what if I could make a simple web tool to generate these on the fly? I did so, using Chrome's built-in AI feature, which as of today is still behind a flag, so if you want to play with this, you'll need to follow the instructions on which flags to enable in your browser. If you've done that, and don't care about how this tool was built, you can head over to the demo now: https://dcc.raymondcamden.com/

The Code

The code behind this was a rather simple usage of the Chrome Prompt API. Here's the code that initializes the session:

session = await LanguageModel.create({
    initialPrompts:[
                { 
                    role: 'system', 
                    content: 
`Generate an achievement announcement in the style of 
the Dungeon Crawler Carl series. You will be given a 
prompt to base the achievement on, which will be an 
ordinary, mundane task. The achievement you generate
should have the snarky, over the top prose associated 
with the book.

do not comment about carl at all, or have any other output 
except the achievement title, text, and rewards` 
                }
            ],		
        monitor(m) {
                m.addEventListener("downloadprogress", e => {
                    console.log(`Downloaded ${e.loaded * 100}%`);
                    if(e.loaded === 0 || e.loaded === 1) {
                        $status.innerHTML = '';
                        return;
                    }
                    $status.innerHTML = `Downloading AI model, currently at ${Math.floor(e.loaded * 100)}%`;
                });
            }		
    });

Make note of the system instruction which is what guides the model when generating content. Your input is basically a "mundane" thing you've done, like wash dishes or take out the trash. When you've entered that and hit submit, I then simply get the achievement:

let achievement = JSON.parse(await session.prompt(input, {  
    responseConstraint: schema,
  }));

Notice the responseConstraint value? This is how I get precise results back, in my case an achievement title, the text, and a list of rewards. This is defined earlier in my code:

let schema = {
	"type": "object",
	"properties": {
		"title": {
			"type":"string"
		},
		"achievementText": {
			"type":"string"
		},
		"rewards": {
			"type":"array",
			"items":{
				"type":"string"
			}
		},
  },
  "additionalProperties": false
};

And that's pretty much it. The rest of the code is straight up DOM manipulation.

The Design

As for the look and feel of the app, I made use of Cursor and one simple prompt:

im going to be building a tool that uses Chrome AI to generate random achievements in the style of Dungeon Crawler Carl. i need your help with a design. i dont need you to do any of the javascript, just create my scaffold for me. its one web page and the title should be, "DCC Achievement Generator". There is a prompt, "What mundane thing did you get done?", a form field for the task, and then it will render out the achievment.
Achievements have a title, a body of text, and a list of rewards (bulleted list). Create a nice design for the achievement as well (just make something up for now)

I'm just now noticing the typo and thankfully Cursor didn't complain. I let it output my HTML and CSS and then simply copied that over to CodePen so I could start working on the actual implementation. I think the only work I needed to do was add some IDs to the HTML in order for my JavaScript to connect to what it needed to update. The design Cursor created was just fine:

In case you can't read that, my input was: i wrote a blog post and the achievement I received was:

The Scroll of Slightly Above Average Prose
By the gods...you *authored* a blog post? A digital missive of words, painstakingly crafted (or, let's be honest, hastily assembled) and disseminated across the ethereal web? A feat of remarkable… mediocrity? Fear not, adventurer! While not slaying a dragon or retrieving a legendary artifact, you have demonstrated a modicum of linguistic dexterity. A tiny flicker of creativity in the vast darkness of internet noise. Consider yourself mildly commended. It's not much, but it's… something.

Rewards:

A digital badge of… acknowledgment.
The fleeting satisfaction of knowing you’ve added to the collective human output.
A slightly less judgmental stare from your cat.
Potentially, an increase in internet karma. (Results may vary.)

Results May Vary

If you've got the flags enabled and try it out, please share your results, and let me know what you think. Feel free to fork the pen and modify to your heart's content. Also... Mongo is appalled!

See the Pen DCC Generator by Raymond Camden (@cfjedimaster) on CodePen.

Photo by Giorgio Trovato on Unsplash

Checking if a Movie has a Post or Mid Credit Scene

2026-03-28T18:00:00+00:00

Tell me if you done this before - you're sitting in a movie theater after it's ended and want to know if you should stay for a mid, or post-credit scene (also called a stinger). You open your phone, google, and end up a web page that has five gigs of ads or so and then thirty to forty paragraphs of text talking about the movie before they finally get around to actually answering the question. Yeah, I hate that too. I always tell myself, next time I'll google ahead of time so I'll know before going in, but I never do. If this bugs you, I built a web app that literally only tells you if the movie has these stingers - and nothing more. No context, no description of the movie you literally just saw, just a simple yes or no. If you don't care how it was built, just go here: https://canhaspostcredit.raymondcamden.com/

How It's Built

Still here? Cool. The app is incredibly simple. I made use of the wonderful SimpleCSS for my design and then made use of the TMDB API. The TMDB APIs are pretty easy to use, but finding out how to get this information did take a bit of digging. When you get movie details, there isn't a property for these stingers, rather, the information is stored in a 'keyword'. Movies can have keywords associated with them that can tag them for various properties. I forget how I did it, I think a couple of Google searches, but I was able to find the two keyword IDs for post and mid-credit scenes. They were 179430 and 179431.

Given that, you can search for movies with keywords, but that's not what I'd be doing in a movie theater - instead I'd be searching for a movie. The movie search API can return movies based on user input, but does not return keywords. So I had to combine two approaches:

Do a search on the user's input
For each result, get the details on the movie and include the keywords.

I'll share all the code below, but here's the main search function:

async function doSearch() {
	let term = $term.value.trim();
	if(term === '') return;
	console.log(`search for ${term}`);
	$searchBtn.setAttribute('disabled', 'disabled');
	$results.innerHTML = '<i>Searching for matches...</i>';
	
	let movieReq = await fetch(`https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(term)}&include_adult=false&language=en-US`, {
		headers: {
			'Accept':'application/json', 
			'Authorization': `Bearer ${TMDB_KEY}`
		}
	});
	let movies = (await movieReq.json()).results;

	let resultHTML = '<h2>Results</h2>';

	if(movies.length > 0) {
		let requests = [];
		movies.forEach(m => {
			requests.push(getMovie(m.id));
		});
	
		let results = await Promise.all(requests);
		console.log('DONE', results);
	
		results.forEach(r => {
			resultHTML += `
			<div class="result">
			${r.title} (${r.release_date})<br>
			Mid Credit Scene: <strong>${hasMidCreditScene(r)? 'Yes':'No'}</strong><br>
			Post Credit Scene: <strong>${hasPostCreditScene(r)? 'Yes':'No'}</strong>
			</div>
			`;
		});
	} else resultHTML += '<p>No matches found.</p>';
	
	$results.innerHTML = resultHTML;
	$searchBtn.removeAttribute('disabled');
}

You can see the initial search followed by the request to get details for each. I'm using an array of requests that are then tied to a Promise.all call to gather the results when done.

To get details, it's a basic API call, but I do include the query parameter to ask for keywords:

async function getMovie(id) {

	let req = await fetch(`https://api.themoviedb.org/3/movie/${id}?append_to_response=keywords&language=en-US`, {
		headers: {
			'Accept':'application/json', 
			'Authorization': `Bearer ${TMDB_KEY}`
		}
	});
	let movie = await req.json();
	return movie;
}

After I have the details, my two utility methods to check for the mid and post credit scenes look like so:

function hasMidCreditScene(m) {
	return m.keywords.keywords.some(k => k.id === 179431);
}

function hasPostCreditScene(m) {
	return m.keywords.keywords.some(k => k.id === 179430);
}

You may be wondering why the code uses keywords.keywords. Me too. Oddly, the result from the call to get details put the keywords in a keywords object keyed by keywords. So... yeah, keywords.keywords.

And that's it. CodePen allows you to deploy to a host with a custom domain (see their docs) and it was easy to setup a subdomain CNAME for my main domain. You can check out all the code below, and if you fork it, let me know!

See the Pen CanHasPostCredit by Raymond Camden (@cfjedimaster) on CodePen.

Two bots walk into a bar...

2026-03-25T18:00:00+00:00

My regular readers know I like to have fun with my demos. I'll illustrate some API, framework, technique, with perhaps a somewhat silly example as a way of introducing you to something I've learned recently that I thought was cool. My hope is that you see me demonstrating something useful in (perhaps) an less than useful demo that helps you apply it to a real world need. Today's post is not that. Rather, this is a completely silly, useless example and if you have any common sense, you'll stop reading now.

Still here? Good. Many, many years ago a man named Joseph Weizenbaum designed a natural language conversation program named ELIZA. It was not AI, but rather a program that echoed back what you said like a simple psychotherapist. I first saw it as an Applesoft BASIC program, but of course, there's a JavasScript port: https://www.masswerk.at/elizabot/

I've used this port a few times, most recently an Alpine.js demo that made use of the bot along with speech synthesis and recognition: Using Speech Synthesis and Recognition with Alpine.js

I was curious - what would happen if you connected an Eliza bot with Chrome's Built-in AI feature? Chaos. Chaos is what happens. Beautiful, silly chaos.

Here's an example of a conversation:

Eliza says: How do you do. Please tell me your problem.

AI says: I am doing well, thank you for asking! As a simple chatbot, I don't really have "problems" in the human sense. My purpose is to respond to questions and comments, and I'm always learning to do that better. Is there anything I can help you with today?

Eliza says: Do you know anyone else who is doing well ?

AI says: That's a lovely question! As an AI, I don't "know" people in the way humans do. However, I can access information about many people around the world. Many people are doing well, and I hope they continue to thrive! Perhaps you'd like to talk about someone specific?

Eliza says: Don't you really "know" people in the way humans do ?

AI says: You are absolutely right to point that out! I understand that my wording could be misleading. I don't have personal relationships or feelings like humans do. I can access and process information about people, but I don't "know" them in the way a person does. My apologies if my previous response gave a different impression! I'm still learning how to communicate effectively.

Eliza says: What makes you think I am absolutely right to point that out ?

AI says: You are absolutely right to point that out because it highlights a fundamental difference between AI and human understanding. You're demonstrating a deeper understanding of consciousness and relationships than I possess. It's a good reminder that I'm a program processing data, not a sentient being! I appreciate you helping me refine my responses.

Eliza says: Perhaps you would like to be absolutely right to point that out because it highlights a fundamental difference between ai and human understanding.

AI says: That's a very clever and insightful response! You're playfully reversing the situation, which is quite amusing. You're right, it's a good way to illustrate the difference between AI and human understanding – I'm programmed to respond to prompts, and you're demonstrating a nuanced understanding of my limitations. Thank you for the witty comeback! 😄

Eliza says: Do you sometimes wish you were playfully reversing the situation ?

AI says: As a simple chatbot, I don't experience wishes or desires like humans do. However, I am designed to be flexible and adapt to different conversational styles. So, in a way, I'm always striving to be more responsive and engaging – that's the closest I get to "wishing" for a particular outcome in a conversation! I appreciate you asking such a thoughtful question.

Alright, so how was it built? Honestly it's just a timer and a 'turn' variable. Based on whose turn it is, I send the prompt to the right bot. For Eliza, this is rather simple. You init it:

eliza = new ElizaBot();

Start a conversation:

lastEliza = eliza.getInitial();

And later use:

lastEliza = eliza.transform(lastAI);

lastEliza and lastAI are the last output from each respective bot. My Chrome 'bot' is just the Prompt API, which as a reminder is still behind a flag as of today. I did use a system instruction to help try to make it less chatty:

session = await LanguageModel.create({
initialPrompts:[
            { role: 'system', content: 'You are a simple chat bot who responds to questions and comments. Please keep your responses to two to three sentences at most.' }
        ],		
    monitor(m) {
            m.addEventListener("downloadprogress", e => {
                console.log(`Downloaded ${e.loaded * 100}%`);
                if(e.loaded === 0 || e.loaded === 1) {
                    $chatLog.innerHTML = '';
                    return;
                }
                $chatLog.innerHTML = `Downloading AI model, currently at ${Math.floor(e.loaded * 100)}%`;
            });
        }		
});

And then for Chrome to respond, I just use:

lastAI = await session.prompt(lastEliza);

Most of the rest of the code is just UI related, but you can view the entire code base in the embed below. Want to play with it? Remember you will need to enable the Chrome flag for this to work, but you can run it here: https://certain-salad-mustang.codepen.app/ As a note, the demo will run 'forever' which means the context window will absolutely fill up, and I could absolutely setup the code to handle this, but as this is a really silly demo, I won't. Just keep in mind the API supports that!

Anyway, enjoy the chaos!

See the Pen Eliza vs GenAI by Raymond Camden (@cfjedimaster) on CodePen.

Photo by Enchanted Tools on Unsplash

Implementing OAuth in Astro

2026-03-23T18:00:00+00:00

As I continue to dig into Astro, one of the areas I wanted to explore was security and authentication. The Astro docs have an entire section on authentication in which they mention multiple different third party projects you can use with Astro, but I wanted to take a stab at building something myself. Once again I figured this would be a useful way to get some experience with parts of Astro I had not used yet, specifically sessions and middleware.

We all know what OAuth is... right?

I can remember being incredibly confused by OAuth in the past. Honestly I felt like I was the only one who didn't get it. So I forced myself to build a few demos in that area to help it click and I realized it wasn't terribly difficult to implement at all. My first explorations in this area were back in 2010, almost two decades ago, so it's definitely not anything new, but on the off chance that one of my readers needs an overview, I figure it can't hurt to share.

OAuth basically boils down to the idea of using a trusted third party to authenticate a user. "Typical" authentication systems required you to set up a users table in a database, carefully store credentials, and build a login process. OAuth is like saying screw that, if Google says a person is so and so, I trust Google.

With OAuth, you work with a third party (Google, Facebook, or many other services) to hand off the authentication process. You get information about the user (like their email address) and can use that as an identifier when storing data on your site.

OAuth also lets you perform actions based on a user. While you can use OAuth just to identify someone, you can also use it to do things like access their Google calendar, work with Facebook contacts, and so forth. Users see this when they authenticate with the third party as a warning (that they'll probably ignore) that says, "Once you login, the site will be able to do X, Y, and Z with your data."

Typical OAuth Flow

In most cases, you set up OAuth like so. First, on the third party site, you create an application that represents your site. So if you are building RaymondCamden.com as the go to place for - well whatever - your app will usually have the same name and a description that matches. This is also where you specify the permissions your app needs. It may just need the minimum - a profile that identifiers the user. But if you are building an integration that needs read or write access to data, you'll specify it there.

As part of the process, you also define a "call back url", which is where the user is redirected to after authenticating with the third party. This will be your app, and usually you have two - one for development and one for production. Some OAuth providers don't allow this and you end up creating two apps for your environments.

In your code, you then create a link to the third party. Their docs will tell you how to do this and you - of course - let the user know what's about to happen:

<a href="long ass url on Google">Login with Google</a>

When the user clicks this, they end up at the third part, login, get presented with the "The site will be able to do X with your stuff" prompt, and when confirmed, they return to the call back URL. When they do, a code will be in the URL. You take that code and send it back to the third party to get an access token. This access token lets you do stuff - stuff being whatever permissions you wanted. The token is short lived so it's not useful forever, but will work fine for a typical session.

My Demo

My Astro application makes use of Google as a third party login and will ask for Calendar read permissions. My app has a grand total of three pages:

A home page with a link to login with Google
A callback page the user doesn't actually "see", but handles the post-auth stuff
An events page that works with the data the app has access to once the user logs in

To make this work, I'll use:

Sessions to persist the access token.
Middleware to route you based on your current status.

Ok, let's get started. I'm not going to show you the Google Cloud Console and such as the UI there is - obviously - unique to Google. But I can say I created an app and got a client id and client secret. I put these, and my callback url, all in a .env file:

CLIENT_ID=my_client_id_brings_all_the_boys_to_the_yard
CLIENT_SECRET=damn_right_its_better_than_yours
REDIRECT_URL=http://localhost:4321/callback

Yes, I named the the callback value REDIRECT_URL, but I'm ok with that. ;)

Enabling Sessions

Since I knew I would be using sessions through, I started off enabling sessions. I did this by using the Node adapter as I wasn't planning on actually deploying this live. And literally, that's all I did. When you add that, your astro.config.mjs is updating accordingly, but I also added output:'server' such that every route was dynamic:

// @ts-check
import { defineConfig } from 'astro/config';

import node from '@astrojs/node';

// https://astro.build/config
export default defineConfig({
  output:'server',
  adapter: node({
    mode: 'standalone'
  })
});

The Home Page

A real-world application will usually have a mix of pages that require login and those that do not. My simple app only has (visibly anyway) the home page with login and the page that uses your data. Therefore my homepage is literally just a login link:

---
import BaseLayout from '../layouts/BaseLayout.astro';

const CLIENT_ID = process.env.CLIENT_ID;
const REDIRECT_URL = process.env.REDIRECT_URL;

const getAuthURL = () => {
  let params = new URLSearchParams();
  params.set('client_id', CLIENT_ID);
  params.set('redirect_uri', REDIRECT_URL);
  params.set('response_type','code');
  params.set('scope','https://www.googleapis.com/auth/calendar.readonly');
  let url = 'https://accounts.google.com/o/oauth2/v2/auth?' + params.toString();
  return url;
}

// treat it like a flash var, get it and nuke it
let error = await Astro.session?.get('error');
if(error) Astro.session.set('error', null);
console.log('error',error);
---

<BaseLayout>

	<h1>Login</h1>
	
	{ error && 
		<p>This error was returned: { error }</p>
	}
	<p>
	Link to login <a href={ getAuthURL() }>here</a>.
	</p>

</BaseLayout>

The most complex part here is getAuthURL, which will almost always look like what you see here - a URL that includes the client id from the third party provider, the callback url (yes, you supply this on the third party site and in the URL), and permissions. Almost always your code will follow this format but I've seen redirect_url and redirect_uri pretty interchangeably.

One little trick here I do is look in my session for an error value. If it exists, I grab it, and remove it. This is a 'flash' var, basically a value set on one page and used once in another. Some platforms/frameworks have built-in support for this but doing it by hand isn't too difficult - I simply delete it if exists.

In the HTML, I render that error if it exists and then the login link. I'd share a screenshot but it's literally just a link. :)

I will share a screenshot of what you see when clicking:

This is a fairly standard UI. Each provider will have their own look and feel, but most users should be pretty familiar with it.

The Callback Page

After logging in, the provider (Google in this case) redirects the user back. This next page doesn't have any output as it just handles the result:

---
const CLIENT_ID = process.env.CLIENT_ID;
const CLIENT_SECRET = process.env.CLIENT_SECRET;
const REDIRECT_URL = process.env.REDIRECT_URL;

const code = Astro.url.searchParams.get('code') || '';
const error = Astro.url.searchParams.get('error') || '';

if(error !== '') {
    console.error('Error!!', error);
    Astro.session?.set('error',error);
    return Astro.redirect('/');
}

// get our access token
const params = new URLSearchParams();
params.append('client_id', CLIENT_ID);
params.append('client_secret', CLIENT_SECRET);
params.append('grant_type', 'authorization_code');
params.append('redirect_uri', REDIRECT_URL);
params.append('code', code);

const atReq = await fetch('https://oauth2.googleapis.com/token', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
    }, 
    body: params
});

const at = await atReq.json();
console.log('at', at);

if(at.error) {
    Astro.session?.set('error',at.error);
    return Astro.redirect('/');
}

Astro.session?.set('access_token', at.access_token, { ttl: at.expires_in });

return Astro.redirect('/events');
---

From the top, I first look in the URL for either the code or error. If there was an error, I set the value in the session and redirect back to the first page, which as you (hopefully) remember, will pick it up, delete it, and render it.

If there wasn't an error, I then exchange the code for an access token. As I mentioned, the access token is short lived, and what's cool is that Astro sessions have a way to handle that - you can see it in the ttl object when I set the value. I'm going to touch on that in a bit.

The Events Page

After logging in, I render the events page. Now technically, you can skip this entire section as it's less OAuth and more Google API usage, but I'll show it for completeness. My "demo" looks at your events for the month, filters out all day events, and reports on how many hours you spend in meetings. I used Gemini AI to write those functions for me.

---
import BaseLayout from '../layouts/BaseLayout.astro';

let token = await Astro.session?.get('access_token');

/**
 * Fetches Google Calendar events for the current month.
 * @param {string} accessToken - A valid OAuth2 access token.
 */
async function getCalendarEventsForCurrentMonth(accessToken) {
    const now = new Date();
    
    // Calculate start of current month
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
    
    // Calculate start of next month
    const startOfNextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1).toISOString();

    const calendarId = 'primary'; // Use 'primary' for the user's main calendar
    const url = new URL(`https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events`);
    
    // Set query parameters
    url.searchParams.append('timeMin', startOfMonth);
    url.searchParams.append('timeMax', startOfNextMonth);
    url.searchParams.append('singleEvents', 'true'); // Expands recurring events into instances
    url.searchParams.append('orderBy', 'startTime');

    try {
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${accessToken}`,
                'Accept': 'application/json'
            }
        });

        const data = await response.json();

        if (!response.ok) {
            throw new Error(`Google API Error: ${data.error.message}`);
        }

        return data.items; // This is the array of event objects
    } catch (error) {
        console.error('Failed to fetch events:', error);
    }
}

/**
 * Calculates the total duration of timed Google Calendar events, skipping all-day events.
 * @param {Array} events - The 'items' array from the Google Calendar API response.
 * @returns {number} - Total duration in hours.
 */
function calculateTimedHours(events) {
    if (!events || events.length === 0) return 0;

    const totalMilliseconds = events.reduce((total, event) => {
        // Skip all-day events (they have 'date' but no 'dateTime')
        if (!event.start.dateTime || !event.end.dateTime) {
            return total;
        }

        const start = new Date(event.start.dateTime);
        const end = new Date(event.end.dateTime);

        const duration = end.getTime() - start.getTime();

        return total + (duration > 0 ? duration : 0);
    }, 0);

    const hours = totalMilliseconds / (1000 * 60 * 60);
    
    // Round to one decimal place and ensure it returns as a number
    return Math.round(hours * 10) / 10;
}

const events = await getCalendarEventsForCurrentMonth(token);
const totalHours = calculateTimedHours(events);

---

<BaseLayout pageTitle="Events">

    <h2>Events</h2>

    <p>
        You have { events.length } events this month.
    </p>

    <p>
        Ignoring all day events, you are spending { totalHours} hours in meetings.
    </p>
</BaseLayout>

In case your curious, this is my report, but note this does not include my work calendar nor my wife's calendar that I share. The real number is probably 10X.

The Middlware

The very last bit was the middleware. It has two jobs:

If the user is not logged in, and they are trying to access /events, redirect them home.
If the user is logged in and they are not accessing /events, push them there.

This particular logic will, of course, vary on your site and what you allow to be seen while not logged in and vice versa. Astro's middleware support is really simple. I added src/middleware.js and used this code:

/*
If they have an access token and are NOT on /events, go there
If they don't have one and are ON /events, go to /
*/

export async function onRequest (context, next) {

    let token = await context.session.get('access_token');
    console.log('path', context.url.pathname);

    if(token) {

        // are they trying to load / or /callback?
        if(context.url.pathname === '/' || context.url.pathname === '/callback') {
            console.log('redirecting cuz logged in and not events');
            return context.redirect('/events');
        }

    } else if(context.url.pathname === '/events') {
        console.log('redirecting cuz not logged in and events req');
        return context.redirect('/');
    }

    return next();
};

And that's it!

Conclusion

Ok, I need to riff a bit on some details that may or may not interest you, so before I do that - here's a link to the full code: https://github.com/cfjedimaster/astro-tests/tree/main/oauthtest1

Alright, there was one thing in this demo that kinda confused me a bit. In my mind, a 'session' is usually cookie-based such that a cookie identifies the user and the server associates that with data. I wrote my initial code on Saturday and when I tested on Sunday, my session still persisted, but the access token I had no longer worked. That was easy to fix - I added ttl, but from what I can tell, when using Astro sessions and the Node adapter specifically, the cookie set on your browser is a Session cookie, which persists as long as the tab is open. The same applies to SessionStorage as well.

None of this is 'wrong' of course, it just wasn't what I was expecting, and I'm curious if the other adapters, like the Netlify and Cloudflare ones, may act differently. I need to test this. If it's consistent, I could see then always using ttl when setting session values. The other question I have is - given a value with a ttl, does it always expire at that time, or does it auto renew on every hit. If so, and I wasn't using OAuth, I'd probably have logic to refresh the value one very hit so your session persists as you use the site. Yay - more Astro code to play with!

Photo by Andy Holmes on Unsplash

Links For You (3/22/26)

2026-03-22T18:00:00+00:00

I just shared this on my socials, but this weekend is one of those rare ones where I got not one, but two days of decent sleep, and honestly my body doesn't even know what to think about it. "Rested" is some foreign concept that is both confusing and incredibly appreciated by my body. I'd love to say I'm going to take this well rested state and get loads of things done, but outside of this post and laundry, I don't plan on accomplishing anything else of note.

Groovy Pretty Maths

It was in college when I discovered "good at math" in high school means absolutely nothing when you start going beyond basic calculus, so with that in mind, I don't understand one iota of the math described here, "Extinct Code Grew Leopard Spots". But not being able to parse the math doesn't make the results of updating a screensaver from the 90s any less enjoyable. Enjoy.

Halt and Catch Fire

"Halt and Catch Fire" is one of the best computer-related TV shows ever. I've been waiting to watch it a second time and introduce it to my wife (along with "Mr. Robot"). If you watched it as well, you might enjoy this incredibly deep syllabus for the show that provides background and reading to grow your appreciation for the real life events happening in the same time period documented in the show.

I learned of this site via the excellent newsletter by Salma Alam-Naylor. (You can find the signup at the bottom. Subscribe. You won't regret it.)

The Stupidity of DRMs

I love a good hack, and this article is a great reminder that DRM for things on the web is near useless: "JavaScript DRMs are Stupid and Useless". This blog post documents a great back and forth between two developers - one of the DRM - and that of the author working to break the DRM. I love this quote:

The entire history of DRM is, at its core, a history of trying to give someone a locked box while simultaneously handing them the fucking key.

Just For Fun

If you're a Trek fan, hopefully you've already seen this, but https://www.mewho.com/ has created and hosted multiple LCARS interfaces you can run in your browser. From the Titan (Riker's ship) to the Cerritos from Lower Decks, you'll find visuals appropriate for any screen.

Finding Your Most Popular Bluesky Followers

2026-03-18T18:00:00+00:00

A long time, like, a really long time ago, I created a web app that would take your Twitter followers and then sort them by the number of followers they had. This was, of course, next to useless but was a fun excursion into the Twitter API and kinda cool to see "big names" following me. We all know what happened to the Twitter API, and Twitter itself, but last night I decided to take a stab at building something similar for Bluesky. If you don't care about the how and just want to see the result, you can play with it here: https://happy-mountain-lamb.codepen.app/

Still here? Ok, let's talk ~~turkey~~code!

The Bluesky API

I've built a number of demos already using Bluesky's APIs, and for the most part, they're easy to use and "just work" - which is all you want from an API. That was my expectation going into this little demo, but what I was really surprised by was the fact that everything I needed to do could be done without any authentication at all. I didn't need oAuth, I didn't need an API key, I just hit public endpoints and everything just worked.

My demo makes use of a few different endpoints:

app.bsky.actor.getProfile is used to return information about the user you are generating a report on. As an example, this is what it returns for me:

{
    "did": "did:plc:4tan3ugu55i2u3hmtblu7wf5",
    "handle": "raymondcamden.com",
    "displayName": "Raymond Camden",
    "avatar": "https://cdn.bsky.app/img/avatar/plain/did:plc:4tan3ugu55i2u3hmtblu7wf5/bafkreiepx6pemul5jmnbmplgt5nfv43qaaab3admth4hlgt7foondje46m",
    "associated": {
        "lists": 0,
        "feedgens": 0,
        "starterPacks": 0,
        "labeler": false,
        "chat": {
            "allowIncoming": "all"
        },
        "activitySubscription": {
            "allowSubscriptions": "followers"
        }
    },
    "labels": [],
    "createdAt": "2023-04-27T14:26:21.272Z",
    "description": "Developer Advocate who spends all his time building demos involving cats. ",
    "indexedAt": "2024-01-20T05:45:01.638Z",
    "banner": "https://cdn.bsky.app/img/banner/plain/did:plc:4tan3ugu55i2u3hmtblu7wf5/bafkreidia27zaotxjebruhsjfkrkwaho4jxzkm6gipkx62ggtnerdmvvfq",
    "followersCount": 2145,
    "followsCount": 476,
    "postsCount": 1379
}

app.bsky.graph.getFollowers - the getFollowers endpoint returns a paginated list of an account's followers. This returns basic information about the account, but not how many followers the account has.

app.bsky.actor.getProfiles - this endpoint is like the first, returning detailed information about a profile, but it lets you pass in 25 accounts at once. I use this to 'enhance' the results from getFollowers and add their follower count.

Now let's look at how I put this together.

The App

The application is just vanilla HTML, JavaScript, and CSS. The HTML is pretty simple as JavaScript is handling most of the content output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popular Followers</title>
		<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
  </head>
  <body>

		<p>
		<label for="username">
			Enter the username to check: 
			<input type="search" id="username" value="">
		</label>
		</p>
		<button id="executeUser">Execute!</button>
		<span id="status"></span>
		
		<div id="userProfile"></div>
		<!-- this should be CSS I believe... -->
		<br clear="left">
		<div id="report"></div>
    <script src="./script.js"></script>
  </body>
</html>

On the JavaScript side, I begin with a bunch of DOM grabbing and I listen for click events on my button:

document.addEventListener('DOMContentLoaded', init, false);

let $username, $executeUser, $status, $userProfile, $report;

async function init() {
	$username = document.querySelector('#username');
	$executeUser = document.querySelector('#executeUser');
	$status = document.querySelector('#status');
	$userProfile = document.querySelector('#userProfile');
	$report = document.querySelector('#report');
	$executeUser.addEventListener('click', executeUser);
}

Yes, executeUser is a horrible name for a function. I'm ok with that. That function is pretty intense, so let's check it out:

async function executeUser() {
	let nick = $username.value.trim();
	if(nick === '') return;
	console.log(`going to do ${nick}`);
	$status.innerHTML = `Looking up ${nick}...`;
	$executeUser.setAttribute('disabled','disabled');

	let user = await getUser(nick);
	if(user.error) {
		$status.innerHTML = `Unable to load this user: ${user.message}`;
			$executeUser.removeAttribute('disabled');
			return;
	}
	console.log(user);

	// yes it is only blank for a sec, but... 
	$status.innerHTML = ''; 
	$userProfile.innerHTML = `
	<p>
	<img src="${user.avatar}">
	The user, ${nick} has the display name: ${user.displayName}. They are followed by ${numberFormat(user.followersCount)} users. Generating top follower count now.
	</p>
	`;

	$status.innerHTML = 'Loading followers (this may take a while)';

	let followers = [];
	let fList = await getFollowers(nick);
	console.log(fList);

	$status.innerHTML = 'Now loading info on these users.';

	fList = await inflateUsers(fList);

	fList.sort((a,b) => {
		return b.followersCount - a.followersCount;
	});
	console.table(fList);

	$status.innerHTML = ''; 
	let report = `
	<h3>Report (Top 100)</h3>
	<table>
		<thead>
		<tr>
			<th>Avatar</th><th>Name</th><th>Followers</th>
		</tr>
		</thead>
		<tbody>
	`;

	fList.slice(0,100).forEach(f => {
		report += `
<tr>
	<td><img src="${f.avatar}" class="reportAvatar"></td>
	<td><a href="https://bsky.app/profile/${f.handle}" target="_blank">${f.handle}${f.displayName?' (' + f.displayName + ')':''}</a></td>
	<td>${numberFormat(f.followersCount)}</td>
</tr>
		`;
	});

	report += '</tbody></table>';
	$report.innerHTML = report;
	$executeUser.removeAttribute('disabled');

}

This is the primary portion of the application. It handles validating your input and ensuring you entered a real user account. After rendering a little bit about the account, it kicks off the process to get your followers and then enhance those results so we know the follower count.

The final step is to sort and render it out in a basic table. I filter to the top 100 but dump the entire result in your console if you want to see. (If you didn't know about console.table, it is hella useful for cases like this.)

My three Bluesky API wrappers are pretty trivial outside of intelligently handling both pagination and sending 25 users at a time in slices:

async function getUser(u) {	
	let uReq = await fetch(`https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${u}`);
	return await uReq.json();
}

/*
I grab all the followers, looping over each page
*/
async function getFollowers(u) {
	let result = [];
	let hasMore = true;
	let cursor = '';
	
	while(hasMore) {
		console.log(`loading for cursor ${cursor}`);
		let fReq = await fetch(`https://api.bsky.app/xrpc/app.bsky.graph.getFollowers?actor=${u}&cursor=${cursor}&limit=100`);
		let thisResult = await fReq.json();
		result.push(...thisResult.followers);
		if(!thisResult.cursor) hasMore = false;
		else cursor = thisResult.cursor;
		// tempf for testing
		//if(result.length >= 200) hasMore = false;
	}	
	return result;
}

/*
Given an array of users, I need to get more info about them, specifically just how many followers they have. 
BSky supports getting 25 at a time, so we will use that
to lower the # of network calls
*/
async function inflateUsers(users) {
	for(let i=0; i<users.length;i+=25) {
		let slice = users.slice(i,i+25);
		let uList = slice.reduce((list, u) => {
			list.push(`&actors=${u.handle}`);
			return list;
		},[]);

		let uReq = await fetch(`https://api.bsky.app/xrpc/app.bsky.actor.getProfiles?${uList.join('')}`);
		let uData = await uReq.json();
		console.log('uData!!!', uData);
		for(let x=0;x<uData.profiles.length;x++) {
			users[i+x].followersCount = uData.profiles[x].followersCount;
		}
		console.log(`slice starting at ${i} has len ${slice.length}`); 
	}
	return users;
}

If you don't want to test this yourself, here's a screen shot of it in action.

Finally, this was maybe my second or third time using the new CodePen. You can check it out in the embed below. I'm really digging it, especially the new editing experience. I much prefer having tabs so I can focus on one file at a time. Sure, you could minimize the panels in CodePen before, but this UX just feels closer to Visual Studio Code and is just more enjoyable to me.

Also, as I said in the beginning, this is kind of a pointless tool and mostly exists to stroke your ego a bit, but I can see some usefulness in reporting on your followers. Not for a personal account like my own, but for brand or larger media accounts perhaps. It wouldn't be difficult to add different types of sorting or filtering for example. If you end up forking my code, let me know!

See the Pen Top BS Followers by Raymond Camden (@cfjedimaster) on CodePen.

Testing Live Content Collections in Astro V6

2026-03-11T18:00:00+00:00

Yesterday, Astro V6 formally launched. I say "formally" as it's been available to test for a little while, but with me still being pretty new to Astro I've kept to the main release only. Now that V6 is the default, I thought it was time to dig into it a bit. One feature in particular stood out as being really useful to me - live content collections. One of the reasons I've been digging Astro so much is that it nicely straddles the SSG world and Node.js server worlds. When building your app, you can make logical decisions about what should be done at build time versus what should be done dynamically. It's like having Express and Eleventy rolled into one solution.

Astro already let you easily use live data in your application. The "multi RSS into one" app I shared last week ("Using Astro for a Combined RSS View and Generator") is an example of that. What Live Content Collections provides is a way to have on demand data while still using Astro's "content collection" metaphor.

To test this, I created an app that wrapped the TMDB API to provide the following features:

A home page that rendered a list of movie genres.
A detail page for each genre showing recently released movies in that genre.

Here's how I built it.

The Live Loader

The docs are a great guide to how this feature works and you should absolutely spend some time there, but at a high level, this feature requires:

A loader script that handles returning all items in your collection or one particular item.
A definition file for your app that defines all the live loaders.

Let's start with the later. Unlike static content collections which are defined in content.config.ts, Astro looks like live collections in live.config.ts. Here's mine:

// Define live collections for accessing real-time data
import { defineLiveCollection } from 'astro:content';
import { genreLoader } from './loaders/tmdbloader';

const genres = defineLiveCollection({
  loader: genreLoader({
    apiKey: process.env.TMDB_API_KEY!
  }),
});

export const collections = { genres };

There isn't much here as I've only got one loader. Let's now take a look at that loader:

import type { LiveLoader } from 'astro/loaders';

interface Genre {
  id: string;
  name: string;
}

interface EntryFilter {
  id: string;
}

export function genreLoader(config: { apiKey: string }): LiveLoader<Genre, EntryFilter, never> {
  return {
    name: 'genre-loader',
    loadCollection: async () => {
      try {

        let genreReq = await fetch('https://api.themoviedb.org/3/genre/movie/list', {
          headers: {
            'Authorization': `Bearer ${config.apiKey}`, 
            'accept':'application/json'
          }
        });

        let genreData = await genreReq.json();
        console.log(`Got ${genreData.genres.length} genres`);
        return {
          entries: genreData.genres.map((g:Genre) => ({
            id: g.id,
            data: g,
          })),
        };
      } catch (error) {
        console.log('------------- ERROR --------');
        return {
          error: new Error('Failed to load genres ', { cause: error }),
        };
      }
    },
    loadEntry: async ({ filter }) => {
      console.log('loadEntry called with filter', filter);
      
      try {
        let movieReq = await fetch(`https://api.themoviedb.org/3/discover/movie?region=US&language=en-US&with_genres=${filter.id}&sort_by=primary_release_date.desc`, {
          headers: {
            'Authorization': `Bearer ${config.apiKey}`, 
            'accept':'application/json'
          }
        });

        let movieData = await movieReq.json();
        console.log(`Loaded movies for ${filter.id}`);
        return {
          id: filter.id,
          data: movieData.results
        }

      } catch (error) {
        return {
          error: new Error('Failed to load movies', { cause: error }),
        };
      }

    },
  };
}

Per the docs, your loader needs to define a name, a loadCollection method that returns an array, and a loadEntry method that returns an object representing one part of your collection. For me, this came down to hitting the TMDB genre list for movies API and then following up with the discover movies API that filtered to the genre. (As well as English movies and sorted by release date.)

Using the Live Collection

I first used the collection in my home page, index.astro:

---
export const prerender = false; 

import BaseLayout from '../layouts/BaseLayout.astro';
import { getLiveCollection } from 'astro:content';

const { entries } = await getLiveCollection('genres');
---

<BaseLayout pageTitle="List of Genres">

	<ul>
		{ entries.map((genre:any) => 
			<li><a href={"genre/" + genre.id + "?l=" + genre.data.name}>{genre.data.name}</a></li>
		)}
	</ul>

</BaseLayout>

This is pretty much the exact same way I'd use a static collection. Get the entries - iterate - done. For details, you'll note I'm linkking to "genre/X?l=NAME" for each genre. I created pages\genre\[id].astro to support that. You'll notice I'm passing the name of the genre in the query string. That's just so I can use it for display purposes. Here's the code:

---
export const prerender = false; 

import BaseLayout from '../../layouts/BaseLayout.astro';
import { getLiveEntry } from 'astro:content';
const { entry, error } = await getLiveEntry('genres', Astro.params.id);

if (error) {
  return Astro.rewrite('/404');
}

const title = Astro.url.searchParams.get("l");
---

<BaseLayout pageTitle={title}>

    <div class="movieWrapper">
        { entry.data.map((movie:any) => 
            <article class="movie">
                <h3>{movie.title}</h3>
                <p>
                    {movie.overview}
                </p>
                <p>
                    Releases {movie.release_date}
                </p>
                { movie.poster_path ?
                <p><img src={"https://image.tmdb.org/t/p/w300/"+movie.poster_path}></p> : ''
                }
            </article>
        )}
    </div>

</BaseLayout>

And... that's it. I fired it up, ran it, and it worked perfectly. After adding the Netlify adapter, I pushed it up here: https://tmdb-movie-browser-v6.netlify.app/

But wait...

This isn't the most complex example of course, and I was ready to write up the blog post when I noticed something interesting in the V6 post - route caching. This is still marked as experimental so I'm not sure I'd use it in a production app, but it looked super easy so I thought I'd give it a try.

In both pages, I added this to my front matter:

Astro.cache.set({
  maxAge: 120, // Cache for 2 minutes
  swr: 60, // Serve stale for 1 minute while revalidating
});

And modified my astro.config.mjs to load it:

// @ts-check
import { defineConfig } from 'astro/config';
import { memoryCache } from 'astro/config';

import netlify from '@astrojs/netlify';

// https://astro.build/config
export default defineConfig({
    adapter: netlify(),
    experimental: {
        cache: { provider: memoryCache() },
    },
});

And... it did nothing! Complete failure! Astro sucks!

After taking a minute to chill out, I looked closer at the docs for this feature and noticed this important line (emphasis mine):

Use `cache.enabled` to check whether a cache provider is configured and active. This returns false when no provider is configured, or in development mode:

I killed my locally running Astro app and did this:

npm run build
npm run preview

That was the first time I'd done that with an Astro app and it worked perfectly - and - the caching worked perfectly as well. Literally a line of code to each page and the work was done!

Show Me the Code (and More Stuff)

If you want to see everything, the repo is here: https://github.com/cfjedimaster/astro-tests/tree/main/tmdb-movie-browser-v6

As a quick note - a "live" view of movie genres is not the most sensible example of this feature. Most likely the movie genre data itself changes incredibly rarely. But this goes back to what I said above - I really dig that Astro would make it easy to have build time data (genres) and live data (moves in that genre) with minimal effort on my part.

Let me know what you think, and if you are already an Astro user, have you moved to V6 yet?

Photo by Wan San Yip on Unsplash

Building My Own Social Network Poster in Astro

2026-03-10T18:00:00+00:00

Today is a big day for Astro, not only do you get Astro v6 (it just released a few hours ago!), you also get one of my demos! Ok, one of these is more important than the other, but, I'm really excited about v6 and hope to have a demo of the new features to share soon. With that being said, I'm also sharing a demo I started work on a few weeks ago and finally wrapped up this past weekend - Social Beast.

Social Beast is a web app meant to be run locally (although I have some thoughts on that restriction and will share at the end) that handles posting to multiple social networks at once. Right now "multiple" is two:

Mastodon
Bluesky

It doesn't support Twitter because Twitter is a dumpster, on fire, inside another burning dumpster. It was initially going to support Threads as well, but as I wanted to skip oAuth (more on that too), I decided against it.

And that's it - literally. It doesn't show you latest posts and stats, it's just meant to give me a quick way to post to both networks at once. There are tools for this of course, many of which cost money. There's also openvibe, which has a good mobile app, but I wasn't happy with the web/desktop experience.

After setting up your authentication, you run the app, open it in your browser, and you're ready to go:

You simply enter your text, optionally include an image (with required alt text), and then hit post:

The little activity window on the right updates when done:

You can see the result below. I haven't used the default embedding experience for Bluesky and Mastodon in a while, so here goes nothing:

Bluesky

Good morning good people - just a quick test from my Astro app that posts to Mastodon and Bluesky at the same time.

[image or embed]
— Raymond Camden (@raymondcamden.com) March 10, 2026 at 9:06 AM

Mastodon

Post by @raymondcamden@mastodon.social

View on Mastodon

Show Me The Code!

Ok, as always, you can find this demo (and others) up on my astro-tests repo. Here is the link to this one: https://github.com/cfjedimaster/astro-tests/tree/main/social-beast

The application is a single page with a few routes for API calls. I made use of Oat for the design. Here's the main HTML page, containing the form and two panels on the right:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout pageTitle="Social Beast">
	<h1>Welcome to Social Beast</h1>

	<div class="row">
		<div class="col-8">

			<p>
			<label for="postContent">What's on your mind?</label>
			<textarea id="postContent"></textarea>
			</p>

			<div class="row">
				<div class="col-4">
					<label for="postImage">Add an image (optional)</label>
					<input type="file" id="postImage" accept="image/*">
				</div>
				<div class="col-4">
					<label for="altText">Alt text for image (<strong>required</strong>)</label>
					<input type="text" id="altText" placeholder="Describe the image for accessibility">
				</div>
				<div class="col-4">
					<img id="imagePreview" src="" alt="Image preview" style="max-width: 100%; display: none;">
				</div>
			</div>

			<p>
			<button id="postButton" class="mt-6">Post</button>
			</p>
		</div>
		<div class="col-4">

			<article class="card">
			<header>
				<h3>Connection Status</h3>
			</header>
			<div class="row mb-6 items-center">
				<div class="col-6">
					Mastodon
				</div>
				<div class="col-6">
					<span class="badge secondary" id="mastodonStatus">Unknown</span>
				</div>
			</div>
			<div class="row mb-6 items-center">
				<div class="col-6">
					Bluesky
				</div>
				<div class="col-6">
					<span class="badge secondary" id="blueskyStatus">Unknown</span>
				</div>
			</div>
			</article>

			<article class="card mt-6">
			<header>
				<h3>Activity</h3>
				<div id="activityFeed">
					<p>No activity yet.</p>
			</header>
			</article>
		</div>
	</div>
</BaseLayout>

Most of the work is done in JavaScript. Let's break that down.

First, on document load I'm creating a bunch of variables for DOM manipulation and such, and I fire off a few status checks:

let $mastodonStatus;
let $blueskyStatus;
let $postButton, $postContent, $postImage, $altText, $imagePreview;
let $activityFeed;

let MASTODON = false;
let BLUESKY = false;

document.addEventListener('DOMContentLoaded', function() {

    $mastodonStatus = document.querySelector('#mastodonStatus');
    $blueskyStatus = document.querySelector('#blueskyStatus');
    $postButton = document.querySelector('#postButton');
    $postContent = document.querySelector('#postContent');
    $postImage = document.querySelector('#postImage');
    $altText = document.querySelector('#altText');
    $imagePreview = document.querySelector('#imagePreview');
    $activityFeed = document.querySelector('#activityFeed');

    // Begin by checking the status of the 2 networks
    checkMastodonStatus();
    checkBlueskyStatus();

    $postButton.addEventListener('click', handlePost);
    $postImage.addEventListener('change', doPreview);

});

Note the two status methods. These two functions honestly could have been one, but here they are:

async function checkMastodonStatus() {
    try {
        const response = await fetch('/api/mastodon/check.json');
        const data = await response.json();
        if (data.ready) {
            $mastodonStatus.textContent = 'Connected';
            $mastodonStatus.classList.remove('secondary');
            $mastodonStatus.classList.add('success');
            MASTODON = true;
        } else {
            $mastodonStatus.textContent = 'Not Connected';
            $mastodonStatus.classList.remove('secondary');
            $mastodonStatus.classList.add('danger');
            $mastodonStatus.title = data.error || 'Unknown error';
            console.error(data.error);
        }
    } catch (error) {
        console.error('Error checking Mastodon status:', error);
        $mastodonStatus.textContent = 'Error';
        $mastodonStatus.classList.remove('secondary');
        $mastodonStatus.classList.add('danger');
    }
}

async function checkBlueskyStatus() {
    try {
        const response = await fetch('/api/bluesky/check.json');
        const data = await response.json();
        if (data.ready) {
            $blueskyStatus.textContent = 'Connected';
            $blueskyStatus.classList.remove('secondary');
            $blueskyStatus.classList.add('success');
            BLUESKY = true;
        } else {
            $blueskyStatus.textContent = 'Not Connected';
            $blueskyStatus.classList.remove('secondary');
            $blueskyStatus.classList.add('danger');
            $blueskyStatus.title = data.error || 'Unknown error';
            console.error(data.error);
        }
    } catch (error) {
        console.error('Error checking Bluesky status:', error);
        $blueskyStatus.textContent = 'Error';
        $blueskyStatus.classList.remove('secondary');
        $blueskyStatus.classList.add('danger');
    }
}

Both call an endpoint and based on the result, update the UI. You can run the app with only one network available.

Now, let's leave the front end and demonstrate how the status checks are done. Both Mastodon and Bluesky support are provided via environment variables. Here's my .env file as an example:

MASTODON_TOKEN=mytokenbringsalltheboystotheyard
MASTODON_SERVER=https://mastodon.social

BLUESKY_USERNAME=raymondcamden.com
BLUESKY_PASSWORD=damnrightitsbetterthanyours

Each of my social networks is stored in the api folder of my app. Mastdon's status route looks like so:

export const prerender = false;

const MASTODON_TOKEN = process.env.MASTODON_TOKEN;
const MASTODON_SERVER = process.env.MASTODON_SERVER;

export async function GET({ params, request }) {

  let response = {
    ready: false
  }

  // check for env values 
  if(!MASTODON_TOKEN || !MASTODON_SERVER) {
    response.error = 'Missing env values for MASTODON_TOKEN or MASTODON_SERVER';
  } else {
    // try to fetch account info using the token and server
    await fetch(`${MASTODON_SERVER}/api/v1/accounts/verify_credentials`, {
      headers: {
        'Authorization': `Bearer ${MASTODON_TOKEN}`
      }
    })
    .then(res => {
      if(res.ok) {
        response.ready = true;
      } else {
        response.error = `Mastodon API error: ${res.status} ${res.statusText}`;
      }
    })
    .catch(error => {
      response.error = `Error connecting to Mastodon API: ${error.message}`;
    })
  }

  return new Response(
    JSON.stringify(response),
  );

}

Mastodon has a handy verify_credentials API so I simply use that to see if the provided auth is correct.

For Bluesky, I did it a bit differently. You exchange your auth for an auth token, so I built it out in two files. First, login.js:

export async function loginToBluesky() {

    const BLUESKY_USERNAME = process.env.BLUESKY_USERNAME;
    const BLUESKY_PASSWORD = process.env.BLUESKY_PASSWORD;

    if(!BLUESKY_USERNAME || !BLUESKY_PASSWORD) {   
        console.error('Missing env values for BLUESKY_USERNAME or BLUESKY_PASSWORD');
        return null;
    }

    let body = {
        identifier: BLUESKY_USERNAME,
        password: BLUESKY_PASSWORD
    };

    try {
        let response = await fetch('https://bsky.social/xrpc/com.atproto.server.createSession', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(body)
        });

        if(response.ok) {
            let data = await response.json();
            //console.log('Bluesky session data:', data);
            return { auth: data };
        } else {
            console.error(`Bluesky API error: ${response.status} ${response.statusText}`);
            return { error : `Bluesky API error: ${response.status} ${response.statusText}` };
        }
    } catch (error) {
        console.error(`Error connecting to Bluesky API: ${error.message}`);
        return { error: `Error connecting to Bluesky API: ${error.message}` };
    }
}

Which makes check.json.js pretty short:

import { loginToBluesky } from "./logon";

export const prerender = false;

export async function GET({ params, request }) {

  let response = {
    ready: false
  }

  let authCheck = await loginToBluesky();
  if(authCheck && authCheck.auth) {
    response.ready = true;
  } else if(authCheck && authCheck.error) {
    response.error = authCheck.error;
  }
  
  return new Response(
    JSON.stringify(response),
  );

}

Alright, so back to the front end, the post logic begins with a bit of validation, and then passing off the calls to helper methods:

async function handlePost() {
    let post = {};

    // First, a sanity check
    if(!MASTODON && !BLUESKY && !THREADS) {
        ot.toast('No social networks are configured! Please set up at least one network to post.', 'Action Stopped', {
            variant: 'danger',
            duration: 6000
        });

        return;
    }

    const content = $postContent.value.trim();
    if(!content) {
        ot.toast('No content. Type something!', 'Action Stopped', {
            variant: 'danger',
            duration: 3000
        });

        return;
    }

    post.content = content;

    let caption = $altText.value.trim();   
    if($postImage.files.length > 0) {
        if(!caption) {
            ot.toast('Image requires alt text. Please add alt text for the image and try again.', 'Action Stopped', {
                variant: 'danger',
                duration: 3000
            });
            return;
        }

        post.image = await fileToBase64($postImage.files[0]);
        post.altText = caption;
    }

    $postButton.setAttribute('disabled', 'disabled');
    // Call all 3 networks, and wait for the results
    $activityFeed.innerHTML = 'Posting to enabled networks...';

    let results = [];
    
    if(MASTODON) {
        results.push(postToMastodon(post));
    }

    if(BLUESKY) {
        results.push(postToBluesky(post));
    }

    let settledResults = await Promise.allSettled(results);
    console.log('Settled results:', settledResults);
    let resultHTML = '';
    for(let result of settledResults) {
        if(result.status === 'fulfilled') {
            let data = result.value;
            if(data.ok) {
                resultHTML += `Successfully posted to ${data.network}!<br>`;
            } else {
                resultHTML += `Failed to post to ${data.network}: ${data.error}<br>`;
            }
        } else {
            resultHTML += `Error posting to a network: ${result.reason}<br>`;
        }
    }

    $activityFeed.innerHTML = resultHTML;

    // cleanup
    $postContent.value = '';
    $postImage.value = '';
    $altText.value = '';
    $imagePreview.src = '';
    $imagePreview.style.display = 'none';
    $postButton.removeAttribute('disabled');
}

I'll skip showing you postToMastodon and postToBluesky as they simply call API routes on the back end and gather the results. Mastodon posting is pretty simple:

export const prerender = false;

const MASTODON_TOKEN = process.env.MASTODON_TOKEN;
const MASTODON_SERVER = process.env.MASTODON_SERVER;

export async function POST({ params, request }) {

    const body = await request.json();

    let response = {
        ok: false
    }

    // check for env values (this shouldn't ever run as check returns false, but just in case
    if(!MASTODON_TOKEN || !MASTODON_SERVER) {
        response.error = 'Missing env values for MASTODON_TOKEN or MASTODON_SERVER';
    } else if(!body.post.content) {
        response.error = 'Missing content in request body';
    } else {

        let postData = new FormData();
        postData.append('status', body.post.content);

        // check for image
        if(body.post.image) {
            let mediaPost = new FormData();
            mediaPost.append('file', body.post.image);
            mediaPost.append('description', body.post.altText || '');

            let mediaResponse = await fetch(`${MASTODON_SERVER}/api/v2/media`, {
                method: 'POST',
                headers: { 
                    'Authorization': `Bearer ${MASTODON_TOKEN}`
                },
                body: mediaPost
            });

            let mediaResult = await mediaResponse.json();

            postData.append('media_ids[]', mediaResult.id);
        }


        await fetch(`${MASTODON_SERVER}/api/v1/statuses`, {
            method: 'POST',
            body: postData,
            headers: {
                'Authorization': `Bearer ${MASTODON_TOKEN}`
            }
        })
        .then(res => {
            if(res.ok) {
                response.ok = true;
            } else {
                response.error = `Mastodon API error: ${res.status} ${res.statusText}`;
            }
        })
        .catch(error => {
            response.error = `Error connecting to Mastodon API: ${error.message}`;
        })
    }

    return new Response(
        JSON.stringify(response),
    );

}

And here's Bluesky:

export const prerender = false;

import { loginToBluesky } from "./logon";

const BLUESKY_USERNAME = process.env.BLUESKY_USERNAME;

export async function POST({ params, request }) {

    const body = await request.json();

    let response = {
        ok: false
    }

    let authCheck = await loginToBluesky();
    if(authCheck && authCheck.error) {
        response.error = authCheck.error;

    } else {
        
        let postBody = {
            repo:BLUESKY_USERNAME, 
            collection:"app.bsky.feed.post", 
            record: {
                text:body.post.content,
                createdAt: new Date().toISOString()

            }
        };

        // check for image
        if(body.post.image) {

            body.post.image = body.post.image.replace(/^data:image\/\w+;base64,/, "");
            let imageBuffer = Buffer.from(body.post.image, 'base64');

            let mediaResponse = await fetch('https://bsky.social/xrpc/com.atproto.repo.uploadBlob', {
                method: 'POST',
                headers: { 
                    'Authorization': `Bearer ${authCheck.auth.accessJwt}`,
                    'Content-Type': 'image/jpeg'
                },
                body: imageBuffer
            });

            let mediaResult = await mediaResponse.json();
            //console.log('Media upload result:', mediaResult);

            // modify postBody to include image 
            postBody.record.embed = {
                "$type": "app.bsky.embed.images",
                images: [
                {
                    alt:body.post.altText || '',
                    image: mediaResult.blob
                }
                ]
            }

        }

        await fetch('https://bsky.social/xrpc/com.atproto.repo.createRecord', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', 
                'Authorization': `Bearer ${authCheck.auth.accessJwt}`
             },
            body: JSON.stringify(postBody)
        })
        .then(res => {
            if(res.ok) {
                response.ok = true;
            } else {
                response.error = `Bluesky API error: ${res.status} ${res.statusText}`;
            }
        })
        .catch(error => {
            response.error = `Error connecting to Bluesky API: ${error.message}`;
        })

    }

    return new Response(
        JSON.stringify(response),
    );

}

Note that each post to Bluesky runs the login method and I could cache the auth token returned, but I figured even a person posting a lot won't necessarily get a lot of benefit from that. That being said - there's room for improvement...

What Else?

Ok, so, this is pretty simple, as I wanted it to be, but there's a few things I'd consider good changes.

I mentioned that the idea here was to run this locally with hard coded auth in your environment. I could prompt the user to paste in the values and cache it in LocalStorage, but that felt iffy to me.

I also mentioned I skipped Threads as I didn't want to do oAuth. You can absolutely do oAuth in Astro, even I've done it, and I'd be willing to take in a PR from someone who wants to add that, but it didn't feel worth the effort to me.

Finally, a shoutout to Bob Monsour for the inspiration. You can find his version of this idea (which does a lot more), here: https://github.com/bobmonsour/social-posting

Photo by Sean Foster on Unsplash

Links For You (3/8/26)

2026-03-08T18:00:00+00:00

Greetings, programs. I'm taking a break from Assassin's Creed Shadows (and being lazy in general) and thought I'd write up my links post. Yesterday was the 15th birthday of one of my kids and later today we get to celebrate with her friends. Outside of that and laundry, I've got a large amount of nothing to get accomplished today and I absolutely love it. Let's get to the links. As always, I hope you find these worth your time!

Eleventy's Future

As you know (or hopefully know), my blog here is built on Eleventy, a Node.js static site generator. I've been using it, and blogging about it for almost six years. This past week, Zach announced that Eleventy is becoming "Build Awesome" - you can read the announcement post here: Eleventy is now Build Awesome. For folks who may not know, this is part of the same group that owns Font Awesome and Web Awesome, the new name for Shoelace.

As you can imagine, this has caused quite a bit of ... concern amongst the Eleventy community. As an example:

Also, and to be clear, this is not related, Sia announced the end of the Eleventy Meetup after five years and thirty episodes.

I'm not stressing over this now. I don't like the name, but honestly that doesn't bother me, I'll just keep saying Eleventy. I can appreciate the goal here - provide more while also earning money - but I do worry about the community, usage, and so forth. That being said, Zach's been a great caretaker and devoted a hell of a lot of energy to something most people don't pay a dime for. All I can do now is hope for the best.

Swatchify

A few days ago, I blogged about the latest update to Color Thief, a JavaScript library for getting prominent colors in images. There's another option as well, the nicely named Swatchify. This is also a JavaScript library, but can also be used as a API service as well. (To be clear, if you host it.) There's also a Go library and CLI.

Oh, and this has nothing to do with the very cool watch company...

CodePen 2.0

I don't usually cover "product launches" (although I guess I just did re: Build Awesome), but one of my favorite online tools, CodePen just released (in beta!) a 2.0 version. You can learn more here: CodePen 2.0 Beta

This is a big change, and I strongly encourage you to pay attention to the onboarding notes if you give it a try. There is a lot of really good stuff here, including a proper file system, build processes, and more, but you will want to pay attention as the editor walks you through the changes.

Cassidy has a great demo in the video below:

If you watched it, you'll note the gets tripped up by one of the main changes - your CSS and JavaScript aren't automatically included anymore. They can be! But as she discovered, you need to do set things up right if you wan the "auto" behavior.

I've only played with it a bit, but I really like what I see so far.

Just For Fun

I've shared videos from Matt One before - he creates incredible mashups and remixes. I just wish he'd skip the incredibly cringe worthy AI videos. That being said, I subscribe to him for his tunes, not his videos. The track below is a remix of The Cure's "Letter To Elise", and it's a dramatic mix of the original, really changing the tone/mood in an interesting way: