npm package: @rhc-shared-components/chroming
Description: > Vite plugin to inject Red Hat Connect chroming (header and footer) into HTML
Latest version: 1.0.1

# @rhc-shared-components/chroming

> Vite plugin to inject Red Hat Connect chroming (header and footer) into HTML

## Requirements

- Node.js >= 18.0.0
- Vite >= 5.0.0

## Install

```bash
yarn add @rhc-shared-components/chroming
```

## Usage

Add the plugin to your `vite.config.ts`:

```ts
import { defineConfig } from 'vite';
import { chromingPlugin } from '@rhc-shared-components/chroming';

export default defineConfig({
  plugins: [
    chromingPlugin({
      env: 'QA', // 'QA' | 'STAGE' | 'PROD' | 'DEV'
      staticHtmlPath: 'index.static.html', // Optional
      outputHtmlPath: 'index.html' // Optional
    })
  ]
});
```

### Proxy Configuration

**Automatic (Recommended):**
The plugin automatically configures proxy for pre-production environments (QA, STAGE, DEV). No configuration needed!

**Custom proxy:**
```ts
chromingPlugin({
  env: 'QA',
  proxyUrl: 'http://your-proxy.com:3128' // Custom proxy URL
})
```

**Disable proxy:**
```ts
chromingPlugin({
  env: 'QA',
  proxyUrl: '' // Empty string to disable
})
```

**Environment variable (alternative):**
```bash
export HTTP_PROXY=http://squid.corp.redhat.com:3128
yarn build
```

## Configuration Options

| Option                     | Type                                 | Default                          | Description                                                                  |
|----------------------------|--------------------------------------|----------------------------------|------------------------------------------------------------------------------|
| `env`                      | `'QA' \| 'STAGE' \| 'PROD' \| 'DEV'` | `'QA'`                           | Environment to fetch chroming from                                           |
| `proxyUrl`                 | `string`                             | Auto for QA/STAGE/DEV            | Proxy URL for HTTP requests. Auto-set for pre-prod. Empty string to disable. |
| `headerUrl`                | `string`                             | -                                | Custom header URL (overrides env-based URL)                                  |
| `footerUrl`                | `string`                             | -                                | Custom footer URL (overrides env-based URL)                                  |
| `staticHtmlPath`           | `string`                             | `'index.static.html'`            | Path to the static HTML template (relative to project root)                  |
| `outputHtmlPath`           | `string`                             | `'index.html'`                   | Path to the output HTML file (relative to project root)                      |
| `headerCommentPlaceholder` | `string`                             | See below*                       | Header comment placeholder to replace                                        |
| `footerCommentPlaceholder` | `string`                             | See below**                      | Footer comment placeholder to replace                                        |
| `spashipMode`              | `boolean`                            | `process.env.SPASHIP === 'true'` | Enable SPAShip mode (copies static file without fetching chroming)           |

*Default header placeholder: `#include virtual="/.include/chrome/header-authenticated-v3-universal-and-primary-full/header.html"`

**Default footer placeholder: `#include virtual="/.include/chrome/rh-universal-footer/footer.html"`

## How it Works

1. The plugin reads your static HTML template file
2. During build, it fetches the Red Hat Connect header and footer from the configured environment
3. It replaces HTML comment placeholders with the actual header/footer content
4. The processed HTML is written to the output path

## License

MIT © [gautamkrishnar](https://github.com/gautamkrishnar)