diff --git a/.gitignore b/.gitignore index 1437c53..45e6fd8 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,7 @@ yarn-error.log* # vercel .vercel + +#generated assets +/download_2 +/download_3 \ No newline at end of file diff --git a/99 b/99 deleted file mode 100644 index b223813..0000000 Binary files a/99 and /dev/null differ diff --git a/pages/api/multidays/[days].js b/pages/api/multidays/[days].js new file mode 100644 index 0000000..03d5bd7 --- /dev/null +++ b/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; diff --git a/pages/api/multiweeks/[weeks].js b/pages/api/multiweeks/[weeks].js new file mode 100644 index 0000000..29437bf --- /dev/null +++ b/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; diff --git a/pages/multidays/index.js b/pages/multidays/index.js new file mode 100644 index 0000000..b14d23a --- /dev/null +++ b/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 ( +
+ days +
+ ); +}; + +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; diff --git a/pages/multiweeks/index.js b/pages/multiweeks/index.js new file mode 100644 index 0000000..c0235c1 --- /dev/null +++ b/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 ( +
+ days +
+ ); +}; + +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; diff --git a/yarn.lock b/yarn.lock index 4dc7ec8..cb7dbc1 100644 --- a/yarn.lock +++ b/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"