From 1925d6043575668f0eb92c03c4e26ef597808ab6 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Mon, 7 Aug 2023 01:41:57 -0700
Subject: [PATCH 1/3] First pass at working SEO

---
 packages/web/scripts/workers-site/index.js | 152 ++++++++++++++++++++-
 1 file changed, 147 insertions(+), 5 deletions(-)

diff --git a/packages/web/scripts/workers-site/index.js b/packages/web/scripts/workers-site/index.js
index 977b580b2a..f76cd7d73a 100644
--- a/packages/web/scripts/workers-site/index.js
+++ b/packages/web/scripts/workers-site/index.js
@@ -1,7 +1,28 @@
 import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
 
+/* globals GA, GA_ACCESS_TOKEN, SITEMAP */
+
 const DEBUG = false
 
+const routes = [
+  { pattern: /^\/([^/]+)$/, name: 'user', keys: ['handle'] },
+  {
+    pattern: /^\/([^/]+)\/([^/]+)$/,
+    name: 'track',
+    keys: ['handle', 'title']
+  },
+  {
+    pattern: /^\/([^/]+)\/playlist\/([^/]+)$/,
+    name: 'playlist',
+    keys: ['handle', 'title']
+  },
+  {
+    pattern: /^\/([^/]+)\/album\/([^/]+)$/,
+    name: 'album',
+    keys: ['handle', 'title']
+  }
+]
+
 addEventListener('fetch', (event) => {
   try {
     event.respondWith(handleEvent(event))
@@ -17,17 +38,95 @@ addEventListener('fetch', (event) => {
   }
 })
 
+function matchRoute(input) {
+  for (const route of routes) {
+    const match = route.pattern.exec(input)
+    if (match) {
+      const result = { name: route.name, params: {} }
+      route.keys.forEach((key, index) => {
+        result.params[key] = match[index + 1]
+      })
+      return result
+    }
+  }
+  return null
+}
+
 function checkIsBot(val) {
   if (!val) {
     return false
   }
-  const botTest = new RegExp(
-    'altavista|baiduspider|bingbot|discordbot|duckduckbot|facebookexternalhit|gigabot|ia_archiver|linkbot|linkedinbot|msnbot|nextgensearchbot|reaper|slackbot|snap url preview service|telegrambot|twitterbot|whatsapp|whatsup|yahoo|yandex|yeti|yodaobot|zend|zoominfobot|embedly',
-    'i'
-  )
+  const botTest =
+    /altavista|baiduspider|bingbot|discordbot|duckduckbot|facebookexternalhit|gigabot|ia_archiver|linkbot|linkedinbot|msnbot|nextgensearchbot|reaper|slackbot|snap url preview service|telegrambot|twitterbot|whatsapp|whatsup|yahoo|yandex|yeti|yodaobot|zend|zoominfobot|embedly/i
   return botTest.test(val)
 }
 
+async function getMetadata(pathname) {
+  const discoveryNode = 'https://discoveryprovider.audius.co'
+  let discoveryRequestPath
+  const route = matchRoute(pathname)
+  switch (route.name) {
+    case 'user': {
+      const { handle } = route.params
+      discoveryRequestPath = `v1/users/handle/${handle}`
+      break
+    }
+    case 'track': {
+      const { handle, title } = route.params
+      discoveryRequestPath = `v1/tracks?handle=${handle}&slug=${title}`
+      break
+    }
+    case 'playlist': {
+      const { handle, title } = route.params
+      discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
+      break
+    }
+    case 'album': {
+      const { handle, title } = route.params
+      discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
+      break
+    }
+    default:
+      return null
+  }
+  try {
+    const res = await fetch(`${discoveryNode}/${discoveryRequestPath}`)
+    if (res.status !== 200) {
+      throw new Error(res.status)
+    }
+    const json = res.json()
+    return { metadata: json, name: route.name }
+  } catch (e) {
+    return null
+  }
+}
+
+async function injectHead(asset, { title, description, image, permalink }) {
+  const canonicalUrl = `https://audius.co/${permalink}`
+  const tags = `
+    <title>${title}</title>
+    <meta name="description" content="${description}">
+
+    <link rel="canonical" href="${canonicalUrl}">
+
+    <meta property="og:title" content="${title}">
+    <meta property="og:description" content="${description}">
+    <meta property="og:image" content="${image}">
+    <meta property="og:url" content="${canonicalUrl}">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="${title}">
+    <meta name="twitter:description" content="${description}">
+    <meta name="twitter:image" content="${canonicalUrl}">
+`
+
+  if (typeof asset === 'string' && asset.includes('</head>')) {
+    asset = asset.replace('</head>', tags + '</head>')
+  }
+
+  return asset
+}
+
 async function handleEvent(event) {
   const url = new URL(event.request.url)
   const { pathname, search, hash } = url
@@ -82,7 +181,50 @@ async function handleEvent(event) {
       }
     }
 
-    return await getAssetFromKV(event, options)
+    const asset = await getAssetFromKV(event, options)
+    let modifiedAsset
+    const { metadata, name } = await getMetadata(pathname)
+    switch (name) {
+      case 'user': {
+        modifiedAsset = injectHead(asset, {
+          title: `${metadata.data.name} (@${metadata.data.name})`,
+          description: metadata.data.bio || '',
+          image: metadata.data.profile_picture['1000x1000'] || '',
+          permalink: metadata.data.handle
+        })
+        break
+      }
+      case 'track': {
+        modifiedAsset = injectHead(asset, {
+          title: `${metadata.data.title} by ${metadata.user.name}`,
+          description: metadata.data.description || '',
+          image: metadata.data.artwork['1000x1000'] || '',
+          permalink: metadata.data.permalink
+        })
+        break
+      }
+      case 'playlist': {
+        modifiedAsset = injectHead(asset, {
+          title: `${metadata.data.playlist_name} by ${metadata.user.name}`,
+          description: metadata.data.description || '',
+          image: metadata.data.artwork['1000x1000'] || '',
+          permalink: metadata.data.permalink
+        })
+        break
+      }
+      case 'album': {
+        modifiedAsset = injectHead(asset, {
+          title: `${metadata.data.playlist_name} by ${metadata.user.name}`,
+          description: metadata.data.description || '',
+          image: metadata.data.artwork['1000x1000'] || '',
+          permalink: metadata.data.permalink
+        })
+        break
+      }
+      default:
+        return null
+    }
+    return modifiedAsset
   } catch (e) {
     return new Response(e.message || e.toString(), { status: 500 })
   }

From 28f0ab6df0d800812087c9b906b55a0db800b7aa Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 8 Aug 2023 00:14:42 -0700
Subject: [PATCH 2/3] [C-2941] Add "SSR"-like tag generation fro SEO

---
 packages/web/.gitignore                    |   1 +
 packages/web/public/index.html             |  20 +--
 packages/web/scripts/workers-site/index.js | 184 +++++++++++++--------
 packages/web/wrangler.toml                 |   6 +
 4 files changed, 127 insertions(+), 84 deletions(-)

diff --git a/packages/web/.gitignore b/packages/web/.gitignore
index 1dc3a0a926..fb10386350 100644
--- a/packages/web/.gitignore
+++ b/packages/web/.gitignore
@@ -14,6 +14,7 @@
 /coverage
 
 # build
+/sourcemaps
 /build
 /build-development
 /build-demo
diff --git a/packages/web/public/index.html b/packages/web/public/index.html
index 2cb32cc0c9..065d0008fc 100644
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -21,22 +21,13 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 
-    <!-- SEO -->
-    <meta name="description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators." data-react-helmet="true">
-
-    <!-- Social -->
-    <meta property="og:title" content="Audius - Empowering Creators">
+    <meta name="application-name" content="Audius">
     <meta property="og:site_name" content="Audius">
-    <meta property="og:description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators.">
-    <meta property="og:image" content="%PUBLIC_URL%/ogImage.jpg">
     <meta property="fb:app_id" content="123553997750078" />
-
-    <meta name="twitter:title" content="Audius - Empowering Creators">
-    <meta name="twitter:description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators.">
-    <meta name="twitter:image" content="%PUBLIC_URL%/ogImage.jpg">
-    <meta name="twitter:image:alt" content="The Audius Platform">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@AudiusProject">
+    <meta property="twitter:app:name:iphone" content="Audius Music">
+    <meta property="twitter:app:name:googleplay" content="Audius Music">
 
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
 
@@ -46,8 +37,6 @@
       src="%PUBLIC_URL%/scripts/web3.min.js"
     ></script>
 
-    <title>Audius</title>
-
     <script async type="text/javascript">
       // Account recovery
       try{
@@ -82,6 +71,7 @@
         console.error(e)
       }
     </script>
+
     <!-- start Google Analytics -->
     <script async src="%PUBLIC_URL%/analytics/gtag.js?id=%REACT_APP_GA_MEASUREMENT_ID%"></script>
     <script async>
@@ -102,7 +92,7 @@
     <!-- end Google Analytics -->
 
     <!-- start Adroll -->
-    <script type="text/javascript">
+    <script async type="text/javascript">
       const adroll_adv_id = '%REACT_APP_ADROLL_AVD_ID%';
       const adroll_pix_id = '%REACT_APP_ADROLL_PIX_ID%';
       const adroll_version = "2.0";
diff --git a/packages/web/scripts/workers-site/index.js b/packages/web/scripts/workers-site/index.js
index f76cd7d73a..72dd240501 100644
--- a/packages/web/scripts/workers-site/index.js
+++ b/packages/web/scripts/workers-site/index.js
@@ -1,9 +1,13 @@
 import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
 
-/* globals GA, GA_ACCESS_TOKEN, SITEMAP */
+/* globals GA, GA_ACCESS_TOKEN, SITEMAP, DISCOVERY_NODES, HTMLRewriter */
 
 const DEBUG = false
 
+const discoveryNodes = DISCOVERY_NODES.split(',')
+const discoveryNode =
+  discoveryNodes[Math.floor(Math.random() * discoveryNodes.length)]
+
 const routes = [
   { pattern: /^\/([^/]+)$/, name: 'user', keys: ['handle'] },
   {
@@ -62,69 +66,149 @@ function checkIsBot(val) {
 }
 
 async function getMetadata(pathname) {
-  const discoveryNode = 'https://discoveryprovider.audius.co'
-  let discoveryRequestPath
+  if (pathname.startsWith('/scripts')) {
+    return { metadata: null, name: null }
+  }
+
   const route = matchRoute(pathname)
+  if (!route) {
+    return { metadata: null, name: null }
+  }
+
+  let discoveryRequestPath
   switch (route.name) {
     case 'user': {
       const { handle } = route.params
+      if (!handle) return { metadata: null, name: null }
       discoveryRequestPath = `v1/users/handle/${handle}`
       break
     }
     case 'track': {
       const { handle, title } = route.params
+      if (!handle || !title) return { metadata: null, name: null }
       discoveryRequestPath = `v1/tracks?handle=${handle}&slug=${title}`
       break
     }
     case 'playlist': {
       const { handle, title } = route.params
-      discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
+      if (!handle || !title) return { metadata: null, name: null }
+      discoveryRequestPath = `v1/resolve?url=${pathname}`
+      // TODO: Uncomment when by_permalink routes are working properly
+      // discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
       break
     }
     case 'album': {
       const { handle, title } = route.params
-      discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
+      if (!handle || !title) return { metadata: null, name: null }
+      discoveryRequestPath = `v1/resolve?url=${pathname}`
+      // TODO: Uncomment when by_permalink routes are working properly
+      // discoveryRequestPath = `v1/full/playlists/by_permalink/${handle}/${title}`
       break
     }
     default:
-      return null
+      return { metadata: null, name: null }
   }
   try {
     const res = await fetch(`${discoveryNode}/${discoveryRequestPath}`)
     if (res.status !== 200) {
       throw new Error(res.status)
     }
-    const json = res.json()
+    const json = await res.json()
     return { metadata: json, name: route.name }
   } catch (e) {
-    return null
+    return { metadata: null, name: null }
   }
 }
 
-async function injectHead(asset, { title, description, image, permalink }) {
-  const canonicalUrl = `https://audius.co/${permalink}`
-  const tags = `
-    <title>${title}</title>
-    <meta name="description" content="${description}">
+function clean(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+class HeadElementHandler {
+  constructor(pathname) {
+    self.pathname = pathname
+  }
 
-    <link rel="canonical" href="${canonicalUrl}">
+  async element(element) {
+    const { metadata, name } = await getMetadata(self.pathname)
 
-    <meta property="og:title" content="${title}">
-    <meta property="og:description" content="${description}">
+    if (!metadata || !name) {
+      // We did parse this to anything we have custom tags for, so just return the default tags
+      const tags = `<meta property="og:title" content="Audius - Empowering Creators">
+      <meta name="description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators." data-react-helmet="true">
+      <meta property="og:description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators.">
+      <meta property="og:image" content="https://audius.co/ogImage.jpg">
+      <meta name="twitter:title" content="Audius - Empowering Creators">
+      <meta name="twitter:description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators.">
+      <meta name="twitter:image" content="https://audius.co/ogImage.jpg">
+      <meta name="twitter:image:alt" content="The Audius Platform">`
+      element.append(tags, { html: true })
+      return
+    }
+
+    let title, description, ogDescription, image, permalink
+    switch (name) {
+      case 'user': {
+        title = `Stream ${metadata.data.name} on Audius`
+        description = `Play ${metadata.data.name} on Audius | Listen to tracks, albums, playlists on desktop and mobile on Audius.`
+        ogDescription = metadata.data.bio || description
+        image = metadata.data.profile_picture
+          ? metadata.data.profile_picture['1000x1000']
+          : ''
+        permalink = `/${metadata.data.handle}`
+        break
+      }
+      case 'track': {
+        description = `Stream ${metadata.data.title} by ${metadata.data.user.name} on Audius. Listen on desktop and mobile.`
+        title = `${metadata.data.title} | Stream ${metadata.data.user.name}`
+        ogDescription = metadata.data.description || description
+        image = metadata.data.artwork ? metadata.data.artwork['1000x1000'] : ''
+        permalink = metadata.data.permalink
+        break
+      }
+      case 'playlist': {
+        description = `Listen to ${metadata.data[0].playlist_name}, a playlist curated by ${metadata.data[0].user.name} on desktop and mobile.`
+        title = `${metadata.data[0].playlist_name} | Playlist by ${metadata.data[0].user.name}`
+        ogDescription = metadata.data[0].description || ''
+        image = metadata.data[0].artwork
+          ? metadata.data[0].artwork['1000x1000']
+          : ''
+        permalink = metadata.data[0].permalink
+        break
+      }
+      case 'album': {
+        description = `Listen to ${metadata.data[0].playlist_name}, a playlist curated by ${metadata.data[0].user.name} on desktop and mobile.`
+        title = `${metadata.data[0].playlist_name} | Playlist by ${metadata.data[0].user.name}`
+        ogDescription = metadata.data[0].description || ''
+        image = metadata.data[0].artwork
+          ? metadata.data[0].artwork['1000x1000']
+          : ''
+        permalink = metadata.data[0].permalink
+        break
+      }
+      default:
+        return
+    }
+    const tags = `<title>${clean(title)}</title>
+    <meta name="description" content="${clean(description)}">
+
+    <link rel="canonical" href="https://audius.co${permalink}">
+
+    <meta property="og:title" content="${clean(title)}">
+    <meta property="og:description" content="${clean(ogDescription)}">
     <meta property="og:image" content="${image}">
-    <meta property="og:url" content="${canonicalUrl}">
+    <meta property="og:url" content="https://audius.co${permalink}">
 
     <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="${title}">
-    <meta name="twitter:description" content="${description}">
-    <meta name="twitter:image" content="${canonicalUrl}">
-`
-
-  if (typeof asset === 'string' && asset.includes('</head>')) {
-    asset = asset.replace('</head>', tags + '</head>')
+    <meta name="twitter:title" content="${clean(title)}">
+    <meta name="twitter:description" content="${clean(ogDescription)}">
+    <meta name="twitter:image" content=https://audius.co${permalink}">`
+    element.append(tags, { html: true })
   }
-
-  return asset
 }
 
 async function handleEvent(event) {
@@ -182,49 +266,11 @@ async function handleEvent(event) {
     }
 
     const asset = await getAssetFromKV(event, options)
-    let modifiedAsset
-    const { metadata, name } = await getMetadata(pathname)
-    switch (name) {
-      case 'user': {
-        modifiedAsset = injectHead(asset, {
-          title: `${metadata.data.name} (@${metadata.data.name})`,
-          description: metadata.data.bio || '',
-          image: metadata.data.profile_picture['1000x1000'] || '',
-          permalink: metadata.data.handle
-        })
-        break
-      }
-      case 'track': {
-        modifiedAsset = injectHead(asset, {
-          title: `${metadata.data.title} by ${metadata.user.name}`,
-          description: metadata.data.description || '',
-          image: metadata.data.artwork['1000x1000'] || '',
-          permalink: metadata.data.permalink
-        })
-        break
-      }
-      case 'playlist': {
-        modifiedAsset = injectHead(asset, {
-          title: `${metadata.data.playlist_name} by ${metadata.user.name}`,
-          description: metadata.data.description || '',
-          image: metadata.data.artwork['1000x1000'] || '',
-          permalink: metadata.data.permalink
-        })
-        break
-      }
-      case 'album': {
-        modifiedAsset = injectHead(asset, {
-          title: `${metadata.data.playlist_name} by ${metadata.user.name}`,
-          description: metadata.data.description || '',
-          image: metadata.data.artwork['1000x1000'] || '',
-          permalink: metadata.data.permalink
-        })
-        break
-      }
-      default:
-        return null
-    }
-    return modifiedAsset
+
+    const rewritten = new HTMLRewriter()
+      .on('head', new HeadElementHandler(pathname))
+      .transform(asset)
+    return rewritten
   } catch (e) {
     return new Response(e.message || e.toString(), { status: 500 })
   }
diff --git a/packages/web/wrangler.toml b/packages/web/wrangler.toml
index 446acf868c..4fb9bcf564 100644
--- a/packages/web/wrangler.toml
+++ b/packages/web/wrangler.toml
@@ -20,4 +20,10 @@ vars = { ENVIRONMENT = "production", GA = "https://general-admission.audius.co",
 
 [env.production]
 name = "audius"
+vars = { ENVIRONMENT = "production", GA = "https://general-admission.audius.co", SITEMAP = "http://audius.co.s3-website-us-west-1.amazonaws.com" }
+
+# Test environment, replace `test` with subdomain
+# Invoke with npx wrangler preview --watch --env test
+[env.test]
+name = "test"
 vars = { ENVIRONMENT = "production", GA = "https://general-admission.audius.co", SITEMAP = "http://audius.co.s3-website-us-west-1.amazonaws.com" }
\ No newline at end of file

From 42bed41d0d2dd4225c9d7e35e98ea86976c480cb Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Tue, 8 Aug 2023 09:43:03 -0700
Subject: [PATCH 3/3] Update packages/web/scripts/workers-site/index.js

Co-authored-by: Sebastian Klingler <sliptype@gmail.com>
---
 packages/web/scripts/workers-site/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/scripts/workers-site/index.js b/packages/web/scripts/workers-site/index.js
index 72dd240501..5d515f01b1 100644
--- a/packages/web/scripts/workers-site/index.js
+++ b/packages/web/scripts/workers-site/index.js
@@ -137,7 +137,7 @@ class HeadElementHandler {
     const { metadata, name } = await getMetadata(self.pathname)
 
     if (!metadata || !name) {
-      // We did parse this to anything we have custom tags for, so just return the default tags
+      // We didn't parse this to anything we have custom tags for, so just return the default tags
       const tags = `<meta property="og:title" content="Audius - Empowering Creators">
       <meta name="description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators." data-react-helmet="true">
       <meta property="og:description" content="Audius is a music streaming and sharing platform that puts power back into the hands of content creators.">