Solenne

Solenne is an Astro one-page theme for boutique hotels, B&Bs and guesthouses, shipping a booking bar with a date-range calendar, live local clock and weather cards, and a persistent light/dark mode in plain CSS plus a single vanilla JS file.

What is Solenne?

Solenne is a one-page Astro theme aimed at small hospitality businesses such as boutique hotels, bed-and-breakfasts and guesthouses. It takes hotel configuration (name, district, city, SEO metadata, share image, time zone, coordinates) in src/config.ts and per-section copy and photos in individual components, then builds to static HTML in dist/ for any static host. It is designed and built by Sven Esser (sv3n.dev) and released under the MIT license.

Key Features

• Booking bar — a date-range calendar plus a guests picker covering adults, children and pets; you wire the submit handler to your own booking engine.
• At-a-glance cards — a live local clock, live weather via Open-Meteo (no API key required), stay times and travel times.
• Light / dark mode — remembers the visitor's choice and applies it with no flash on load.
• Content sections — room gallery, amenities, "book direct" benefits, stats, location reasons and guest stories, one Astro component per section.
• Responsive and accessible — responsive images, lazy loading, and scroll reveals that respect prefers-reduced-motion.
• Zero dependencies beyond Astro — styling is plain CSS in src/styles/styles.css, and interactivity lives in one vanilla JS file (src/scripts/main.js).
• Easy customization — hotel name, SEO and share image in src/config.ts; time zone and coordinates for clock/weather also in src/config.ts; crest/logo in src/components/Emblem.astro; color and type tokens in src/styles/styles.css.
• Static deployment — npm run build outputs dist/, and an included GitHub Actions workflow publishes the demo to GitHub Pages.

Who is it for?

• Boutique hotel and B&B owners who need a single-page marketing site with an on-brand booking entry point they can connect to an existing reservation system.
• Guesthouse operators wanting a fast, static site with local weather and time context that helps guests plan arrival.
• Astro developers building hospitality client sites who want a starting point with no extra dependencies and a documented config file.

What can you do with Solenne?

• Hotel marketers: launch a one-page site with room gallery, amenities and guest stories, then point the booking bar at a booking engine.
• Independent hosts: replace the Unsplash placeholder photography and Phosphor icons with their own assets before launch.
• Developers: scaffold via npm create astro@latest -- --template Sv3nskie/astro-theme-solenne, then edit src/config.ts for identity, SEO, time zone and coordinates.

How does Solenne work?

Run the Astro create command with the Solenne template, start the dev server with npm run dev, then edit src/config.ts, section components, styles and src/scripts/main.js. The weather card calls Open-Meteo directly from the browser using the coordinates in config, so no API key is needed.

Pricing

Free and MIT licensed; keeping the "Theme by Sv3n" footer credit is appreciated but not required.

FAQ

Is Solenne free to use?

Yes. Solenne is MIT licensed, so you can use and modify it for your own hotel site; the footer credit to Sv3n is appreciated but not required.

Does the booking bar connect to a booking engine automatically?

No. The bar provides a date-range calendar and guests picker, but you must wire the submit handler in src/scripts/main.js to your own booking engine.

Does the live weather card need an API key?

No. Weather comes from Open-Meteo, which requires no API key; you only set the time zone and coordinates in src/config.ts.

What framework does Solenne use?

Solenne is built with Astro, styled with plain CSS, and uses one vanilla JavaScript file for the booking bar, calendar and theme toggle, with no dependencies beyond Astro.