preview-test (need to add domain fetching code+ fix spaces)

src/preview.mjs

@@ -15,13 +15,17 @@ function h(type, props, ...children) {
   }
 }
 
-function content(title, submitter) {
-  const text = `submitted by ${submitter.displayName}`;
+function content(title, submitter, domain) {
+  const text = `submitted by `;
+  const submitterStyle = {
+    textDecoration: "underline",
+    color: "red",
+  };
   return html`
     <div
       style=${{
-        height: "100%",
-        width: "100%",
+        width: "1200px",
+        height: "630px",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -33,38 +37,64 @@ function content(title, submitter) {
     >
       <p
         style=${{
-          fontSize: "6rem",
+          fontSize: "4rem",
           color: "#38C910",
           padding: 0,
           lineHeight: 0.9,
-          margin: 0,
+          margin: "2rem 0 1rem 0",
+          textShadow: "0px 0.15rem 0.15rem black",
         }}
       >
         ${title}
       </p>
-      <p style=${{ fontSize: "3rem" }}>${text}</p>
+      <p
+        style=${{
+          fontSize: "3rem",
+          margin: "0 0 3rem 0",
+          textShadow: "0px 0.1rem 0.1rem black",
+        }}
+      >
+        (${domain})
+      </p>
+      <p>***</p>
+      <p
+        style=${{
+          fontSize: "2rem",
+          margin: "0 0 3rem 0",
+          fontWeight: "normal",
+        }}
+      >
+        ${text}
+        <span
+          style=${{
+            textDecorationLine: "underline",
+            textDecorationColor: "#3DC617",
+          }}
+          >${submitter}</span
+        >
+      </p>
     </div>
   `;
 }
 
-export async function generate(index, title, submitter) {
+export async function generate(index, title, submitter, domain) {
   const filePath = resolve(`./src/public/previews/${index}.jpg`);
 
-  try {
-    await access(filePath);
-    return; // File exists, so we just return
-  } catch (err) {
-    // File doesn't exist, we continue with the generation
-  }
+  // try {
+  //   await access(filePath);
+  //   return; // File exists, so we just return
+  // } catch (err) {
+  //   // File doesn't exist, we continue with the generation
+  // }
 
   const fontData = await readFile("./Verdana-Bold.ttf");
   const arial = {
     name: "Verdana",
     data: fontData,
-    weight: 700,
-    style: "bold",
+    weight: 400,
+    style: "normal",
   };
-  const body = content(title, submitter);
+  const body = content(title, submitter, domain);
   const svgData = await satori(body, {
     width: 1200,
     height: 630,
@@ -73,3 +103,26 @@ export async function generate(index, title, submitter) {
 
   sharp(Buffer.from(svgData)).jpeg().toFile(filePath);
 }
+
+// Test function
+async function test() {
+  // Test different titles and submitters
+  console.log("started generation");
+  await generate(
+    1,
+    "This is a test title that has eighty characters to see how Kiwi renders OG:Image",
+    "Test Submitter 1",
+    "testdomain1.com",
+  );
+  await generate(2, "Short title test", "Test Submitter 2", "domain2.com");
+  await generate(
+    3,
+    "Medium length title test about 30 chars",
+    "Test Submitter 2 longname",
+    "veryverylongdomain2.com",
+  );
+  // Add more tests as needed
+}
+
+// Run the test function
+test().catch(console.error);