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') -%>
+
+
+ 
+
+
+ <%= 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