feat: display core web vitals results

[danielroe]

Summary by CodeRabbit

• New Features
  • Refactored rendering logic to display performance metrics from different data sources.
  • Introduced conditional rendering based on specific data fields.
  • Updated API calls to fetch Lighthouse and CrUX metrics.
  • Adjusted SEO meta descriptions to reflect data structure changes.
  • Added functionality for sharing Page Speed results for a given domain.
  • Introduced a component for displaying Core Web Vitals metrics with histograms.
  • Implemented a component for dynamically generating favicons based on provided values.
  • Added features for editing and navigating domains.
  • Included components for displaying progress rings and histograms based on available data sources.
  • Integrated loading animations for performance metric tables.

[coderabbitai]

Walkthrough

The changes encompass a significant overhaul of the rendering logic in app.vue to exhibit performance metrics sourced from various origins, updating API calls for Lighthouse and CrUX metrics, and refining meta descriptions. The Lighthouse.vue component now adeptly manages two distinct data structures for progress rings and histograms, dynamically selecting the data source. Additionally, new components like Histogram.vue, TheDomainForm.vue, TheShareLink.vue, CoreWebVitals.vue, LighthouseTable.vue, and composables/favicon.ts have been introduced to enhance functionality.

Changes

File	Change Summary
app.vue	Refactored rendering logic for displaying performance metrics, updated API calls, and adjusted SEO meta descriptions.
components/OgImage/Lighthouse.vue	Updated functionality to handle two data structures (lighthouse and crux) for progress rings and histograms.
components/Histogram.vue	Introduced a new Vue component for displaying dynamic histograms with customizable features.
components/TheDomainForm.vue	Introduced functionality for editing and navigating domains.
components/TheShareLink.vue	Introduced functionality for sharing Page Speed results and providing links for further exploration.
components/graphs/CoreWebVitals.vue	Introduced a component for displaying Core Web Vitals metrics with customizable visualizations.
components/graphs/LighthouseTable.vue	Introduced a Vue component for displaying performance metrics with loading animations.
composables/favicon.ts	Introduced a function for dynamically generating favicons based on provided values.
nuxt.config.ts	Added the components key with specific values to the Nuxt configuration file.

Poem

Code changes dance,
Metrics in a trance,
Rabbit's touch, a new romance,
Progress sings, in a joyful prance! 🐰📊

Note

Pull Request Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://coderabbit.ai

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.