Ward Yacht Sales — Embeddable Header Component

A lightweight, framework-agnostic <ward-header> web component that can be dropped into any website — Wix, WordPress, plain HTML, etc.

Quick Start

<ward-header></ward-header>
<script src="https://your-cdn.com/ward-header.js"></script>

That's it. No build step required on the consumer side.

Project Structure

global-header/
├── src/
│   ├── ward-header.js      # Source web component
│   └── WardHeader.svelte   # SvelteKit SSR-safe wrapper
├── dist/
│   └── ward-header.js      # Built bundle (~13 KB)
├── build.js                 # Zero-dep Node build script
├── demo.html                # Local demo page
└── package.json

Build

npm run build        # outputs dist/ward-header.js

No dependencies required — the build script uses plain Node.

Attributes

| Attribute | Default | Description | |------------|----------------------------------------|-------------------------| | base-url | https://www.wardyachtsales.com | Base URL for all links |

Embedding on Wix

Option A: Custom HTML Embed (simplest)

1. In the Wix Editor, add an "Embed Code" → "Custom Element" widget
2. Set the tag name to ward-header
3. Set the script URL to your hosted dist/ward-header.js

Option B: Wix HTML iframe embed

1. Add "Embed Code" → "Embed HTML" block
2. Paste:

<ward-header></ward-header>
<script src="https://your-cdn.com/ward-header.js"></script>

Option C: Wix Velo (code)

In your page's code:

// In masterPage.js or a page file
$w.onReady(function () {
  $w('#htmlEmbed1').postMessage('load');
});

With the HTML embed containing the <ward-header> tag and script.

CDN hosting: Upload dist/ward-header.js to any static host (GitHub Pages, Cloudflare Pages, Netlify, S3 + CloudFront, or Wix's own media manager). Use the public URL as the script src.

Embedding in SvelteKit

Option 1: Direct script tag (simpler)

In your app.html:

<script src="https://cdn.jsdelivr.net/npm/ward-yacht-header@latest/dist/ward-header.js" defer></script>

Then in any layout/page:

<ward-header base-url="https://www.wardyachtsales.com"></ward-header>

Option 2: Svelte wrapper (SSR-safe, prevents CLS)

1. Copy src/WardHeader.svelte and src/ward-header.js into your project
2. Use in your layout:

<script>
  import WardHeader from '$lib/components/WardHeader.svelte';
</script>

<WardHeader />

The wrapper renders a static placeholder during SSR (matching the header's dimensions), then hydrates the full interactive component client-side. Zero CLS.

Design Decisions

| Concern | Solution | |---------------------|--------------------------------------------------------------------------| | Style isolation | Shadow DOM — no CSS leaks in or out | | SSR safety | Custom elements are inert on the server; Svelte wrapper adds a placeholder | | No CLS | Fixed height placeholder (114px) during SSR | | Lightweight | ~13 KB, zero dependencies, single file | | Accessibility | ARIA roles, keyboard nav, focus indicators, reduced-motion support | | Mobile | Hamburger menu + slide-out drawer at ≤900px | | Sticky header | position: sticky on the <header> element | | Easy updates | Edit src/ward-header.js, run npm run build, re-deploy the single file |

Updating Navigation

Edit the NAV_ITEMS array in src/ward-header.js:

const NAV_ITEMS = [
  { label: 'About Us', href: '/about-us' },
  {
    label: 'Shop Yachts',
    children: [
      { label: 'New Yachts', href: '/newyachts' },
      { label: 'Used Yachts', href: '/used-yachts-for-sale' },
    ],
  },
  // ... add/remove items here
];

Then npm run build and re-deploy dist/ward-header.js.