Merge pull request #7 from goldsky-io/update-base-url-and-title

updating base url and title

README.md

@@ -1,6 +1,6 @@
-# Visual POAP
+# POAP Feed demo
 
-This is a simple demo for visualizing POAP mints live using a [Goldsky Subgraphs](https://goldsky.com/products/subgraphs) as the data source. This demo is using the following tools:
+This is a [simple demo](https://feed.poap.demo.goldsky.com/) for visualizing a live feed of POAP mints using a [Goldsky Subgraphs](https://goldsky.com/products/subgraphs) as the data source. This demo is using the following tools:
 
 - [@download/blockies](https://github.com/download13/blockies#readme) to render the blocky avatars (when an ens avatar is not available)
 - [napi-rs/canvas](https://github.com/Brooooooklyn/canvas#readme) to render the blocky/ens avatars on a serverside canvas
@@ -22,3 +22,7 @@ When posting a link to social media (use the _share_ icon in the header for cach
 ### Farcaster frames
 
 When posting to farcaster, the opengraph image will be a [farcaster frame](https://docs.farcaster.xyz/reference/frames/spec). The initial image is a static image as per the spec, with actions to load dynamic content (e.g., `Refresh latest`). Each time an action is pressed a new image is generated which could represent a whole new POAP token that was minted.
+
+## Notes on the code
+
+Svelte was chosen as the language to write this demo in as an opportunity to test out some tooling designed for Svelte. However `frames.js` and `satori` are really designed to be used with React. As such, I would recommend that anyone curious about building a similar web app, or using these same tools should strongly consider React instead of Svelte (and consider using `@vercel/og` instead of `satori`).

src/lib/client/constants.ts

@@ -1 +1,4 @@
 export const MaxItems = 10
+export const DevBaseUrl = 'http://localhost:5173'
+export const ProdBaseUrl = 'https://feed.poap.demo.goldsky.com/'
+export const BaseUrl = import.meta.env.DEV ? DevBaseUrl : ProdBaseUrl

src/lib/components/AppFrame/app-frame.svelte

@@ -29,7 +29,7 @@
     return data
 
     function composeTitle(metadata: POAPEventMetadata[] | undefined) {
-      const title = 'Visual POAP'
+      const title = 'POAP live feed'
       if (!metadata || metadata.length === 0) return title
       if (metadata.length === 1) {
         return `${title} - #${metadata[0].id} ${metadata[0].name}`

src/lib/components/Seo/seo.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getFrameHtmlHead, type Frame } from 'frames.js'
+  import { BaseUrl } from '$lib/client/constants'
   import type { POAPEventMetadata } from '$lib/types/poap'
   import type { SeoContext } from './types'
 
-  const baseUrl = import.meta.env.DEV ? 'http://localhost:5173' : 'https://vpoap.vercel.app'
-  const title = 'Visual POAP'
+  const title = 'POAP live feed'
   const description = 'Watch POAP mints live!'
 
   export let route: string
@@ -30,7 +30,7 @@
 
     return getFrameHtmlHead({
       version: 'vNext',
-      postUrl: `${baseUrl}/frame?${new URLSearchParams({ action, context: JSON.stringify(state) }).toString()}`,
+      postUrl: `${BaseUrl}/frame?${new URLSearchParams({ action, context: JSON.stringify(state) }).toString()}`,
       image,
       ogImage,
       buttons,
@@ -47,10 +47,10 @@
   }
 
   function url(ids: string, context: SeoContext) {
-    if (!ids && context.tokenId) return `${baseUrl}/token/${context.tokenId}`
-    if (route === '/') return `${baseUrl}/${ids}`
+    if (!ids && context.tokenId) return `${BaseUrl}/token/${context.tokenId}`
+    if (route === '/') return `${BaseUrl}/${ids}`
 
-    return `${baseUrl}${route}/${ids}`
+    return `${BaseUrl}${route}/${ids}`
   }
 
   function hydrate(metadata?: POAPEventMetadata | POAPEventMetadata[]) {
@@ -107,11 +107,11 @@
     }
     const search = params.toString()
 
-    if (context.tokenId) return `${baseUrl}/og/token/${context.tokenId}?${search}`
-    if (context.eventIds) return `${baseUrl}/og/event/${context.eventIds.join(',')}?${search}`
-    if (context.account) return `${baseUrl}/og/account/${context.account}?${search}`
+    if (context.tokenId) return `${BaseUrl}/og/token/${context.tokenId}?${search}`
+    if (context.eventIds) return `${BaseUrl}/og/event/${context.eventIds.join(',')}?${search}`
+    if (context.account) return `${BaseUrl}/og/account/${context.account}?${search}`
 
-    return `${baseUrl}/images/twitter-card.png`
+    return `${BaseUrl}/images/twitter-card.png`
   }
 </script>
 

src/routes/frame/+server.ts

@@ -1,11 +1,11 @@
 import { error } from '@sveltejs/kit'
 import { getFrameHtml, validateFrameMessage, type FrameActionPayload } from 'frames.js'
+import { BaseUrl } from '$lib/client/constants'
 import type { SeoContext } from '$lib/components/Seo'
 import { fetchLatestPOAPToken } from '$lib/server/poap'
 import type { RequestHandler } from './$types'
 
 export const POST: RequestHandler = async ({ request, url, fetch }) => {
-  const baseUrl = import.meta.env.DEV ? 'http://localhost:5173' : 'https://vpoap.vercel.app'
   const context = JSON.parse(url.searchParams.get('context') || '{}') as SeoContext
   const action = url.searchParams.get('action') || 'latest'
   const body = (await request.json()) as FrameActionPayload
@@ -24,7 +24,7 @@ export const POST: RequestHandler = async ({ request, url, fetch }) => {
         action: 'post',
       },
     ],
-    postUrl: `${baseUrl}/frame${url.search}`,
+    postUrl: `${BaseUrl}/frame${url.search}`,
   })
 
   return new Response(html, {
@@ -36,8 +36,8 @@ export const POST: RequestHandler = async ({ request, url, fetch }) => {
 
   async function imageUrl() {
     const at = new Date().getTime()
-    if (context.eventIds) return `${baseUrl}/og/event/${context.eventIds.join(',')}?at=${at}`
-    if (context.account) return `${baseUrl}/og/account/${context.account}?at=${at}`
+    if (context.eventIds) return `${BaseUrl}/og/event/${context.eventIds.join(',')}?at=${at}`
+    if (context.account) return `${BaseUrl}/og/account/${context.account}?at=${at}`
 
     const { data, error: tokenError } = await fetchLatestPOAPToken(fetch)
 
@@ -59,6 +59,6 @@ export const POST: RequestHandler = async ({ request, url, fetch }) => {
     const tokenId = data.tokens[0]?.id
     if (!tokenId) throw error(404, 'POAP token missing id')
 
-    return `${baseUrl}/og/token/${tokenId}?at=${at}`
+    return `${BaseUrl}/og/token/${tokenId}?at=${at}`
   }
 }

src/routes/og/token/[id]/og-token.svelte

@@ -95,7 +95,7 @@
           style:white-space="nowrap"
         >
           {#if isStatic}
-            Visual POAP Feed
+            POAP live feed
           {:else}
             {metadata.name}
           {/if}