fix artist name bug fix and add in colours for day of the month (#139)

Refuge-Worldwide · Sep 17, 2024 · fb7ebc0 · fb7ebc0
1 parent df89db6
commit fb7ebc0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/pages/api/automated-artwork.tsx b/pages/api/automated-artwork.tsx
@@ -11,7 +11,7 @@ async function handle(request: Request) {
 
   const images =
     searchParams.get("images") ||
-    "https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg,https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg,https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg,https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg";
+    "https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg,https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg,https://res.cloudinary.com/dqjn26pey/image/upload/v1726483539/default_image-pichi_u9id7o.jpg";
   const imagesArray = decodeURIComponent(images).split(",");
   const aspects = ["12:10", "59:100", "35:100"];
   const cloudinaryTransform = `ar_${
@@ -30,6 +30,7 @@ async function handle(request: Request) {
   const artists =
     searchParams.get("artists") || "Moehecan, Yasmine Acar & Udi Raz";
   const date = searchParams.get("date") || "Thu 12 Sep / 15:00-16:00 (CET)";
+  const colour = searchParams.get("colour") || "#00CB0D";
 
   const fontLight = await fetch(
     new URL("../../assets/VisueltLight.otf", import.meta.url)
@@ -68,9 +69,9 @@ async function handle(request: Request) {
 
   return new ImageResponse(
     (
-      <div tw="flex w-full h-full flex-col bg-[#00CB0D] p-4">
+      <div tw={`flex w-full h-full flex-col bg-[${colour}] p-4`}>
         <div tw="flex mb-4">
-          <div tw="flex flex-col grow max-w-[792px] bg-[#00CB0D] p-4 pt-2 pb-3 border-black border mr-4">
+          <div tw="flex flex-col grow max-w-[792px] p-4 pt-2 pb-3 border-black border mr-4">
             <div
               tw="text-[2.75rem] font-bold flex"
               style={{ fontFamily: '"VisueltMedium"', lineHeight: "100%" }}
@@ -110,7 +111,7 @@ async function handle(request: Request) {
               {date}
             </div>
           </div>
-          <div tw="flex justify-center items-center w-[240px] border-black border bg-[#00CB0D]">
+          <div tw="flex justify-center items-center w-[240px] border-black border">
             <svg
               width="209"
               height="125"
@@ -157,7 +158,7 @@ async function handle(request: Request) {
           })}
         </div>
         <div
-          tw="flex absolute bottom-4 left-4 text-[1.85rem] pb-3 bg-[#00CB0D] px-4 pt-2 border-black border"
+          tw={`flex absolute bottom-4 left-4 text-[1.85rem] pb-3 px-4 pt-2 border-black border bg-[${colour}]`}
           style={{ fontFamily: '"fontArizona"', lineHeight: "90%" }}
         >
           refugeworldwide.com

diff --git a/pages/api/show-submission-v2.ts b/pages/api/show-submission-v2.ts
@@ -397,8 +397,11 @@ const socialImage = async (values) => {
   );
   console.log(images);
   const title = encodeURIComponent(values.showName);
-  const artists = encodeURIComponent(
-    values.artists.map((x) => x.label).join(", ")
+  const formattedArtists = encodeURIComponent(
+    values.artists
+      .map((x) => x.label)
+      .join(", ")
+      .replace(/, ([^,]*)$/, " & $1")
   );
 
   // Format the date and time
@@ -410,14 +413,49 @@ const socialImage = async (values) => {
       .format("HH:mm")} (CET)`
   );
 
+  const colours = [
+    "#cd46fd",
+    "#fd339b",
+    "#ff96ff",
+    "#f94646",
+    "#fe6301",
+    "#ff9d1d",
+    "#fffe49",
+    "#defc32",
+    "#b0b02b",
+    "#00cb0d",
+    "#32fe95",
+    "#4ac8f4",
+    "#5a60fe",
+    "#1a4afc",
+    "#ffa2b5",
+    "#facc7f",
+    "#99fffc",
+    "#99e9ff",
+    "#ab8dff",
+    "#ffd9f0",
+    "#fbffb3",
+    "#ccffd1",
+    "#ffedd9",
+    "#ccd2ff",
+  ];
+
+  // Get the day of the month
+  const dayOfMonth = dayjs(values.datetime).utc().date();
+
+  // Get a color from the colours array based on the day of the month
+  const colour = colours[dayOfMonth % colours.length];
+
   // Determine the base URL based on the environment
   const baseUrl =
     process.env.NODE_ENV === "development"
-      ? "https://dfe0-185-253-98-84.ngrok-free.app"
+      ? "https://473c-2a02-8109-b68b-5000-74e9-8d05-bbf3-936d.ngrok-free.app"
       : process.env.NEXT_PUBLIC_WEBSITE_URL;
 
   // Set URL for social image
-  const url = `${baseUrl}/api/automated-artwork?title=${title}&artists=${artists}&date=${date}&images=${images}`;
+  const url = `${baseUrl}/api/automated-artwork?title=${title}&artists=${formattedArtists}&date=${date}&images=${images}&colour=${encodeURIComponent(
+    colour
+  )}`;
 
   const socialImage = {
     url: url,