tgc-availability-widget

Availability calendar widget for Tresowes Green Cottage.

Displays live 12-month booking availability for The Cottage and The Barn, sourced from eviivo via a Cloudflare Worker proxy. Supports English, German, and Spanish, and light/dark mode.

Installation

npm install tgc-availability-widget

Usage in an Astro page

---
import TgcAvailability from 'tgc-availability-widget/TgcAvailability.astro';
const locale = Astro.currentLocale; // "en" | "de" | "es"
---

<TgcAvailability property="cottage" lang={locale} />
<TgcAvailability property="barn"    lang={locale} />

Props

| Prop | Type | Default | Description | |-------------|---------------------------|------------------------------------------------------|-------------------------------------| | property | "cottage" \| "barn" | required | Which property to show | | lang | "en" \| "de" \| "es" | "en" | Display language | | months | number | 12 | Total months to load | | proxyBase | string | https://api.tresowesgreencottage.com/api/availability | Override the API base URL |

How it works

Browser → Astro page
           └─ <TgcAvailability> component (inline script, no external request)
                └─ Custom element: <tgc-availability>
                     └─ fetch → api.tresowesgreencottage.com (Cloudflare Worker)
                                    └─ eviivo iCal feed → parsed blocked dates

The component uses an inline script (is:inline) so it works correctly with Astro's View Transitions (<ClientRouter>). The custom element re-initialises on every astro:page-load event, ensuring the calendar renders on first load and after client-side navigation.

Architecture

| Layer | Technology | URL | |-------|------------|-----| | Astro component | npm package | tgc-availability-widget | | iCal proxy | Cloudflare Worker | api.tresowesgreencottage.com | | Widget CDN (legacy) | Cloudflare Pages | widget.tresowesgreencottage.com |

Development

To work on the component locally, use npm link:

# In this package directory:
npm link

# In the Astro project:
npm link tgc-availability-widget

Then import as normal — changes to src/TgcAvailability.astro are reflected immediately.

Publishing to npm

1. Create an account at npmjs.com
2. Log in from the terminal: npm login
3. Publish: npm publish --access public
4. In the Astro project: npm install tgc-availability-widget

To publish an update:

1. Bump the version in package.json (e.g. 1.0.1)
2. Run npm publish --access public
3. In the Astro project: npm update tgc-availability-widget

License

MIT