feat: add additional meta tags (#298)

* feat: add additional meta tags * chore: changeset
wevm · May 3, 2024 · b9e181b · b9e181b
1 parent 631b1b9
commit b9e181b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/.changeset/forty-badgers-approve.md b/.changeset/forty-badgers-approve.md
@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Added experimental feature to allow additional custom meta tags.
diff --git a/src/frog-base.tsx b/src/frog-base.tsx
@@ -167,6 +167,11 @@ export type FrogConstructorParameters<
    * @default true.
    */
   verify?: boolean | 'silent' | undefined
+
+  /**
+   * Additional meta tags for the instance.
+   */
+  unstable_metaTags?: { property: string; content: string }[] | undefined
 }
 
 export type RouteOptions<method extends string = string> = Pick<
@@ -257,26 +262,33 @@ export class FrogBase<
   /** Whether or not frames should be verified. */
   verify: FrogConstructorParameters['verify'] = true
 
+  metaTags: FrogConstructorParameters['unstable_metaTags'] | undefined
+
   _dev: string | undefined
   version = version
 
-  constructor({
-    assetsPath,
-    basePath,
-    browserLocation,
-    dev,
-    headers,
-    honoOptions,
-    hubApiUrl,
-    hub,
-    imageAspectRatio,
-    imageOptions,
-    initialState,
-    origin,
-    secret,
-    ui,
-    verify,
-  }: FrogConstructorParameters<env, basePath, _state> = {}) {
+  constructor(
+    parameters: FrogConstructorParameters<env, basePath, _state> = {},
+  ) {
+    const {
+      assetsPath,
+      basePath,
+      browserLocation,
+      dev,
+      headers,
+      honoOptions,
+      hubApiUrl,
+      hub,
+      imageAspectRatio,
+      imageOptions,
+      initialState,
+      origin,
+      secret,
+      ui,
+      unstable_metaTags,
+      verify,
+    } = parameters
+
     this.hono = new Hono<env, schema, basePath>(honoOptions)
     if (basePath) this.hono = this.hono.basePath(basePath)
     if (browserLocation) this.browserLocation = browserLocation
@@ -285,6 +297,7 @@ export class FrogBase<
     if (hub) this.hub = hub
     if (imageAspectRatio) this.imageAspectRatio = imageAspectRatio
     if (imageOptions) this.imageOptions = imageOptions
+    if (unstable_metaTags) this.metaTags = unstable_metaTags
     if (origin) this.origin = origin
     if (secret) this.secret = secret
     if (ui) this.ui = ui
@@ -694,6 +707,22 @@ export class FrogBase<
         )
       }
 
+      const metaTagsMap = new Map<string, string>()
+      for (const tag of [
+        ...(response.data.unstable_metaTags ?? []),
+        ...(this.metaTags ?? []),
+      ]) {
+        if (metaTagsMap.has(tag.property)) continue
+        metaTagsMap.set(tag.property, tag.content)
+      }
+      const metaTags =
+        metaTagsMap.size === 0
+          ? []
+          : Array.from(metaTagsMap).map((x) => ({
+              property: x[0],
+              content: x[1],
+            }))
+
       return c.render(
         <>
           {html`<!DOCTYPE html>`}
@@ -739,6 +768,10 @@ export class FrogBase<
                   })}
                 />
               )}
+
+              {metaTags.map((tag) => (
+                <meta property={tag.property} content={tag.content} />
+              ))}
             </head>
             <body />
           </html>

diff --git a/src/types/frame.ts b/src/types/frame.ts
@@ -125,6 +125,10 @@ export type FrameResponse = {
    * @example 'Hello Frog'
    */
   title?: string | undefined
+  /**
+   * Additional meta tags for the frame.
+   */
+  unstable_metaTags?: { property: string; content: string }[] | undefined
 }
 
 export type FrameResponseFn = (