✦ Statuslane

Astro status-strip coming-soon page with an embeddable launch badge SVG

A more reusable coming-soon page: truthful countdown, local launch conversion, and a badge endpoint you can embed in project docs.

---

✨ Highlights

• Unique Status Strip visual direction instead of a poster, dashboard, or scenic hero
• Truthful countdown with final window state in the last 24 hours before launch
• Local launch time conversion based on the visitor timezone
• Embeddable SVG badge at /launch-badge.svg
• One-click Copy embed snippet action powered by TypeScript
• Machine-readable launch metadata at /launch-status.json
• Local preview via ?loop=1 and optional speed-up via ?loop=1&speed=120

---

🧭 Pages

• / - status-strip coming-soon homepage
• /launch-status.json - machine-readable launch status feed
• /launch-badge.svg - embeddable launch badge SVG
• /robots.txt - crawler rules generated by Astro

---

🛠️ Tech Stack

Layer	Technology
Framework	Astro 6
Language	TypeScript
Styling	Tailwind CSS 4
Motion / Logic	Native browser updates + TypeScript status-strip logic
SEO	@astrojs/sitemap, canonical metadata, JSON-LD, alternate feed links, robots.txt
Hosting	Static deployment ready

---

🚀 Local Development

📦 Install

npm install

▶️ Run dev server

npm run dev

🏗️ Build

npm run build

---

⏱️ Signal Logic

• Production behavior: the countdown stops at zero
• Scheduled becomes Final window in the last 24 hours before launch
• ?loop=1 keeps the preview cycling locally for QA
• ?loop=1&speed=120 speeds the preview clock up without affecting production behavior
• The page also exposes a copy-ready embed snippet for the badge endpoint

---

📁 Project Structure

astro-status-strip-coming-soon/
├── public/
│   ├── favicon.svg
│   └── og-statuslane.svg
├── src/
│   ├── components/
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   └── StatusStripHero.astro
│   ├── data/
│   │   └── site.ts
│   ├── layouts/
│   │   └── MainLayout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   ├── launch-badge.svg.ts
│   │   ├── launch-status.json.ts
│   │   └── robots.txt.ts
│   ├── scripts/
│   │   └── statusStrip.ts
│   └── styles/
│       └── global.css
├── LICENSE
├── netlify.toml
├── package.json
└── README.md

---

🌐 Deployment

🌐 Netlify (Recommended)

1. Push your code to GitHub
2. Connect repository to Netlify
3. Build settings are auto-configured via netlify.toml
4. Deploy

---

📄 License

MIT License. See LICENSE.