Building My Own Social Network Poster in Astro

development javascript astro
Building My Own Social Network Poster in Astro

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.

What is 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:

App view showing the form

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

App view showing a filled out form

The little activity window on the right updates when done:

App activity log

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

Support this Content!

If you like this content, please consider supporting me. You can become a Patron, visit my Amazon wishlist, or buy me a coffee! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.