blockworks-foundation
/
og-image
mirror of https://github.com/blockworks-foundation/og-image.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #6 from styfle/font 

Fix missing font
This commit is contained in:
Steven 2019-01-21 11:22:40 -05:00 committed by GitHub
parent 0e75d1953f ed2fd9cff9
commit 08c21db340
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 77 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

20
card.js
View File

@ -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;

5
dev.js
View File

@ -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);

BIN
fonts/Inter-UI-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
fonts/Inter-UI-Regular.woff2 Normal file
View File

Binary file not shown.

2
package.json
View File

@ -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",

7
parser.js
View File

@ -1,12 +1,13 @@
const { parse } = require('url');
function parseRequest(req) {
const { pathname = '/' } = parse(req.url);
console.log('Hit ' + pathname);
const { pathname = '/', query = {} } = parse(req.url, true);
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 }

38
template.js
View File

@ -1,11 +1,21 @@
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; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter UI var alt', sans-serif; }
/**
*
* @param {'bold' | 'normal'} fontWeight
*/
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 {
@ -29,14 +39,24 @@ body {
}
.heading {
font-family: 'Inter UI', sans-serif;
font-size: 75px;
font-weight: bold;
font-style: normal;
font-weight: ${fontWeight};
}`;
}
function getHtml(text) {
/**
*
* @param {string} text
* @param {'bold' | 'normal'} fontWeight
* @param {'now-black' | 'now-white' | 'zeit-black-triangle' | 'zeit-white-triangle'} image
*/
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>