diff --git a/.example.env b/.example.env
index a2df0a66..f8f50fa9 100644
--- a/.example.env
+++ b/.example.env
@@ -1,2 +1,3 @@
WEBMENTION_API_KEY=
-WEBMENTION_URL=
\ No newline at end of file
+WEBMENTION_URL=
+WEBMENTION_PINGBACK=#optional
\ No newline at end of file
diff --git a/README.md b/README.md
index 34d41a62..31299f4d 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,6 @@ Replace pnpm with your choice of npm / yarn
## Configure
- Edit the config file `src/site.config.ts` for basic site meta data
- - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site.
- Update file `astro.config.ts`
- **Important**: the site property with your own domain.
- [astro-webmanifest options](https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md)
@@ -95,6 +94,7 @@ Replace pnpm with your choice of npm / yarn
- You can also modify the theme(s) for markdown code blocks generated by [Expressive Code](https://expressive-code.com). Astro Cactus has both a dark (dracula) and light (github-light) theme, which can be found in `src/site.config.ts`. You can find more theme(s) and options [here](https://expressive-code.com/guides/themes/#available-themes).
- Edit social links in `src/components/SocialList.astro` to add/replace your media profile. Icons can be found @ [icones.js.org](https://icones.js.org/), per [Astro Icon's instructions](https://www.astroicon.dev/guides/customization/#find-an-icon-set).
- Create/edit posts & notes for your blog within `src/content/post/` & `src/content/note/` with .md/mdx file(s). See [below](#adding-posts-and-notes) for more details.
+ - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site.
- OG Image:
- If you would like to change the style of the generated image the Satori library creates, open up `src/pages/og-image/[slug].png.ts` to the markup function where you can edit the html/tailwind-classes as necessary. You can use this [playground](https://og-playground.vercel.app/) to aid your design.
- You can also create your own og images and skip satori generating it for you by adding an ogImage property in the frontmatter with a link to the asset, an example can be found in `src/content/post/social-image.md`. More info on frontmatter can be found [here](#frontmatter)
diff --git a/astro.config.ts b/astro.config.ts
index 19027581..9586c091 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -105,8 +105,9 @@ export default defineConfig({
},
env: {
schema: {
- WEBMENTION_API_KEY: envField.string({ context: "server", access: "secret" }),
- WEBMENTION_URL: envField.string({ context: "client", access: "public", default: undefined }),
+ WEBMENTION_API_KEY: envField.string({ context: "server", access: "secret", optional: true }),
+ WEBMENTION_URL: envField.string({ context: "client", access: "public", optional: true }),
+ WEBMENTION_PINGBACK: envField.string({ context: "client", access: "public", optional: true }),
},
},
});
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index ac764c33..18924be3 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,4 +1,5 @@
---
+import { WEBMENTION_PINGBACK, WEBMENTION_URL } from "astro:env/client";
import { siteConfig } from "@/site.config";
import type { SiteMeta } from "@/types";
import "@/styles/global.css";
@@ -76,12 +77,10 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
{/* Webmentions */}
{
- siteConfig.webmentions.link && (
+ WEBMENTION_URL && (
<>
-
- {siteConfig.webmentions.pingback && (
-
- )}
+
+ {WEBMENTION_PINGBACK && }
)
}
diff --git a/src/content/post/webmentions.md b/src/content/post/webmentions.md
index 1b11ca1f..70168d8f 100644
--- a/src/content/post/webmentions.md
+++ b/src/content/post/webmentions.md
@@ -3,14 +3,14 @@ title: "Adding Webmentions to Astro Cactus"
description: "This post describes the process of adding webmentions to your own site"
publishDate: "11 Oct 2023"
tags: ["webmentions", "astro", "social"]
-updatedDate: 8 April 2024
+updatedDate: 6 December 2024
---
## TLDR
1. Add a link on your homepage to either your GitHub profile and/or email address as per [IndieLogin's](https://indielogin.com/setup) instructions. You _could_ do this via `src/components/SocialList.astro`, just be sure to include `isWebmention` to the relevant link if doing so.
2. Create an account @ [Webmention.io](https://webmention.io/) by entering your website's address.
-3. Add the link feed and api key to and `.env` file with the key `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively. You could rename `.env.example` found in this template.
+3. Add the link feed and api key to a `.env` file with the key `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, you could rename `.env.example` found in this template. You can also add the optional `WEBMENTION_PINGBACK` link here too.
4. Go to [brid.gy](https://brid.gy/) and sign-in to each social account[s] you wish to link.
5. Publish and build your website, remember to add the api key, and it should now be ready to receive webmentions!
@@ -34,10 +34,10 @@ Firstly, you need to add a link on your site to prove ownership. If you have a l
### Sign up to Webmention.io
-Next, head over to [Webmention.io](https://webmention.io/) and create an account by signing in with your domain name, e.g. `https://astro-cactus.chriswilliams.dev/`. Please note that .app TLDs don't function correctly. Once in, it will give you a couple of links for your domain to accept webmentions. Make a note of these and create a `.env` file (this template include an example `.env.example` which you could rename). Add the link feed and api key with the key/values of `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively. Please try not to publish this to a repository!
+Next, head over to [Webmention.io](https://webmention.io/) and create an account by signing in with your domain name, e.g. `https://astro-cactus.chriswilliams.dev/`. Please note that .app TLDs don't function correctly. Once in, it will give you a couple of links for your domain to accept webmentions. Make a note of these and create a `.env` file (this template include an example `.env.example` which you could rename). Add the link feed and api key with the key/values of `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, and the optional `WEBMENTION_PINGBACK` url if required. Please try not to publish this to a repository!
:::note
-You don't have to include the pingback link. Maybe coincidentally, but after adding it I started to receive a higher frequency of spam in my mailbox, informing me that my website could be better. Tbh they're not wrong. I've now removed it, but it's up to you.
+You don't have to include the pingback link. Maybe coincidentally, but after adding it I started to receive a higher frequency of spam in my mailbox, informing me that my website could be better. TBH they're not wrong. I've now removed it, but it's up to you.
:::
### Sign up to Brid.gy
diff --git a/src/site.config.ts b/src/site.config.ts
index 3b843180..d1b48ccb 100644
--- a/src/site.config.ts
+++ b/src/site.config.ts
@@ -21,11 +21,6 @@ export const siteConfig: SiteConfig = {
ogLocale: "en_GB",
// Used to construct the meta title property found in src/components/BaseHead.astro L:11, and webmanifest name found in astro.config.ts L:42
title: "Astro Theme Cactus",
- webmentions: {
- // Webmention.io API endpoint. Get your own here: https://webmention.io/, and follow this blog post: https://astro-cactus.chriswilliams.dev/posts/webmentions/
- link: process.env.WEBMENTIONS_URL,
- pingback: undefined,
- },
};
// Used to generate links in both the Header & Footer.
diff --git a/src/types.ts b/src/types.ts
index 43640687..88345e31 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,10 +8,6 @@ export interface SiteConfig {
lang: string;
ogLocale: string;
title: string;
- webmentions: {
- link?: string | undefined;
- pingback?: string | undefined;
- };
}
export interface PaginationLink {