feat: media (#899)

* remove bootstrap dropdown from language selector

* replace header-list bootstrap styles

* add navigation menu

* Migrate tinaCMS to /media

* linted files

* fix middleware redirects

* update zod package

* fix light mode

* update footer and header styles

* update pnpm lock

* add mobile nav

* make light/dark mode independent of bootstrap

* remove extra classes

* scan ui-chrome dir for tailwind

* tidy style for read pages

* align listen with read

* add Google Analytics with Cookie Consent

* use Link

* link vercel deployment

* Trigger media app deployment

* set vercel build commands

* set vercel build commands

* rm manual vercel settings

* bump package version

* bump package name

* bump package name

* update build URL

* fix: type errors

* feat: implement locale message loading with fallback to English

* fix: update import path for English locale messages

* fix: correct import path for locale messages in request configuration

* refactor: simplify type annotations and improve filter logic in podcast data and Tina fields

* refactor: enable dynamic parameters and streamline static parameter generation in podcast and post pages

* refactor: move episode URL generation to client-side state for improved dynamic handling

* refactor: replace dynamic import of AudioPlayer with direct import for improved performance

* refactor: enhance error handling in podcast RSS functions for improved robustness

* refactor: enforce dynamic rendering for episode pages to improve performance

* fix: do not run "build" task for "test"; update snaps

* Fix locale setting/loading for "media"; extract messages loader w/ fallback to shared helper

* Fix rewrites & redirects for "multi-zone" usage of media app from inside web; fixed links and locale passing

* Add redirect from /admin to TinaCMS admin panel

* chore: trigger deploy

* Update Solana Bench post with new date and content enhancements, including clearer formatting and expanded call to action for open-sourced research funding.

* Enhance Solana Bench post with updated content, improved formatting, and a stronger call to action for research funding.

* Refactor table styles in media CSS for improved responsiveness and visual consistency, including border adjustments and mobile-friendly layouts.

* Enhance image handling in prose content by ensuring full-width display and improved responsiveness. Update MDX components to utilize figure and figcaption for better semantic structure and styling.

* Update PostClientPage component to enhance padding for better layout responsiveness in CTA and full-width content sections.

* Remove deprecated post on using components in Markdown, streamlining content management and eliminating outdated information.

* Update PostsClientPage to make featured post title clickable by wrapping it in a Link component, enhancing user navigation.

* Enhance PodcastShowClientPage by formatting the latest episode title to include the publication date, improving user experience and information clarity.

* Update podcast descriptions for improved clarity and engagement, highlighting key themes and topics for each show.

* Update AudioPlayer component to change waveform background and progress overlay colors to a more transparent white, enhancing visual clarity.

* Refactor AudioPlayer component for improved layout and accessibility, including adjustments to padding, font sizes, and button dimensions for a more streamlined user experience.

* Update AudioPlayer component to adjust title font size and progress indicator opacity for improved visibility and user experience.

* Add back navigation button to PodcastShowClientPage for improved user navigation

* Refactor layout of PodcastShowClientPage and EpisodeClientPage to standardize max-width and improve spacing for better visual consistency.

* Update Media App Deployment Guide and Migration Documentation to reflect new routing structure and deployment URLs, including changes from  to  and , ensuring accurate guidance for developers and users.

* Add Markdown files to ESLint configuration for improved linting coverage

* Remove deprecated block components and associated schemas from the media app, including Callout, Content, Features, Hero, Testimonial, and the Page collection, to streamline the codebase and improve maintainability.

* Remove ClientPage and associated Page component from the media app to streamline the codebase and eliminate unused code.

* Refactor video and stats block components to use updated type definitions, enhancing type safety and maintainability. Update GraphQL query name for clarity.

* Implement error handling in post and static params queries to ensure build stability and provide fallback metadata. This enhances resilience during server unavailability.

* Remove header and footer schemas from global collection in media app to streamline configuration and improve maintainability.

* chore: trigger deploy

* chore: update package manager to pnpm@10.15.1 in media app

* Update tina-lock.json to ensure consistency in schema version and collection definitions for the media app.

* Update image links in multiple case study posts to remove width parameters for improved responsiveness and consistency across the media app.

* Enhance podcast filtering and grouping in the media app. Exclude featured podcasts from the list, and implement grouping by "Solana Foundation" status. Update podcast metadata to include "Solana Foundation" tags for better categorization.

* Refactor podcast display logic to feature the latest podcast instead of a featured one. Update filtering and grouping mechanisms accordingly, ensuring the latest episode is prioritized in the UI. Adjust related metadata and titles for consistency.

* Update podcast UI components for consistency and clarity. Change "Latest Podcast" label to "Featured Podcast" and remove unnecessary border styles from episode and podcast cards. Update author avatars to specific images for better representation.

* Add drag-and-seek functionality to audio player component

Enhance the audio player by implementing drag-and-seek capabilities for the progress bar. Introduce state management for dragging and progress tracking, allowing users to seek through audio by dragging the progress indicator. Update progress handling to ignore updates during dragging, ensuring a smooth user experience. Refactor related event handlers and progress calculations for improved performance and responsiveness.

* Add podcasts section to localization files and update navigation links

Introduce a new "Podcasts" section in the localization files for both media and web applications, providing titles and descriptions for podcasts. Update navigation links in the community header list and mobile menu to include routes for podcasts, ensuring users can easily access podcast content. This enhances the overall user experience by integrating podcasts into the existing navigation structure.

* Increase maximum width of content containers in PostClientPage for improved layout and readability

* Refactor podcast UI components to remove unnecessary rounded styles from image containers, enhancing visual consistency across the application.

* Update redirects in rewrites-redirects.mjs to point to new Solana network upgrades articles, with a TODO for future updates.

* Refactor image component structure in mdx-components.tsx to improve semantic markup and styling consistency. Replace <figure> and <figcaption> with <span> elements for better layout control and maintainability.

* Enhance paragraph and image rendering in mdx-components.tsx for improved semantic HTML. Introduce conditional rendering for paragraphs containing only block-level content, and refactor image component to use <figure> and <figcaption> for better accessibility and structure.

* Integrate Sentry for error tracking in media app

Add Sentry configuration to the Next.js application for improved error monitoring and reporting. Update package.json to include the @sentry/nextjs dependency and refactor next.config.ts to utilize withSentryConfig, ensuring proper integration with Sentry's services.

* Revert "Enhance paragraph and image rendering in mdx-components.tsx for improved semantic HTML. Introduce conditional rendering for paragraphs containing only block-level content, and refactor image component to use <figure> and <figcaption> for better accessibility and structure."

This reverts commit d588b21.

* Add NEXT_PUBLIC_MAIN_SITE_URL to .env.example for environment configuration

Update the .env.example file to include a new environment variable, NEXT_PUBLIC_MAIN_SITE_URL, enhancing the configuration options for the media application.

* Update environment configuration and localization paths in media app

- Add `NEXT_PUBLIC_MAIN_SITE_URL` to `.env.example` for production navigation.
- Enhance `DEPLOYMENT.md` with details on required environment variables for production.
- Update README to reference `.env.example` for environment variable setup.
- Correct localization import paths in `layout.tsx` and `request.ts` for consistency.
- Refactor footer and community header components to use `Link` instead of `InlineLink` for improved navigation.

* Refactor Google Tag Manager integration in media app

- Remove Google Tag Manager noscript fallback from layout.tsx for cleaner code.
- Move GTM noscript fallback to GTMTrackingSnippet component for better organization and maintainability.
- Update comments for clarity regarding GTM functionality.

* Update link text in PostsClientPage for clarity

* Update middleware to refine i18n routing exclusions

- Modify middleware to skip i18n for additional proxied paths: /news, /podcasts, and /media-assets.
- Update comments for clarity on the purpose of the routing exclusions.
- Adjust matcher configuration to reflect the new exclusions for better middleware handling.

* Enhance sitemap configuration to include media app URLs

- Integrate functions to fetch media app post and podcast URLs, replacing the old Builder post model.
- Update the sitemap generation logic to include these new media URLs alongside existing builder and template URLs.
- Remove the "post" model from URL fetching as news URLs are now sourced from the media app.

---------

Co-authored-by: Rodrigo Pombo <pombopombopombo@gmail.com>
Co-authored-by: Emil Kashkevich <emil.kashkevich@gmail.com>

Author: 3 people

.prettierignore

@@ -8,4 +8,8 @@ apps/web/content/**/meta.json
 
 # Ignore RPC docs to prevent formatting issues with custom codehike annotations
 apps/web/content/docs/*/rpc/**
+
+# Ignore TinaCMS auto-generated files
+apps/media/tina/tina-lock.json
+apps/media/tina/__generated__
 .claude/

apps/media/.env.example

@@ -0,0 +1,15 @@
+# TinaCMS Configuration
+NEXT_PUBLIC_TINA_CLIENT_ID=
+TINA_TOKEN=
+NEXT_PUBLIC_TINA_BRANCH=main
+TINA_SEARCH_INDEXER_TOKEN=
+
+# Local development mode (set to true to skip cloud)
+TINA_PUBLIC_IS_LOCAL=true
+
+# Cross-app navigation
+# Set this to the main site URL so header/footer links navigate correctly
+# Production: https://solana.com
+# Preview: https://solana-com-git-[branch].vercel.app
+# Local dev: http://localhost:3000
+NEXT_PUBLIC_MAIN_SITE_URL=https://solana.com

apps/media/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# TinaCMS
+tina/__generated__
+

apps/media/.nvmrc

@@ -0,0 +1,2 @@
+22
+

apps/media/.prettierignore

@@ -0,0 +1,45 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Testing
+coverage
+
+# Next.js
+.next
+out
+build
+
+# Production
+dist
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env*.local
+.env
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# TinaCMS
+tina/__generated__
+tina/tina-lock.json
+
+# Lock files
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+

apps/media/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "overrides": [
+    {
+      "files": "*.mdx",
+      "options": {
+        "printWidth": 100,
+        "proseWrap": "preserve"
+      }
+    }
+  ]
+}
+