diff --git a/src/hooks/use-collect.js b/src/hooks/use-collect.js index 6dd0527..e3a0d21 100644 --- a/src/hooks/use-collect.js +++ b/src/hooks/use-collect.js @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; -import { collectImageStats, addSite, getCache } from '@/lib/sites'; +import { collectImageStats, addSite, getCache, getSiteScreenshot } from '@/lib/sites'; import { scrapeImagesFromWebsite } from '@/lib/scraping'; import { log } from '@/lib/log'; @@ -70,10 +70,21 @@ export default function useCollect({ siteUrl }) { setSiteImages(images); - const { images: imagesResults, screenshot } = await collectImageStats({ - images: images.map(({ original }) => original), - siteUrl - }); + const [{ images: imagesResults }, { data }] = await Promise.all([ + collectImageStats({ + images: images.map(({ original }) => original), + siteUrl + }), + getSiteScreenshot({ + siteUrl + }) + ]) + + const screenshot = { + url: data.secure_url, + width: data.width, + height: data.height + }; log(`[Collect] Collected image data and emissions results.`) diff --git a/src/lib/sites.js b/src/lib/sites.js index 302f1ab..e810b06 100644 --- a/src/lib/sites.js +++ b/src/lib/sites.js @@ -17,6 +17,24 @@ export async function collectImageStats({ images, siteUrl }) { } } +/** + * getSiteScreenshot + */ + +export async function getSiteScreenshot({ siteUrl }) { + try { + const results = await fetch('/api/screenshot', { + method: 'POST', + body: JSON.stringify({ + siteUrl + }) + }).then(r => r.json()); + return results; + } catch(e) { + throw new Error(`Failed to get screenshot: ${e.message}`); + } +} + /** * addSite */ diff --git a/src/pages/api/collect.js b/src/pages/api/collect.js index 7e110f7..05a69bf 100644 --- a/src/pages/api/collect.js +++ b/src/pages/api/collect.js @@ -61,9 +61,9 @@ export default async function handler(req, res) { let uploads = await Promise.all(imagesQueue); - + console.log(`[Collect] Uploads complete.`); - + // Filter out failed image upload requests uploads = uploads.filter(upload => !!upload?.upload); @@ -113,34 +113,10 @@ export default async function handler(req, res) { } })); - // Collect the screenshot, download, and upload it to make available to the client - - const screenshotUrl = getCldImageUrl({ - src: siteUrl, - deliveryType: 'url2png', - width: 800, - height: 600, - crop: 'fill', - gravity: 'north' - }); - - const screenshot = await cloudinary.uploader.upload(screenshotUrl, { - folder: 'imagecarbon', - tags: ['imagecarbon', `imagecarbon:site:${cleanSiteUrl}`, 'imagecarbon:screenshot'], - context: { - siteUrl - } - }); - res.status(200).json({ siteUrl, date: new Date(Date.now()).toISOString(), images: results, - screenshot: { - url: screenshot.secure_url, - width: screenshot.width, - height: screenshot.height, - } }); } catch(e) { console.log(`[${cleanSiteUrl}] Failed to collect image assets: ${e.message}`); diff --git a/src/pages/api/screenshot.js b/src/pages/api/screenshot.js index e2e6a02..6648428 100644 --- a/src/pages/api/screenshot.js +++ b/src/pages/api/screenshot.js @@ -1,11 +1,17 @@ -const chromium = require('@sparticuz/chromium-min'); -const puppeteer = require('puppeteer-core'); +import chromium from '@sparticuz/chromium-min'; +import puppeteer from 'puppeteer-core'; + +import { restoreUrl } from '@/lib/util'; +import { getCloudinary } from '@/lib/cloudinary-server'; + +const cloudinary = getCloudinary(); export default async function handler(req, res) { + const body = JSON.parse(req.body); + const siteUrl = restoreUrl(body.siteUrl); + try { - await chromium.font( - "https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf" - ); + await chromium.font('https://raw.githack.com/googlei18n/noto-emoji/master/fonts/NotoColorEmoji.ttf'); const isLocal = !!process.env.CHROME_EXECUTABLE_PATH; @@ -18,17 +24,33 @@ export default async function handler(req, res) { }); const page = await browser.newPage(); -console.log('new page') - await page.goto('https://spacejelly.dev/'); -console.log('asdf') - const title = await page.title(); - console.log('title', title) - + await page.goto(siteUrl); + + const screenshot = await page.screenshot(); + + const resource = await new Promise((resolve, reject) => { + cloudinary.uploader.upload_stream({ + folder: 'imagecarbon', + tags: ['imagecarbon', `imagecarbon:site:${siteUrl}`, 'imagecarbon:screenshot'], + context: { + siteUrl + } + }, function (error, result) { + if (error) { + reject(error); + return; + } + resolve(result); + }) + .end(screenshot); + }); + await browser.close(); res.status(200).json({ - title + siteUrl, + data: resource }); } catch(e) { console.log(`Failed to get screenshot: ${e.message}`);