Merge pull request #6 from styfle/font

Fix missing font

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 package-lock.json
+dev.html

card.js

@@ -3,11 +3,16 @@ const { getScreenshot } = require('./chromium');
 const { getHtml } = require('./template');
 const { writeTempFile, pathToFileURL } = require('./file');
 
-module.exports = async function (req, res) {
+async function handler(req, res) {
     try {
-        let { type = 'png', text = 'Hello' } = parseRequest(req);
+        let {
+            type = 'png',
+            text = 'Hello',
+            fontWeight = 'bold',
+            image = 'now-black',
+        } = parseRequest(req);
         const name = decodeURIComponent(text);
-        const html = getHtml(name);
+        const html = getHtml(name, fontWeight, image);
         const filePath = await writeTempFile(name, html);
         const fileUrl = pathToFileURL(filePath);
         const file = await getScreenshot(fileUrl, type);
@@ -23,3 +28,12 @@ module.exports = async function (req, res) {
     }
 };
 
+
+if (!process.env.NOW_REGION) {
+    const { createServer } = require('http');
+    const PORT = process.env.PORT || 3000;
+    const listen = () => console.log(`Listening on ${PORT}...`);
+    createServer(handler).listen(PORT, listen);
+}
+
+module.exports = handler;

dev.js

@@ -1,5 +0,0 @@
-const { createServer } = require('http');
-const PORT = 3000;
-const handleServer = require('./card');
-const handleListen = () => console.log(`Listening on ${PORT}...`);
-createServer(handleServer).listen(PORT, handleListen);

package.json

@@ -4,7 +4,7 @@
   "description": "Generate an open graph image for twitter/facebook/etc",
   "main": "card.js",
   "scripts": {
-    "dev": "node dev.js"
+    "start": "node card.js"
   },
   "author": "styfle",
   "repository": "github:styfle/og-image",

parser.js

@@ -1,12 +1,13 @@
 const { parse } = require('url');
 
 function parseRequest(req) {
-    const { pathname = '/' } = parse(req.url);
+    const { pathname = '/', query = {} } = parse(req.url, true);
-    console.log('Hit ' + pathname);
+    const { fontWeight, image } = query;
+    console.log('Hit ' + pathname, query);
     const arr = pathname.slice(1).split('.');
     const type = arr.pop();
     const text = arr.join('.');
-    return { type, text };
+    return { type, text, fontWeight, image };
 }
 
 module.exports = { parseRequest }

template.js

@@ -1,14 +1,24 @@
 
-const logo = 'https://assets.zeit.co/image/upload/front/assets/design/now-black.svg';
+const { readFileSync } = require('fs');
 
-const css = `
+/**
-@import url('https://rsms.me/inter/inter-ui.css');
+ * 
-html { font-family: 'Inter UI', sans-serif; }
+ * @param {'bold' | 'normal'} fontWeight 
-@supports (font-variation-settings: normal) {
+ */
-  html { font-family: 'Inter UI var alt', sans-serif; }
+function getCss(fontWeight) {
-}
+    const regular = `${__dirname}/fonts/Inter-UI-Regular.woff2`;
+    const bold = `${__dirname}/fonts/Inter-UI-Bold.woff2`;
+    const buffer = readFileSync(fontWeight === 'bold' ? bold : regular);
+    const base64 = buffer.toString('base64');
+    return `
+    @font-face {
+        font-family: 'Inter UI';
+        font-style:  normal;
+        font-weight: ${fontWeight};
+        src: url(data:font/woff2;charset=utf-8;base64,${base64}) format('woff2');
+    }
 
-body {
+    body {
         background: white;
         background-image: radial-gradient(lightgray 5%, transparent 0);
         background-size: 100px 100px;
@@ -17,26 +27,36 @@ body {
         text-align: center;
         align-items: center;
         justify-content: center;
-}
+    }
 
-.logo {
+    .logo {
         width: 225px;
         height: 225px;
-}
+    }
 
-.spacer {
+    .spacer {
         margin: 150px;
+    }
+    
+    .heading {
+        font-family: 'Inter UI', sans-serif;
+        font-size: 75px;
+        font-style: normal;
+        font-weight: ${fontWeight};
+    }`;
 }
 
-.heading {
+/**
-    font-size: 75px;
+ * 
-    font-weight: bold;
+ * @param {string} text 
-}`;
+ * @param {'bold' | 'normal'} fontWeight 
-
+ * @param {'now-black' | 'now-white' | 'zeit-black-triangle' | 'zeit-white-triangle'} image 
-function getHtml(text) {
+ */
+function getHtml(text, fontWeight, image) {
+    const logo = `https://assets.zeit.co/image/upload/front/assets/design/${image}.svg`;
     return `<html>
     <style>
-        ${css}
+        ${getCss(fontWeight)}
     </style>
     <body>
         <div>