Fix missing social media preview images #7957
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* add production workflow (#32) * configure endpoints (#28) * [DEV-4354] auto-deploy to dev.bapp.juiceswap.xyz (#3) * [DEV-4354] auto-deploy to dev.bapp.juiceswap.xyz * [DEV-4354] update workflow variables * [DEV-4354] remove purge CDN endpoint step * improvements * update api endpoint * [NO-TASK]: Fetch token data --------- Co-authored-by: Patrick <[email protected]> Co-authored-by: Daniel Padrino <[email protected]>
* add production workflow (#32) * configure endpoints (#28) * [DEV-4354] auto-deploy to dev.bapp.juiceswap.xyz (#3) * [DEV-4354] auto-deploy to dev.bapp.juiceswap.xyz * [DEV-4354] update workflow variables * [DEV-4354] remove purge CDN endpoint step * improvements * update api endpoint * [NO-TASK]: Fetch token data * Select but dont work (#39) * Fix TypeScript errors in token selector and currency info * progress * fix: resolve all TypeScript and linting errors - Fix type mismatch in TokenSelectorSwapList by casting activeAccountAddress to Address type - Remove invalid requestId property from useCheckApprovalQuery UseQueryResult - Fix params type handling in queryFn to prevent undefined parameter error - Remove unnecessary conditionals and unused variables in useCommonTokensOptionsWithFallback - Remove unused commonTokenOptionsError variable in TokenSelectorSwapList - Fix unused parameter in UniswapApiClient by prefixing with underscore - Remove unused data and error variables from useCommonTokensOptions destructuring - Remove unused error variable in TokenSelectorSwapList - Apply Prettier formatting to all modified files * Force testnet mode and block mainnet chains (#42) * feat: Force testnet mode to always be enabled - Set testnet mode to true by default in settings slice - Modified setIsTestnetModeEnabled action to always set true - Removed TestnetsToggle component from Settings menu - Deleted unused TestnetsToggle.tsx file - Removed all calls to disable testnet mode on disconnect - Updated E2E tests to reflect always-enabled testnet mode - Cleaned up unused imports and dispatch references This ensures testnet mode cannot be disabled by users. * feat: Block all mainnet chains from chain selector - Modified getEnabledChains to always filter out non-testnet chains - Changed default chain to always be Sepolia regardless of settings - Ensures only testnet chains are available in chain selector - Fixed linting issues with unused variables This prevents users from selecting any mainnet chains. --------- Co-authored-by: Daniel Padrino <[email protected]> --------- Co-authored-by: Patrick <[email protected]> Co-authored-by: Daniel Padrino <[email protected]>
More tx building (#53) * Tx building improvements * Building TX [NO-TASK]: Fix metamask not triggering (#50) Feature/building tx and approvals (#49) * [NO-TASK]: Building tx and aprovals * [NO-TASK]: Fix linting errors Add api.juiceswap.xyz to production CSP [NO-TASK]: Compute transaction client side (#48) fix: Use only JuiceSwap API endpoint (#47) - Remove duplicate REACT_APP_CUSTOM_QUOTE_API_URL entries - Use only https://dev.api.juiceswap.xyz as the API endpoint - Remove unused localhost and bapp.juiceswap.xyz API URLs feat: Remove DownloadWalletCard and Rive animations from landing page (#46) - Remove DownloadWalletCard component from AppsOverview section - Delete all Rive animation related files and setup - Clean up unused imports and dependencies - Reorganize card layout in AppsOverview section feat: Set WETH/USDC as default tokens and improve UI (#45) * feat: Set WETH/USDC as default tokens and improve UI - Set WETH as default input token on Sepolia - Set USDC as default output token on Sepolia - Remove 'Get Support' button from error boundary - Temporarily disable Rive animation to fix React hooks error * fix: Properly handle Rive animation with lazy loading - Create separate RiveAnimation component - Use React lazy loading and Suspense - Fix React hooks error by ensuring proper component mounting - Animation now loads correctly without SSR issues
- Add new 1200x630_JuiceSwap_Preview.png image file - Update metatags.ts to use JuiceSwap preview image URL instead of Uniswap - Maintains consistent branding across social media shares
- Changed GitHub, X/Twitter and Telegram icon hover colors from individual colors to unified Citrea yellow (#F7911A) - Aligns with button styling and brand colors
- Add fallback to English when browser locale is not mapped - Add defensive check with optional chaining in StatCard component - Prevents TypeError when accessing undefined locale properties
- Added optional chaining for languageInfo.displayName - Fixes TypeError when opening settings menu
- Changed hero title from "Swap anytime, anywhere" to "Squeeze the market. Swap with Juice." - Updated hero subtitle to "Your Swap Hub on Citrea" - Modified landing text to highlight Uniswap V3 fork on Citrea - Changed call-to-action from "world's largest DEX" to "juiciest DEX" - Updated protocol description to focus on Citrea ecosystem - Reduced hero title font size for better visual balance
* feat: configure trade routing to use V3 pools only by default - Set V3 as the only default protocol option - Disable V4 hook pools by default - Remove Default toggle from trade routing settings UI - Clean up unused imports and functions * fixes --------- Co-authored-by: lapatric <[email protected]>
* feat: add custom crypto token backgrounds for landing page - Added Bitcoin, Citrea, Citrus Dollar, and JuiceSwap token images - Updated token cloud to display custom branded tokens - Replaced default tokens with JuiceSwap ecosystem tokens * feat: remove price information from token cloud ticker - Removed price percentage display from token hover state - Removed DeltaArrow component and price query - Token cloud now shows only token symbols for cleaner UI * feat: add custom navigation for Citrea token - Clicking on Citrea token now opens citrea.xyz in new tab - All other tokens maintain default navigation to token details * remove juicewap token from background --------- Co-authored-by: lapatric <[email protected]>
* feat: add Brand Assets link to footer - Added Brand Assets link next to Privacy Policy in footer - Links to JuiceSwap documentation media kit on GitHub - Uses existing translation key for Brand Assets text * fix code quality checks --------- Co-authored-by: lapatric <[email protected]>
* feat: remove footer navigation sections - Removed Products, Protocol, Company sections from footer - Removed Need Help section - Kept only social media icons, copyright and privacy policy - Simplified footer layout for cleaner design * fix code quality checks --------- Co-authored-by: lapatric <[email protected]>
* feat: add FAQ section to landing page - Add expandable FAQ section as third item in "Explore the Universe" - Include two initial questions about Juice Token and new FAQ additions - Questions are clickable and expand to show answers - Add separator lines between FAQ items for clarity - Update translations with English FAQ content * feat: add URL parameter navigation to FAQ questions - Support direct links to specific FAQ questions via ?faq=question_id - Automatically open and scroll to FAQ when accessed via direct link - Multiple retry attempts ensure reliable scrolling on all loading conditions - URLs: ?faq=Is_there_a_juice_Token and ?faq=When_will_new_questions_be_added_to_the_FAQ * improvements * add copy links for faq --------- Co-authored-by: lapatric <[email protected]>
- Added og:image, og:title, og:description meta tags - Added Twitter Card meta tags - Uses JuiceSwap preview image for better branding - Fixes missing social media preview thumbnails
Per Twitter/X documentation, Twitter Card tags should use 'name' attribute
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Problem
The website was missing social media preview images (Open Graph tags) when sharing links on platforms like Twitter, Facebook, LinkedIn, etc. The Cloudflare Functions that were supposed to inject these tags were not working properly in production.
Solution
Added the meta tags directly to the index.html file including:
/images/1200x630_JuiceSwap_Preview.pngTest Plan