cardserver

Cardserver

A simple social media card renderer written in PhantomJS – 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

A cardserver request maps to a webserver request like so:

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

In short, the cards subdomain is stripped and the .png is swapped for /card

Note: homepage cards are available at hostname(without tld).png

Markup

You’ll want meta tags something like these:

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

Caching

Cardserver serves basic caching headers and works great with Cloudflare

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

PhantomJS can be a jerk about fonts, especially Google Fonts, you may need to download TTF’s and dump 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)

Haproxy

Haproxy is handy to push everything that hits a cards subdomain through to cardserver’s port:

frontend:
    default_backend app

    acl host_cards hdr_beg(host) -i cards.
    use_backend cards if host_cards

backend cards
    option forwardfor
    server cards 127.0.0.1:9100

Supervisor

Supervisor is handy to keep cardserver running:

[program:cardserver]
command = phantomjs /path/to/cardserver/cardserver.js
autostart = true
autorestart = true
stdout_logfile = /var/log/supervisor/cardserver.log
stderr_logfile = /var/log/supervisor/cardserver_err.log