Changes Pupeteer screenshot mechanism, updates dependencies, fix docs, add fallback for screenshot, add dev script

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@netlify/functions": "^1.6.0",
-    "@sparticuz/chromium": "^114.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -19,6 +18,7 @@
     "flatted": "^3.2.7",
     "got": "^13.0.0",
     "jest-styled-components": "^7.0.8",
+    "netlify-cli": "^15.9.1",
     "node-fetch": "2.6.1",
     "perf_hooks": "^0.0.1",
     "psl": "^1.9.0",
@@ -30,16 +30,15 @@
     "react-scripts": "5.0.1",
     "react-simple-maps": "^2.3.0",
     "react-toastify": "^9.1.3",
-    "react-tsparticles": "^2.0.6",
     "styled-components": "^5.3.5",
     "traceroute": "^1.0.0",
-    "tsparticles": "^2.0.6",
     "typescript": "^4.7.3",
     "wappalyzer": "^6.10.63",
     "web-vitals": "^2.1.4",
     "xml2js": "^0.6.0"
   },
   "scripts": {
+    "dev": "netlify dev",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

server/lambda/screenshot.js

@@ -1,5 +1,5 @@
 const puppeteer = require('puppeteer-core');
-const chromium = require('@sparticuz/chromium');
+const chromium = require('chrome-aws-lambda');
 
 exports.handler = async (event, context, callback) => {
   let browser = null;
@@ -28,26 +28,22 @@ exports.handler = async (event, context, callback) => {
   }
 
   try {
-    browser = await puppeteer.launch({
+      browser = await puppeteer.launch({
       args: chromium.args,
       defaultViewport: { width: 800, height: 600 },
-      // executablePath: '/usr/bin/chromium',
+      executablePath: process.env.CHROME_EXECUTABLE_PATH || await chromium.executablePath,
-      executablePath: await chromium.executablePath(),
       headless: chromium.headless,
       ignoreHTTPSErrors: true,
     });
 
     let page = await browser.newPage();
 
-    // Emulate dark theme
     await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);
 
-    // Set navigation timeout
+    page.setDefaultNavigationTimeout(8000);
-    page.setDefaultNavigationTimeout(5000);
 
     await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
 
-    // Ensure the page has some minimal interactivity before taking the screenshot.
     await page.evaluate(() => {
       const selector = 'body';
       return new Promise((resolve, reject) => {
@@ -70,6 +66,7 @@ exports.handler = async (event, context, callback) => {
 
     callback(null, response);
   } catch (error) {
+    console.log(error);
     callback(null, {
       statusCode: 500,
       body: JSON.stringify({ error: `An error occurred: ${error.message}` }),

src/pages/About.tsx

@@ -31,6 +31,7 @@ const HeaderLinkContainer = styled.nav`
 const Section = styled(StyledCard)`
   margin-bottom: 2rem;
   overflow: clip;
+  max-height: 100%;
   h3 {
     font-size: 1.5rem;
   }
@@ -76,6 +77,7 @@ const Section = styled(StyledCard)`
     max-width: 300px;
     max-height: 28rem;
     border-radius: 6px;
+    clear: both;
   }
 `;
 

src/pages/Results.tsx

@@ -431,7 +431,7 @@ const Results = (): JSX.Element => {
     { id: 'dnssec', title: 'DNSSEC', result: dnsSecResults, Component: DnsSecCard, refresh: updateDnsSecResults },
     { id: 'status', title: 'Server Status', result: serverStatusResults, Component: ServerStatusCard, refresh: updateServerStatusResults },
     { id: 'ports', title: 'Open Ports', result: portsResults, Component: OpenPortsCard, refresh: updatePortsResults },
-    { id: 'screenshot', title: 'Screenshot', result: screenshotResult, Component: ScreenshotCard, refresh: updateScreenshotResult },
+    { id: 'screenshot', title: 'Screenshot', result: screenshotResult || lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard, refresh: updateScreenshotResult },
     // { id: 'screenshot', title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard, refresh: updateLighthouseResults },
     { id: 'txt-records', title: 'TXT Records', result: txtRecordResults, Component: TxtRecordCard, refresh: updateTxtRecordResults },
     { id: 'hsts', title: 'HSTS Check', result: hstsResults, Component: HstsCard, refresh: updateHstsResults },

src/utils/docs.ts

@@ -276,8 +276,8 @@ const docs: Doc[] = [
   {
     id: "features",
     title: "Features",
-    description: '',
+    description: 'Checks which core features are present on a site. If a feature as marked as dead, that means it\'s not being actively used at load time',
-    use: "",
+    use: "This is useful to understand what a site is capable of, and what technologies to look for",
     resources: [],
     screenshot: 'https://i.ibb.co/gP4P6kp/wc-features.png',
   },