Implement general admission tags/routes in web SSR

packages/discovery-provider/plugins/pedalboard/apps/trending-challenge-rewards/src/main.ts

@@ -10,7 +10,7 @@ const onDemandRun = async (app: App<SharedData>) => {
   const { runNow } = app.viewAppData()
   if (runNow) {
     // Uncomment to also announce to slack
-    // await announceTopFiveTrending(app)
+    await announceTopFiveTrending(app)
     await disburseTrendingRewards(app)
   }
 }

packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useState, useEffect } from 'react'
 
 import { route } from '@audius/common/utils'
-import { Button } from '@audius/harmony'
+import { Button, useTheme } from '@audius/harmony'
 import { matchPath, useLocation } from 'react-router'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { animated, useTransition } from 'react-spring'
@@ -154,6 +154,8 @@ export const AppRedirectPopover = (props: AppRedirectPopoverProps) => {
     decrementScroll()
   }
 
+  const theme = useTheme()
+
   return (
     <>
       {backgroundTransitions.map(({ item, props, key }) => {
@@ -198,11 +200,11 @@ export const AppRedirectPopover = (props: AppRedirectPopoverProps) => {
                                 >
                                   <Button
                                     variant='secondary'
-                                    css={(theme) => ({
+                                    css={{
                                       borderRadius: theme.cornerRadius['2xl'],
                                       color: theme.color.secondary.secondary,
                                       background: theme.color.static.white
-                                    })}
+                                    }}
                                     onClick={onClick}
                                   >
                                     {messages.openInApp}

packages/web/src/components/back-button/BackButton.tsx

@@ -1,4 +1,4 @@
-import { IconCaretLeft, IconButton } from '@audius/harmony'
+import { IconCaretLeft, IconButton, useTheme } from '@audius/harmony'
 
 const messages = {
   goBack: 'Go Back'
@@ -9,10 +9,11 @@ type BackButtonProps = {
 }
 
 export const BackButton = (props: BackButtonProps) => {
+  const theme = useTheme()
   return (
     <IconButton
       {...props}
-      css={(theme) => ({ marginRight: theme.spacing.l })}
+      css={{ marginRight: theme.spacing.l }}
       icon={IconCaretLeft}
       aria-label={messages.goBack}
       color='subdued'

packages/web/src/components/buy-sell-modal/BuySellModal.tsx

@@ -11,7 +11,8 @@ import {
   ModalHeader,
   ModalTitle,
   PlainButton,
-  Text
+  Text,
+  useTheme
 } from '@audius/harmony'
 import { useAppKitState } from '@reown/appkit/react'
 
@@ -23,6 +24,7 @@ import { Screen } from './types'
 export const WALLET_GUIDE_URL = 'https://help.audius.co/product/wallet-guide'
 
 export const BuySellModal = () => {
+  const theme = useTheme()
   const { isOpen, onClose, data } = useBuySellModal()
   const { ticker, initialTab } = data
   const { onOpen: openAddCashModal } = useAddCashModal()
@@ -72,12 +74,12 @@ export const BuySellModal = () => {
             onClick={() => {
               window.open(WALLET_GUIDE_URL, '_blank')
             }}
-            css={(theme) => ({
+            css={{
               position: 'absolute',
               top: theme.spacing.xl,
               right: theme.spacing.xl,
               zIndex: zIndex.BUY_SELL_MODAL + 1
-            })}
+            }}
           >
             {buySellMessages.help}
           </PlainButton>

packages/web/src/components/buy-sell-modal/components/CurrentWalletBanner.tsx

@@ -17,7 +17,8 @@ import {
   LoadingSpinner,
   Skeleton,
   Text,
-  TextLink
+  TextLink,
+  useTheme
 } from '@audius/harmony'
 
 import { appkitModal } from 'app/ReownAppKitModal'
@@ -55,6 +56,7 @@ export const CurrentWalletBanner = ({
 }: {
   inputToken: { mint: string; symbol: string }
 }) => {
+  const { color } = useTheme()
   const { data: currentUser } = useCurrentAccountUser()
   const externalWalletAccount = appkitModal.getAccount('solana')
 
@@ -199,9 +201,9 @@ export const CurrentWalletBanner = ({
                 border='default'
                 alignItems='center'
                 justifyContent='center'
-                css={(theme) => ({
-                  backgroundColor: theme.color.static.staticWhite
-                })}
+                css={{
+                  backgroundColor: color.static.staticWhite
+                }}
               >
                 <WalletIcon size='s' />
               </Flex>

packages/web/src/components/buy-sell-modal/components/InputTokenSection.tsx

@@ -7,7 +7,14 @@ import {
   sanitizeNumericInput,
   formatTokenInputWithSmartDecimals
 } from '@audius/common/utils'
-import { Button, Flex, Text, TextInput, TextInputSize } from '@audius/harmony'
+import {
+  Button,
+  Flex,
+  Text,
+  TextInput,
+  TextInputSize,
+  useTheme
+} from '@audius/harmony'
 
 import { StaticTokenDisplay } from './StaticTokenDisplay'
 import { TokenDropdown } from './TokenDropdown'
@@ -42,6 +49,7 @@ export const InputTokenSection = ({
   onTokenChange,
   hideTokenDisplay = false
 }: InputTokenSectionProps) => {
+  const { spacing } = useTheme()
   const { symbol, isStablecoin } = tokenInfo
   const [localAmount, setLocalAmount] = useState(amount || '')
 
@@ -97,15 +105,15 @@ export const InputTokenSection = ({
           </Flex>
 
           {!hideTokenDisplay && shouldDisplayTokenDropdown ? (
-            <Flex css={(theme) => ({ minWidth: theme.spacing.unit15 })}>
+            <Flex css={{ minWidth: spacing.unit15 }}>
               <TokenDropdown
                 selectedToken={tokenInfo}
                 availableTokens={availableTokens}
                 onTokenChange={onTokenChange}
               />
             </Flex>
           ) : !hideTokenDisplay ? (
-            <Flex css={(theme) => ({ minWidth: theme.spacing.unit15 })}>
+            <Flex css={{ minWidth: spacing.unit15 }}>
               <StaticTokenDisplay tokenInfo={tokenInfo} />
             </Flex>
           ) : null}

packages/web/src/components/collection/CollectionCard.tsx

@@ -7,7 +7,7 @@ import {
   isContentUSDCPurchaseGated
 } from '@audius/common/models'
 import { formatCount, formatReleaseDate } from '@audius/common/utils'
-import { Flex, Skeleton, Text } from '@audius/harmony'
+import { Flex, Skeleton, Text, useTheme } from '@audius/harmony'
 import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg'
 import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg'
 import { pick } from 'lodash'
@@ -75,6 +75,7 @@ export const CollectionCardSkeleton = (
 
 export const CollectionCard = forwardRef(
   (props: CollectionCardProps, ref: Ref<HTMLDivElement>) => {
+    const { typography } = useTheme()
     const {
       id,
       loading,
@@ -168,7 +169,7 @@ export const CollectionCard = forwardRef(
               size='s'
               strength='strong'
               color='subdued'
-              css={(theme) => ({ lineHeight: theme.typography.lineHeight.s })}
+              css={{ lineHeight: typography.lineHeight.s }}
             >
               {isScheduledRelease && releaseDate
                 ? messages.releases(releaseDate)

packages/web/src/components/edit/fields/DatePickerField.tsx

@@ -1,7 +1,7 @@
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react'
 
 import { dayjs } from '@audius/common/utils'
-import { Flex, IconCalendarMonth, Popup, Text } from '@audius/harmony'
+import { Flex, IconCalendarMonth, Popup, Text, useTheme } from '@audius/harmony'
 import cn from 'classnames'
 import { useField, useFormikContext } from 'formik'
 
@@ -71,6 +71,7 @@ type DatePickerProps = DatePickerFieldProps & {
 }
 
 export const DatePicker = (props: DatePickerProps) => {
+  const { color } = useTheme()
   const {
     name,
     label,
@@ -108,11 +109,11 @@ export const DatePicker = (props: DatePickerProps) => {
         ph='l'
         pv='m'
         w='100%'
-        css={(theme) => ({
+        css={{
           '&:hover': {
-            borderColor: theme.color.border.strong
+            borderColor: color.border.strong
           }
-        })}
+        }}
       >
         <div
           ref={anchorRef}

packages/web/src/components/entity/VanityMetrics.tsx

@@ -2,14 +2,15 @@ import { useCallback, MouseEvent } from 'react'
 
 import { useUser } from '@audius/common/api'
 import { ID } from '@audius/common/models'
-import { Text } from '@audius/harmony'
+import { Text, useTheme } from '@audius/harmony'
 
 import { TextLink, TextLinkProps } from 'components/link'
 
 type VanityMetricProps = TextLinkProps
 
 export const VanityMetric = (props: VanityMetricProps) => {
   const { children, onClick, ...other } = props
+  const { spacing } = useTheme()
   const handleClick = useCallback(
     (e: MouseEvent<HTMLAnchorElement>) => {
       e.stopPropagation()
@@ -23,12 +24,12 @@ export const VanityMetric = (props: VanityMetricProps) => {
       size='xs'
       applyHoverStylesToInnerSvg
       noUnderlineOnHover
-      css={(theme) => ({
-        gap: theme.spacing.xs,
+      css={{
+        gap: spacing.xs,
         alignItems: 'center',
         flexWrap: 'nowrap',
         whiteSpace: 'nowrap'
-      })}
+      }}
       onClick={handleClick}
       {...other}
     >

packages/web/src/components/meta-tags/MetaTags.tsx

@@ -30,6 +30,27 @@ export type MetaTagsProps = {
    * Hash ID for OG URL generation (id field from entities)
    */
   hashId?: string
+  /**
+   * Whether to show embed player (for Twitter/Discord)
+   */
+  embed?: boolean
+  /**
+   * URL to the embed player (e.g. /embed/track/xyz?flavor=card&twitter=true)
+   */
+  embedUrl?: string
+  /**
+   * Deep link URL for mobile apps (e.g. audius://track/xyz)
+   */
+  appUrl?: string
+  /**
+   * Web URL for the current page (e.g. https://audius.co/track/xyz)
+   */
+  webUrl?: string
+  /**
+   * Whether the image shows as a small thumbnail version.
+   * Controls twitter:card type (summary vs summary_large_image)
+   */
+  thumbnail?: boolean
 }
 
 /**
@@ -67,7 +88,12 @@ export const MetaTags = (props: MetaTagsProps) => {
     structuredData,
     noIndex = false,
     entityType,
-    hashId
+    hashId,
+    embed = false,
+    embedUrl,
+    appUrl,
+    webUrl,
+    thumbnail = true
   } = props
 
   const formattedTitle = title
@@ -77,6 +103,13 @@ export const MetaTags = (props: MetaTagsProps) => {
   // Generate OG URL if entity type and hash ID are provided
   const ogUrl = generateOgUrl(entityType, hashId)
 
+  // Determine twitter card type based on thumbnail and embed settings
+  const getTwitterCardType = () => {
+    if (thumbnail) return 'summary'
+    if (embed && embedUrl) return 'player'
+    return 'summary_large_image'
+  }
+
   return (
     <>
       {/* noIndex */}
@@ -124,18 +157,68 @@ export const MetaTags = (props: MetaTagsProps) => {
         </Helmet>
       ) : null}
 
+      {/* Image dimensions for non-thumbnail images */}
+      {image && !thumbnail ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='og:image:width' content='1000' />
+          <meta property='og:image:height' content='1000' />
+        </Helmet>
+      ) : null}
+
       {imageAlt ? (
         <Helmet encodeSpecialCharacters={false}>
           <meta name='twitter:image:alt' content={imageAlt} />
           <meta name='og:image:alt' content={imageAlt} />
         </Helmet>
       ) : null}
 
+      {/* OG Type and Twitter Card */}
       <Helmet encodeSpecialCharacters={false}>
         <meta property='og:type' content='website' />
-        <meta name='twitter:card' content='summary' />
+        <meta name='twitter:card' content={getTwitterCardType()} />
       </Helmet>
 
+      {/* Twitter Player (for embeds) */}
+      {embed && embedUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta name='twitter:player' content={embedUrl} />
+          <meta name='twitter:player:width' content='480' />
+          <meta name='twitter:player:height' content='480' />
+        </Helmet>
+      ) : null}
+
+      {/* Twitter App Links */}
+      {appUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta name='twitter:app:name:iphone' content='Audius Music' />
+          <meta name='twitter:app:id:iphone' content='1491270519' />
+          <meta name='twitter:app:url:iphone' content={appUrl} />
+          <meta name='twitter:app:name:ipad' content='Audius Music' />
+          <meta name='twitter:app:id:ipad' content='1491270519' />
+          <meta name='twitter:app:url:ipad' content={appUrl} />
+          <meta name='twitter:app:name:googleplay' content='Audius Music' />
+          <meta name='twitter:app:id:googleplay' content='co.audius.app' />
+          <meta name='twitter:app:url:googleplay' content={appUrl} />
+        </Helmet>
+      ) : null}
+
+      {/* Farcaster Frame */}
+      {webUrl ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='fc:frame' content='vNext' />
+          <meta property='fc:frame:image:aspect_ratio' content='1:1' />
+          <meta property='fc:frame:button:1' content='Listen on Audius!' />
+          <meta property='fc:frame:button:1:action' content='link' />
+          <meta property='fc:frame:button:1:target' content={webUrl} />
+        </Helmet>
+      ) : null}
+
+      {webUrl && image ? (
+        <Helmet encodeSpecialCharacters={false}>
+          <meta property='fc:frame:image' content={image} />
+        </Helmet>
+      ) : null}
+
       {structuredData ? (
         <Helmet encodeSpecialCharacters={false}>
           <script type='application/ld+json'>