This project is provided under the Gay Agenda License for a reason. The name comes from Twin Peaks as a reminder of what David Lynch thought of transphobic individuals.

I told all of your colleagues, those clown comics, to fix their hearts or die.

Rest in peace, David Lynch (1946-2025), you were too good for this world.

Oh, and this template was made in Portland, Oregon which is also known as Rose City, so you know, there's that.

Features

Photo and video support
- Multiple types can be combined in a single post
- Ability to cite authors and sources where appropriate
- Alt-text highly encouraged
- Pixel-preserving support for pixel art
OpenGraph embed support for places like iMessage and Discord
RSS, Atom, and JSON feeds
High performance
- Images and videos are unloaded when not in view
- Image optimization with @11ty/eleventy-img
Keyboard navigation
- Pages are fully tab-able.
- Navigate pages with left and right arrow keys
Share buttons that use your OS's native share function where available, and ShareOpenly when it's not.
Minimal JavaScript used for:
- Keyboard navigation
- Share sheet
- Pausing videos out of view

Developer Features

Biome for code formatting
Tailwind for CSS

If you don't like Tailwind or Biome, you can remove it.

Important Notes

Uses ai.txt, robots.txt, and a norobots meta tag to ask bots not to allowing indexing or scraping. Remove them if you feel otherwise. It feels irresponsible to default a photo gallery to fully public at this time.
When using @11ty/eleventy-img for image optimization, build times increase. If it gets to be too much, you can remove this and try to pre-optimize your images as best you can.

Installation

Clone the repo git clone [email protected]:melanie/blue-rose.git
Edit ./data/metadata.js with your details.
- I recommend keeping page size and ignored tags the same.
Replace these images with your own:
- apple-touch-icon.png
- cover.png
- favicon.svg
- profile.jpg

Post Template

Create new posts in ./content/p.

Make a markdown file slug.md and place your image in the folder next to it, which will let you reference it by typing ./picture.jpg in the markdown file.

---
author: Author Name
date: 2025-07-15T17:01:23.812Z
attachments:
  - altText: Alt text for sample1.png
    type: image/png
    url: ./sample1.png
  - altText: Alt text for sample2.jpg
    type: image/jpeg
    url: ./sample2.jpg
  - altText: Alt-text for sample3.mp4
    type: video/mp4
    url: ./sample3.mp4
    pixel: true
redirect_from: my-old-webpage
source: https://melkat.pics
tags: [sample, tags]
---

Caption and body content here.

Frontmatter specs

date: 11ty date syntax supported
attachments: Array of pictures and videos
- altText: Make your content accessible
- type: Mimetype, typically image/jpeg, image/png, or video/mp4
- url: path to the picture or video, usually in the same directory as this file, so we reference it like ./my-photo.jpg
- pixel: Boolean, optional, for preserving pixels in pixel art
tags: Array of strings
redirect_from: String, optional, makes a redirect for old urls. For example if you want to make the url example.com/my-old-page forward to the new page determined by the slug of your markdown file, type my-old-page
author: String, optional, cite the original author
source: URL, optional but requires author, puts a link on the author

FAQ

Deploying on Netlify? You may need to add a netlify.toml file, like this one, to the root of this project.

Support

Got a question? Reach out to me on Mastodon, @[email protected] and I will do my best.

Did you find this useful? Donate to Trans Lifeline or The Trevor Project.