Raster is a SvelteKit application which generates images to go at the top of READMEs, for link previews, and notices for the things readers shouldn't miss. Everything about an image is in its URL, so it can be pasted straight into Markdown:
Visit /raster for a builder that previews images as you type and gives you the Markdown.
All of these go in the query string of /raster/header, and only title is needed.
Anything invalid falls back to its default, so a typo gives you a slightly different image rather than a broken one.
| Option | Values | Default |
|---|---|---|
title |
Up to 120 characters. Newlines (%0A) force a line break when wrapping |
TITLE |
subtitle |
Up to 500 characters. Newlines (%0A) force a line break |
None |
template |
rjm, black, white, aurora, terminal, editorial, blueprint, sunset, brutalist |
rjm |
format |
banner (2072×256), og (1200×630), square (1200×1200) |
banner |
align |
left, center |
Set by the template |
titleSize |
s, m, l, xl, or a size in pixels from 16 to 300 |
l |
wrap |
true, false: whether the title can take more than one line |
false for banners, true otherwise |
logo |
true, false: whether to draw the RJM pattern |
true |
primary |
A hex colour, with the # written as %23 or left out |
Set by the template |
secondary |
A hex colour, with the # written as %23 or left out |
Set by the template |
badge |
The URL of a badge. Repeat it for up to 6 badges | None |
rjm: The RJM pattern on black. The default
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=rjm
black: White text centred on black
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=black
white: Black text centred on white
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=white
aurora: Cool light over a night sky, in Space Grotesk
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=aurora
terminal: A green prompt in a dark window, in JetBrains Mono
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=terminal
editorial: Serif type on warm paper, in Playfair Display
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=editorial
blueprint: A technical drawing on a blue grid
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=blueprint
sunset: Heavy white type on a warm gradient, in Archivo Black
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=sunset
brutalist: Hard edges and a loud yellow
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=brutalist
banner: for the top of a README
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&format=banner
og: for link previews
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&format=og
square: for Twitter embeds and profile images
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&format=square
Every template works in every format:
square, with the aurora template
https://api.murga.cloud/raster/header?title=Raster%20Header&subtitle=A%20README%20title%20image%20generator&format=square&template=aurora
og, with the brutalist template
https://api.murga.cloud/raster/header?title=Raster%20Header&subtitle=A%20README%20title%20image%20generator&format=og&template=brutalist
Centred on the RJM template, which stays clear of the pattern
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&align=center
Left-aligned on a template that centres by default
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=black&align=left
The RJM pattern can be turned off, which also frees up the full width of the image for text.
The RJM template without its pattern
https://api.murga.cloud/raster/header?title=Raster&subtitle=All%20of%20the%20style%2C%20with%20none%20of%20the%20initials&logo=false
Centred, without the pattern
https://api.murga.cloud/raster/header?title=Raster&subtitle=All%20of%20the%20style%2C%20with%20none%20of%20the%20initials&logo=false&align=center
Sizes are a target: titles shrink when they have to, and never overflow.
titleSize=s: Small
https://api.murga.cloud/raster/header?title=Raster&titleSize=s
titleSize=m: Medium
https://api.murga.cloud/raster/header?title=Raster&titleSize=m
titleSize=l: Large, the default
https://api.murga.cloud/raster/header?title=Raster&titleSize=l
titleSize=xl: Extra large
https://api.murga.cloud/raster/header?title=Raster&titleSize=xl
titleSize=64: an exact size in pixels
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&titleSize=64
Text is measured before it's drawn. Subtitles wrap and shrink, and only once they can't get any smaller do they end in an ellipsis. Long subtitles stay centred on the bar beside them.
A long subtitle
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20longer%20description%20wraps%20onto%20as%20many%20lines%20as%20it%20needs%2C%20and%20shrinks%20to%20stay%20inside%20the%20image%20and%20clear%20of%20the%20RJM%20pattern%2C%20however%20much%20there%20is%20to%20say%20about%20the%20project
A long title on one line, which shrinks to fit
https://api.murga.cloud/raster/header?title=A%20Considerably%20Longer%20Title%20Than%20Usual&subtitle=A%20README%20title%20image%20generator
A long title with wrap=true
https://api.murga.cloud/raster/header?title=A%20Considerably%20Longer%20Title%20That%20Wraps%20Over%20Two%20Lines&subtitle=A%20README%20title%20image%20generator&wrap=true
Wrapping a long title in a square
https://api.murga.cloud/raster/header?title=A%20Considerably%20Longer%20Title%20That%20Wraps&subtitle=A%20longer%20description%20wraps%20onto%20as%20many%20lines%20as%20it%20needs%2C%20and%20shrinks%20to%20stay%20inside%20the%20image%20and%20clear%20of%20the%20RJM%20pattern%2C%20however%20much%20there%20is%20to%20say%20about%20the%20project&format=square
A forced line break
https://api.murga.cloud/raster/header?title=First%20line%0ASecond%20line&wrap=true&template=editorial
primary and secondary set the title's gradient and the accent beside the subtitle.
A green gradient
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&primary=14532d&secondary=4ade80
An orange gradient
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&primary=9a3412&secondary=fb923c
A gradient on the black template
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=black&primary=22d3ee&secondary=e879f9
Badges from elsewhere are fetched and drawn into the image. Images with badges are cached for 5 minutes rather than an hour, so build statuses stay fresh, and a badge that can't be loaded is left out rather than breaking the image.
One badge
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbuild-passing-brightgreen
Several badges
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbuild-passing-brightgreen&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Flicense-GPL--3.0-blue&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fversion-2.0.0-orange
Badges on a centred template
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=white&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbuild-passing-brightgreen&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Flicense-GPL--3.0-blue
Badges in a square
https://api.murga.cloud/raster/header?title=Raster&subtitle=A%20README%20title%20image%20generator&template=aurora&format=square&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fbuild-passing-brightgreen&badge=https%3A%2F%2Fimg.shields.io%2Fbadge%2Flicense-GPL--3.0-blue
As this makes the server fetch URLs, only these hosts are allowed:
img.shields.iobadgen.netbadge.fury.iogithub.comgitlab.comcodecov.iocoveralls.ioapi.netlify.comover.rjm.iegit.rjm.ie
Add others with the BADGE_HOSTS environment variable, as a comma-separated list of hostnames. Badges have to be HTTPS, and SVG or PNG.
/raster/notice makes banners for the things readers shouldn't miss, with the same five types as GitHub's alerts. They're for anywhere those don't work, like a project page, a package registry or a chat message. They're 1600 pixels wide and as tall as their message needs, so it's never cut off.
| Option | Values | Default |
|---|---|---|
type |
note, tip, important, warning, caution |
note |
message |
Up to 500 characters. Newlines (%0A) force a line break |
None |
title |
Up to 120 characters | The name of the type |
theme |
dark, light |
dark |
Text in an image can't be read by screen readers or found by searching, so repeat it in the alt text.
Note
https://api.murga.cloud/raster/notice?type=note&message=Useful%20information%20that%20users%20should%20know%2C%20even%20when%20skimming%20content.
Tip
https://api.murga.cloud/raster/notice?type=tip&message=Helpful%20advice%20for%20doing%20things%20better%20or%20more%20easily.
Important
https://api.murga.cloud/raster/notice?type=important&message=Key%20information%20users%20need%20to%20know%20to%20achieve%20their%20goal.
Warning
https://api.murga.cloud/raster/notice?type=warning&message=Urgent%20info%20that%20needs%20immediate%20user%20attention%20to%20avoid%20problems.
Caution
https://api.murga.cloud/raster/notice?type=caution&message=Advises%20about%20risks%20or%20negative%20outcomes%20of%20certain%20actions.
Note
https://api.murga.cloud/raster/notice?type=note&message=Useful%20information%20that%20users%20should%20know%2C%20even%20when%20skimming%20content.&theme=light
Tip
https://api.murga.cloud/raster/notice?type=tip&message=Helpful%20advice%20for%20doing%20things%20better%20or%20more%20easily.&theme=light
Important
https://api.murga.cloud/raster/notice?type=important&message=Key%20information%20users%20need%20to%20know%20to%20achieve%20their%20goal.&theme=light
Warning
https://api.murga.cloud/raster/notice?type=warning&message=Urgent%20info%20that%20needs%20immediate%20user%20attention%20to%20avoid%20problems.&theme=light
Caution
https://api.murga.cloud/raster/notice?type=caution&message=Advises%20about%20risks%20or%20negative%20outcomes%20of%20certain%20actions.&theme=light
A custom title
https://api.murga.cloud/raster/notice?type=warning&title=Deprecated&message=This%20API%20will%20be%20removed%20in%20the%20next%20major%20version.
A long message
https://api.murga.cloud/raster/notice?type=important&message=Notices%20grow%20to%20fit%20what%20they%20have%20to%20say%2C%20so%20a%20longer%20message%20simply%20wraps%20onto%20more%20lines%20and%20makes%20the%20image%20taller.%20Nothing%20gets%20shrunk%20or%20cut%20off%20with%20an%20ellipsis%2C%20up%20to%20the%20limit%20of%20500%20characters.
Forced line breaks
https://api.murga.cloud/raster/notice?type=tip&message=1.%20Run%20the%20migrations%0A2.%20Restart%20the%20server
A title on its own
https://api.murga.cloud/raster/notice?type=caution&title=Experimental
GitHub tells images which theme is in use through <picture>:
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="
https://api.murga.cloud/raster/notice?type=warning&message=Back%20up%20your%20data%20first.
"
/>
<img
src="https://api.murga.cloud/raster/notice?type=warning&message=Back%20up%20your%20data%20first.&theme=light"
alt="Warning: Back up your data first."
/>
</picture>