Update web-component example links

[juliawu]

Instead of using lit.dev playgrounds, this PR updates the examples linked to in the web component documentation to a custom-built preview page added in #685.

This allows us to:

• Use the docsite as the source of truth for these examples
• No longer need to depend on external lit.dev hosting our examples
• Puts changes to webcomponent examples under source control.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors how web component examples are presented in the documentation. Instead of directing users to external lit.dev playgrounds, all examples now link to internally hosted custom preview pages. This change centralizes the examples within the documentation site, removes external dependencies, and integrates example code changes directly into version control, streamlining the development and maintenance workflow for these interactive components.

Highlights

• Example Link Migration: Updated web component example links from external lit.dev playgrounds to custom-built internal preview pages.
• Documentation Source of Truth: Ensured the docsite now serves as the primary source for these examples, improving consistency and maintainability.
• Reduced External Dependency: Eliminated reliance on external lit.dev hosting for web component examples.
• Version Control Integration: Brought changes to web component examples under source control, allowing for better tracking and management.

Changelog

• api/web_components/examples/all-charts.md
  • Updated front matter to remove the 'parent' field and consolidate the 'title' field for consistency.
• api/web_components/examples/dynamic-map.md
  • Added a new markdown file to define the custom preview page for the dynamic map web component example.
• api/web_components/examples/line-chart.md
  • Added a new markdown file to define the custom preview page for the line chart web component example.
• api/web_components/examples/map-styles.md
  • Added a new markdown file to define the custom preview page for the map styles web component example.
• api/web_components/index.md
  • Replaced the lit.dev playground link for the line chart example with an internal link to the new custom preview page.
  • Renamed the 'Code Playground Examples' section to simply 'Examples' for clarity.
  • Updated the list of examples to link to the new internal custom preview pages for 'All chart types', 'A dynamically updating map', and 'A styled map'.
  • Replaced the lit.dev playground link for the styling example with an internal link to its custom preview page.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request is a great improvement, moving web component examples from an external service to be hosted within the docsite itself. This enhances maintainability and puts the examples under source control. The changes are mostly correct, but I've found a couple of minor issues in api/web_components/index.md. One of the new links is missing a target=\"_blank\" attribute, leading to inconsistent behavior. Additionally, the link text could be more concise and consistent across the document. My suggestions aim to fix these inconsistencies.

_{Note: Security Review has been skipped due to the limited scope of the PR.}

[gemini-code-assist]

For conciseness and improved readability, this sentence can be shortened.

Suggested change

	See a live version of this example you can play around with
	[here](examples/line-chart.html){: target="_blank"}.
	See a live example [here](examples/line-chart.html){: target="_blank"}.