cardserver

Cardserver

A simple social media card renderer written using Puppeteer – screenshot card-like webpages on-the-fly

Cardserver is largely based on how Pieter generates shareable pictures for Nomad List – built for Coworkations

📄 HTML 🌇 PNG	📄 HTML 🌄 PNG
📄 HTML 🏙 PNG	📄 HTML 🏝 PNG

Setup

npm install -g cardserver
cardserver

Usage

Cardserver performs HTML requests based on PNG requests like so:

🌇 PNG (cardserver request)	📄 HTML (webserver request)
https://steve.ly/cards/steve.png	https://steve.ly/cards/steve
https://coworkations.com/cards/coworkations.png	https://coworkations.com/cards/coworkations
https://coworkations.com/cards/hacker-paradise.png	https://coworkations.com/cards/hacker-paradise
https://coworkations.com/cards/pack/ubud-bali-2.png	https://coworkations.com/cards/pack/ubud-bali-2

Markup

You’ll want meta tags something like these:

<meta itemprop="image" content="https://coworkations.com/cards/coworkations.png">
<meta property="og:image" content="https://coworkations.com/cards/coworkations.png">
<meta name="twitter:image" content="https://coworkations.com/cards/coworkations.png">

Caching

Cardserver serves basic caching headers and works great with Cloudflare, generated images are cached in /tmp/cards and replaced after 1 week, empty the directory if you want to clear the cache

The script serves a cache maxage of a week, and requires .png file extension so that Cloudflare will cache it without any additional configuration (page rules are required otherwise)

Debugging

• Facebook Sharing Debugger
• Twitter Card Validator

Fonts

If you have any issues with fonts you may need to download them and put them somewhere like /usr/share/fonts/truetype (Ubuntu), you can get the URL to Google’s TTF’s by blanking out your User-Agent (otherwise it’ll probably serve you WOFF2’s)

NGINX

The simplest way to hook cardserver up is to route all PNG traffic to it via NGINX:

location ~ ^/cards/.*\.png$ {
    proxy_pass http://127.0.0.1:9100;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Supervisor

Supervisor is handy to keep cardserver running:

[program:cardserver]
command = cardserver
autostart = true
autorestart = true
stdout_logfile = /var/log/supervisor/cardserver.log
redirect_stderr = true