/ Code

QR Codes in Ghost

Often I start reading a page on my desktop and want to continue reading on my phone so I'll send the link to myself. I figured that an easier way would be for pages to have a self-referential QR Code embedded so I did just that for my blog. I probably won't use it but I wanted to see if I could. Here's how I did it.

Update Theme

I was using the default "Casper" theme so the first step was to create a copy of it. The sed command changes the package just a little so that Ghost doesn't complain or try to overwrite the default Casper. The ed command inserts a "div" element in the footer (assuming you are using a non-edited Casper 2.1.2 default.hbs file). Regardless, put the "div" wherever you want the QR Code to appear.

% rsync -avP ./content/themes/casper/ /tmp/keith/
% sed -i "" 's/"casper"/"casper-keith"/;s/default/(almost) default/' /tmp/keith/package.json
% ed /tmp/keith/default.hbs<<EOF
H
31a

                <div id="kj-qr-code"></div>
 
.
EOF
% (cd /tmp/keith; zip -r /tmp/keith.zip .)

Make the QR javascript code available

I used qrcode-generator here and copied it into a directory on my web-server.

Create Code Injection Code

This was dead simple - pretty much just a cut-paste from the sample code from above into the "Blog Footer" section. I did it as "code injection" thinking that it's going to be easier to maintain than having to jigger with Ghost code, given how often Ghost updates. The only difference is the data-string is the javascript builtin var "location.href". A bonus of having this as a code-injection means I don't have to derive the url myself.

<script type="text/javascript" src="//altgnat.com/include/js/qrcode-generator/qrcode.js"></script>
<script>
  var typeNumber = 4;
  var errorCorrectionLevel = 'L';
  var qr = qrcode(typeNumber, errorCorrectionLevel);
  qr.addData(location.href);
  qr.make();
  document.getElementById('kj-qr-code').innerHTML = qr.createImgTag();
</script>