From ebf93669d8b835da8ed1cd139645030af47ac42a Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Thu, 7 Mar 2024 10:49:55 +0000 Subject: [PATCH] worker now takes provides parameters, and then uses ejs to render the webpage. At the moment that is basic CSS styling, and no provided parameters for the colors and such YET --- README.md | 8 +- image-generator.cjs | 20 +++- index.mjs | 2 +- package-lock.json | 225 ++++++++++++++++++++++++++++++++++++++ package.json | 2 + views/footer.ejs | 3 + views/header.ejs | 3 + views/poster.ejs | 32 ++++++ www/assets/css/index.css | 0 www/assets/css/poster.css | 23 ++++ www/assets/js/script.js | 25 +++++ www/index.html | 14 --- 12 files changed, 339 insertions(+), 18 deletions(-) create mode 100644 views/footer.ejs create mode 100644 views/header.ejs create mode 100644 views/poster.ejs create mode 100644 www/assets/css/index.css create mode 100644 www/assets/css/poster.css create mode 100644 www/assets/js/script.js delete mode 100644 www/index.html diff --git a/README.md b/README.md index 03b2fb5..5065d42 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,13 @@ To start server npm run dev ``` -Make url request to `localhost:4000/submit/{}` +Make url request to `localhost:4000` with. Not providing all the parameters will cause the render to fail. + +```bash +wget --output-document screenshot.png 'http://localhost:4200/submit/mpgParams?title=A Motivational Poster&sentence=something pithy&imageWidth=450px&imageUrl=https://picsum.photos/seed/1709802270038/300/300' +``` + + Testing with diff --git a/image-generator.cjs b/image-generator.cjs index eb27920..a030568 100644 --- a/image-generator.cjs +++ b/image-generator.cjs @@ -3,12 +3,28 @@ const { scrollPageToBottom } = require("puppeteer-autoscroll-down"); const express = require("express"); const { parentPort, workerData } = require("worker_threads"); +const path = require("path"); const folderToServe = "/Users/tarasis/Programming/websites/rmcg.dev/www/FrontendMentor/newbie/social-links-profile/"; const dynamicPage = express(); -dynamicPage.use(express.static(folderToServe)); + +// dynamicPage.engine(".html", require("ejs").__express); +// Without this you would need to +// supply the extension to res.render() +// ex: res.render('users.html'). +// dynamicPage.set("view engine", "html"); + +dynamicPage.use(express.static(path.join(__dirname, "www"))); + +dynamicPage.get("/", function (req, res, next) { + res.statusCode = 200; + res.render("poster.ejs", { + mpgParams: workerData.mpgParams, + }); + next(); +}); const dynamicServer = dynamicPage.listen(0, async () => { const dynamicPort = dynamicServer.address().port; @@ -18,7 +34,7 @@ const dynamicServer = dynamicPage.listen(0, async () => { const page = await browser.newPage(); await page.goto(`http://localhost:${dynamicPort}`); - await page.waitForResponse((response) => response.status() === 200); + // await page.waitForResponse((response) => response.status() === 200); await scrollPageToBottom(page); diff --git a/index.mjs b/index.mjs index b161202..789459a 100644 --- a/index.mjs +++ b/index.mjs @@ -15,7 +15,7 @@ app.get("/submit/:mpgParams", (req, res) => { // console.log("🚀 ~ app.get ~ req:", req); // Get any supplied parameters, this keeps it clean // if I pass more parameters in the future - const mpgParams = req.query.mpgParams; + const mpgParams = req.query; console.log("🚀 ~ app.get ~ mpgParams:", mpgParams); const worker = new Worker("./image-generator.cjs", { diff --git a/package-lock.json b/package-lock.json index b3a696d..538ebf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,9 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "axios": "^1.6.7", "dotenv": "^16.4.5", + "ejs": "^3.1.9", "express": "^4.18.3", "puppeteer": "^22.4.0", "puppeteer-autoscroll-down": "^1.1.2" @@ -197,11 +199,36 @@ "node": ">=4" } }, + "node_modules/async": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", + "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==" + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/b4a": { "version": "1.6.6", "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz", "integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==" }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, "node_modules/bare-events": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.1.tgz", @@ -285,6 +312,15 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, "node_modules/buffer": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", @@ -401,6 +437,22 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -511,6 +563,14 @@ "node": ">= 14" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -549,6 +609,20 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, + "node_modules/ejs": { + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", + "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -776,6 +850,33 @@ "pend": "~1.2.0" } }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -793,6 +894,38 @@ "node": ">= 0.8" } }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -1137,6 +1270,87 @@ "node": ">=8" } }, + "node_modules/jake": { + "version": "10.8.7", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz", + "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==", + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.4", + "minimatch": "^3.1.2" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jake/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/jake/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/jake/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/jake/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/jake/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/jake/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1238,6 +1452,17 @@ "node": ">= 0.6" } }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/mitt": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", diff --git a/package.json b/package.json index 83e7544..1a761ce 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "license": "ISC", "type": "module", "dependencies": { + "axios": "^1.6.7", "dotenv": "^16.4.5", + "ejs": "^3.1.9", "express": "^4.18.3", "puppeteer": "^22.4.0", "puppeteer-autoscroll-down": "^1.1.2" diff --git a/views/footer.ejs b/views/footer.ejs new file mode 100644 index 0000000..28a03d4 --- /dev/null +++ b/views/footer.ejs @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/views/header.ejs b/views/header.ejs new file mode 100644 index 0000000..bf2f137 --- /dev/null +++ b/views/header.ejs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/views/poster.ejs b/views/poster.ejs new file mode 100644 index 0000000..89a6aea --- /dev/null +++ b/views/poster.ejs @@ -0,0 +1,32 @@ + + + + + + + + <%= mpgParams.title %> + + + + + + + + <%- include('header.ejs') -%> + +
+ An image supplied for the motivational poster + +

+ <%= mpgParams.title %> +

+

+ <%= mpgParams.sentence %> +

+
+ <%- include('footer.ejs') -%> + + + \ No newline at end of file diff --git a/www/assets/css/index.css b/www/assets/css/index.css new file mode 100644 index 0000000..e69de29 diff --git a/www/assets/css/poster.css b/www/assets/css/poster.css new file mode 100644 index 0000000..cb328ea --- /dev/null +++ b/www/assets/css/poster.css @@ -0,0 +1,23 @@ +body { + background-color: black; + display: grid; + place-items: center; + color: white; +} + +main { + display: grid; + place-items: center; + gap: 3rem; +} + +img { + display: block; + width: 100%; + margin: 0 auto; +} + +footer { + width: 100%; + text-align: center; +} diff --git a/www/assets/js/script.js b/www/assets/js/script.js new file mode 100644 index 0000000..1932d82 --- /dev/null +++ b/www/assets/js/script.js @@ -0,0 +1,25 @@ +import axios from "axios"; + +const server = axios.create({ + baseURL: "http://localhost:4200", +}); + +document + .getElementById("submit-button") + .addEventListener("click", async function (event) { + event.preventDefault(); + const form = document.getElementById("form"); + const formData = new FormData(form); + const title = formData.get("title"); + const sentence = formData.get("sentence"); + const url = formData.get("url"); + const colors = formData.getAll("colors"); + const data = { title, sentence, url, colors }; + try { + const response = await server.post("/submit/", data); + // const imageUrl = response.data; + // document.getElementById("image").src = imageUrl; + } catch (error) { + console.error(error); + } + }); diff --git a/www/index.html b/www/index.html deleted file mode 100644 index 6fc447a..0000000 --- a/www/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - Movitvational Picture Generator - - - -

Hello World

- - - \ No newline at end of file