mirror of https://github.com/sgoudham/carbon.git
Use path params for /api/image/[id].js (#1262)
* move image api routes to pages/ * upgrade puppeteer * try and minimize * attempt to use URLSearchParams * use path params in api routes instead * api/image/[id].js * try it w/o builds config * use index.jsmain
Mike Fix
3 years ago
committed by
GitHub
parent
c3a7ad5d0f
commit
dd59fc344a
@ -0,0 +1,117 @@
|
||||
/* global domtoimage */
|
||||
const qs = require('querystring')
|
||||
const { json, send } = require('micro')
|
||||
const chrome = require('chrome-aws-lambda')
|
||||
const puppeteer = require('puppeteer-core')
|
||||
|
||||
// TODO expose local version of dom-to-image
|
||||
const DOM_TO_IMAGE_URL = 'https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js'
|
||||
const NOTO_COLOR_EMOJI_URL =
|
||||
'https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf'
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
// TODO proper auth
|
||||
if (req.method === 'GET') {
|
||||
if (
|
||||
req.referer ||
|
||||
(req.headers['user-agent'].indexOf('Twitterbot') < 0 &&
|
||||
// Slack does not honor robots.txt: https://api.slack.com/robots
|
||||
req.headers['user-agent'].indexOf('Slackbot') < 0 &&
|
||||
req.headers['user-agent'].indexOf('Slack-ImgProxy') < 0)
|
||||
) {
|
||||
return send(res, 401, 'Unauthorized')
|
||||
}
|
||||
} else {
|
||||
if (!req.headers.origin && !req.headers.authorization) {
|
||||
return send(res, 401, 'Unauthorized')
|
||||
}
|
||||
}
|
||||
|
||||
const host = (req.headers && req.headers.host) || 'carbon.now.sh'
|
||||
|
||||
try {
|
||||
await chrome.font(`https://${host}/static/fonts/NotoSansSC-Regular.otf`)
|
||||
await chrome.font(NOTO_COLOR_EMOJI_URL)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
const browser = await puppeteer.launch({
|
||||
args: chrome.args,
|
||||
executablePath: await chrome.executablePath,
|
||||
headless: chrome.headless,
|
||||
})
|
||||
|
||||
try {
|
||||
const { state, id, ...params } =
|
||||
req.method === 'GET' ? req.query : await json(req, { limit: '6mb' })
|
||||
|
||||
const page = await browser.newPage()
|
||||
|
||||
const queryString = state ? `state=${state}` : qs.stringify(params)
|
||||
|
||||
await page.goto(`https://${host}/${id ? id : `?${queryString}`}`)
|
||||
await page.addScriptTag({ url: DOM_TO_IMAGE_URL })
|
||||
|
||||
await page.waitForSelector('.export-container', { visible: true, timeout: 9500 })
|
||||
|
||||
const targetElement = await page.$('.export-container')
|
||||
|
||||
const dataUrl = await page.evaluate((target = document) => {
|
||||
const query = new URLSearchParams(document.location.search)
|
||||
|
||||
const EXPORT_SIZES_HASH = {
|
||||
'1x': '1',
|
||||
'2x': '2',
|
||||
'4x': '4',
|
||||
}
|
||||
|
||||
const exportSize = EXPORT_SIZES_HASH[query.get('es')] || '2'
|
||||
|
||||
target.querySelectorAll('span[role="presentation"]').forEach(node => {
|
||||
if (node.innerText && node.innerText.match(/%[A-Fa-f0-9]{2}/)) {
|
||||
node.innerText.match(/%[A-Fa-f0-9]{2}/g).forEach(t => {
|
||||
node.innerHTML = node.innerHTML.replace(t, encodeURIComponent(t))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const width = target.offsetWidth * exportSize
|
||||
const height =
|
||||
query.get('si') === 'true' || query.get('si') === true
|
||||
? target.offsetWidth * exportSize
|
||||
: target.offsetHeight * exportSize
|
||||
|
||||
const config = {
|
||||
style: {
|
||||
transform: `scale(${exportSize})`,
|
||||
'transform-origin': 'center',
|
||||
background: query.get('si') ? query.get('bg') : 'none',
|
||||
},
|
||||
filter: n => {
|
||||
if (n.className) {
|
||||
return String(n.className).indexOf('eliminateOnRender') < 0
|
||||
}
|
||||
return true
|
||||
},
|
||||
width,
|
||||
height,
|
||||
}
|
||||
|
||||
return domtoimage.toPng(target, config)
|
||||
}, targetElement)
|
||||
|
||||
if (req.method === 'GET') {
|
||||
res.setHeader('Content-Type', 'image/png')
|
||||
const data = new Buffer(dataUrl.split(',')[1], 'base64')
|
||||
return send(res, 200, data)
|
||||
}
|
||||
return send(res, 200, dataUrl)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line
|
||||
console.error(e)
|
||||
return send(res, 500)
|
||||
} finally {
|
||||
await browser.close()
|
||||
}
|
||||
}
|
||||
@ -1,117 +1 @@
|
||||
/* global domtoimage */
|
||||
const qs = require('querystring')
|
||||
const { json, send } = require('micro')
|
||||
const chrome = require('chrome-aws-lambda')
|
||||
const puppeteer = require('puppeteer-core')
|
||||
|
||||
// TODO expose local version of dom-to-image
|
||||
const DOM_TO_IMAGE_URL = 'https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js'
|
||||
const NOTO_COLOR_EMOJI_URL =
|
||||
'https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf'
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
// TODO proper auth
|
||||
if (req.method === 'GET') {
|
||||
if (
|
||||
req.referer ||
|
||||
(req.headers['user-agent'].indexOf('Twitterbot') < 0 &&
|
||||
// Slack does not honor robots.txt: https://api.slack.com/robots
|
||||
req.headers['user-agent'].indexOf('Slackbot') < 0 &&
|
||||
req.headers['user-agent'].indexOf('Slack-ImgProxy') < 0)
|
||||
) {
|
||||
return send(res, 401, 'Unauthorized')
|
||||
}
|
||||
} else {
|
||||
if (!req.headers.origin && !req.headers.authorization) {
|
||||
return send(res, 401, 'Unauthorized')
|
||||
}
|
||||
}
|
||||
|
||||
const host = (req.headers && req.headers.host) || 'carbon.now.sh'
|
||||
|
||||
try {
|
||||
await chrome.font(`https://${host}/static/fonts/NotoSansSC-Regular.otf`)
|
||||
await chrome.font(NOTO_COLOR_EMOJI_URL)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
const browser = await puppeteer.launch({
|
||||
args: chrome.args,
|
||||
executablePath: await chrome.executablePath,
|
||||
headless: chrome.headless,
|
||||
})
|
||||
|
||||
try {
|
||||
const { state, id, ...params } =
|
||||
req.method === 'GET' ? req.query : await json(req, { limit: '6mb' })
|
||||
|
||||
const page = await browser.newPage()
|
||||
|
||||
const queryString = state ? `state=${state}` : qs.stringify(params)
|
||||
|
||||
await page.goto(`https://${host}/${id ? id : `?${queryString}`}`)
|
||||
await page.addScriptTag({ url: DOM_TO_IMAGE_URL })
|
||||
|
||||
await page.waitForSelector('.export-container', { visible: true, timeout: 9500 })
|
||||
|
||||
const targetElement = await page.$('.export-container')
|
||||
|
||||
const dataUrl = await page.evaluate((target = document) => {
|
||||
const query = new URLSearchParams(document.location.search)
|
||||
|
||||
const EXPORT_SIZES_HASH = {
|
||||
'1x': '1',
|
||||
'2x': '2',
|
||||
'4x': '4',
|
||||
}
|
||||
|
||||
const exportSize = EXPORT_SIZES_HASH[query.get('es')] || '2'
|
||||
|
||||
target.querySelectorAll('span[role="presentation"]').forEach(node => {
|
||||
if (node.innerText && node.innerText.match(/%[A-Fa-f0-9]{2}/)) {
|
||||
node.innerText.match(/%[A-Fa-f0-9]{2}/g).forEach(t => {
|
||||
node.innerHTML = node.innerHTML.replace(t, encodeURIComponent(t))
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const width = target.offsetWidth * exportSize
|
||||
const height =
|
||||
query.get('si') === 'true' || query.get('si') === true
|
||||
? target.offsetWidth * exportSize
|
||||
: target.offsetHeight * exportSize
|
||||
|
||||
const config = {
|
||||
style: {
|
||||
transform: `scale(${exportSize})`,
|
||||
'transform-origin': 'center',
|
||||
background: query.get('si') ? query.get('bg') : 'none',
|
||||
},
|
||||
filter: n => {
|
||||
if (n.className) {
|
||||
return String(n.className).indexOf('eliminateOnRender') < 0
|
||||
}
|
||||
return true
|
||||
},
|
||||
width,
|
||||
height,
|
||||
}
|
||||
|
||||
return domtoimage.toPng(target, config)
|
||||
}, targetElement)
|
||||
|
||||
if (req.method === 'GET') {
|
||||
res.setHeader('Content-Type', 'image/png')
|
||||
const data = new Buffer(dataUrl.split(',')[1], 'base64')
|
||||
return send(res, 200, data)
|
||||
}
|
||||
return send(res, 200, dataUrl)
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line
|
||||
console.error(e)
|
||||
return send(res, 500)
|
||||
} finally {
|
||||
await browser.close()
|
||||
}
|
||||
}
|
||||
module.exports = require('./[id]')
|
||||
|
||||
Loading…
Reference in New Issue