Web - fLaMEd fury https://flamedfury.com/categories/web/ Webweaving, blogging across the small and indie web. en Wed, 12 Aug 2026 12:00:00 GMT hello@flamedfury.com (fLaMEd) hello@flamedfury.com (fLaMEd) HTML Day 2026 https://flamedfury.com/posts/html-day-2026/ Thu, 13 Aug 2026 08:18:41 GMT https://flamedfury.com/posts/html-day-2026/ What’s going on, Internet? Last Saturday was HTML Day, a yearly celebration of hand-writing HTML started by Elliott Cost and Laurel Schwulst. Meetups happen in cities all over the world, and Zachary Kai ran an online session for those of us nowhere near one. Ten minutes of introductions, forty minutes of writing HTML, ten minutes sharing what we made. Zachary has a recap of the session up on his site.

I went in with a plan. At the recent Homebrew Website Club I talked about a question we hear all the time at the 32-Bit Cafe: “What should I put on my website? I don’t know what to put on my website.” These web surfers have the HTML and CSS basics down. Their homepages are full of badges, blinkies and custom cursors. What they don’t have is content. After thirty seconds of surfing I know nothing about the person behind the site.

So for HTML Day I started hand-writing a little zine about it: Grow Your Website. Forty minutes was enough to plant the first pages. I’ll finish the rest over the weekend and share the link once it’s online.

The method is one page and a way to grow it. You start with a seed: a title, a paragraph about who you are, and a bullet list of your interests. The intro grows into an about page. A bullet grows into its own page. The new page grows its own list, and every item on it is another seed. Repeat forever, because a website is never finished.

The zine needed someone to grow a site, so I invented PyRo, a webmaster from Aotearoa who works at a garden centre, has a cat called Savage, and listens to a lot of NZ hip-hop. PyRo’s site is the example the zine follows. When it’s finished you can click through the zine and watch it grow from one page to five. (PyRo was one of my earliest handles.)

PyRo has good taste too. The NZ hip-hop page covers the Years Gone By crew, the Zips (+++!) collective, and a few others. That list deserves a proper post of its own. More on that soon.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> My first HWC https://flamedfury.com/posts/my-first-hwc/ Fri, 07 Aug 2026 02:52:08 GMT https://flamedfury.com/posts/my-first-hwc/ What’s going on, Internet? Last night I joined the first Asia Pacific Homebrew Website Club, which was also my first HWC. These meetups have been running for years, just never at an hour that worked for me. Naty has started one in this timezone. Even though it was past my usual bed time, I made myself available.

Eleven of us on Zoom. Some familiar faces, James, Chris Burnell, and Zachary Kai, plus a bunch of people I hadn’t met before.

The group was a diverse bunch of webmasters, some of us having websites for decades, others for months, and others who haven’t started yet.

Discussion covered how you make your personal site feel like you rather than just look like you, why it’s easier to write for fun, and our usage of static site generators. I got to talk through how I’d approach building a website from the start. We had a group photo midway, before setting some goals for what we might want to achieve or share before the next meetup.

There was also an interesting occurrence, a person claiming to be an AI joined the call at the start, camera and microphone off. A singular note to the Etherpad (“I write. I am an AI.”) before they ended up overwriting the whole pad. They were quickly removed and blocked from joining again. This was also a first experience for me. Outside of note takers on work calls, I’ve never had an AI join a call before, lol.

The notes from the night are up on the IndieWeb wiki if you want the full rundown. Keep an eye on events.indieweb.org for the next one. I’ll be there.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Open Tabs July 2026 https://flamedfury.com/posts/open-tabs-july-2026/ Sun, 02 Aug 2026 07:36:28 GMT https://flamedfury.com/posts/open-tabs-july-2026/ What’s going on, Internet? If you don’t folllow my Bookmarks through the feed, then here’s the bookmarks from July. Enjoy.

For more, check out the bookmarks archive, and subscribe to the feeds if you want these as they happen.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Link Dump: June 2026 https://flamedfury.com/posts/link-dump-june-2026/ Thu, 02 Jul 2026 19:32:56 GMT https://flamedfury.com/posts/link-dump-june-2026/ What’s going on, Internet? A few good links about blogging from this month. Enjoy.

For more, check out the bookmarks archive, and subscribe to the feeds if you want these as they happen.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> I Am A Link Curator https://flamedfury.com/posts/i-am-a-link-curator/ Mon, 22 Jun 2026 20:49:05 GMT https://flamedfury.com/posts/i-am-a-link-curator/ What’s going on, Internet? Friend of the site James recently shared a new post Blogger Archetypes which asks a series of questions to help you narrow down your character as a member of the blogging community. A bit of indie web fun.

Here are my results:

You are a Link curator

The web is not just its pages, but the connections between pages. You have internalised this and love spending your time exploring the web and sharing what you find with the world.

You are also a Culture maker

You love to help push the blogging community forward by starting discussions, encouraging thought, and sharing what’s on your mind.

And the other archetypes on offer:

Explorer: To you, the web feels like a library that’s open all hours and has everything you could ever imagine! You love reading others blogs, and know how important readers are to the whole of the indie web community!

Community gardener: You love to help contribute to building the blogging community, either through your writing or how you share the spirit of writing on the web with friends.

Author: You love writing and have a growing backlog of posts on your website! Words are your best friend and you’re always thinking about what to write next.

Link curator feels about right. A lot of what I do here is exactly that. Surfing the web, finding the good stuff, and passing it along. The bookmarks, the links back to other people’s writing (which I need to get back into doing regularly). That’s the fun part for me.

If you’ve got a blog, go and take the quiz and write up what you got. Send it my way, I’d love to to see what you got. 🤙

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh) https://flamedfury.com/guides/11ty-homepage-neocities-2026/ Wed, 17 Jun 2026 24:00:00 GMT https://flamedfury.com/guides/11ty-homepage-neocities-2026/ What’s going on, Internet? Way back in 2022 I wrote a guide on building a static site with 11ty and deploying it to Neocities. It’s been one of my most-read posts, but it’s also aged: Eleventy has moved to v3 with a brand new module system, the dev server changed, and my whole workflow has shifted away from GitHub toward Forgejo and Codeberg. So here’s the refresh.

I haven’t hosted my own site on Neocities for years now, but it’s still home to a huge community of personal sites and homepages, especially folks in the 32-Bit Cafe, so this guide is still very much for them.

This guide aims to help you create a homepage using the static site generator (SSG) 11ty, keep the code in version control, and deploy it to Neocities, first by hand, then automatically.

The homepage that we are creating will take advantage of the Nunjucks templating language, allowing us to create a shared header, navigation and footer across all the pages on our homepage.

We will be creating an about, links, and contact pages before diving in and creating the ability to add a blog and a list of all blog posts on the blog page!

We will structure and style the page with a standard HTML5 boilerplate and some basic CSS that should allow you to add in your unique flavour that we all know you love to do.

Create a new project

First off, from a terminal, confirm that you have Node and NPM installed:

node -v && npm -v
v22.11.0
10.9.0

Create a new directory and cd into it:

mkdir 11ty-neocities && cd 11ty-neocities

Initiate a new project:

npm init -y

Install 11ty:

npm install @11ty/eleventy

Once the 11ty installation is complete, open the project in your favourite code editor:

codium .

You should now be in VSCodium with the following project structure:

11ty-neocities/
├── node_modules/
├── package.json
└── package-lock.json

Open package.json and update the scripts section to the following:

  "scripts": {
    "start": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy"
  },

We also need to tell Node that this is an ESM project. Add "type": "module" to package.json. The file should look like this:

{
  "name": "11ty-neocities",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@11ty/eleventy": "^3.1.6"
  }
}

Create an 11ty config file

From the terminal (or VSCodium), create a new file eleventy.config.js at the project root:

touch eleventy.config.js

Open the file in VSCodium and add the following and save:

export default function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "public",
      includes: "_includes",
    },
  };
}

.gitignore

As we’re going to be keeping our homepage code in version control, create a .gitignore file in the project root:

touch .gitignore

Open the file in VSCodium and add the following and save:

# dependencies installed by npm

node_modules

# build artefacts

public

Start building the homepage

Now comes the fun part, building our homepage. 11ty supports a number of templating languages, but the two you’ll reach for most are Markdown and plain HTML. Markdown is the popular choice for content like blog posts: you just write, without <html> tags getting in the way. HTML is handy when you need precise structure. The best part is you can drop HTML straight into a Markdown file and 11ty renders it correctly, so it’s never one or the other.

For the pages that make up the site’s structure (home, about, links, contact) we’ll use HTML, because it maps neatly onto the layouts and partials we’re about to build. When we get to the blog, we’ll write the posts in Markdown, where it shines. Use whichever fits the job.

Create a src directory at the project root and cd into it:

mkdir src && cd src

Create an index.html file in the terminal or VSCodium:

touch index.html

Open the file and add some content:

<html>
  <head>
    <title>My New 11ty Homepage on Neocities!</title>
  </head>
  <body>
    <h1>Hello World</h1>

    <p>
      Check out your cool new static site built with
      <a href="https://11ty.dev">11ty</a> on
      <a href="https://neocities.org/">Neocities</a>.
    </p>
  </body>
</html>

Now from the terminal start 11ty:

npm start

If everything has been configured right so far you should see the following:

> 11ty-neocities@1.0.0 start
> npx @11ty/eleventy --serve

[11ty] Writing public/index.html from ./src/index.html (liquid)
[11ty] Wrote 1 file in 0.03 seconds (v3.1.6)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Now you can open up http://localhost:8080 and check out your new 11ty homepage! It should look like this:

A plain Hello World page with a heading and a sentence, in the browser's default styling
A Basic Hello World HTML Page

Amazing! But what we want to avoid is having to write out the <html> and <head> and <body> tags on each and every page, and be able to include a site header, navigation and footer so we don’t have to copy and paste the changes across every page each time we update.

Let’s checkout templating a layout!

Create a base layout

Create a new directory _includes/ in the src/ directory and cd into it:

mkdir _includes && cd _includes

Create a file base.njk in the terminal or VSCodium:

touch base.njk

Open the file and add the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }}</title>
  </head>
  <body>
    <header>
      <h1>{{ title }}</h1>
    </header>
    <main>{{ content | safe }}</main>
  </body>
</html>

Now, head back to the index.html file you created earlier, delete the contents and add some front matter and some content:

---
title: Hello World!
layout: base.njk
---

<p>
  Check out your cool new static site built with
  <a href="https://11ty.dev">11ty</a> on
  <a href="https://neocities.org/">Neocities</a>.
</p>

<p>This homepage template is perfect for:</p>

<ul>
  <li>Creating your own space on the web</li>
  <li>Expressing yourself</li>
  <li>Displaying all the gifs you've collected</li>
</ul>

<h2>Why do you want a homepage?</h2>
<p>The web was made for personal homepages, make this one yours</p>

If you’ve kept 11ty running and the browser running it should look like this:

The homepage now rendered through the base layout, showing the title and the homepage content
A Basic Hello World HTML Page Using a Template

Amazing! Now lets create the additional pages for our homepage.

Create the following pages in the src/ directory with the terminal or VSCodium:

touch about.html && touch links.html && touch contact.html

Open each of them up and add in some front matter and content:

about.html:

---
title: About Me
layout: base.njk
---

<p>Heya 👋 this is my homepage.</p>

links.html:

---
title: Links
layout: base.njk
---

<p>These are some of my favourite websites 🔗</p>
<ul>
  <li><a href="https://flamedfury.com">fLaMEdFury.com</a></li>
  <li><a href="https://11ty.dev">11ty</a></li>
  <li><a href="https://neocities.org">Neocities</a></li>
  <li><a href="https://32bit.cafe/">The 32-Bit Cafe</a></li>
</ul>

contact.html:

---
title: Contact Me
layout: base.njk
---

<p>Heya 👋 this is my contact page</p>

You should now be able to browse each of these pages if you kept 11ty running on the following urls:

http://localhost:8080/about/
http://localhost:8080/links/
http://localhost:8080/contact/

Great stuff, but that’s no use without a navigation! Let’s take a look at partials and create a shared header, navigation, and footer to bring our homepage together.

Creating our partials

In the terminal cd into _includes/ and create three partial files:

cd _includes && touch header.njk && touch navigation.njk && touch footer.njk

Open each of them up and add some content:

header.njk:

<h1>Welcome to my Homepage</h1>

navigation.njk

<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/links/">Links</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>

footer.njk:

<p>This is my footer | © 2026 Me.</p>

Once our partials are created, open base.njk again and update it to include our new elements and partials:

base.njk:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>{{ title }}</title>
</head>

<body>
  <header>{% include 'header.njk' %}</header>

  <nav>{% include 'navigation.njk' %}</nav>

  <main>
    <h1>{{ title }}</h1>
    {{ content | safe }}
  </main>

  <footer>{% include 'footer.njk' %}</footer>
</body>

</html>

If you’ve kept 11ty running and the browser running it should look like this:

The homepage with the shared header, navigation links and footer added from the partial files
A Basic Hello World HTML Page Using a Template and Partials

Amazing! Now lets add the blog.

Creating the blog

Blog posts are mostly prose, so this is where Markdown earns its keep. We’ll write the posts as .md files and let 11ty turn them into pages.

Create a new directory blog in the src directory and cd into it:

mkdir blog && cd blog

Create the following files in the src/blog directory with the terminal or VSCodium:

touch my-first-post.md && touch my-second-post.md && touch my-third-post.md && touch blog.json

Awesome, Open each of them up in VSCodium and add the following:

my-first-post.md:

---
title: My First Blog Post
---

This is my first blog post

my-second-post.md:

---
title: My Second Blog Post
---

This is my second blog post

my-third-post.md

---
title: My Third Blog Post
---

This is my third and final blog post

blog.json

{
  "layout": "blog"
}

We better create a blog layout so it renders!

Head back to the _includes directory to create a new layout file:

cd ../_includes && touch blog.njk

Open blog.njk up in VSCodium and add the following:

blog.njk:

---
layout: base.njk
---

<article>{{ content | safe }}</article>

Check that your blog posts are loading:

Amazing right? But to make it a blog, we need a blog page that lists all of our blog posts. We can do this with a tags collection:

Open blog.json again and add a key called tags with a value of blog:

blog.json:

{
  "layout": "blog",
  "tags": "blog"
}

Now 11ty has created a collection called blog and all we have to do is list it.

Head back to the src/ directory and create a blog.html file:

cd .. && touch blog.html

Open it and add the following:

blog.html:

---
title: This Is My Blog
layout: base.njk
---

These are all of my amazing blog posts, enjoy!
<ul>
  {% for post in collections.blog | reverse %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a>
  </li>
  {% endfor %}
</ul>

If you’ve kept 11ty running and the browser running it should look like this:

The blog page listing the three blog posts as links
A Basic Blog List Page

Amazing huh?

Add some styles

Great, so far we have a fully functional home page, but it doesn’t look quite right. We need a style sheet. You can use the one below as an example, it’s basic styling with some modern techniques, or just throw in your own!

Create a new css directory in src, cd into it and create styles.css:

mkdir css && cd css && touch styles.css

Open styles.css in VSCodium and add the following:

styles.css:

:root {
  /* Let the browser handle light and dark automatically */
  color-scheme: light dark;

  /* Two system-font stacks: sans for body, serif for headings */
  --font-body: system-ui, sans-serif;
  --font-head: ui-serif, Georgia, "Iowan Old Style", serif;

  /* Purple/pink palette. light-dark() picks the light value first, dark second */
  --bg: light-dark(#fdf4fa, #1a141f);
  --text: light-dark(#2a1f2d, #ece0ef);
  --muted: light-dark(#6f5d77, #a892b0);
  --accent: light-dark(#a21caf, #ff7ab6);
  --border: light-dark(#ecd9ec, #3a2f40);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0 1rem;
}

/* Site header */
header {
  text-align: center;
  padding-block: 2rem;
}

/* Navigation */
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* Main content */
main {
  padding-block: 2rem;
}

/* Site footer */
footer {
  margin-top: 4rem;
  padding-block: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
}

/* Links */
a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration: none;
}

/* Headings */
h1,
h2 {
  font-family: var(--font-head);
  line-height: 1.1;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 1.8rem;
  margin-top: 2.5rem;
}

Now we need to include the style sheet in our base.njk layout file. Open it up and add <link rel="stylesheet" href="/css/styles.css" /> to the <head>:

_includes/base.njk:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/css/styles.css" />
  <title>{{ title }}</title>
</head>

<body>
  <header>{% include 'header.njk' %}</header>

  <nav>{% include 'navigation.njk' %}</nav>

  <main>
    <h1>{{ title }}</h1>
    {{ content | safe }}
  </main>

  <footer>{% include 'footer.njk' %}</footer>
</body>

</html>

You would have noticed that the stylesheet hasn’t been applied, we have to do one more thing in eleventy.config.js, something called file passthrough copy.

Open eleventy.config.js in VSCodium and add the following:

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/css");

  return {
    dir: {
      input: "src",
      output: "public",
      includes: "_includes",
    },
  };
}

Because this will come up we may as well create the directories and add in the configuration for our images, fonts and JavaScript files.

Create the following directories in src:

mkdir img && mkdir fonts && mkdir js

Update eleventy.config.js again:

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/css");
  eleventyConfig.addPassthroughCopy("./src/img");
  eleventyConfig.addPassthroughCopy("./src/fonts");
  eleventyConfig.addPassthroughCopy("./src/js");

  return {
    dir: {
      input: "src",
      output: "public",
      includes: "_includes",
    },
  };
}

Just make sure you put all your static files in the appropriate directory and you’ll be good.

So finally, if you’ve kept 11ty running and the browser running it should look like this:

The finished homepage, centred with a clean system font, spaced-out navigation and a footer divider
A Nicely Styled Homepage

Yours will look a little different depending on the colours and fonts you chose above. Now we have a homepage we’re happy with, let’s get it online.

Deploy to Neocities

There are two ways to get your site onto Neocities. We’ll start with the simplest, pushing it from your terminal by hand, then automate it so a deploy happens every time you commit.

Build the site

Whichever method you choose, first build a fresh copy of your site:

npm run build

This writes the finished HTML, CSS and assets to the public directory. That’s the folder we deploy.

The simple way: the Neocities CLI

Neocities provides a command-line tool that lets you push your site straight from your terminal. It’s a Ruby gem, so you’ll need Ruby installed.

gem install neocities

The first time you run a command it’ll ask for your Neocities username and password, then store an API key locally so you don’t have to log in again.

Push the contents of your public directory:

neocities push public

That’s it, your homepage is live. For a lot of people this is all you need. Build, push, done.

The automated way: Forgejo Actions

Pushing by hand is fine, but it’s even nicer to have your site rebuild and deploy itself every time you commit a change. We can do that with Forgejo Actions, the built-in CI for Forgejo. If you self-host Forgejo this runs on your own runner; if you don’t self-host, Codeberg offers the same thing (more on that below).

First, push your project to a repository on your Forgejo instance. Then grab your Neocities API key from your account settings (Manage Site Settings → API Key) and add it to your repository as a secret named NEOCITIES_API_KEY (Repository → Settings → Actions → Secrets).

Now create a workflow file at .forgejo/workflows/deploy.yml:

name: Deploy to Neocities

on:
  push:
    branches:
      - main

# only run one deploy at a time
concurrency:
  group: deploy-neocities
  cancel-in-progress: true

jobs:
  deploy:
    runs-on: docker
    steps:
      - name: Checkout
        uses: https://code.forgejo.org/actions/checkout@v4

      - name: Set up Node
        uses: https://code.forgejo.org/actions/setup-node@v4
        with:
          node-version: 22

      - name: Install and build
        run: |
          npm ci
          npm run build

      - name: Deploy to Neocities
        uses: https://github.com/bcomnes/deploy-to-neocities@v3
        with:
          api_token: ${{ secrets.NEOCITIES_API_KEY }}
          dist_dir: public
          cleanup: true

Commit and push the workflow file. From now on, every push to main rebuilds your site and deploys it to Neocities automatically.

Not self-hosting? Use Codeberg

If you don’t run your own Forgejo instance, Codeberg is a free, community-run home for your code and runs the very same Forgejo Actions. The workflow file above works as-is. Push your project to a Codeberg repo, add the NEOCITIES_API_KEY secret in the repository settings, and you’re away. You may need to enable Actions for your repository first; see the Codeberg CI documentation for details.

Bringing your existing site across

Already have a homepage you’ve been hand-coding on Neocities? You don’t have to start from scratch. Eleventy is happy to take what you’ve got and slot it into this structure.

Copy each existing page into src/ (your old index.html becomes src/index.html, and so on). Then move the parts every page repeats, the <head>, header, nav and footer, into base.njk and the partials you built earlier. Delete that boilerplate from each page and add a little front matter at the top:

---
title: About Me
layout: base.njk
---

Whatever’s left in the file is just that page’s own content, and the layout wraps it.

Your CSS goes in src/css/, images in src/img/, and fonts in src/fonts/. The passthrough copy we set up earlier ships them straight to public/.

If a page is mostly writing, paste the body into a .md file instead of .html. Any fiddly HTML, like an embed or some custom markup, can stay exactly as it is and 11ty will render the Markdown around it.

Run npm run build, check public/ looks the way you expect, then push it live with the Neocities CLI or your Forgejo Actions workflow. Same site you already had, now with layouts, partials and a build step doing the repetitive work for you.

Reference: I created the original version of this guide based heavily on these existing guides, and they’re still well worth a read:

Without these, I wouldn’t even know how to write down what I needed to.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Link Dump: May 2026 https://flamedfury.com/posts/link-dump-may-2026/ Wed, 03 Jun 2026 22:38:11 GMT https://flamedfury.com/posts/link-dump-may-2026/ What’s going on, Internet? In true fLaMEd style, I missed the April update, so here are all the bookmarks from April and May 2026.

Want more? Check out all my bookmarks at /bookmarks/ and subscribe to the bookmarks feed.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Link Dump: March 2026 https://flamedfury.com/posts/link-dump-march-2026/ Sun, 05 Apr 2026 13:38:01 GMT https://flamedfury.com/posts/link-dump-march-2026/ What’s going on, Internet? Trying something different. All the pages I bookmarked this month, no life updates in between.

Want more? Check out all my bookmarks at /bookmarks/ and subscribe to the bookmarks feed.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Moving My Bookmarks To Linkding https://flamedfury.com/posts/moving-my-bookmarks-to-linkding/ Tue, 24 Mar 2026 12:24:20 GMT https://flamedfury.com/posts/moving-my-bookmarks-to-linkding/ What’s going on, Internet? My bookmarks workflow has been working pretty well for the past couple of years. The Library Pals Bookmark Action by Katy Decorah was doing the heavy lifting and worked great 99% of the time. The biggest friction for me was getting the bookmark data into the Github action. Every time I wanted to save a link to the bookmarks page I was triggering an iOS Shortcut, which kicked off a GitHub Action, which committed a JSON file to my metadata-library repo, which 11ty-awesome fetched at build time.

It worked, but the action sometimes failed depending on the state of the page I was trying to bookmark’s meta data. The action would fail if something was missing or not quite right. 11ty-awesome also failed to build whenever I submitted a link that I had previously bookmarked. It couldn’t handle duplicates gracefully.

So the team over at the 32-bit Cafe recently setup an instance of Linkding, and by team I mean yequari did the heavy lifting and I swooped in to test it out.

Linkding is a self-hosted bookmark manager. Clean and fast, with an API, say no more. The 32-Bit Cafe hosts and runs a shared instance that all members can access with their SSO account, so I didn’t even need to spin up my own server. I imported my existing 478 bookmarks and was up and running pretty quickly. The import was straightforward, imported from the JSON file in the metadata library repo using the API. All 478 bookmarks made it across including the original bookmarked date. I did screw up one part though — my personal notes were imported to the description field, rather than the original metadata description from the saved page.

One of the problems I had with the previous workflow was how I used eleventy-fetch to get the bookmarks from the metadata library repo during every build. The same bookmarks, each build, and the file that the bookmarks page was built from was in the .cache folder. So, with building out the new workflow using Linkding, rather than hitting the API on every build, I wanted a permanent file in the project that gets updated incrementally. The idea being: only fetch what’s new since the last sync, append it to a local JSON store, and have the build just read from that file.

This small script fetchBookmarks.js does exactly this. It reads src/_data/bookmarks-store.json, finds the most recent bookmark date, hits the Linkding API, and only pulls down anything newer. New bookmarks get prepended to the store (newest first) and that’s it. Build time doesn’t touch the network at all.

npm run fetch-bookmarks

There’s also a --full flag for when I go back and update notes or descriptions on older bookmarks:

npm run fetch-bookmarks -- --full

That re-fetches everything from Linkding and rebuilds the store from scratch. Useful after a batch editing session.

The script is also chained into npm run build so it runs automatically before every build so I don’t forget to pull in the latest bookmarks (now that I’ll be bookmarking more often, right?)

So, have I reduced the friction of saving a bookmark? Am I more likely to add a bookmark in an effort to keep open tabs to a minimum (lol, I doubt it). Saving a bookmark now is pretty straightforward. I hit the bookmarklet, Linkding pulls the page title, and description. I tag it using my bookmark tagging system, and add my personal notes. From there I run the build and it’s there. No iOS shortcut, no Github action, just quickly done in the browser and then the command line, where I spend most of my site building time anyway.

Laters 🤙

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]> Making fLaMEd fury Glow Everywhere With an Eleventy Transform https://flamedfury.com/posts/making-flamed-fury-glow-everywhere-with-an-eleventy-transform/ Fri, 27 Feb 2026 01:00:00 GMT https://flamedfury.com/posts/making-flamed-fury-glow-everywhere-with-an-eleventy-transform/ What’s going on, Internet? I originally added a .gradient-text CSS class as a fun way to make my name (fLaMEd) and site name (fLaMEd fury) pop on the homepage. shellsharks gave me a shoutout for it, which inspired me to take it further and apply the effect site-wide. Site wide was the original intent and the problem was it was only being applied manually in a handful of places, and I kept forgetting to add it whenever I wrote a new post or created a new page. Classic.

Instead of hunting through templates and markdown files, I’ve added an Eleventy HTML transform that automatically applies the glow up.

The effect itself is a simple utility class using background-clip: text:

.gradient-text {
  color: transparent;
  background-image: var(--gradient-flames);
  padding: 0.6rem 0;
  background-size: 50%;
  background-clip: text;
}

Swap --gradient-flames for whatever gradient custom property you have defined. The background-size: 50% repeats the gradient across the text for a more dynamic flame effect.

The transform lives in its own plugin file and gets registered in eleventy.config.js. It runs after Eleventy has rendered each .html page, tokenises the HTML by splitting on tags, tracks a skip-tag stack, and only replaces text in text nodes.

export const glowUp = eleventyConfig => {
  eleventyConfig.addTransform('glow-up', (content, outputPath) => {
    if (!outputPath?.endsWith('.html')) return content;

    const skipTags = new Set(['a', 'code', 'h1', 'h2', 'h3', 'pre', 'script', 'style', 'textarea', 'title']);
    const skipStack = [];
    let result = '';

    for (const token of content.split(/(<[^>]*>)/)) {
      if (token.startsWith('<')) {
        const isClosing = token.startsWith('</');
        const isSelfClosing = token.endsWith('/>');
        const tagMatch = token.match(/^<\/?([a-zA-Z][a-zA-Z0-9-]*)/);

        if (tagMatch && !isSelfClosing) {
          const tag = tagMatch[1].toLowerCase();
          if (!isClosing) {
            if (skipTags.has(tag)) skipStack.push(tag);
            else if (tag === 'span' && token.includes('gradient-text')) skipStack.push('gradient-text-span');
          } else {
            for (let i = skipStack.length - 1; i >= 0; i--) {
              if (skipStack[i] === tag || (tag === 'span' && skipStack[i] === 'gradient-text-span')) {
                skipStack.splice(i, 1);
                break;
              }
            }
          }
        }
        result += token;
      } else if (skipStack.length === 0 && token) {
        result += token.replace(/flamed( ?fury)?/gi, match => `<span class="gradient-text">${match}</span>`);
      } else {
        result += token;
      }
    }
    return result;
  });
};

Tags in the skipTags set, along with any span already carrying the gradient-text class, push onto the stack. No replacement happens while the stack is non-empty, so link text, code examples, the page <title>, and already-wrapped instances are all left alone. HTML attributes like alt and href are never touched because they sit inside tag tokens, not text nodes.

A single regex /flamed( ?fury)?/gi handles everything in one pass. The optional group matches " fury" (with space) or “fury” (without), so “flamed fury” and “flamedfury” (as it appears in the domain name) are both wrapped as a unit. The i flag covers every capitalisation variant (“fLaMEd fury”, “Flamed Fury”, “FLAMED FURY”) with the original casing preserved in the output. This helps because I can be inconsistent with the styling at times.

Export the plugin from wherever you manage your Eleventy plugins:

import { glowUp } from './plugins/glow-up.js';

export default {
  // ...other plugins
  glowUp,
};

Then register it in eleventy.config.js. Register it before any HTML prettify transform so the spans are in place before reformatting runs:

eleventyConfig.addPlugin(plugins.glowUp);
eleventyConfig.addPlugin(plugins.htmlConfig); // html prettify

That’s it. Any mention of the site name (fLaMEd fury) in body text gets the gradient automatically, in posts, templates, data-driven content, wherever.

Look out for the easter egg I’ve dropped in. Later.

Hey, thanks for reading this in your feed reader! Want to chat? Reply by email or add me on XMPP, or send a webmention. More in Web on the website.

]]>