139 lines
5.3 KiB
Markdown
139 lines
5.3 KiB
Markdown
---
|
||
author: "Chris Burnell"
|
||
title: "Webmention Setup for Eleventy"
|
||
source: https://chrisburnell.com/article/webmention-eleventy-setup/
|
||
clipped: 2024-06-25
|
||
published: 2022-08-25
|
||
topics:
|
||
tags: [clipping]
|
||
---
|
||
|
||
# Webmention Setup for Eleventy
|
||
|
||
Here’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.
|
||
|
||
## 1\. Account Creation [Permalink ¶](#1 "Permalink for 1. Account Creation")
|
||
|
||
Unless you already have your own Webmention receiver, sign up for one and add the secret key/token to your project. Below are two examples:
|
||
|
||
If you’re using **[Webmention.io](https://webmention.io/)**, add your **API Key** (found on your [settings page](https://webmention.io/settings)) to your project as an environment variable, i.e. in a `.env` file in the root of your project:
|
||
|
||
```
|
||
WEBMENTION_IO_TOKEN=njJql0lKXnotreal4x3Wmd
|
||
```
|
||
|
||
If you’re using **[go-jamming](https://git.brainbaking.com/wgroeneveld/go-jamming)**, once you’ve set up your server and defined your token, you’ll need add it to your project as an environment variable, i.e. in a `.env` file in the root of your project:
|
||
|
||
```
|
||
GO_JAMMING_TOKEN=njJql0lKXnotreal4x3Wmd
|
||
```
|
||
|
||
## 2\. Installation [Permalink ¶](#2 "Permalink for 2. Installation")
|
||
|
||
Install the [`eleventy-cache-webmentions`](https://chrisburnell.com/eleventy-cache-webmentions/) package from *npm*:
|
||
|
||
```
|
||
npm install @chrisburnell/eleventy-cache-webmentions
|
||
```
|
||
|
||
## 3\. Configuration [Permalink ¶](#3 "Permalink for 3. Configuration")
|
||
|
||
Create a config file. You may wish to put this file in your [Global Data Folder](https://www.11ty.dev/docs/data-global/) so you can access the data across your Eleventy project. The location and filename of your config file are up to you, as long as it’s somewhere in your project that you can access with JavaScript using `require()`.
|
||
|
||
If you’re using **[Webmention.io](https://webmention.io/)**:
|
||
|
||
```
|
||
const { defaults } = require("@chrisburnell/eleventy-cache-webmentions")
|
||
|
||
|
||
require("dotenv").config()
|
||
|
||
module.exports = Object.assign({}, defaults, {
|
||
domain: "https://EXAMPLE.COM",
|
||
feed: `https://webmention.io/api/mentions.jf2?domain=EXAMPLE.COM&token=${process.env.WEBMENTION_IO_TOKEN}&per-page=9001`,
|
||
key: "children",
|
||
})
|
||
```
|
||
|
||
If you’re using **[go-jamming](https://git.brainbaking.com/wgroeneveld/go-jamming)**:
|
||
|
||
```
|
||
const { defaults } = require("@chrisburnell/eleventy-cache-webmentions")
|
||
|
||
|
||
require("dotenv").config()
|
||
|
||
module.exports = Object.assign({}, defaults, {
|
||
domain: "https://EXAMPLE.COM",
|
||
feed: `https://JAM.EXAMPLE.COM/webmention/EXAMPLE.COM/${process.env.GO_JAMMING_TOKEN}`,
|
||
key: "json",
|
||
})
|
||
```
|
||
|
||
## 4\. Integrate with Eleventy [Permalink ¶](#4 "Permalink for 4. Integrate with Eleventy")
|
||
|
||
Add both to Eleventy by adding them to your [Eleventy Config](https://www.11ty.dev/docs/config/):
|
||
|
||
*Note: The path to your Webmentions config depends on where your Data files live, e.g. `./src/data/configWebmentions.js`.*
|
||
|
||
```
|
||
const pluginWebmentions = require("@chrisburnell/eleventy-cache-webmentions")
|
||
const configWebmentions = require("../path_to_your_config/configWebmentions.js")
|
||
|
||
module.exports = function(eleventyConfig) {
|
||
eleventyConfig.addPlugin(pluginWebmentions, configWebmentions)
|
||
}
|
||
```
|
||
|
||
## 5\. Attach Webmentions to Pages [Permalink ¶](#5 "Permalink for 5. Attach Webmentions to Pages")
|
||
|
||
Add some [Directory Specific Data Files](https://www.11ty.dev/docs/data-template-dir/) wherever your pages and/or posts live. For example, if your pages all live in a `pages/` folder, you would add the following code block to a `pages.11tydata.js` file inside `pages/`:
|
||
|
||
```
|
||
const { getWebmentions } = require("@chrisburnell/eleventy-cache-webmentions")
|
||
const configWebmentions = require("../path_to_your_config/configWebmentions.js")
|
||
|
||
module.exports = {
|
||
eleventyComputed: {
|
||
webmentions: (data) => {
|
||
return getWebmentions(configWebmentions, configWebmentions.domain + data.page.url)
|
||
},
|
||
}
|
||
}
|
||
```
|
||
|
||
## 6\. Use Webmentions [Permalink ¶](#6 "Permalink for 6. Use Webmentions")
|
||
|
||
Webmentions are now attached to each page!
|
||
|
||
You can access them quite easily on a given page:
|
||
|
||
```
|
||
{% for webmention in webmentions %}
|
||
|
||
{{ webmention.author.name }} sent this page a {{ webmention | getType }}
|
||
{% endfor %}
|
||
```
|
||
|
||
And even when looping through something like a collection:
|
||
|
||
```
|
||
{% for item in collections.pages %}
|
||
|
||
<h2>{{ item.data.title }}</h2>
|
||
<p>This page has {{ item.data.webmentions.length }} webmention{{ 's' if item.data.webmentions.length > 1 }}</p>
|
||
{% endfor %}
|
||
```
|
||
|
||
How you want to filter the array of Webmentions attached to each page is up to you, but I recommend using the `getWebmentionsByTypes` Filter to split Webmentions into groups categorised by type—this will make it easier to figure out which Webmentions are binary interactions (e.g. likes, reposts) and which have richer content you might want to display (e.g. mentions, replies).
|
||
|
||
```
|
||
{% set reactions = webmentions | getWebmentionsByTypes(['like-of', 'repost-of', 'bookmark-of']) %}
|
||
|
||
{% set replies = webmentions | getWebmentionsByTypes(['mention-of', 'in-reply-to']) %}
|
||
```
|
||
|
||
---
|
||
|
||
And that's pretty much all there is to it! Let me know if you have any suggestions or issues, and feel free to contribute back to the Eleventy plugin that is the workhorse behind this implementation [over on GitHub](https://github.com/chrisburnell/eleventy-cache-webmentions) or just [get in touch](https://chrisburnell.com/about/#contact).
|