Intention Links
I thought it would be nice to have a link generator that helps craft Bluesky intention links for pre-populating posts. An intention link is essentially a URL containing predefined content that pre-fills a web app’s form or action. When clicked, it opens the app with specified content ready to go - similar to mailto:
links for email.
I generate a URL using Bluesky’s compose intent format https://bsky.app/intent/compose
, followed by the encoded text and a URL. The code consists of two simple components: an HTML form for input and a bit of JavaScript to handle the link generation.
The HTML structure is straightforward - we use a textarea for the post content, an input for the URL, and a button to trigger generation. Here’s the form implementation with fields for text and URL:
<form id="bluesky-form">
<textarea id="text" placeholder="Enter your text here" rows="3"
style="width: 100%;"></textarea>
<br><br>
<label for="url">URL:</label>
<input id="url" type="url" placeholder="Enter the URL" style="width: 100%;">
<br><br>
<button type="button" onclick="generateLink()">
🔗 Click to Generate Bluesky Link
</button>
</form>
<p id="output" style="margin-top: 1rem; word-wrap: break-word;"></p>
Using JavaScript, we implement logic to
- get the input values
- handle URL encoding of text and link
- do some input validation
- Generating and displaying the Bluesky intention URL
function generateLink() {
const text = encodeURIComponent(document.getElementById('text').value.trim());
const url = encodeURIComponent(document.getElementById('url').value.trim());
if (!text || !url) {
alert("Please provide both text and URL.");
return;
}
const blueskyLink = `https://bsky.app/intent/compose?text=${text}%20${url}`;
const output = document.getElementById('output');
output.innerHTML =
`Your Bluesky Link: <a href="${blueskyLink}" target="_blank">${blueskyLink}</a>`;
}
The Generator
Here’s the result:
When clicked, it opens Bluesky with a pre-populated post containing your text and link.
That’s it for now 🙂.