optimised?

ensdomains · Apr 15, 2024 · c978554 · c978554
1 parent e6f88b4
commit c978554
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 119 deletions.
diff --git a/functions/modifier/ElementsCreator.ts b/functions/modifier/ElementsCreator.ts
@@ -1,15 +1,12 @@
+export type ElementCreation = {
+  tagName: string
+  attributes: Record<string, string>
+}
+
 export class ElementsCreator {
-  private elements: {
-    tagName: string
-    attributes: Record<string, string>
-  }[]
+  private elements: ElementCreation[]
 
-  constructor(
-    elements: {
-      tagName: string
-      attributes: Record<string, string>
-    }[],
-  ) {
+  constructor(elements: ElementCreation[]) {
     this.elements = elements
   }
 

diff --git a/functions/rewriter/address.ts b/functions/rewriter/address.ts
@@ -2,7 +2,7 @@ import type { Address } from 'viem'
 
 import { AttributeModifier } from '../modifier/AttributeModifier'
 import { ContentModifier } from '../modifier/ContentModifier'
-import { ElementsCreator } from '../modifier/ElementsCreator'
+import { ElementCreation, ElementsCreator } from '../modifier/ElementsCreator'
 import { BASE_OG_IMAGE_URL, isFarcasterRequest } from '../utils'
 
 type ApiAddressHandlerResponse = {
@@ -30,23 +30,59 @@ export const addressRewriter = async ({
   const newTitle = `${address.slice(0, 7)}...${address.slice(-5)} on ENS`
   const newDescription = `${address}'s profile on the Ethereum Name Service`
 
+  const elements: ElementCreation[] = [
+    /* opengraph */
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:image', content: ogImageUrl },
+    },
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:title', content: newTitle },
+    },
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:description', content: newDescription },
+    },
+    /* twitter */
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:image', content: ogImageUrl },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:title', content: newTitle },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:description', content: newDescription },
+    },
+    /* farcaster */
+    {
+      tagName: 'meta',
+      attributes: { name: 'fc:frame:image', content: ogImageUrl },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'fc:frame:button:1', content: 'View address' },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'fc:frame:button:1:action', content: 'link' },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'fc:frame:button:1:target',
+        content: `https://ens.app/${address}`,
+      },
+    },
+  ]
+
   const rewriter = new HTMLRewriter()
     .on('title', new ContentModifier(newTitle))
     .on('meta[name="description"]', new AttributeModifier('content', newDescription))
-    /* opengraph */
-    .on('meta[property="og:image"]', new AttributeModifier('content', ogImageUrl))
-    .on('meta[property="og:title"]', new AttributeModifier('content', newTitle))
-    .on('meta[property="og:description"]', new AttributeModifier('content', newDescription))
-    /* farcaster */
-    .on('meta[name="fc:frame:image"]', new AttributeModifier('content', ogImageUrl))
-    .on(
-      'meta[name="fc:frame:button:1:target"]',
-      new AttributeModifier('content', `https://ens.app/${address}`),
-    )
-    /* twitter */
-    .on('meta[name="twitter:image"]', new AttributeModifier('content', ogImageUrl))
-    .on('meta[name="twitter:title"]', new AttributeModifier('content', newTitle))
-    .on('meta[name="twitter:description"]', new AttributeModifier('content', newDescription))
+    .on('head', new ElementsCreator(elements))
 
   if (!isFarcasterRequest(request)) return rewriter
 
@@ -57,25 +93,22 @@ export const addressRewriter = async ({
   if (!data) return rewriter
 
   if (data.primaryName) {
-    rewriter.on(
-      'head',
-      new ElementsCreator([
-        {
-          tagName: 'meta',
-          attributes: { name: 'fc:frame:button:2', content: 'View profile' },
-        },
-        {
-          tagName: 'meta',
-          attributes: { name: 'fc:frame:button:2:action', content: 'link' },
-        },
-        {
-          tagName: 'meta',
-          attributes: {
-            name: 'fc:frame:button:2:target',
-            content: `https://ens.app/${data.primaryName}`,
-          },
+    elements.push(
+      {
+        tagName: 'meta',
+        attributes: { name: 'fc:frame:button:2', content: 'View profile' },
+      },
+      {
+        tagName: 'meta',
+        attributes: { name: 'fc:frame:button:2:action', content: 'link' },
+      },
+      {
+        tagName: 'meta',
+        attributes: {
+          name: 'fc:frame:button:2:target',
+          content: `https://ens.app/${data.primaryName}`,
         },
-      ]),
+      },
     )
   }
 

diff --git a/functions/rewriter/profile.ts b/functions/rewriter/profile.ts
@@ -2,7 +2,7 @@ import type { Address } from 'viem'
 
 import { AttributeModifier } from '../modifier/AttributeModifier'
 import { ContentModifier } from '../modifier/ContentModifier'
-import { ElementsCreator } from '../modifier/ElementsCreator'
+import { ElementCreation, ElementsCreator } from '../modifier/ElementsCreator'
 import { BASE_OG_IMAGE_URL, isFarcasterRequest } from '../utils'
 
 type ApiNameHandlerResponse =
@@ -43,27 +43,63 @@ export const profileRewriter = async ({
     ? `${BASE_OG_IMAGE_URL}/image/name/${encodeURIComponent(normalisedName)}`
     : `${BASE_OG_IMAGE_URL}/image/name/`
 
-  const rewriter = new HTMLRewriter()
-    .on('title', new ContentModifier(newTitle))
-    .on('meta[name="description"]', new AttributeModifier('content', newDescription))
+  const elements: ElementCreation[] = [
     /* opengraph */
-    .on('meta[property="og:image"]', new AttributeModifier('content', ogImageUrl))
-    .on('meta[property="og:title"]', new AttributeModifier('content', newTitle))
-    .on('meta[property="og:description"]', new AttributeModifier('content', newDescription))
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:image', content: ogImageUrl },
+    },
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:title', content: newTitle },
+    },
+    {
+      tagName: 'meta',
+      attributes: { property: 'og:description', content: newDescription },
+    },
     /* twitter */
-    .on('meta[name="twitter:image"]', new AttributeModifier('content', ogImageUrl))
-    .on('meta[name="twitter:title"]', new AttributeModifier('content', newTitle))
-    .on('meta[name="twitter:description"]', new AttributeModifier('content', newDescription))
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:image', content: ogImageUrl },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:title', content: newTitle },
+    },
+    {
+      tagName: 'meta',
+      attributes: { name: 'twitter:description', content: newDescription },
+    },
+    ...(normalisedName
+      ? [
+          /* farcaster */
+          {
+            tagName: 'meta',
+            attributes: { name: 'fc:frame:image', content: ogImageUrl },
+          },
+          {
+            tagName: 'meta',
+            attributes: { name: 'fc:frame:button:1', content: 'View profile' },
+          },
+          {
+            tagName: 'meta',
+            attributes: { name: 'fc:frame:button:1:action', content: 'link' },
+          },
+          {
+            tagName: 'meta',
+            attributes: {
+              name: 'fc:frame:button:1:target',
+              content: `https://ens.app/${normalisedName}`,
+            },
+          },
+        ]
+      : []),
+  ]
 
-  /* farcaster */
-  if (normalisedName) {
-    rewriter
-      .on('meta[name="fc:frame:image"]', new AttributeModifier('content', ogImageUrl))
-      .on(
-        'meta[name="fc:frame:button:1:target"]',
-        new AttributeModifier('content', `https://ens.app/${normalisedName}`),
-      )
-  }
+  const rewriter = new HTMLRewriter()
+    .on('title', new ContentModifier(newTitle))
+    .on('meta[name="description"]', new AttributeModifier('content', newDescription))
+    .on('head', new ElementsCreator(elements))
 
   if (!isFarcasterRequest(request) || !normalisedName) return rewriter
 
@@ -74,25 +110,22 @@ export const profileRewriter = async ({
   if (!data || 'error' in data) return rewriter
 
   if (data.ethAddress) {
-    rewriter.on(
-      'head',
-      new ElementsCreator([
-        {
-          tagName: 'meta',
-          attributes: { name: 'fc:frame:button:2', content: 'View address' },
-        },
-        {
-          tagName: 'meta',
-          attributes: { name: 'fc:frame:button:2:action', content: 'link' },
-        },
-        {
-          tagName: 'meta',
-          attributes: {
-            name: 'fc:frame:button:2:target',
-            content: `https://ens.app/${data.ethAddress}`,
-          },
+    elements.push(
+      {
+        tagName: 'meta',
+        attributes: { name: 'fc:frame:button:2', content: 'View address' },
+      },
+      {
+        tagName: 'meta',
+        attributes: { name: 'fc:frame:button:2:action', content: 'link' },
+      },
+      {
+        tagName: 'meta',
+        attributes: {
+          name: 'fc:frame:button:2:target',
+          content: `https://ens.app/${data.ethAddress}`,
         },
-      ]),
+      },
     )
   }
 

diff --git a/src/components/pages/profile/[name]/Profile.tsx b/src/components/pages/profile/[name]/Profile.tsx
@@ -239,28 +239,35 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
       <Head>
         <title>{titleContent}</title>
         <meta name="description" content={descriptionContent} />
-        {/* opengraph */}
-        <meta property="og:image" content={ogImageUrl} />
-        <meta property="og:title" content={titleContent} />
-        <meta property="og:description" content={descriptionContent} />
-        {/* farcaster */}
+        <meta name="twitter:card" content="summary_large_image" />
         <meta name="fc:frame" content="vNext" />
-        <meta name="fc:frame:image" content={ogImageUrl} />
-        <meta name="fc:frame:button:1" content="View profile" />
-        <meta name="fc:frame:button:1:action" content="link" />
-        <meta name="fc:frame:button:1:target" content={`https://ens.app/${normalisedName}`} />
-        {profile?.address && (
+        {!!process.env.NEXT_PUBLIC_IPFS && (
           <>
-            <meta name="fc:frame:button:2" content="View address" />
-            <meta name="fc:frame:button:2:action" content="link" />
-            <meta name="fc:frame:button:2:target" content={`https://ens.app/${profile.address}`} />
+            {/* opengraph */}
+            <meta property="og:image" content={ogImageUrl} />
+            <meta property="og:title" content={titleContent} />
+            <meta property="og:description" content={descriptionContent} />
+            {/* farcaster */}
+            <meta name="fc:frame:image" content={ogImageUrl} />
+            <meta name="fc:frame:button:1" content="View profile" />
+            <meta name="fc:frame:button:1:action" content="link" />
+            <meta name="fc:frame:button:1:target" content={`https://ens.app/${normalisedName}`} />
+            {profile?.address && (
+              <>
+                <meta name="fc:frame:button:2" content="View address" />
+                <meta name="fc:frame:button:2:action" content="link" />
+                <meta
+                  name="fc:frame:button:2:target"
+                  content={`https://ens.app/${profile.address}`}
+                />
+              </>
+            )}
+            {/* twitter */}
+            <meta name="twitter:image" content={ogImageUrl} />
+            <meta name="twitter:title" content={titleContent} />
+            <meta name="twitter:description" content={descriptionContent} />
           </>
         )}
-        {/* twitter */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:image" content={ogImageUrl} />
-        <meta name="twitter:title" content={titleContent} />
-        <meta name="twitter:description" content={descriptionContent} />
       </Head>
       <Content
         noTitle

diff --git a/src/pages/address.tsx b/src/pages/address.tsx
@@ -58,31 +58,35 @@ const Page = () => {
       <Head>
         <title>{titleContent}</title>
         <meta name="description" content={descriptionContent} />
-        {/* opengraph */}
-        <meta property="og:image" content={ogImageUrl} />
-        <meta property="og:title" content={titleContent} />
-        <meta property="og:description" content={descriptionContent} />
-        {/* farcaster */}
         <meta name="fc:frame" content="vNext" />
-        <meta name="fc:frame:image" content={ogImageUrl} />
-        <meta name="fc:frame:button:1" content="View address" />
-        <meta name="fc:frame:button:1:action" content="link" />
-        <meta name="fc:frame:button:1:target" content={`https://ens.app/${address}`} />
-        {primaryProfile && (
+        <meta name="twitter:card" content="summary_large_image" />
+        {!!process.env.NEXT_PUBLIC_IPFS && (
           <>
-            <meta name="fc:frame:button:2" content="View profile" />
-            <meta name="fc:frame:button:2:action" content="link" />
-            <meta
-              name="fc:frame:button:2:target"
-              content={`https://ens.app/${primaryProfile.name}`}
-            />
+            {/* opengraph */}
+            <meta property="og:image" content={ogImageUrl} />
+            <meta property="og:title" content={titleContent} />
+            <meta property="og:description" content={descriptionContent} />
+            {/* farcaster */}
+            <meta name="fc:frame:image" content={ogImageUrl} />
+            <meta name="fc:frame:button:1" content="View address" />
+            <meta name="fc:frame:button:1:action" content="link" />
+            <meta name="fc:frame:button:1:target" content={`https://ens.app/${address}`} />
+            {primaryProfile && (
+              <>
+                <meta name="fc:frame:button:2" content="View profile" />
+                <meta name="fc:frame:button:2:action" content="link" />
+                <meta
+                  name="fc:frame:button:2:target"
+                  content={`https://ens.app/${primaryProfile.name}`}
+                />
+              </>
+            )}
+            {/* twitter */}
+            <meta name="twitter:image" content={ogImageUrl} />
+            <meta name="twitter:title" content={titleContent} />
+            <meta name="twitter:description" content={descriptionContent} />
           </>
         )}
-        {/* twitter */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:image" content={ogImageUrl} />
-        <meta name="twitter:title" content={titleContent} />
-        <meta name="twitter:description" content={descriptionContent} />
       </Head>
       <Content noTitle title={shortenedAddress} copyValue={address} loading={loading}>
         {{