Dynamic content for GitHub markdown pages

1 min read

You can generate svg-images with any data on your server for every page's reload. Useful for stats, counters, graphs, texts, images or any other dynamic content.

It works if you say GitHub to disable image caching by setting up headers.

Headers

Compose svg (or any other) image and return it with the following headers:

Header Value
Content-Type image/svg+xml
Pragma no-cache
Expires 0
Cache-Control no-cache, no-store, must-revalidate

Example of usage

Run the express server and make it available from global network (by ngrok for example). Then add an image to page (profile, readme, issue, comment) as:

![](https://dc...eb.ngrok.io/)

const express = require('express'); const app = express(); const port = 3000; /** * View counter variable * @type {number} */ let counter = 0; /** * Return SVG code for image with text "Hits: $i" * * @param {string} text - text to be placed * @returns {string} */ function getBadge(text) { return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="20"> <g font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"> <text x="0" y="14">${text}</text> </g> </svg>`; } app.get('/', (req, res, next) => { res.header('Pragma', 'no-cache'); res.header('Content-Type', 'image/svg+xml'); res.header('Expires', '0'); res.header('Cache-Control', 'no-cache, no-store, must-revalidate'); res.send(getBadge(`Hits: ${++counter}`)); }); app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) });