### Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/path.md

An example demonstrating how to use the path component.

```APIDOC
### Example Usage

```dart
path(d: 'M10 10 L90 10 L90 90 L10 90 Z', [ 
  // You can add child components here if needed, though path is often self-contained.
])
```
```

--------------------------------

### Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/select.md

A basic example demonstrating how to use the select component.

```APIDOC
## Example Usage

```dart
select(name: 'my-select', [ 
  option(value: '1', child: text('Option 1')),
  option(value: '2', child: text('Option 2')),
  option(value: '3', child: text('Option 3')),
])
```
```

--------------------------------

### pre Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/pre.md

An example demonstrating how to use the pre component with CSS classes.

```APIDOC
## Example Usage

```dart
pre(classes: 'my-pre-class', [
  text('This is preformatted text.'),
])
```
```

--------------------------------

### Example Usage of summary Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/summary.md

An example demonstrating how to use the summary component with its parameters.

```APIDOC
## Example Usage of summary Component

### Description
Shows a basic example of how to use the `summary` component.

### Code
```dart
summary(classes: '...', [
  // ...
])
```
```

--------------------------------

### Polygon Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/polygon.md

An example demonstrating how to use the polygon component.

```APIDOC
## Example Usage

```dart
polygon(points: '100,10 40,180 190,60 10,60 180,180', [ 
  // ...
])
```
```

--------------------------------

### Dialog Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/dialog.md

An example demonstrating how to use the dialog component with its `open` property.

```APIDOC
## Example Usage

```dart
dialog(open: true, [
  // Content of the dialog goes here
  Text('This is a dialog message.')
])
```
```

--------------------------------

### Start Docker Compose

Source: https://github.com/schultek/jaspr/blob/main/apps/dart_quotes_server/README.md

Use this command to start the necessary Docker containers for Postgres and Redis.

```bash
docker compose up --build --detach
```

--------------------------------

### Example Usage of Source Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/source.md

Basic example of how to use the source component with a src attribute.

```dart
source(src: '...')
```

--------------------------------

### Example Endpoint Usage

Source: https://github.com/schultek/jaspr/blob/main/examples/backend_serverpod/example_client/doc/endpoint.md

Demonstrates how to call a specific endpoint method 'hello' on the 'example' endpoint using the client. This pattern is used for invoking server-side logic from the client.

```dart
client.example.hello("world!");
```

--------------------------------

### Fieldset Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/fieldset.md

An example demonstrating how to use the fieldset component.

```APIDOC
## Example Usage

### Description
This example shows a basic usage of the fieldset component.

### Code
```dart
fieldset(name: 'user-details', [
  // Add form elements or other components here
  // For example:
  // input(type: 'text', placeholder: 'First Name'),
  // input(type: 'text', placeholder: 'Last Name')
])
```
```

--------------------------------

### Basic Text Input Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/input.md

A simple example demonstrating how to create a text input element using the `input` component.

```dart
input<String>(type: .text)
```

--------------------------------

### Example Endpoint Usage

Source: https://github.com/schultek/jaspr/blob/main/apps/dart_quotes_server/client/doc/endpoint.md

Demonstrates how to call a specific endpoint method like `hello` on the `example` endpoint. Use the generic format `client.<endpoint>.<method>(...)` for other endpoints.

```dart
// How to use ExampleEndpoint.
client.example.hello("world!");

// Generic format.
client.<endpoint>.<method>(...);
```

--------------------------------

### Ellipse Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/ellipse.md

An example demonstrating how to use the ellipse component.

```APIDOC
## Example Usage

```dart
ellipse(cx: '50%', cy: '50%', rx: '40%', ry: '30%', fill: Colors.blue, stroke: Colors.black, strokeWidth: '2')
```
```

--------------------------------

### col Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/col.md

An example demonstrating how to use the col component.

```APIDOC
## Example Usage

```dart
col(span: 1)
```
```

--------------------------------

### Data File Example (YAML)

Source: https://github.com/schultek/jaspr/blob/main/docs/content/guides/writing_content.mdx

An example of a YAML data file (`faq.yaml`) that can be loaded and used within Jaspr content.

```yaml
- question: What is Jaspr?
  answer: Jaspr is a framework for building web applications in Dart.
- question: How do I get started?
  answer: You can get started by following the [quick start guide](/quick_start).
```

--------------------------------

### Button Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/button.md

An example demonstrating how to use the button component with the autofocus property.

```APIDOC
## Example Usage

```dart
button(autofocus: true, [
  // ... content inside the button
])
```
```

--------------------------------

### Start Serverpod Server with Migrations

Source: https://github.com/schultek/jaspr/blob/main/examples/backend_serverpod/example_server/README.md

Run the Serverpod server and apply any pending database migrations.

```bash
jaspr serve -- --apply-migrations
```

--------------------------------

### Complete Rendering Customization Example

Source: https://github.com/schultek/jaspr/blob/main/docs/content/guides/customizing_rendering.mdx

This example shows how to configure Jaspr for a content site, including loading content from multiple sources, parsing different file types, adding custom components, defining layouts, and setting themes.

```dart
import 'package:jaspr/server.dart';
import 'package:jaspr_content/jaspr_content.dart';
import 'package:jaspr_content/theme.dart';

import 'main.server.options.dart';

void main() {
  Jaspr.initializeApp(options: defaultServerOptions);

  runApp(ContentApp.custom(
    loaders: [
      // Load pages from both the 'content/' directory and github repository.
      FilesystemLoader('content'),
      GitHubLoader(
        '<username>/<repo>',
        accessToken: '...',
      ),
    ],
    // Resolve the same config for all pages.
    configResolver: PageConfig.all(
      dataLoaders: [
        // Load data from the 'content/_data' directory.
        FilesystemDataLoader('content/_data'),
      ],
      // Preprocess files with mustache.
      templateEngine: MustacheTemplateEngine(),
      parsers: [
        // Parse both .html and .md files.
        HtmlParser(),
        MarkdownParser(),
      ],
      extensions: [
        // Create a table of contents.
        TableOfContentsExtension(),
        // Add heading anchors.
        HeadingAnchorsExtension(),
      ],
      components: [
        // Support <Info>, <Warning>, <Error> and <Success> components.
        Callout(),
        // Support zoomable images with captions.
        Image(zoom: true),
        // Add syntax highlighting and copy button to code blocks.
        CodeBlock(),
        // Add a custom <Card> component.
        CustomComponent(
          pattern: 'Card',
          builder: (_, _, child) => Card(child: child),
        ),
      ],
      layouts: [
        // Render content in a docs layout with header and sidebar.
        DocsLayout(
          favicon: 'favicon.ico',
          header: Header(
            title: 'My Docs',
            logo: 'assets/logo.png',
            items: [
              // Support toggling between light and dark mode.
              ThemeToggle(),
              // Show a github button with live stars and forks count.
              GitHubButton(repo: '<username>/<repo>'),
            ]
          ),
          sidebar: Sidebar(groups: [
            // Render sidebar links.
            SidebarGroup(
              links: [
                SidebarLink(text: "Overview", href: '/'),
                SidebarLink(text: "About", href: '/about'),
              ],
            ),
            SidebarGroup(title: 'Get Started', links: [
              SidebarLink(text: "Installation", href: '/get_started/installation'),
              SidebarLink(text: "Quick Start", href: '/get_started/quick_start'),
            ]),
          ]),
        ),
      ],
      // Set custom theme colors.
      theme: ContentTheme(
        primary: ThemeColor(Color('#01589B'), dark: Color('#41C3FE')),
        background: ThemeColor(Colors.white, dark: Color('#0b0d0e')),
      ),
    ),
  ));
}
```

--------------------------------

### Example Footer Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/footer.md

Demonstrates how to use the footer component with custom classes.

```dart
footer(classes: '...', [
  // ...
])
```

--------------------------------

### Example Usage of pre Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/pre.md

Demonstrates how to use the pre component with custom classes.

```dart
pre(classes: '...', [
  // ...
])
```

--------------------------------

### Polyline Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/polyline.md

An example demonstrating how to use the Polyline component with its points attribute.

```APIDOC
## Example Usage

```dart
polyline(points: '10,10 20,20 30,10', [
  // Additional child components can be placed here if needed
])
```
```

--------------------------------

### Body Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/body.md

An example demonstrating how to use the body component with CSS classes.

```APIDOC
## Example Usage

### Description
Shows a basic example of how to instantiate the body component and apply CSS classes.

### Code
```dart
body(classes: 'main-content', [
  // Add your child components here
])
```
```

--------------------------------

### Table Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/table.md

An example demonstrating how to use the table component with classes.

```dart
table(classes: '...', [
  // ...
])
```

--------------------------------

### Rect Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/rect.md

Demonstrates how to use the rect component with basic properties.

```dart
rect(x: '...', [
  // ...
])
```

--------------------------------

### HTML Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/html.md

Example of how to use the html component to create an element with classes.

```dart
html(classes: '...', [
  // ...
])
```

--------------------------------

### h6 Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/h6.md

An example demonstrating how to use the h6 component with CSS classes.

```dart
h6(classes: '...', [
  // ...
])
```

--------------------------------

### Video Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/video.md

Demonstrates how to instantiate the video component with the autoplay property enabled.

```dart
video(autoplay: true, [
  // ...
])
```

--------------------------------

### Start Jaspr Development Server with CLI

Source: https://github.com/schultek/jaspr/blob/main/docs/quick_start.mdx

Navigate to your project directory and use the 'jaspr serve' command to start the development server. This command spins up a local server, typically at localhost:8080, for development purposes.

```shell
cd my_website
jaspr serve
```

--------------------------------

### Progress Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/progress.md

Demonstrates how to instantiate the progress component with a specific value.

```dart
progress(value: 1.0, [
  // ...
])
```

--------------------------------

### Example Sitemap XML Entry

Source: https://github.com/schultek/jaspr/blob/main/docs/dev/static_sites.mdx

An example of a sitemap XML entry showing customized `changefreq` and `priority` attributes for a specific route.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ...
  <url>
    <loc>https://example.com/summary</loc>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  ...
</urlset>
```

--------------------------------

### Example usage of small component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/small.md

Demonstrates how to use the small component with classes and children.

```dart
small(classes: '...', [
  // ...
])
```

--------------------------------

### caption Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/caption.md

An example demonstrating how to use the caption component with CSS classes.

```APIDOC
## Example Usage

### Description
Shows a basic example of how to implement the caption component.

### Code
```dart
caption(classes: 'my-caption', [
  // Add your caption content here
])
```
```

--------------------------------

### Basic Markdown Syntax Example

Source: https://github.com/schultek/jaspr/blob/main/docs/content/guides/writing_content.mdx

Demonstrates standard Markdown syntax for headings, lists, and links.

```markdown
# Heading 1
## Heading 2

- List item 1
- List item 2

[Link text](https://example.com)
```

--------------------------------

### Example Usage of Article Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/article.md

Demonstrates how to use the article component with custom classes.

```dart
article(classes: '...', [
  // ...
])
```

--------------------------------

### Nav Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/nav.md

Demonstrates how to use the nav component with classes and children.

```dart
nav(classes: '...', [
  // ...
])
```

--------------------------------

### Circle Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/circle.md

Demonstrates how to instantiate the circle component with basic properties.

```dart
circle(cx: '...', [
  // ...
])
```

--------------------------------

### Basic Form Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/form.md

Demonstrates how to use the form component with a specified action attribute.

```dart
form(action: '...', [
  // ...
])
```

--------------------------------

### Example Usage of Line Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/line.md

Demonstrates how to instantiate the line component with basic coordinate parameters.

```dart
line(x1: '...', [
  // ...
])
```

--------------------------------

### Example Usage of wbr Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/wbr.md

Demonstrates how to use the wbr component with custom classes.

```dart
wbr(classes: '...')
```

--------------------------------

### Example Usage of strong Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/strong.md

Demonstrates how to use the strong component with classes and children.

```dart
strong(classes: '...', [
  // ...
])
```

--------------------------------

### Audio Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/audio.md

Demonstrates how to use the audio component with the autoplay attribute enabled.

```dart
audio(autoplay: true, [
  // ...
])
```

--------------------------------

### Install Jaspr Agent Skills

Source: https://github.com/schultek/jaspr/blob/main/docs/releases/v/0.23.0.mdx

Installs agent skills for AI code generation tools. Specify the agent with the `--agent` flag. Run again to update skills.

```bash
jaspr install-skills
jaspr install-skills --agent=antigravity
jaspr install-skills -h
```

--------------------------------

### AsyncStatelessComponent Usage

Source: https://github.com/schultek/jaspr/blob/main/docs/api/components/async_components.mdx

Example of implementing an AsyncStatelessComponent with an asynchronous build method.

```APIDOC
## AsyncStatelessComponent

### Description
Allows components to have an asynchronous build method for loading data before rendering.

### Method Signature
```dart
Future<Component> build(BuildContext context)
```

### Example
```dart
class MyAsyncComponent extends AsyncStatelessComponent {

  @override
  Future<Component> build(BuildContext context) async {
    // Simply use "await" inside the build method.
    var data = await loadDataFromDatabase();

    // Renders the component after the data has loaded.
    return MyOtherComponent(data: data);
  }
}
```
```

--------------------------------

### Meter Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/meter.md

Demonstrates basic usage of the meter component by setting its value.

```dart
meter(value: 1.0, [
  // ...
])
```

--------------------------------

### Example Usage of i Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/i.md

Demonstrates how to use the i component with CSS classes and child components.

```dart
i(classes: '...', [
  // ...
])
```

--------------------------------

### Example Usage of figcaption

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/figcaption.md

Demonstrates how to use the figcaption component with CSS classes.

```dart
figcaption(classes: '...', [
  // ...
])
```

--------------------------------

### Example SVG Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/svg.md

Demonstrates how to use the svg component with a viewBox attribute.

```dart
svg(viewBox: '...', [
  // ...
])
```

--------------------------------

### Datalist Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/datalist.md

Demonstrates how to use the datalist component with classes.

```dart
datalist(classes: '...', [
  // ...
])
```

--------------------------------

### dl Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/dl.md

Demonstrates how to use the dl component with custom classes.

```dart
dl(classes: '...', [
  // ...
])
```

--------------------------------

### em Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/em.md

Demonstrates how to use the em component with classes and children.

```dart
em(classes: '...', [
  // ...
])
```

--------------------------------

### Example Usage of Header Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/header.md

Demonstrates how to use the header component with custom classes and children.

```dart
header(classes: '...', [
  // ...
])
```

--------------------------------

### Basic Select Component Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/select.md

An example of how to instantiate the select component with a name attribute and children.

```dart
select(name: '...', [
  // ...
])
```

--------------------------------

### Select a Pre-made Template

Source: https://github.com/schultek/jaspr/blob/main/docs/dev/cli.mdx

Alternatively, you can use the `--template` option to quickly set up a project with a specific configuration, such as the 'docs' template for documentation sites.

```shell
jaspr create --template docs
```

--------------------------------

### Info Callout Example

Source: https://github.com/schultek/jaspr/blob/main/docs/content/components/callout.mdx

Displays a soft blue box with an info icon for informational messages.

```jsx
<Info>This draws attention to useful page information.</Info>
```

--------------------------------

### li Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/li.md

Demonstrates how to use the li component with a 'value' attribute.

```dart
li(value: 1, [
  // ...
])
```

--------------------------------

### Setup Full Document Structure (Server)

Source: https://github.com/schultek/jaspr/blob/main/docs/api/components/document.mdx

Use the main Document() constructor on the server to set up the full document structure with title, meta tags, and body content. This is only available via `package:jaspr/server.dart`.

```dart
void main() {
  runApp(Document(
    title: "My Site",
    meta: {
      "description": "My site description",
    },
    body: div(id: "main", []),
  ));
}
```

--------------------------------

### Example Usage of Jaspr Head Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/head.md

Demonstrates how to use the head component with classes.

```dart
head(classes: '...', [
  // ...
])
```

--------------------------------

### Basic Router Setup

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr_router/README.md

Configure a basic router with a list of routes. Each route maps a path to a component builder.

```dart
import 'pages/home.dart';
import 'pages/about.dart' ;

class App extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return Router(routes: [
      Route(path: '/', builder: (context, state) => Home()),
      Route(path: '/about', builder: (context, state) => About()),
    ]);
  }
}
```

--------------------------------

### Dialog Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/dialog.md

Demonstrates how to use the dialog component by setting its 'open' property to true.

```dart
dialog(open: true, [
  // ...
])
```

--------------------------------

### runApp()

Source: https://github.com/schultek/jaspr/blob/main/docs/api/utils/run_app.mdx

To run your site, use the `runApp` function and provide your root component. This function works both on the client and on the server when you use **static** or **server** mode. On the server, it starts an HTTP server that renders the given component to HTML for every incoming request. On the client, it attaches the given component to the DOM, making your app interactive.

```APIDOC
## runApp()

### Description
Runs your Jaspr site on either the server or the client.

### Usage
Provide your root component to the `runApp` function.

```dart
runApp(MyComponent());
```

### Behavior
- **Server-side**: Starts an HTTP server that renders the component to HTML for each request.
- **Client-side**: Attaches the component to the DOM, enabling interactivity.
```

--------------------------------

### HTML Content Example

Source: https://github.com/schultek/jaspr/blob/main/docs/content/concepts/page_parsing.mdx

Example of direct HTML content that can be parsed by HtmlParser.

```html
<!-- content/page.html -->
<div class="container">
  <h1>Welcome to my site</h1>
  <p>This is a paragraph with <strong>bold text</strong>.</p>
</div>
```

--------------------------------

### Client Entrypoint Setup

Source: https://github.com/schultek/jaspr/blob/main/docs/api/utils/at_client.mdx

Wrap the root ClientApp component in your main.client.dart with a state provider like InheritedComponent to share state between multiple @client components.

```dart
import 'package:jaspr/jaspr.dart';

void main() {
  runApp(
    MyInheritedComponent(
      state: myState,
      child: ClientApp()
    ),
  );
}
```

--------------------------------

### Example Usage of Jaspr Summary Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/summary.md

Demonstrates how to use the summary component with classes and children.

```dart
summary(classes: '...', [
  // ...
])
```

--------------------------------

### Aside Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/aside.md

Demonstrates how to use the aside component with custom classes.

```dart
aside(classes: '...', [
  // ...
])
```

--------------------------------

### optgroup Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/optgroup.md

Demonstrates basic usage of the optgroup component by providing a label and children.

```dart
optgroup(label: '...', [
  // ...
])
```

--------------------------------

### Polyline Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/polyline.md

Demonstrates basic usage of the polyline component by providing the 'points' attribute.

```dart
polyline(points: '...', [
  // ...
])
```

--------------------------------

### Router Usage

Source: https://github.com/schultek/jaspr/blob/main/docs/api/components/router.mdx

A basic example of how to use the Router component with a list of Route definitions.

```APIDOC
## Router Component

### Description

The `Router` component is used to add routing to your website. It takes a list of `Route`s to render based on the current URL.

### Usage

```dart
import 'package:jaspr_router/jaspr_router.dart';

import 'pages/home.dart';
import 'pages/about.dart';

class App extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return Router(routes: [
      Route(path: '/', builder: (context, state) => Home()),
      Route(path: '/about', builder: (context, state) => About()),
    ]);
  }
}
```
```

--------------------------------

### Basic Embed Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/embed.md

A simple example demonstrating how to use the embed component with the required 'src' parameter.

```dart
embed(src: '...')
```

--------------------------------

### Client Entrypoint Setup

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr_serverpod/doc/setup.md

Configure the client-side entrypoint for Jaspr applications. This file initializes the client environment and runs the application. Ensure this file is named `lib/main.client.dart`.

```dart
// The entrypoint for the **client** environment.
//
// The [main] method will only be executed on the client after loading the page.

// Client-specific Jaspr import.
import 'package:jaspr/client.dart';

// This file is generated automatically by Jaspr, do not remove or edit.
import 'main.client.options.dart';

void main() {
  // Initializes the client environment with the generated default options.
  Jaspr.initializeApp(
    options: defaultClientOptions,
  );

  // Starts the app.
  //
  // [ClientApp] automatically loads and renders all components annotated with @client.
  //
  // You can wrap this with additional [InheritedComponent]s to share state across multiple
  // @client components if needed.
  runApp(
    const ClientApp(),
  );
}
```

--------------------------------

### Example Usage of Polygon Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/polygon.md

Demonstrates how to use the polygon component by providing the 'points' attribute and children.

```dart
polygon(points: '...', [
  // ...
])
```

--------------------------------

### Example Usage of s Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/s.md

Demonstrates how to use the s component to render an HTML element with specified classes.

```dart
s(classes: '...', [
  // ...
])
```

--------------------------------

### Server Entrypoint Configuration

Source: https://github.com/schultek/jaspr/blob/main/docs/dev/server.mdx

Configure the server entrypoint in `lib/main.server.dart` by importing necessary Jaspr server modules, initializing the server environment with default options, and calling `runApp` with the root `Document` component.

```dart
// Server-specific Jaspr import.
import 'package:jaspr/server.dart';

// This file is generated automatically by Jaspr, do not remove or edit.
import 'main.server.options.dart';

void main() {
  // Initializes the server environment with the generated default options.
  Jaspr.initializeAll(options: defaultServerOptions);

  // Starts serving the app.
  runApp(
    Document(
      title: 'My Jaspr Website',
      body: MyApp(),
    ),
  );
}
```

--------------------------------

### Dart Sass Example

Source: https://github.com/schultek/jaspr/blob/main/docs/concepts/styling.mdx

Example of a Sass file using Dart Sass, demonstrating basic styling and importing variables from a package.

```scss
@use "package:bootstrap_sass/scss/variables" as bootstrap;

.a {
  color: blue;
}
.c {
  color: bootstrap.$body-color;
}
```

--------------------------------

### Object Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/object.md

Demonstrates how to use the object component with the 'data' property and child components. This is a basic example showing the component's instantiation.

```dart
object(data: '...', [
  // ...
])
```

--------------------------------

### Example Usage of Details Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/details.md

Demonstrates how to use the `details` component with the `open` property set to true.

```dart
details(open: true, [
  // ...
])
```

--------------------------------

### Install Jaspr CLI

Source: https://github.com/schultek/jaspr/blob/main/docs/quick_start.mdx

Install the Jaspr CLI globally using Dart's package manager. This command makes the `jaspr` executable available in your terminal.

```shell
dart pub global activate jaspr_cli
```

--------------------------------

### Install Jaspr CLI as AOT Executable

Source: https://github.com/schultek/jaspr/blob/main/docs/releases/v/0.23.0.mdx

Installs the Jaspr CLI as an Ahead-of-Time (AOT) compiled executable for faster performance. Ensure previous global activations are removed.

```bash
dart install jaspr_cli
```

```bash
dart pub global deactivate jaspr_cli
```

--------------------------------

### Install Jaspr Agent Skills with Explicit Agent

Source: https://github.com/schultek/jaspr/blob/main/docs/dev/ai.mdx

Use this command to install Jaspr agent skills and specify a particular agent directory if auto-detection fails or is not desired.

```bash
jaspr install-skills --agent cursor
```

--------------------------------

### Install Melos Package Manager

Source: https://github.com/schultek/jaspr/blob/main/CONTRIBUTING.md

Install the Melos package manager globally using the Dart SDK. Melos is used to manage dependencies and scripts within the Jaspr project.

```dart
dart pub global activate melos
```

--------------------------------

### Server-Side Fetch Handler Setup

Source: https://github.com/schultek/jaspr/blob/main/docs/design/planned/fetch.md

Sets up handlers for data fetching and actions on the server. Use this to define how your application responds to specific routes.

```dart
void main() {
  runApp(Handler(
    handlers: {
      '/users': Handle.data(loadUsers),
      '/users/new': Handle.action(addNewUser),
    },
    home: App(),
  ));
}

Future<List<User>> loadUsers() {
  return db.users.findAll();
}

Future<void> addNewUser(UserRequest request) async {
  await db.users.add(request.user);
}
```

--------------------------------

### GlobalNodeKey Class

Source: https://github.com/schultek/jaspr/blob/main/docs/api/index.mdx

Get access to the underlying DOM node of a component.

```APIDOC
## GlobalNodeKey Class

### Description
Get access to the underlying DOM node of a component.

### Usage
[Read Docs](/api/utils/global_node_key)
```

--------------------------------

### Example Usage of thead Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/thead.md

Demonstrates how to use the thead component with classes.

```dart
thead(classes: '...', [
  // ...
])
```

--------------------------------

### Basic Router Setup

Source: https://github.com/schultek/jaspr/blob/main/docs/concepts/routing.mdx

Set up the Router component with a list of Route definitions for different paths. This is the foundational step for routing in Jaspr.

```dart
import 'package:jaspr_router/jaspr_router.dart';

import 'pages/home.dart';
import 'pages/about.dart' ;

class App extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return Router(routes: [
      Route(path: '/', builder: (context, state) => Home()),
      Route(path: '/about', builder: (context, state) => About()),
    ]);
  }
}
```

--------------------------------

### Option Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/option.md

Demonstrates basic usage of the option component by providing a label and children. This is a common pattern for creating options in a user interface.

```dart
option(label: '...', [
  // ...
])
```

--------------------------------

### AsyncBuilder Usage

Source: https://github.com/schultek/jaspr/blob/main/docs/api/components/async_components.mdx

Example of using the AsyncBuilder component with an asynchronous builder function.

```APIDOC
## AsyncBuilder

### Description
A component that takes an asynchronous builder function to perform data loading before rendering.

### Parameters
#### builder
- **builder** (Future<Component> Function(BuildContext context)) - Required - An async function that returns a Component.

### Example
```dart
return AsyncBuilder(builder: (context) async {
  // Simply use "await" inside the build method.
  var data = await loadDataFromDatabase();

  // Renders the component after the data has loaded.
  return MyOtherComponent(data: data);
});
```
```

--------------------------------

### Jaspr CSS Grid Layout Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-styling/references/grid.md

Demonstrates how to set up a grid container with template columns, rows, areas, and gap, and how to place a specific content element within the grid.

```dart
css('.grid-container').styles(
  display: .grid,
  gridTemplate: GridTemplate(
    columns: .repeat(2, [.fr(1)]),
    rows: .repeat(3, [.auto]),
    areas: GridAreas([
      'header header',
      'sidebar content',
      'footer footer',
    ]),
  ),
  gap: .all(20.px),
),
css('.content').styles(
  gridPlacement: .area('content'),
)
```

--------------------------------

### @encoder / @decoder Annotation

Source: https://github.com/schultek/jaspr/blob/main/docs/api/index.mdx

Setup encoding and decoding for custom data types.

```APIDOC
## @encoder / @decoder Annotation

### Description
Setup encoding and decoding for custom data types.

### Usage
[Read Docs](/api/utils/at_encoder_decoder)
```

--------------------------------

### u Component Example Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/u.md

Demonstrates how to use the u component with classes and children.

```dart
u(classes: '...', [
  // ...
])
```

--------------------------------

### Setup AssetManager in main.dart

Source: https://github.com/schultek/jaspr/blob/main/docs/content/concepts/assets.mdx

Initialize AssetManager, add its middleware to the server app, and integrate its dataLoader and pageExtension into ContentApp for asset path resolution.

```dart
import 'package:jaspr/server.dart';
import 'package:jaspr_content/jaspr_content.dart';

void main() {
  // 1. Initialize and configure AssetManager.
  final assetManager = AssetManager(
    // The root directory where your assets are located. Usually, this is the same as your content directory.
    directory: 'content',
    // Optional: Configure which properties in your frontmatter contain asset paths.
    dataProperties: {'image', 'meta.thumbnail'},
  );

  // 2. Add middleware to serve assets during development.
  ServerApp.addMiddleware(assetManager.middleware);

  runApp(ContentApp(
    // ...
    dataLoaders: [
      // ...
      // 3a. Process relative asset paths in page data.
      assetManager.dataLoader,
    ],
    extensions: [
      // ...
      // 3b. Process relative asset paths in page content (markdown/html).
      assetManager.pageExtension,
    ],
  ));
}
```

--------------------------------

### th Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/th.md

Demonstrates how to use the th component with an abbreviation attribute.

```dart
th(abbr: '...', [
  // ...
])
```

--------------------------------

### Serve Jaspr Project

Source: https://github.com/schultek/jaspr/blob/main/apps/dart_quotes_server/README.md

Run this command to serve your Jaspr project locally.

```bash
jaspr serve
```

--------------------------------

### tfoot Component Usage Example

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/tfoot.md

Demonstrates how to use the tfoot component with CSS classes.

```dart
tfoot(classes: '...', [
  // ...
])
```

--------------------------------

### Basic a Component Usage

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/a.md

An example demonstrating the basic usage of the 'a' component, requiring at least the `href` property and accepting children components.

```dart
a(href: '...', [
  // ...
])
```

--------------------------------

### Example Usage of td Component

Source: https://github.com/schultek/jaspr/blob/main/packages/jaspr/skills/jaspr-fundamentals/references/html/td.md

Demonstrates how to use the td component with a colspan attribute.

```dart
td(colspan: 1, [
  // ...
])
```