Try it out on my profile, or read about the journey building it.

Users who have tagged the banner

BertPlasschaert on 18/01/2026

Thank you all for adding your username!

Taggable Banner

By implementing this system you can let visitors add their usernames to the repo banner. Inspired by the way timburgan creatively used github actions to update his chess README.md. I wanted to pimp my own homepage by creating some kind of guestbook. Give it a try here!

How does it work?

By clicking the link under the banner you will be prompted to submit a pre-filled issue, triggering a Github action. This action will run the python code from this repo and execute the following steps:

• Check the README.MD file which doubles as a registry for existing tags.
  • If the tag already exists, add a comment to the issue and close it.
• Add the username to the README.MD file and add the tag to the banner.svg.
• Update the banner.svg filename with a timestamp to invalidate the Github caching system.
• Close the issue and add a reply, prompting the user to check it out.

The banner SVG file scales perfectly for every screen, and is light and dark mode compatible!

$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ Dark mode $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$	$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ Light mode $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$

Test it locally

If you want to test the functionality on your own machine you can pip install the repo using the following command:
pip install git+https://github.com/BertPlasschaert/TaggableBanner

This provides three CLI commands:

• A check to see if the username tag is already in the banner: taggablebanner check "<username>"
• A command to add the username tag to the banner: taggablebanner add "<username>"
• A command to rename the banner SVG file to a random name: taggablebanner fix_cache

  This ensures that the file pointer in the README.md file can never be cached, updates will show up instantly.

Add it to your own repo

Start by copying the workflow file into your own repo.

You will have to set the following settings in your repository settings:

• issues are enabled,
• actions have read and write permissions

You can either copy the README_example.md file to start from. Or copy the begin and end usernames markers from it, and paste it into your existing README.md file.
Don't forget to update the link in the button pointing towards your own repo. The URL params in that link will prepopulate the issue body and title, so be careful updating it.

Customize it

I suggest you read the writeup first.

The title: Hello! is a string value which you can easily update. Only the bricks, cracks and splats are file SVG elements, which require more work to update. The bulk of your work will be to update the 'magic numbers' that position these elements. I've implemented exclusion zones around the brick elements and title, no tags can spawn fully over them. So if you change these elements, make sure to update them accordingly. Adding fonts is possible but you'll need to encode them and create configs.

Attributions

• Tim Burgan for the creative use of github actions and sparking this idea.
• Nicolas Fränkel for his article on SVG font embeddings.
• orsinium for creating an SVG interface python module and making my life a lot easier.
• Dafont:
  • fitrahtype - crysh graffiti
  • Woodcutter - graffiti city
  • Nirmana Visual - graffiti youth
  • Rissyletter Studio - shock graffiti
• The Noun Project:
  • Bombasticon Studio - Brick wall
  • Sean Maldjian - Wall cracks
  • Marie Van den Broeck - Stain 01
  • Lucas Helle - Stain 02

License

This example and the code in it is licensed under the MIT License. If you use this in your own repositories, please add a link back to this repo!

Disclaimers

- No GenAI / LLMs were used in and during the development of this repository.