feat: update google seo preview

[tobimori]

Summary by CodeRabbit

• New Features

  • Google search preview now displays site favicon, site name header, and improved breadcrumb-based URL formatting.
  • Slack preview now includes favicon display with an image toggle button for attached preview images.

• Improvements

  • Enhanced light and dark color theme support across all preview components for better visual consistency.
  • Refined default preview type selection behavior.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The changes introduce light-dark theme support across SEO preview components (Facebook, Google, Slack), redesign Google search preview with breadcrumbs and site information display, enhance Slack preview with favicon and image toggle functionality, refactor internal variable names in the loader utility, and adjust default type initialization logic.

Changes

Cohort / File(s)	Summary
Theming & Color Updates index.css, src/components/previews/facebook-preview.vue, src/components/previews/slack-preview.vue	Replace hard-coded color values with light-dark(...) expressions to support light and dark mode variants across Facebook and Slack preview components and global styles.
Google Preview Redesign src/components/previews/google-preview.vue	Add ogSiteName prop, introduce computed pathname and domain values, rework URL handling with breadcrumbs logic, redesign template layout with favicon and site header, update headline from h2 to h3, and substantially overhaul styling for new header-based structure.
Slack Preview Enhancement src/components/previews/slack-preview.vue	Add ref import and domain computed property, introduce showImage reactive toggle, integrate favicon display from Google's favicon service, add image toggle button for ogImage, expand CSS with new favicon and toggle button styles.
Internal Refactoring index.js	Rename internal helper function C to S and update parameter names within the module without altering runtime behavior or external API.
Default Type Initialization src/sections/seo-preview.vue	Replace localStorage-driven fallback with explicit "google" default and add logic to set type from first available option on successful load if no stored value exists.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The diff contains mixed complexity: multiple files with repetitive theming updates (low cognitive load), Google preview's moderate redesign with new prop and computed properties, Slack preview's moderate enhancement with favicon integration and image toggle, and simple internal refactoring. Heterogeneous changes across different components require separate reasoning for the redesigns while the theming updates follow a consistent pattern.

Poem

🐰 Hops through themes of light and dark,
Google breadcrumbs leave their mark,
Slack's new favicon shines so bright,
Previews dance from day to night!
Color flows where light-dark plays, ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch releases/v2

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a8fa2d6 and 69efe40.

📒 Files selected for processing (6)

• index.css (1 hunks)
• index.js (1 hunks)
• src/components/previews/facebook-preview.vue (4 hunks)
• src/components/previews/google-preview.vue (2 hunks)
• src/components/previews/slack-preview.vue (3 hunks)
• src/sections/seo-preview.vue (2 hunks)

---

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.}