better styles

README.md

@@ -5,4 +5,5 @@ Check [Token Gated frames](https://frames.token-gated.com/).
 ## Next Steps
 
 - Let users create their own token-gated frames
+- Add back support for Markdown (find why it breaks `ImageResponse` first!)
 - Let members reshare a token gated frame and [earn referral fees](https://unlock-protocol.com/blog/referral-fees?_gl=1*p7ybix*_ga*MTMyNTU2OTQxMC4xNzA2Mjk4NTQ4*_ga_DGDLJTEV6N*MTcwNjcxNDkyMi40LjAuMTcwNjcxNDkyMi4wLjAuMA..)

src/app/Components/Message.tsx

@@ -1,28 +1,11 @@
-import Markdown from "react-markdown";
-
 //
 // Renders a message, any message!
 export const Message = ({ content }: { content: string }) => {
   const classes =
-    "flex flex-col w-full h-full items-center relative justify-center bg-white bg-black text-2xl ";
+    "flex flex-wrap flex-col h-full items-center justify-center w-[1200px] h-screen bg-white text-5xl p-10";
   return (
-    <div
-      tw={classes}
-      className={classes}
-      style={{
-        background: "white",
-        width: "1200px",
-        height: "630px",
-        margin: "0px",
-        // textAlign: "center",
-        // justifyContent: "center",
-        // alignItems: "center",
-        // textWrap: "wrap",
-      }}
-    >
-      {content.split("\n").map((line, l) => {
-        return <Markdown key={l}>{line}</Markdown>;
-      })}
+    <div tw={classes} className={classes}>
+      {content}
     </div>
   );
 };

src/app/api/og/[message]/route.tsx

@@ -17,7 +17,7 @@ export async function GET(
     if (u.searchParams.get("state") === "clear") {
       content = message.body;
     } else if (u.searchParams.get("state") === "hidden") {
-      content = "Sorry, you need to get a membership!";
+      content = "You need to get a membership! Click below ⬇️";
     }
   }
   return new ImageResponse(<Message content={content} />, {

src/app/c/[message]/page.tsx

@@ -30,7 +30,7 @@ export async function generateMetadata(
       "fc:frame": "vNext",
       "fc:frame:image": image,
       "fc:frame:post_url": buttonHandler,
-      "fc:frame:button:1": "Reveal",
+      "fc:frame:button:1": "Reveal 🔓",
     },
   };
 }

src/lib/messages.ts

@@ -19,9 +19,10 @@ export const getMessage = async (id: string) => {
 
     You can only view this if you own a valid membership NFT from the Unlock community!
 
-Also this supports [Markdown](https://www.markdownguide.org/), so you _can_ **style** it!`,
+    This is a token gated frame!
+    `,
     title: "Some title",
-    description: "Are you a member of the Unlock Community?",
+    description: "Are you a member of the Unlock Community? Click Reveal 🔓!",
     gate: {
       contract: "0xb77030a7e47a5eb942a4748000125e70be598632",
       network: 137,