Merge pull request #313 from rayanfer32/feat/new-og-image

rayanfer32 · Jan 26, 2023 · 45a7703 · 45a7703
2 parents 3e0d097 + 6444ac1
commit 45a7703
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 23 deletions.
diff --git a/public/nexus_water_mark.png b/public/nexus_water_mark.png
diff --git a/src/assets/fonts/RobotoMono__.ttf b/src/assets/fonts/RobotoMono__.ttf
diff --git a/src/components/Header/PageHeader/Og-Bot.jsx b/src/components/Header/PageHeader/Og-Bot.jsx
@@ -1,7 +1,8 @@
 import { intlNum } from 'utils/converter';
 
 export const OGBotImage = ({ contract, fishName, fishEmoji }) => {
-  const bg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/og_meta_image_bot.jpg`;
+  const bg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/nexus_water_mark.png`;
+  const faviconSvg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/favicon.svg`;
 
   return (
     <div
@@ -11,36 +12,71 @@ export const OGBotImage = ({ contract, fishName, fishEmoji }) => {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        backgroundColor: 'hsla(202, 97%, 52%, 1)',
+        justifyContent: 'space-around',
+        backgroundColor: 'hsla(202, 87%, 25%,1)',
         backgroundImage: `url(${bg})`,
+        backgroundSize: '1600 630',
+        backgroundRepeat: 'no-repeat',
         fontSize: 36,
         color: 'white',
+        padding: '1rem',
       }}>
-      <h2
+      <div style={{ display: 'flex' }}>
+        <div
+          style={{
+            // marginLeft: 0,
+            padding: '5px 5px',
+            borderRadius: 16,
+            // backgroundColor: '#fff',
+            display: 'flex',
+          }}>
+          <img
+            style={{
+              height: '6rem',
+              width: '6rem',
+            }}
+            src={faviconSvg}
+          />
+        </div>
+        <div
+          style={{
+            marginLeft: 600,
+            padding: 20,
+            borderRadius: 16,
+            backgroundColor: '#012235',
+          }}>
+          {contract.OP}
+        </div>
+      </div>
+      <div
         style={{
-          marginTop: 72,
-          marginLeft: 500,
-          padding: 10,
-          borderRadius: 16,
-          backgroundColor: '#012235',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          background: '#fff',
+          padding: '1rem 5rem',
+          borderRadius: 999,
+          color: '#39f',
         }}>
-        {contract.OP}
-      </h2>
-      {contract.from && <h2>From - {contract.from}</h2>}
-      <span style={{ fontSize: 48 }}>{fishName}</span>
-      <span style={{ fontSize: 96 }}>{fishEmoji}</span>
-      <h1 style={{ fontSize: 72 }}>
-        {intlNum(contract.amount)} {contract.ticker}
-      </h1>
+        <div style={{ fontSize: 128 }}>{fishEmoji}</div>
+        <div style={{ fontSize: 32 }}>{fishName}</div>
+        <div style={{ display: 'flex', fontSize: 64 }}>
+          {intlNum(contract.amount)} {contract.ticker}
+        </div>
+      </div>
+
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          color: '#aaa',
+          color: '#fff',
+          background: '#012235',
+          borderRadius: 10,
+          padding: 10,
           fontSize: 24,
-          marginTop: 16,
         }}>
+        {contract.from && <span>From - {contract.from}</span>}
         {contract.proof && <span>Proof - {contract.proof}</span>}
         {contract.to && <span>To - {contract.to}</span>}
       </div>

diff --git a/src/pages/api/static/og-alert.jsx b/src/pages/api/static/og-alert.jsx
@@ -5,10 +5,10 @@ import { fetchBlock } from 'utils/common/fetch';
 export const config = {
   runtime: 'experimental-edge',
 };
-const properties = {
-  width: 1200,
-  height: 630,
-};
+const monoFont = fetch(
+  new URL('../../../assets/fonts/RobotoMono__.ttf', import.meta.url)
+).then((res) => res.arrayBuffer());
+
 const emojis = {
   blue_whale: '🐳',
   whale: '🐋',
@@ -80,6 +80,17 @@ export default async function handler(req) {
         fishName={fishName}
       />
     ),
-    properties
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: 'Roboto Mono',
+          data: await monoFont,
+          style: 'normal',
+        },
+      ],
+      emoji: 'fluent', // * 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
+    }
   );
 }