save assets to filesystem

.gitignore

@@ -32,3 +32,7 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+#generated assets
+/download_2
+/download_3

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "atlascode.bitbucket.enabled": true
+}

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:14.18.2
+
+#RUN adduser -D -u 1001 app 
+WORKDIR /usr/src/app
+
+COPY . .
+
+#RUN chown -R app /usr/src/app
+#USER 1001
+
+RUN npm install --quiet
+RUN npm run build
+
+EXPOSE 3000
+CMD npm run dev

README.md

@@ -32,3 +32,18 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+
+## Create Randomised images
+
+These images will output to downloads folder
+
+
+```
+curl http://localhost:3000/api/days/[1-365] -o /downloads/days/#1-days.png
+
+curl http://localhost:3000/api/weeks/[1-365] -o /downloads/weeks/#1-weeks.png
+
+curl http://localhost:3000/api/sleeps/[1-365] -o /downloads/sleeps/#1-sleeps.png
+
+```

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next build && next start",
     "lint": "next lint"
   },
   "dependencies": {

pages/api/days/[days].js

@@ -70,7 +70,20 @@ const ApiResponse = async (req, res) => {
   ctx.textAlign = "left";
   ctx.font = "50px AmaticSC";
   //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
-  ctx.fillText("WWW.GETAHEADCHRISTMAS.CO.UK", 40, 740);
+  var copyrightSymbol = 169; // 0xA9
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
+
+  $yearCount;
 
   console.log(ctx);
 

pages/api/multidays/[days].js

@@ -0,0 +1,101 @@
+import Canvas, { registerFont } from "canvas";
+import fs from "fs";
+
+const ApiResponse = async (req, res) => {
+  //const { color } = req.query;
+  const imageRef = req.query;
+  const canvas = Canvas.createCanvas(940, 788);
+  const ctx = canvas.getContext("2d");
+
+  const rndInt = Math.floor(Math.random() * 367) + 1;
+
+  console.log(rndInt);
+
+  const background = await Canvas.loadImage(
+    "public/images/backgrounds/background-" + rndInt + ".jpg"
+  );
+
+  registerFont("public/fonts/Dancing_Script/static/DancingScript-Bold.ttf", {
+    family: "Dancing",
+  });
+
+  registerFont("public/fonts/Amatic_SC/AmaticSC-Bold.ttf", {
+    family: "AmaticSC",
+  });
+
+  ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
+
+  let x = canvas.width / 2 + 80;
+  let y = canvas.height - canvas.height / 2.5;
+  let imageStr = imageRef.days;
+
+  //console.log(imageStr, x, y);
+  ctx.lineWidth = 25;
+
+  ctx.strokeStyle = "#cc3333";
+  ctx.fillStyle = "white";
+
+  // ctx.lineJoin = "round";
+  ctx.font = "245px Dancing";
+
+  imageStr.length == 3
+    ? ctx.strokeText(imageStr, 120, 375)
+    : imageStr.length == 2
+    ? ctx.strokeText(imageStr, 220, 375)
+    : ctx.strokeText(imageStr, 320, 375);
+
+  imageStr.length == 3
+    ? ctx.fillText(imageStr, 120, 375)
+    : imageStr.length == 2
+    ? ctx.fillText(imageStr, 220, 375)
+    : ctx.fillText(imageStr, 320, 375);
+
+  ctx.lineWidth = 10;
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "#cc3333";
+  //ctx.textAlign = "left";
+  ctx.font = "147px Dancing Script";
+  ctx.strokeText("days", x, 375);
+  ctx.fillText("days", x, 375);
+
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "#cc3333";
+  //ctx.textAlign = "left";
+  ctx.font = "140px Dancing Script";
+  ctx.strokeText("until Christmas", 100, 560);
+  ctx.fillText("until Christmas", 100, 560);
+
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "white";
+  ctx.textAlign = "left";
+  ctx.font = "50px AmaticSC";
+  //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
+  var copyrightSymbol = 169; // 0xA9
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
+
+  $yearCount;
+
+  console.log(ctx);
+
+  const png = canvas.toBuffer("image/png");
+
+  fs.writeFileSync("download_2/" + imageRef.days + "-days.png", png);
+
+  // res.setHeader(
+  //   "content-disposition",
+  //   "attachment; filename=" + imageRef.days + "-days.png"
+  // );
+  return res.status(200).json({ done: imageRef.days });
+};
+
+export default ApiResponse;

pages/api/multiweeks/[weeks].js

@@ -0,0 +1,90 @@
+import Canvas, { registerFont } from "canvas";
+import fs from "fs";
+
+const ApiResponse = async (req, res) => {
+  //const { color } = req.query;
+  const imageRef = req.query;
+  const canvas = Canvas.createCanvas(940, 788);
+  const ctx = canvas.getContext("2d");
+
+  const rndInt = Math.floor(Math.random() * 367) + 1;
+
+  console.log(rndInt);
+
+  const background = await Canvas.loadImage(
+    "public/images/backgrounds/background-" + rndInt + ".jpg"
+  );
+
+  registerFont("public/fonts/Dancing_Script/static/DancingScript-Bold.ttf", {
+    family: "Dancing",
+  });
+
+  registerFont("public/fonts/Amatic_SC/AmaticSC-Bold.ttf", {
+    family: "AmaticSC",
+  });
+
+  ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
+
+  let x = canvas.width / 2 + 80;
+  let y = canvas.height - canvas.height / 2.5;
+  let imageStr = imageRef.weeks;
+
+  console.log(imageStr, x, y);
+  ctx.lineWidth = 25;
+
+  ctx.strokeStyle = "#cc3333";
+  ctx.fillStyle = "white";
+
+  // ctx.lineJoin = "round";
+  ctx.font = "245px Dancing";
+
+  ctx.strokeText(imageStr, 40, 375);
+
+  ctx.fillText(imageStr, 40, 375);
+
+  ctx.lineWidth = 10;
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "#cc3333";
+  //ctx.textAlign = "left";
+  ctx.font = "80px Dancing Script";
+  ctx.strokeText("weeks until", 40, 500);
+  ctx.fillText("weeks until", 40, 500);
+
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "#cc3333";
+  //ctx.textAlign = "left";
+  ctx.font = "80px Dancing Script";
+  ctx.strokeText("Christmas !!!", 40, 610);
+  ctx.fillText("Christmas !!!", 40, 610);
+
+  ctx.strokeStyle = "white";
+  ctx.fillStyle = "white";
+  ctx.textAlign = "left";
+  ctx.font = "50px AmaticSC";
+  //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
+  var copyrightSymbol = 169; // 0xA9
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
+  console.log(ctx);
+
+  const png = canvas.toBuffer("image/png");
+
+  fs.writeFileSync("download_3/" + imageRef.weeks + "-weeks.png", png);
+
+  // res.setHeader(
+  //   "content-disposition",
+  //   "attachment; filename=" + imageRef.days + "-days.png"
+  // );
+  return res.status(200).json({ done: imageRef.weeks });
+};
+
+export default ApiResponse;

pages/api/sleeps/[sleeps].js

@@ -70,8 +70,18 @@ const ApiResponse = async (req, res) => {
   ctx.textAlign = "left";
   ctx.font = "50px AmaticSC";
   //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
-  ctx.fillText("WWW.GETAHEADCHRISTMAS.CO.UK", 40, 740);
+  var copyrightSymbol = 169; // 0xA9
-
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
   console.log(ctx);
 
   const png = canvas.toBuffer("image/png");

pages/api/weeks/[weeks].js

@@ -62,8 +62,18 @@ const ApiResponse = async (req, res) => {
   ctx.textAlign = "left";
   ctx.font = "50px AmaticSC";
   //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
-  ctx.fillText("WWW.GETAHEADCHRISTMAS.CO.UK", 40, 740);
+  var copyrightSymbol = 169; // 0xA9
-
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
   console.log(ctx);
 
   const png = canvas.toBuffer("image/png");

pages/api/weekstoday/[weekstoday].js

@@ -27,7 +27,7 @@ const ApiResponse = async (req, res) => {
 
   let x = canvas.width / 2 + 80;
   let y = canvas.height - canvas.height / 2.5;
-  let imageStr = imageRef.weeks;
+  let imageStr = imageRef.weekstoday;
 
   console.log(imageStr, x, y);
   ctx.lineWidth = 25;
@@ -62,7 +62,18 @@ const ApiResponse = async (req, res) => {
   ctx.textAlign = "left";
   ctx.font = "50px AmaticSC";
   //ctx.strokeText("WWW.GETAHEADCHRISTMAS.CO.UK", x, y);
-  ctx.fillText("WWW.GETAHEADCHRISTMAS.CO.UK", 40, 740);
+  var copyrightSymbol = 169; // 0xA9
+  var $now = new Date();
+  var $yearCount = $now.getFullYear();
+  ctx.fillText(
+    String.fromCharCode(copyrightSymbol) +
+      " " +
+      "WWW.GETAHEADCHRISTMAS.CO.UK " +
+      " " +
+      $yearCount,
+    40,
+    740
+  );
 
   console.log(ctx);
 
@@ -70,7 +81,7 @@ const ApiResponse = async (req, res) => {
 
   res.setHeader(
     "content-disposition",
-    "attachment; filename=" + imageRef.weeks + "-weeks.png"
+    "attachment; filename=" + imageRef.weekstoday + "-weeks.png"
   );
   res.status(200).send(png);
 };

pages/days/[days].js

@@ -8,14 +8,17 @@ import axios from "axios";
 const FourOhFour = (props) => {
   const router = useRouter();
 
-  let numbDays = router.query.n;
+  let numbDays = router.query.days;
-
+  return (
-  useEffect(() => {
+    <div>
-    console.log("hello");
+      <Image
-    return axios.get("/api/days/99");
+        src={"/api/days/" + numbDays}
-  });
+        width="940"
-
+        height="788"
-  return <div>done</div>;
+        alt="sleeps"
+      />
+    </div>
+  );
 };
 
 export default FourOhFour;

pages/index.js

@@ -0,0 +1,51 @@
+// 404.js
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+const FourOhFour = (props) => {
+  const router = useRouter();
+
+  let numbWeeks = router.query.weekstoday;
+
+  function addThousandsSeparator(e) {
+    return e.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
+  }
+
+  function countDownToChristmas() {
+    var $now = new Date();
+    var $yearCount = $now.getFullYear();
+
+    if ($now.getMonth() + 1 == 12 && $now.getDate() >= 25) {
+      $yearCount = $yearCount + 1;
+    }
+
+    var $xmas = new Date($yearCount, 11, 25);
+    var $now_seconds = Math.round($now.getTime() / 1e3);
+    var $xmas_seconds = Math.round($xmas.getTime() / 1e3);
+    var $seconds_to_go = $xmas_seconds - $now_seconds;
+    var $minutes_to_go = Math.round($seconds_to_go / 60);
+    var $hours_to_go = ($minutes_to_go / 60).toFixed(1);
+    var $days_to_go = ($hours_to_go / 24 - 1).toFixed();
+    var $sleeps_to_go = parseInt($days_to_go) + 1;
+    var $weeks_to_go = ($minutes_to_go / 60 / 24 / 7).toFixed(2);
+    var $fortnights_to_go = ($minutes_to_go / 60 / 24 / 7 / 2).toFixed(2);
+    var $months_to_go = ($weeks_to_go / (52 / 12)).toFixed(2);
+    var $years_to_go = ($weeks_to_go / 52).toFixed(2);
+
+    return $days_to_go;
+  }
+
+  return (
+    <div>
+      <Image
+        src={"/api/days/" + countDownToChristmas()}
+        width="940"
+        height="788"
+        alt="weeks"
+      />
+    </div>
+  );
+};
+
+export default FourOhFour;

pages/multidays/index.js

@@ -0,0 +1,33 @@
+// 404.js
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+import axios from "axios";
+
+const FourOhFour = (props) => {
+  const router = useRouter();
+
+  let numbWeeks = router.query.weekstoday;
+  return (
+    <div>
+      <Image
+        src={"/api/multidays/" + numbWeeks}
+        width="940"
+        height="788"
+        alt="days"
+      />
+    </div>
+  );
+};
+
+export async function getServerSideProps(context) {
+  for (let i = 1; i < 365; i++) {
+    let response = await fetch("http://localhost:3000/api/multidays/" + i);
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+
+export default FourOhFour;

pages/multiweeks/index.js

@@ -0,0 +1,33 @@
+// 404.js
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+import axios from "axios";
+
+const FourOhFour = (props) => {
+  const router = useRouter();
+
+  let numbWeeks = router.query.weekstoday;
+  return (
+    <div>
+      <Image
+        src={"/api/multiweeks/" + numbWeeks}
+        width="940"
+        height="788"
+        alt="days"
+      />
+    </div>
+  );
+};
+
+export async function getServerSideProps(context) {
+  for (let i = 1; i < 53; i++) {
+    let response = await fetch("http://localhost:3000/api/multiweeks/" + i);
+  }
+
+  return {
+    props: {}, // will be passed to the page component as props
+  };
+}
+
+export default FourOhFour;

pages/sleeps/[sleeps].js

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 const FourOhFour = (props) => {
   const router = useRouter();
 
-  let numbSleeps = router.query.n;
+  let numbSleeps = router.query.sleeps;
   return (
     <div>
       <Image

pages/weeks/[weeks].js

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 const FourOhFour = (props) => {
   const router = useRouter();
 
-  let numbWeeks = router.query.n;
+  let numbWeeks = router.query.weeks;
   return (
     <div>
       <Image

pages/weekstoday/[weekstoday].js

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 const FourOhFour = (props) => {
   const router = useRouter();
 
-  let numbWeeks = router.query.n;
+  let numbWeeks = router.query.weekstoday;
   return (
     <div>
       <Image

server.js

@@ -0,0 +1,84 @@
+const next = require("next");
+const { createServer } = require("http");
+const appInsights = require("applicationinsights");
+
+const initAppInsights = (instrumentationKey) => {
+  if (!instrumentationKey) {
+    return false;
+  }
+
+  appInsights
+    .setup(instrumentationKey)
+    .setAutoCollectConsole(true, true)
+    .setSendLiveMetrics(true)
+    .start();
+
+  return true;
+};
+
+const startServer = async (config) => {
+  const serverOptions = {
+    dev: config.env === "development",
+    dir: ".",
+    quiet: false,
+  };
+
+  const app = next(serverOptions);
+  const handleNextRequests = app.getRequestHandler();
+
+  const srv = createServer((req, res) => {
+    if (config.useAppInsights) {
+      appInsights.defaultClient.trackNodeHttpRequest({
+        request: req,
+        response: res,
+      });
+    }
+
+    handleNextRequests(req, res);
+  });
+
+  await new Promise((resolve, reject) => {
+    // This code catches EADDRINUSE error if the port is already in use
+    srv.on("error", reject);
+    srv.on("listening", () => resolve());
+    srv.listen(config.port, config.hostname);
+  });
+
+  // It's up to caller to run `app.prepare()`, so it can notify that the server
+  // is listening before starting any intensive operations.
+  return app;
+};
+
+const startTime = Date.now();
+
+const serverConfig = {
+  hostname: "localhost",
+  port: process.env.PORT || 3000,
+  env: process.env.APP_ENV || process.env.NODE_ENV || "production",
+  useAppInsights: initAppInsights(
+    process.env.NEXT_PUBLIC_APPINSIGHTS_INSTRUMENTATIONKEY
+  ),
+};
+
+startServer(serverConfig)
+  .then(async (app) => {
+    console.log(
+      `started server on host ${serverConfig.hostname}, port ${serverConfig.port}, env ${serverConfig.env}`
+    );
+
+    if (serverConfig.useAppInsights) {
+      const duration = Date.now() - startTime;
+
+      appInsights.defaultClient.trackMetric({
+        name: "server startup time",
+        value: duration,
+      });
+    }
+
+    await app.prepare();
+  })
+  .catch((err) => {
+    console.error(err);
+
+    process.exit(1);
+  });

yarn.lock

@@ -996,7 +996,7 @@ fs.realpath@^1.0.0:
 fs@^0.0.1-security:
   version "0.0.1-security"
   resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
-  integrity sha1-invTcYa23d84E/I4WLV+yq9eQdQ=
+  integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==
 
 function-bind@^1.1.1:
   version "1.1.1"