You've created a wonderful static website. Your HTML pages are being built when you deploy, and maybe you're even using a framework like Astro that strips as much JavaScript from your pages as possible. Now you've been part of the gigantic migration from a certain bird site to Mastodon, and you'd love to show your latest personal toots on your site. Let's use Edge Functions to make that happen.
Edge Functions are a great way to transform the content of a static page at request time. It adds the benefit that you can change static pages without having to rebuild them.
Set up Netlify CLI
For this tutorial, I'll be using Netlify and Netlify Edge Functions. Let's start by installing the Netlify CLI by opening your terminal and running:
npm install netlify-cli -g
Create your HTML page
Create a simple folder for your project, and create a new file called index.html. Your folder should now look something like this:
.
└── index.html
Add some simple HTML to that index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edge Function Mastodon example</title>
</head>
<body>
<header><h1>My Mastodon feed</h1></header>
<main><div>TOOT_CONTAINER</div></main>
</body>
</html>
Create your edge function
Inside your project folder, create a folder called netlify, inside that folder, create a folder called edge-functions. Inside THAT folder, create a file called toots.ts. We'll use TypeScript for this example. You can also just create a normal JavaScript file.
In the root of your folder, you can also create a file called netlify.toml. Your project folder should now look something like this:
.
├── index.html
├── netlify
│ └── edge-functions
│ └── toots.ts
└── netlify.toml
To start defining your edge function, we'll add some configuration to the netlify.toml file:
[[edge_functions]]
path = "/"
function = "toots"
With path = "/" we define the route that the edge function will run on, in this case the root of your website. So before it serves the index.html. The configuration function = "toots" defines the edge funcion it should use on that path.
Let's add some code to the toots.ts file:
import { Context } from 'https://edge.netlify.com';
export default async (request: Request, context: Context) => {
const response = await context.next();
const page = await response.text();
console.log('Hello World!');
return new Response(page, response);
};
context.next() returns the response from index.html. We then simply return the text (page) of that response, and the response itself to pass to new Response(page, response).
Serve your project using netlify dev
Now let's run your project in your terminal by typing:
netlify dev
The CLI tool might ask you some questions, answering yes should be fine in this case. The CLI now opens http://localhost:8888 in your browser. It should show the page you created in the previous steps! We should see a header and the text TOOT_CONTAINER.
The only piece of HTML that is important on this page, is the <div> element with the TOOT_CONTAINER text in it.
We're not changing anything on the page just yet, this is why we simply see whatever is in index.html.
But if we check out the terminal where we're running our server, we should be able to see the Hello World! that is being logged to the console.
Fetch your mastodon toots
Set up the edge function so it fetches all of your toots from your mastodon instance. To begin, find out what your mastodon account id is. Then, use fetch to retrieve your data:
import { Context } from 'https://edge.netlify.com';
export default async (request: Request, context: Context) => {
const response = await context.next();
const page = await response.text();
const statuses = await fetch(
'https://YOUR_INSTANCE.io/api/v1/accounts/YOUR_ID/statuses'
);
const toots = await statuses.json();
return new Response(page, response);
};
Make sure to replace YOUR_INSTANCE with the name of the mastodon server your account is on. And replace YOUR_ID with the id you found in the previous step.
We're not doing anything with the data yet, but you can always console.log(toots) to view what the object looks like.
Now, let's transform the data so we can show it on our page! We're going to grab the content from the toot, and then join the entire array of toots. This way the list of toots become one string.
After this, we create a const called transformedPage that takes the page content, and replaces TOOT_CONTAINER with our list of toots.
import { Context } from 'https://edge.netlify.com';
export default async (request: Request, context: Context) => {
const response = await context.next();
const page = await response.text();
const statuses = await fetch(
'https://YOUR_INSTANCE.io/api/v1/accounts/YOUR_ID/statuses'
);
const toots = await statuses.json();
const formattedTootsList = toots
.map((toot: { content: string }) => toot.content)
.join('');
const transformedPage = page.replace('TOOT_CONTAINER', formattedTootsList);
return new Response(transformedPage, response);
};
Check out your project in your browser. It should now show you your list of toots. If you want to know what else is available on the endpoint we're using, you can always check out the documentation for api/v1/accounts/:id/statusses.
If you want to put your site live using Netlify, make sure you have signed up for an account. After this, you can just run netlify deploy and the CLI will help you through the steps to deploy your site. Have fun!
Top comments (0)