Make the guru alive

.env

@@ -0,0 +1 @@
+REACT_APP_LAMBDA_ENDPOINT=xxx

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+template.psd
+.vscode
+*.pyc

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "printWidth": 120
+}

README.md

@@ -0,0 +1,49 @@
+# Screen Guru 🔮
+
+> Take clean screenshot of any websites. — https://screen.guru
+
+- 🎨 Custom background color
+- 🖥 Browser template
+- ⚡️ Emoji ready (with [Emojione font](https://github.com/emojione/emojione-assets))
+
+[![Screeshot](https://user-images.githubusercontent.com/1102595/50058611-f932ba80-017a-11e9-99c6-6532cd9b48d1.png)](https://screen.guru)
+
+## Getting started
+
+**Stack**
+
+- ⚛️ [Create React App](https://facebook.github.io/create-react-app/)
+- ✨ [Amazon Lambda](https://aws.amazon.com/fr/lambda/)
+- 📸 [Puppeteer](https://github.com/GoogleChrome/puppeteer)
+- ☁️ [Serverless](https://serverless.com/)
+- 🏡 [Netlify](https://netlify.com)
+
+**Install dependencies**
+
+```sh
+yarn install
+```
+
+**Build app**
+
+```sh
+yarn build
+# Deploy the static app with Netlify / Surge.sh / Zeit
+```
+
+**Deploy lambda on AWS**
+
+With [serverless](https://serverless.com/):
+
+```sh
+yarn global add serverless
+
+cd lambda/screenshot
+serverless config credentials –provider aws –key XXX –secret XXX
+yarn
+yarn build-lambda-sharp
+
+serverless deploy
+```
+
+Update the env var `REACT_APP_LAMBDA_ENDPOINT` (in `.env`) with your lambda endpoint

lambda/screenshot/.gitignore

@@ -0,0 +1,6 @@
+# package directories
+node_modules
+jspm_packages
+
+# Serverless directories
+.serverless

lambda/screenshot/handler.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const sharp = require('sharp');
+const chromium = require('chrome-aws-lambda');
+const puppeteer = require('puppeteer-core');
+const hexRgb = require('hex-rgb');
+
+module.exports.screenshot = async (event, context, callback) => {
+  let browser = null;
+
+  try {
+    browser = await puppeteer.launch({
+      args: chromium.args,
+      executablePath: await chromium.executablePath,
+      headless: chromium.headless,
+    });
+
+    let page = await browser.newPage();
+
+    let url = 'https://www.premieroctet.com/';
+    let color = 'E9D460';
+
+    if (event.queryStringParameters && event.queryStringParameters.url) {
+      const httpPrefix = 'http://';
+      const httpsPrefix = 'https://';
+      url = event.queryStringParameters.url;
+
+      if (url.substr(0, httpPrefix.length) !== httpPrefix && url.substr(0, httpsPrefix.length) !== httpsPrefix) {
+        url = httpPrefix + url;
+      }
+    }
+
+    if (event.queryStringParameters && event.queryStringParameters.color) {
+      color = event.queryStringParameters.color;
+    }
+
+    await page.goto(url, { waitUntil: 'networkidle0' });
+    await page.setViewport({ width: 1280, height: 800 });
+    const screenshot = await page.screenshot();
+    await browser.close();
+
+    let r = 233;
+    let g = 212;
+    let b = 96;
+
+    try {
+      ({ red: r, green: g, blue: b } = hexRgb(color));
+    } catch (e) {}
+
+    const buffer = await sharp(__dirname + '/browser.png')
+      .overlayWith(screenshot, { top: 138, left: 112 })
+      .flatten({ background: { r, g, b, alpha: 1 } })
+      .toBuffer();
+
+    callback(null, {
+      statusCode: 200,
+      isBase64Encoded: true,
+      body: buffer.toString('base64'),
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Content-Type': 'image/png',
+        'Cache-Control': 'max-age=60',
+      },
+    });
+  } catch (error) {
+    callback(error);
+  }
+};

lambda/screenshot/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "screenshot",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build-lambda-sharp": "env npm_config_arch=x64 npm_config_platform=linux npm_config_target=8.10.0 yarn add sharp"
+  },
+  "dependencies": {
+    "chrome-aws-lambda": "^1.11.1",
+    "hex-rgb": "^3.0.0",
+    "puppeteer-core": "^1.11.0",
+    "sharp": "^0.21.1"
+  },
+  "devDependencies": {
+    "serverless-apigw-binary": "^0.4.4",
+    "serverless-apigwy-binary": "^0.1.0"
+  }
+}

lambda/screenshot/serverless.yml

@@ -0,0 +1,27 @@
+service: screenshot
+provider:
+  name: aws
+  runtime: nodejs8.10
+  region: eu-central-1
+  stage: production
+
+functions:
+  screenshot:
+    handler: handler.screenshot
+    timeout: 10
+    events:
+      - http:
+          path: screenshot
+          method: get
+          contentHandling: CONVERT_TO_BINARY
+    environment:
+      HOME: /var/task
+
+plugins:
+  - serverless-apigwy-binary
+  - serverless-apigw-binary
+
+custom:
+  apigwBinary:
+    types:
+      - "*/*"