### Package Installation Commands

Source: https://github.com/jackcarey/web-components/blob/main/packages/can-i-use/README.md

Commands for installing the can-i-use package using different package managers. Supports Deno and NPM via JSR compatibility.

```bash
deno add jsr:@web-components/can-i-use
```

```bash
npx jsr add @web-components/can-i-use
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/doc-templates/pkg-readme.md

This command illustrates how to install the web components package using NPM, leveraging JSR's NPM compatibility. It uses `npx jsr add` to fetch the package.

```bash
npx jsr add @web-components/$name
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/search-dom/README.md

Install the search-dom package for projects using NPM or compatible package managers.

```bash
npx jsr add @web-components/search-dom
```

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

### Storybook Documentation Setup

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/dynamic-template.mdx

Imports necessary Storybook blocks and loads markdown content for documentation. It configures the Storybook meta information and renders the loaded markdown using the Markdown component.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/dynamic-template/README.md?raw";

<Meta title="components/dynamic-template/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Storybook Documentation Setup

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/about/about.mdx

This code configures Storybook to display project documentation. It imports Storybook's Meta and Markdown components and loads the README.md file as raw content to be rendered within the documentation page.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../README.md?raw";

<Meta title="About"/>
<Markdown>{Docs}</Markdown>
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/kbd-click/README.md

Install the kbd-click package into your NPM-compatible project using `npx jsr add`.

```shell
npx jsr add @web-components/kbd-click
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/i-cal/README.md

Install the i-cal package in your Node.js or frontend project using npx.

```bash
npx jsr add @web-components/i-cal
```

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

### Install diff-text for NPM

Source: https://github.com/jackcarey/web-components/blob/main/packages/diff-text/README.md

Provides instructions for installing the diff-text package in an NPM-compatible project, utilizing JSR's NPM compatibility.

```bash
npx jsr add @web-components/diff-text
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/middle-truncate/README.md

Install the middle-truncate package using NPM for Node.js or compatible environments.

```bash
npx jsr add @web-components/middle-truncate
```

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

### Install Mutative via NPM

Source: https://github.com/jackcarey/web-components/blob/main/packages/mutative/README.md

Installs the Mutative package using NPM compatibility for Node.js and other NPM-based projects.

```shell
npx jsr add @web-components/mutative
```

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

### Storybook Documentation Setup

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/middle-truncate.mdx

This snippet demonstrates how to configure Storybook to display documentation for a web component. It imports necessary Storybook blocks like `Meta` and `Markdown`, and loads external markdown files (`.md`) for detailed component documentation.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/middle-truncate/README.md?raw";

<Meta title="components/middle-truncate/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/kbd-click/README.md

Add the kbd-click package to your Deno project using the `deno add` command for easy integration.

```shell
deno add jsr:@web-components/kbd-click
```

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

### Install DynamicTemplate for NPM

Source: https://github.com/jackcarey/web-components/blob/main/packages/dynamic-template/README.md

Shows how to install the DynamicTemplate package for projects using NPM or compatible package managers. This leverages JSR's NPM compatibility.

```bash
npx jsr add @web-components/dynamic-template
```

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

### Install Mutative via NPM

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/mutative.mdx

Installs the Mutative package using NPM compatibility for Node.js and other NPM-based projects.

```shell
npx jsr add @web-components/mutative
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/search-dom/README.md

Add the search-dom package to your Deno project using the deno add command.

```bash
deno add jsr:@web-components/search-dom
```

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

### Storybook Documentation Setup

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/can-i-use.mdx

Configures Storybook to display the README.md documentation for the 'can-i-use' component. It imports Storybook's Meta and Markdown blocks and loads the README file content.

```jsx
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/can-i-use/README.md?raw";

<Meta title="components/can-i-use/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Storybook Documentation Import and Rendering

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/diff-text.mdx

This snippet demonstrates how to import and render markdown documentation within a Storybook environment. It utilizes Storybook's Meta component for metadata and the Markdown component to display content fetched from a raw markdown file. This setup is common for component-level documentation.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/diff-text/README.md?raw";
```

```jsx
<Meta title="components/diff-text/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/doc-templates/pkg-readme.md

This command demonstrates how to add the web components package to a Deno project. It utilizes the `deno add` command to manage dependencies from JSR.

```deno
deno add jsr:@web-components/$name
```

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

### Install Mutative for Deno

Source: https://github.com/jackcarey/web-components/blob/main/packages/mutative/README.md

Adds the Mutative package to a Deno project using the `deno add` command for Deno runtime environments.

```shell
deno add jsr:@web-components/mutative
```

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

### Install diff-text for Deno

Source: https://github.com/jackcarey/web-components/blob/main/packages/diff-text/README.md

Shows the command to add the diff-text package to a Deno project, leveraging JSR for package management.

```bash
deno add jsr:@web-components/diff-text
```

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

### Install Mutative for Deno

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/mutative.mdx

Adds the Mutative package to a Deno project using the `deno add` command for Deno runtime environments.

```shell
deno add jsr:@web-components/mutative
```

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

### Browser Installation (ESM CDN)

Source: https://github.com/jackcarey/web-components/blob/main/packages/kbd-click/README.md

Include the kbd-click component in your web page by adding this script tag, which loads the component from an ESM CDN.

```html
<script src="https://esm.sh/jsr/@web-components/kbd-click" type="module"></script>
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/i-cal/README.md

Add the i-cal package to your Deno project using the deno add command.

```bash
deno add jsr:@web-components/i-cal
```

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

### RSS Feed Component Usage Examples

Source: https://github.com/jackcarey/web-components/blob/main/packages/rss-feed/DOCUMENTATION.md

Demonstrates various ways to use the rss-feed web component, from basic rendering to advanced configurations like lazy loading, sorting, and custom elements.

```HTML
<rss-feed>
    <template>
      <h2><slot name="title"></slot></h2>
    </template>
    <source src="http://example.com/rss/feed">
</rss-feed>
```

```HTML
<rss-feed>
    <template>
      <h2><slot name="title"></slot></h2>
    </template>
    <source src="http://example.com/rss/feed1">
    <source src="http://example.com/rss/feed2">
    <source src="http://some-feed-website.com/rss/feed2">
    <source src="http://news.example.com/rss/global">
</rss-feed>
```

```HTML
<rss-feed loading="lazy">
    <template>
      <h2><slot name="title"></slot></h2>
    </template>
    <source src="http://example.com/rss/feed">
</rss-feed>
```

```HTML
<rss-feed sort-by="author" sort-order="desc">
    <template>
      <h2><slot name="title"></slot></h2>
      <h3><slot name="author"></slot></h3>
      <p><slot name="content"></slot></p>
    </template>
    <source src="http://example.com/rss/feed">
</rss-feed>
```

```HTML
<script src="/path/to/your-rss-element.js"></script>
<rss-feed element="your-rss-item">
    <source src="http://example.com/rss/feed">
</rss-feed>
```

```HTML
<style>
   rss-feed{
     display:contents;
   }
</style>
<ol>
<rss-feed>
   <template>
      <li><slot name="title"></slot></li>
   </template>
   <source src="http://example.com/rss/feed">
</rss-feed>
</ol>
```

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

### Install Signal via NPM

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/signal.mdx

Installs the signal package using NPM compatibility from JSR. This command is used in projects managed by NPM or Yarn for integrating the reactive data object into your development workflow.

```bash
npx jsr add @web-components/signal
```

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

### Install Signal in Browser via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/signal.mdx

Installs the signal package in a web browser using an ESM CDN. This method is suitable for direct browser usage or progressive web applications, allowing immediate access to the reactive data object.

```html
<script src="https://esm.sh/jsr/@web-components/signal" type="module"></script>
```

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

### NPM Usage: Install autoloader package

Source: https://github.com/jackcarey/web-components/blob/main/packages/autoloader/README.md

This command illustrates how to install the autoloader package in an NPM-compatible project using `npx jsr add`. It fetches the package from JSR, making it available for use in Node.js or frontend projects managed by npm or yarn. This is the standard way to integrate the autoloader into your build process.

```bash
npx jsr add @web-components/autoloader
```

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

### DynamicTemplate Component Usage Example

Source: https://github.com/jackcarey/web-components/blob/main/packages/dynamic-template/README.md

Illustrates registering the DynamicTemplate component and setting up DOM elements with templates. It shows how the component selects templates based on data attributes and element IDs, rendering content into custom elements like 'blog-post'.

```html
<template id="simple-blog-post">
    <slot></slot>
</template>

<template id="compact-blog-post" exportparts="heading">
    <heading part="heading">
        <slot name="heading"></slot>
    </heading>
</template>

<main data-dynamic-template="compact">
    <blog-post>
        <h1>Some title</h1>
        <img src="https://example.com/image.png">
    </blog-post>
    <blog-post>
        <h1>Some title 2</h1>
        <img src="https://example.com/image2.png">
    </blog-post>
    <blog-post data-dynamic-template="simple">
        <h1>Some titl3</h1>
        <img src="https://example.com/image3.png">
    </blog-post>
</main>
```

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

### NPM Usage: Install autoloader package

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/autoloader.mdx

This command illustrates how to install the autoloader package in an NPM-compatible project using `npx jsr add`. It fetches the package from JSR, making it available for use in Node.js or frontend projects managed by npm or yarn. This is the standard way to integrate the autoloader into your build process.

```bash
npx jsr add @web-components/autoloader
```

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

### Install Signal in Browser via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/packages/signal/README.md

Installs the signal package in a web browser using an ESM CDN. This method is suitable for direct browser usage or progressive web applications, allowing immediate access to the reactive data object.

```html
<script src="https://esm.sh/jsr/@web-components/signal" type="module"></script>
```

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

### Browser Installation via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/doc-templates/pkg-readme.md

This snippet shows how to include the web components package in a web browser using an ESM CDN. It requires a `<script>` tag with `type="module"` to load the component.

```html
<script src="https://esm.sh/jsr/@web-components/$name" type="module"></script>
```

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

### Install Mutative via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/mutative.mdx

Includes the Mutative library in a web page using an ESM CDN link for browser-based applications.

```html
<script src="https://esm.sh/jsr/@web-components/mutative" type="module"></script>
```

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

### Basic diff-text Usage Example

Source: https://github.com/jackcarey/web-components/blob/main/packages/diff-text/DOCUMENTATION.md

Demonstrates how to use the `diff-text` component with original and changed content spans, showing the rendered output with differences highlighted.

```html
<span id="original">The quick brown fox jumps over the lazy dog.</span>
<span id="changed">The slow blue rabbit jumps over the lazy dog.</span>
<diff-text></diff-text>
```

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

### Install Mutative via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/packages/mutative/README.md

Includes the Mutative library in a web page using an ESM CDN link for browser-based applications.

```html
<script src="https://esm.sh/jsr/@web-components/mutative" type="module"></script>
```

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

### Install DynamicTemplate for Deno

Source: https://github.com/jackcarey/web-components/blob/main/packages/dynamic-template/README.md

Provides the command to add the DynamicTemplate package to a Deno project. This command utilizes the Deno CLI for dependency management.

```bash
deno add jsr:@web-components/dynamic-template
```

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

### Install diff-text in Browser via ESM CDN

Source: https://github.com/jackcarey/web-components/blob/main/packages/diff-text/README.md

Demonstrates how to include the diff-text web component in a browser environment using a script tag that loads from an ESM CDN.

```html
<script src="https://esm.sh/jsr/@web-components/diff-text" type="module"></script>
```

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

### Install Signal in Deno

Source: https://github.com/jackcarey/web-components/blob/main/packages/signal/README.md

Adds the signal package to a Deno project using the `deno add` command. This integrates the reactive data object into your Deno-based applications, ensuring proper dependency management.

```deno
deno add jsr:@web-components/signal
```

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

### Install Signal in Deno

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/utilities/signal.mdx

Adds the signal package to a Deno project using the `deno add` command. This integrates the reactive data object into your Deno-based applications, ensuring proper dependency management.

```deno
deno add jsr:@web-components/signal
```

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

### Storybook Configuration for KBD Click Component

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/kbd-click.mdx

Configures Storybook to display documentation for the 'kbd-click' web component. It imports necessary Storybook blocks and renders the component's README.md file.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/kbd-click/README.md?raw";

<Meta title="components/kbd-click/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### NPM Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/rss-feed/README.md

Install the rss-feed web component using NPM for projects that support Node Package Manager. This command adds the package to your project's node_modules.

```shell
npx jsr add @web-components/rss-feed
```

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

### Install Signal via NPM

Source: https://github.com/jackcarey/web-components/blob/main/packages/signal/README.md

Installs the signal package using NPM compatibility from JSR. This command is used in projects managed by NPM or Yarn for integrating the reactive data object into your development workflow.

```bash
npx jsr add @web-components/signal
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/middle-truncate/README.md

Add the middle-truncate package to your Deno project dependencies.

```bash
deno add jsr:@web-components/middle-truncate
```

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

### Storybook Configuration for i-cal Documentation

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/i-cal.mdx

This snippet configures Storybook to display documentation for the 'i-cal' component. It imports necessary Storybook blocks and loads markdown content from a file.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/i-cal/README.md?raw";
```

```jsx
<Meta title="components/i-cal/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Storybook Configuration and Rendering

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/rss-feed.mdx

This snippet configures Storybook's metadata and renders documentation content, likely from a Markdown file. It imports necessary blocks from Storybook's addon-docs and specifies the title for the documentation page.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/rss-feed/README.md?raw";
```

```jsx
<Meta title="components/rss-feed/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Browser Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/middle-truncate/README.md

Include the middle-truncate web component in your HTML project using an ESM CDN.

```html
<script src="https://esm.sh/jsr/@web-components/middle-truncate" type="module"></script>
```

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

### Storybook Configuration for Search-DOM Documentation

Source: https://github.com/jackcarey/web-components/blob/main/storybook-docs/components/search-dom.mdx

This snippet configures a Storybook documentation page for the 'search-dom' component. It imports necessary Storybook blocks and loads external Markdown documentation content.

```javascript
import { Meta, Markdown } from "@storybook/addon-docs/blocks";
import Docs from "../../packages/search-dom/README.md?raw";

<Meta title="components/search-dom/Documentation"/>
<Markdown>{Docs}</Markdown>
```

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

### Deno Installation

Source: https://github.com/jackcarey/web-components/blob/main/packages/rss-feed/README.md

Add the rss-feed web component to your Deno project dependencies. This command integrates the package into your Deno environment.

```shell
deno add jsr:@web-components/rss-feed
```

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

### autoloader Utility

Source: https://github.com/jackcarey/web-components/blob/main/README.md

The autoloader utility facilitates the dynamic loading of web components from the jackcarey/web-components collection using esm.sh. It simplifies component integration by managing dependencies and imports.

```javascript
import { loadComponent } from '@web-components/autoloader';

// Example usage (assuming a component named 'my-component')
loadComponent('my-component').then(() => {
  const element = document.createElement('my-component');
  document.body.appendChild(element);
});
```

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

### middle-truncate Component

Source: https://github.com/jackcarey/web-components/blob/main/README.md

Truncate text in the middle. This component is designed to shorten long strings by removing characters from the middle, preserving the start and end.

```description
Truncate text in the middle.
```

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

### Import Storybook Addons and Runtime (JavaScript)

Source: https://github.com/jackcarey/web-components/blob/main/docs/index.html

Loads necessary Storybook manager bundles and runtime scripts. These imports enable Storybook's core functionality and integrate various addons.

```javascript
import './sb-manager/globals-runtime.js';
import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
import './sb-addons/links-1/manager-bundle.js';
import './sb-addons/a11y-2/manager-bundle.js';
import './sb-addons/themes-3/manager-bundle.js';
import './sb-addons/docs-4/manager-bundle.js';
import './sb-addons/storybook-5/manager-bundle.js';
import './sb-manager/runtime.js';
```