improve the metadata

[aryanraj2005-me]

Improve social sharing previews by updating OG/Twitter metadata to use the Hodlcoin logo with better title/description. Also suppresses a dev hydration warning and includes small lint/cleanup fixes.

Summary by CodeRabbit

• Refactor

  • Simplified header component by removing wallet integration scaffolding
  • Enhanced matrix effect with improved opacity and alpha calculations
  • Improved theme toggle with internal helper functionality

• Style

  • Updated site branding and metadata (title and description) for better SEO
  • Cleaned up styling with removal of unnecessary decorative elements and comments

• Chores

  • Code organization improvements across configuration and build files

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR encompasses cosmetic cleanup, configuration updates, and minor functional improvements across the website codebase. Changes include CSS comment removal, metadata and branding updates in layout, wallet-related code removal from the header component, improved alpha calculations in the matrix effect hook, and modernization of build configuration through ES module imports.

Changes

Cohort / File(s)	Summary
Cosmetic and configuration cleanup app/globals.css, next.config.ts	Removed CSS comment blocks and placeholder config comments without affecting functional rules or behavior.
Branding and metadata updates app/layout.tsx	Updated site metadata with new branding: changed title/description, set metadataBase to new siteUrl constant, rewrote OpenGraph and Twitter card fields with simplified branding copy, and adjusted hero image dimensions. Added suppressHydrationWarning attribute to body tag.
UI component cleanup app/page.tsx, components/Footer.tsx	Removed decorative glow elements and JSX comments; no changes to functional logic or content structure.
Wallet removal and theme toggling components/Header.tsx, components/toggle-theme.tsx	Removed wallet connection scaffolding and context usage from Header; added internal toggleTheme() helper function to toggle-theme component for theme state management.
Matrix effect enhancement hooks/useMatrixEffect.ts	Introduced per-symbol alpha calculation with baseAlpha and alpha variables; applied alpha to symbol colors and shadows; updated effect dependency array to include opacity parameter.
Build configuration modernization tailwind.config.ts	Replaced CommonJS require() with ES module import for tailwindcss-animate plugin.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• hooks/useMatrixEffect.ts: Review the alpha calculation logic, shadow opacity application, and the expanded dependency array (now depends on opacity in addition to symbolCount) to ensure the visual behavior and performance implications are correct.
• app/layout.tsx: Verify the metadata structure, image URL construction, and the new siteUrl constant application across OpenGraph and Twitter card fields.
• components/Header.tsx: Confirm that wallet-related code removal doesn't break other components or introduce missing functionality.

Possibly related PRs

• feat: improve social media metadata with optimized OG image and enhanced descriptions #12: Modifies OG image paths and metadata in app/layout.tsx, overlapping with this PR's branding updates.
• feat: improve social media metadata with Open Graph and Twitter Cards #11: Directly updates the same metadata fields (Open Graph, Twitter card, metadataBase, title/description) in app/layout.tsx.
• Updated the home page UI #3: Makes overlapping edits across the same files (app/globals.css, app/layout.tsx, app/page.tsx, Footer, Header, toggle-theme, useMatrixEffect).

Suggested reviewers

• Zahnentferner

Poem

🐰 With whiskers twitching, I hop through the code,
CSS comments swept from the road,
Alpha now glows where the matrix once danced,
New branding blooms—what a stylish advance!
Configuration smooth, wallet code gone,
This website refresh hops merrily on. 🌟

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title 'improve the metadata' is vague and does not clearly summarize the main changes. While the PR description mentions metadata improvements, the title lacks specificity about what metadata was improved or why.	Consider a more descriptive title such as 'Update Open Graph and Twitter metadata for better social sharing previews' or 'Improve metadata and suppress hydration warning'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

hooks/useMatrixEffect.ts (1)

73-81: CSS specificity may override inline alpha values.

The .matrix-symbol:nth-child(odd/even) selectors define hardcoded color and text-shadow values that will override the dynamic inline styles set on lines 38-39. CSS class selectors typically have higher specificity than inline styles when applied via className.

Since the inline color and text-shadow are set via style.cssText, they should actually win over class-based rules. However, this creates an inconsistency: the dynamic alpha is applied inline, but if the style block loads after initial render, there could be a flash. Consider removing or commenting out the hardcoded nth-child rules if the dynamic alpha is the intended behavior.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72f97c5 and da137ff.

📒 Files selected for processing (9)

• app/globals.css (0 hunks)
• app/layout.tsx (4 hunks)
• app/page.tsx (2 hunks)
• components/Footer.tsx (0 hunks)
• components/Header.tsx (0 hunks)
• components/toggle-theme.tsx (0 hunks)
• hooks/useMatrixEffect.ts (3 hunks)
• next.config.ts (0 hunks)
• tailwind.config.ts (2 hunks)

💤 Files with no reviewable changes (5)

• app/globals.css
• components/toggle-theme.tsx
• components/Header.tsx
• components/Footer.tsx
• next.config.ts

🧰 Additional context used

🧬 Code graph analysis (1)

app/page.tsx (1)

hooks/useMatrixEffect.ts (1)

• useMatrixEffect (3-94)

🔇 Additional comments (9)

tailwind.config.ts (1)

2-2: LGTM! Clean modernization to ES module imports.

The switch from CommonJS require() to ES module import is the correct approach for TypeScript configs and aligns with modern Next.js conventions.

Also applies to: 97-97

app/page.tsx (2)

10-11: LGTM! Matrix effect parameters look reasonable.

The hero section uses slightly higher opacity (0.2) and symbol count (2) for visual prominence, while the lower section uses subtler values (0.15, 1.5). These align well with the updated alpha calculations in useMatrixEffect.

---

22-23: Decorative glow elements adjusted.

Minor styling tweaks to the decorative pulse elements. No functional concerns.

Also applies to: 98-99

hooks/useMatrixEffect.ts (2)

29-30: Per-symbol alpha calculation looks correct.

The clamping logic ensures alpha stays within valid bounds [0, 1]. The formula provides good visual variation between symbols.

Also applies to: 38-39

---

91-91: Good addition of opacity to the dependency array.

This ensures the effect re-runs when the opacity prop changes, which is necessary for the new alpha calculations to take effect.

app/layout.tsx (4)

8-8: Good use of URL object for consistent URL construction.

Using new URL() ensures proper URL resolution for metadata and avoids string concatenation issues.

---

19-20: Metadata updates align with branding improvements.

The title, description, and OpenGraph/Twitter metadata are now consistent and well-structured for social sharing previews. Good work on the SEO improvements.

Also applies to: 46-49, 61-62

---

98-98: suppressHydrationWarning on body is appropriate for theme providers.

This suppresses the expected hydration mismatch warning caused by next-themes adding a class to the body during client-side hydration. Combined with the same attribute on <html>, this is the standard pattern for theme provider integration.

---

52-55: Verify that the image dimensions match the actual file.

The OpenGraph image is specified as 2000×1730 pixels. Confirm that /public/hodlcoin.png exists and matches these dimensions for optimal social media rendering.