Homepage redesign

[wackerow]

🎉 🔜

Description

Introduces a revamp to the ethereum.org homepage

Change log

public/images/**

Imported new image assets. Up-res'ed the event placeholder image.

src/

• @chakra-ui/

  • colors.ts and semanticTokens.ts updated to match new token changes. Stepping-stone for upgrading old components to new theme using Tailwind/css tokens
  • Button.ts - Updates solid variant to use new primary-action for background, and white for text

• components/

  • BigNumber/index.tsx - Replaces old stats box GridItem
  • Buttons/SvgButton.tsx - New unique button type, currently placed as own component
  • Chevron/index.tsx - RTL-responsive next and prev arrows (instead of using Right and Left chevrons).
  • Hero/HomeHero/index.tsx - Updated with new theme/design, updated for tailwind
  • Homepage/ - Subdirectory for homepage-specific components and hook logic
    • BentoCard.tsx - Card specifically designed for the homepage BentoBox and card Swiper
    • useBentoBox.ts - Extracted logic and setup for homepage BentoBox
    • useHome.ts - Extracted logic for remainder of homepage tasks
  • icons/*.svg - 1em x 1em SVG icons imported for use throughout the homepage
  • Nav/ - Chevron update; Color mode toggle updates * See TODOs
  • StatsBoxGrid/
    • useStatsBoxGrid.tsx
      • Fetches ETH Price to multiply against total ETH staked, for total USD value securing the network.
      • Replaces node count metric with GrowThePie average tx COST
      • Updates tx COUNT metric to use GrowThePie data
      • Simplifies to new schema where we only have a single value, not a time range array
  • Swiper/index.tsx - Re-usable swiper component built with Swiper, used on homepage for bento cards and RSS post cards
  • ui/
    • Button.tsx - Added lg size, and updated with primary-action color for solid variant
    • card.tsx - Re-usable card components, initialized via shadcn
    • section.tsx - Re-usable section components, templated from card.tsx
    • skeleton.tsx - Re-usable skeleton components, initialized via shadcn, custom added SkeletonLines for variable-line-width multi-line skeletons
  • WindowBox/index.tsx - Re-usable "Window"-style box component with top icon + title-bar, and embedded gradient/shadow styling
  • EventCard.tsx - Updated existing card to accept upgraded image placeholder/fallback
  • MainArticle.tsx - Updates to tailwind
  • Morpher.tsx - Updates to tailwind and usehooks-ts
  • ThemeProvider.tsx - * See TODOs
  • UpcomingEventsList.tsx - Simple removal of unused/deprecated prop

• data/\*\* - Added a couple image URLs; linting

• hooks/useRtFlip.ts - Fixed tw flip class to -scale-x-100

• intl/en/\*\* - Intl string extractions / updates

• api/

  • fetchEthPrice.ts - Added as a non-hook function to fetch ETH price for use in conjunction with Total ETH Staked, to calculate "total value securing Ethereum"
  • fetchGrowThePie.ts - Added fetch to GrowThePie for Tx Count and average Cost across all Ethereum networks
  • fetchPosts.ts - Added for non-XML/RSS feed fetching, currently containing logic for Attestant blog scrape
  • fetchRSS.ts - Added ability to fetch list of RSS feeds
  • fetchTotalEthStaked.ts - Changed return to single value with timestamp
  • fetchTotalValueLocked.ts - Changed return to single value with timestamp

• utils/ -

  • date.ts - Adds isValidDate helper function
  • rss.ts - Adds helper functions to sort, polish and post-process the list of RSS feed data for use by the frontend
  • screen.ts - Adds helper function converting tailwind breakpoint names into pixel number values

• constants.ts - Updated latest constants (rm "ranges", add RSS/feed constants)

• types.ts - Updated with latest types for event/rss/metric changes

• pages/

  • index.tsx <- Core Homepage structure updates
  • learning-tools.tsx - Patched to accommodate updated MainArticle
  • what-is-ethereum.tsx - Patched to accommodate updated txCount data source

• styles/

  • colors.css - Base color palette declarations (no light/dark differentiation)
  • config.ts - Exports the tailwind theme configuration as TS object for use elsewhere
  • docsearch.css - Adjusted for .dark selector * See TODO
  • font.css - Updated to handle black/900 font weight
  • global.css - Extracted new base colors and tokens to other .css files for organization; imported at top.
  • semantic-tokens.css - Named tokens for use in tailwind config, light/dark differentiation here

• package.json/yarn.lock

  • yarn add swiper
  • yarn add -D xml2js @types/swiper @types/xml2js

• tailwind.config.js - Updated with new tokens, and added extend for custom tailwind classes as needed

Removes:

• src/components/CommunityEvents/index.tsx - No longer needed
• src/components/StatsBoxGrid/GridItem.tsx - Now BigNumber component
• src/components/StatsBoxGrid/RangeSelector.tsx - No more ranged data
• src/components/Nav/NextChevron.tsx - Replaced with Chevron components
• src/api/fetchNodes.ts - No longer used, metric replaced with ave tx cost data from GrowThePie
• src/api/fetchTxCount.ts - No longer used, metric replaced with data from GrowThePie

TODO:

• Confirm color mode toggle change cc: @pettinarip
  • ThemeProvider.tsx
  • Nav/useNav.ts
• RTL responsiveness
• String extracted for intl

Preview

• https://deploy-preview-13528--ethereumorg.netlify.app/en/

Additional

"The internet is changing" section 🚧 to be added in separate PR

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	7cc5953
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66dac50641f5c500080b3ee9
😎 Deploy Preview	https://deploy-preview-13528--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 36 (🔴 down 12 from production) Accessibility: 92 (🔴 down 1 from production) Best Practices: 88 (🔴 down 4 from production) SEO: 92 (🔴 down 1 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pettinarip]

@wackerow I see a hydration issue related to the use of react-i18next. I'll create a fix for that on dev and let you know when to get this branch updated.

[pettinarip]

@wackerow

I've tested a bit a few performance aspects. Left some comments.

Nice to have: I think we should try to optimize the external images if possible. There is one in particular that is >3mb. By doing a loading="lazy" I think we reduce the negative impact for the loading time but it would be nice to optimize them at some point.

[pettinarip]

@wackerow for performance reasons (smaller bundle size), I would prefer to go in the direction taken in #13695 where we are just importing the necessary code from the theme. As far as I can see, we only need the screens/breakpoints.

[pettinarip]

Suggested change

	<img src={imgSrc} alt="" />
	<img src={imgSrc} alt="" loading="lazy" />

[pettinarip]

Suggested change

	className="max-w-full object-cover object-center"
	className="max-w-full object-cover object-center"
	loading="lazy"

[corwintines]

Wooo 🎉