Feature automated artwork (#138)

* prototype for automated artwork generator

* fix with bold text and add width for multiple images

* add arizona text for website

* fix issue with image height not auto resizing

* add social image generation to show submission form

* fix bugs with social image generation and show submission form

* add correct domain for preview/prod and catch error from social image generation

* ensure image generation doesn't fail when there are 4 images submitted

* fix artwork end time

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_WEBSITE_URL=https://$NEXT_PUBLIC_VERCEL_BRANCH_URL

components/submission/showSubmissionForm.tsx

@@ -113,6 +113,7 @@ export default function ShowSubmissionForm({
     number: "",
     showName: "",
     datetime: initial ? initial.date : "",
+    datetimeEnd: initial ? initial.dateEnd : "",
     length: "1",
     genres: [],
     hasNewGenres: false,

package.json

@@ -50,6 +50,7 @@
     "@supabase/auth-ui-shared": "^0.1.8",
     "@supabase/supabase-js": "^2.38.1",
     "@use-it/interval": "^1.0.0",
+    "@vercel/og": "^0.6.2",
     "@widgetbot/crate": "^3.5.4",
     "@widgetbot/react-embed": "^1.7.0",
     "add-to-calendar-button-react": "^2.4.3",

pages/api/show-submission-v2.ts

@@ -334,6 +334,17 @@ const updateShow = async (values) => {
         entry.fields.instagramHandles = {
           "en-US": formatInstaHandles(values.instagram),
         };
+        if (values.socialImage) {
+          entry.fields.socialImage = {
+            "en-US": {
+              sys: {
+                type: "Link",
+                linkType: "Asset",
+                id: values.socialImage,
+              },
+            },
+          };
+        }
         return entry.update();
       })
       .then((entry) => {
@@ -376,6 +387,78 @@ const uploadImage = async (name, image) => {
   }
 };
 
+const socialImage = async (values) => {
+  const images = encodeURIComponent(
+    values.image
+      .map((img) => {
+        return img.url;
+      })
+      .join(",")
+  );
+  console.log(images);
+  const title = encodeURIComponent(values.showName);
+  const artists = encodeURIComponent(
+    values.artists.map((x) => x.label).join(", ")
+  );
+
+  // Format the date and time
+  const date = encodeURIComponent(
+    `${dayjs(values.datetime).utc().format("ddd DD MMM / HH:mm")}-${dayjs(
+      values.datetimeEnd
+    )
+      .utc()
+      .format("HH:mm")} (CET)`
+  );
+
+  // Determine the base URL based on the environment
+  const baseUrl =
+    process.env.NODE_ENV === "development"
+      ? "https://dfe0-185-253-98-84.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 socialImage = {
+    url: url,
+    type: "image/png",
+    filename: values.showName + "-social-image.png",
+  };
+
+  const socialImageId = await uploadImage(
+    values.showName + " - social image",
+    socialImage
+  );
+  return socialImageId;
+  // try {
+  //   const space = await client.getSpace(spaceId);
+  //   const environment = await space.getEnvironment(environmentId);
+  //   let asset = await environment.createAsset({
+  //     fields: {
+  //       title: {
+  //         "en-US": name,
+  //       },
+  //       file: {
+  //         "en-US": {
+  //           contentType: image.type,
+  //           fileName: image.filename,
+  //           upload: image.url,
+  //         },
+  //       },
+  //     },
+  //   });
+  //   const processedAsset = await asset.processForAllLocales();
+  //   await processedAsset.publish();
+  //   const imageURL = "https:" + processedAsset.fields.file["en-US"].url;
+  //   console.log(imageURL);
+  //   showImages.push(imageURL);
+  //   return processedAsset.sys.id;
+  // } catch (err) {
+  //   console.log(err);
+  //   throw err;
+  // }
+};
+
 const formatInstaHandles = (handles) => {
   if (handles != "")
     return handles
@@ -445,6 +528,15 @@ export default async function handler(
             await updateArtist(artist);
           }
         }
+        // wrap social image in another try block so it doesnt blcok the main submission
+        try {
+          values.socialImage = await socialImage(values);
+        } catch (err) {
+          sendSlackMessage(
+            "Error generating social image for " + values.name,
+            "error"
+          );
+        }
         await updateShow(values);
         await appendToSpreadsheet(values);
         console.log("form submitted successfully");

types/shared.d.ts

@@ -267,6 +267,7 @@ export type SubmissionFormValues = {
   number: string;
   showName: string;
   datetime: string;
+  datetimeEnd: string;
   length: string;
   genres: Array<{ value: string; label: string }>;
   hasNewGenres: Boolean;