Add mastodon toots to a static page using Edge Functions
Tags: netlify, edgefunctions, mastodon, html
Published: 2022-11-29 08:46:18

---
title: Add mastodon toots to a static page using Edge Functions
published: true
date: 2022-11-28 00:00:00 UTC
tags: Netlify, edgefunctions, mastodon, html
description: Let's show a list of toots on your static page without having to add any JavaScript to it.
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50jxvd7por9e8lgkwa86.png
canonical_url: https://khendrikse.netlify.app/blog/add-mastodon-toots-to-a-static-page-using-edge-functions/
---
**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](https://astro.build) 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](https://www.netlify.com/) and [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/). Let's start by installing the [Netlify CLI](https://docs.netlify.com/cli/get-started/) by opening your terminal and running:

```bash
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:

```html
<!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:

```toml
[[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:

```ts
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()`](https://docs.netlify.com/edge-functions/api/#modify-a-response) 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:

```bash
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](https://khendrikse.netlify.app/blog/find-your-mastodon-account-id). Then, use fetch to retrieve your data:

```ts
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.

```ts
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](https://docs.joinmastodon.org/methods/accounts/#statuses).

If you want to put your site live using Netlify, make sure you have [signed up](https://app.netlify.com/signup) 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!