├── .gitignore
├── .nowignore
├── LICENSE
├── README.md
├── now.json
├── package.json
├── src
├── card.ts
├── chromium.ts
├── file.ts
├── parser.ts
├── template.ts
└── types.d.ts
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.nowignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | LICENSE
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 ZEIT, Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OG Image
2 |
3 | To run locally:
4 |
5 | - `now dev`
6 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generate-og-image",
3 | "version": 2,
4 | "public": false,
5 | "builds": [
6 | {
7 | "src": "src/card.ts",
8 | "use": "@now/node",
9 | "config": { "maxLambdaSize": "36mb" }
10 | }
11 | ],
12 | "routes": [{ "src": "/og.jpg", "dest": "/src/card.ts" }]
13 | }
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generating-og-image",
3 | "version": "1.0.0",
4 | "description": "Generate an OG Image",
5 | "main": "dist/card.js",
6 | "scripts": {
7 | "build": "tsc",
8 | "now-build": "tsc",
9 | "watch": "tsc --watch"
10 | },
11 | "license": "MIT",
12 | "dependencies": {
13 | "chrome-aws-lambda": "2.0.2",
14 | "puppeteer-core": "2.0.0"
15 | },
16 | "devDependencies": {
17 | "@types/node": "^13.5.1",
18 | "typescript": "3.7.5"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/card.ts:
--------------------------------------------------------------------------------
1 | import { IncomingMessage, ServerResponse } from "http";
2 | import { parseReqs } from "./parser";
3 | import { getHtml } from "./template";
4 | import { writeTempFile } from "./file";
5 | import { getScreenshot } from "./chromium";
6 |
7 | const isDev = process.env.NOW_REGION === "dev1";
8 |
9 | export default async function handler(
10 | req: IncomingMessage,
11 | res: ServerResponse
12 | ) {
13 | try {
14 | const parsedReqs = parseReqs(req);
15 | const html = getHtml(parsedReqs);
16 |
17 | const { title, author } = parsedReqs;
18 | const fileName = [title, author].join("-");
19 | const filePath = await writeTempFile(fileName, html);
20 | const fileUrl = `file://${filePath}`;
21 |
22 | const file = await getScreenshot(fileUrl, isDev);
23 |
24 | res.statusCode = 200;
25 | res.setHeader("Content-Type", "image/jpeg");
26 | res.setHeader(
27 | "Cache-Control",
28 | "public,immutable,no-transform,s-max-age=21600,max-age=21600"
29 | );
30 | res.end(file);
31 | } catch (e) {
32 | res.statusCode = 500;
33 | res.setHeader("Content-Type", "text/html");
34 | res.end("Internal Error
Sorry, an error occurred.
");
35 | console.error(e);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/chromium.ts:
--------------------------------------------------------------------------------
1 | import chrome from "chrome-aws-lambda";
2 | import { launch } from "puppeteer-core";
3 |
4 | const exePath = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
5 |
6 | interface Options {
7 | args: string[];
8 | executablePath: string;
9 | headless: boolean;
10 | }
11 |
12 | async function getOptions(isDev: boolean) {
13 | let options: Options;
14 | if (isDev) {
15 | options = {
16 | args: [],
17 | executablePath: exePath,
18 | headless: true
19 | };
20 | } else {
21 | options = {
22 | args: chrome.args,
23 | executablePath: await chrome.executablePath,
24 | headless: chrome.headless
25 | };
26 | }
27 | return options;
28 | }
29 |
30 | export async function getScreenshot(url: string, isDev: boolean) {
31 | const options = await getOptions(isDev);
32 | const browser = await launch(options);
33 | const page = await browser.newPage();
34 | await page.setViewport({ width: 1200, height: 630 });
35 | await page.goto(url);
36 | return page.screenshot({ type: "jpeg", quality: 100 });
37 | }
38 |
--------------------------------------------------------------------------------
/src/file.ts:
--------------------------------------------------------------------------------
1 | import { createHash } from "crypto";
2 | import { join } from "path";
3 | import { tmpdir } from "os";
4 | import { writeFile } from "fs";
5 | import { promisify } from "util";
6 |
7 | const promiseWriteFile = promisify(writeFile);
8 |
9 | export async function writeTempFile(fileName: string, html: string) {
10 | const hashedFileName =
11 | createHash("md5")
12 | .update(fileName)
13 | .digest("hex") + ".html";
14 |
15 | const filePath = join(tmpdir(), hashedFileName);
16 |
17 | await promiseWriteFile(filePath, html);
18 |
19 | return filePath;
20 | }
21 |
--------------------------------------------------------------------------------
/src/parser.ts:
--------------------------------------------------------------------------------
1 | import { IncomingMessage } from "http";
2 | import { parse } from "url";
3 |
4 | export function parseReqs(req: IncomingMessage) {
5 | const { query = {} } = parse(req.url || "", true);
6 | const { author, title, website, image } = query;
7 |
8 | if (Array.isArray(author)) {
9 | throw new Error("Author must be string");
10 | }
11 | if (Array.isArray(title)) {
12 | throw new Error("Title must be string");
13 | }
14 | if (Array.isArray(website)) {
15 | throw new Error("Website must be string");
16 | }
17 | if (Array.isArray(image)) {
18 | throw new Error("Image must be string");
19 | }
20 |
21 | const parsedReqs: ParsedReqs = {
22 | author,
23 | title,
24 | website,
25 | image
26 | };
27 |
28 | console.log(JSON.stringify(parsedReqs));
29 |
30 | return parsedReqs;
31 | }
32 |
--------------------------------------------------------------------------------
/src/template.ts:
--------------------------------------------------------------------------------
1 | function getCss() {
2 | return `
3 | /* http://meyerweb.com/eric/tools/css/reset/
4 | v2.0 | 20110126
5 | License: none (public domain)
6 | */
7 | html, body, div, span, applet, object, iframe,
8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9 | a, abbr, acronym, address, big, cite, code,
10 | del, dfn, em, img, ins, kbd, q, s, samp,
11 | small, strike, strong, sub, sup, tt, var,
12 | b, u, i, center,
13 | dl, dt, dd, ol, ul, li,
14 | fieldset, form, label, legend,
15 | table, caption, tbody, tfoot, thead, tr, th, td,
16 | article, aside, canvas, details, embed,
17 | figure, figcaption, footer, header, hgroup,
18 | menu, nav, output, ruby, section, summary,
19 | time, mark, audio, video {
20 | margin: 0;
21 | padding: 0;
22 | border: 0;
23 | font-size: 100%;
24 | font: inherit;
25 | vertical-align: baseline;
26 | }
27 | /* HTML5 display-role reset for older browsers */
28 | article, aside, details, figcaption, figure,
29 | footer, header, hgroup, menu, nav, section {
30 | display: block;
31 | }
32 | body {
33 | line-height: 1;
34 | }
35 | ol, ul {
36 | list-style: none;
37 | }
38 | blockquote, q {
39 | quotes: none;
40 | }
41 | blockquote:before, blockquote:after,
42 | q:before, q:after {
43 | content: '';
44 | content: none;
45 | }
46 | table {
47 | border-collapse: collapse;
48 | border-spacing: 0;
49 | }
50 | * {
51 | box-sizing: border-box;
52 | }
53 | body {
54 | background: #95adbe;
55 | height: 100vh;
56 | font-family: 'Barlow Condensed', sans-serif;
57 | font-size: 18px;
58 | padding: 20px;
59 | }
60 | .container {
61 | position: relative;
62 | height: calc(100vh - 40px);
63 | padding: 20px;
64 | background: #f8f8f8;
65 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
66 | }
67 | .title {
68 | font-size: 8em;
69 | line-height: 1.05em;
70 | height: 3.15em;
71 | overflow: hidden;
72 | color: #313131;
73 | }
74 | .author {
75 | position: absolute;
76 | bottom: 0px;
77 | left: 0px;
78 | padding: 20px;
79 | font-size: 3em;
80 | color: #525252;
81 | }
82 | .author-image {
83 | width: 1.5em;
84 | border-radius: 50%;
85 | margin-bottom: -9px;
86 | }
87 | .website {
88 | position: absolute;
89 | bottom: 0px;
90 | right: 0px;
91 | padding: 20px;
92 | font-size: 2em;
93 | color: #525252;
94 | }
95 | `;
96 | }
97 |
98 | export function getHtml(parsedReqs: ParsedReqs) {
99 | const { author, title, website, image } = parsedReqs;
100 |
101 | return `
102 |
103 |
104 |
105 | Generated Image
106 |
107 |
108 |
111 |
112 |
113 |
${title}
114 |
115 |
116 | ${author}
117 |
118 |
${website}
119 |