hippochat-website

Raw STATUS.md

# hippochat-website

**Status:** 🟢 Active
**Phase:** All Templates Deployed & Working
**Last Activity:** 2026-02-02 (asset path fix + Idol SSR→Static fix)

---

## Linear Metadata

**Project ID:** `69f98c1a-bfe3-4f85-8fbb-7a90ec1872ec`
**Team ID:** `96b685fe-2252-47c5-97ee-273d8c484942`
**Last Synced:** `2026-02-06T13:19:58.737Z`

## Overview

Placeholder/launch website for HippoChat — a HIPAA-compliant clinical messaging platform for cross-organizational healthcare teams.

**Stack:** Astro.build + Tailwind CSS
**GitHub:** https://github.com/jegirard/hippochat-website
**Live Site:** https://hippochat-website.vercel.app ✅
**Preview Site:** https://hippochat-preview.vercel.app ✅ (all 7 templates)
**Preview Repo:** https://github.com/jegirard/hippochat-preview
**Hosting:** Vercel (auto-deploys from `main` branch)
**Spec Doc:** [Google Doc](https://docs.google.com/document/d/10XGvfZIkOoVFvtxmP5nOEPns_mWhWl-PouxoG4K3K9Q)
**Deployment Guide:** See `DEPLOYMENT.md`

---

## 🆕 Subpath Deployment Fix (2026-02-02)

### Problem
When templates are deployed under subpaths (`/idol/`, `/custom/`, etc.), hardcoded asset paths like `/logo.png` resolve to the root instead of the template's subpath, causing broken images and 404s.

**Idol template** also had an SSR configuration that Vercel couldn't handle for static hosting.

### Solution Applied

**Phase 1: Fixed Idol Template (SSR → Static)**
- Removed Netlify SSR adapter from `templates/idol/astro.config.mjs`
- Changed output from `"server"` to `"static"`
- Result: Idol now builds as static HTML

**Phase 2: Fixed Asset Paths (All 7 Templates)**
Fixed 30+ hardcoded asset references across all templates:

| Template | Files Fixed | Examples |
|----------|-------------|----------|
| site (custom) | Layout.astro, PainToValue.astro, product.astro, security.astro, build-vs-status-quo.astro | `/logo.png` → `${import.meta.env.BASE_URL}logo.png` |
| landing | splash.astro, header.astro, intro.astro, index.astro | Same pattern |
| idol | Layout.astro, Header.astro, Footer.astro, Hero.astro, Brief.astro, Pricing.astro | Same pattern |
| astroship | Layout.astro, navbar.astro, hero.astro, features.astro | Same pattern |
| astrowind | Logo.astro | Same pattern |
| stone | Layout.astro, Header.astro, Footer.astro, Hero.astro, About.astro, security.astro, product.astro | Same pattern |
| accessible | DefaultLayout.astro, index.astro, security.astro, product.astro, use-cases.astro | Same pattern |

**Fix Pattern:**
```astro
<!-- Before -->
<img src="/logo.png" />
<link rel="icon" href="/favicon.ico" />
<img src="/images/cross-org-architecture.png" />

<!-- After -->
<img src={`${import.meta.env.BASE_URL}logo.png`} />
<link rel="icon" href={`${import.meta.env.BASE_URL}favicon.ico`} />
<img src={`${import.meta.env.BASE_URL}images/cross-org-architecture.png`} />
```

### Verification
All 7 templates verified working at https://hippochat-preview.vercel.app:

| Template | URL | Status |
|----------|-----|--------|
| Custom | [/custom/](https://hippochat-preview.vercel.app/custom/) | ✅ 200 |
| AstroWind | [/astrowind/](https://hippochat-preview.vercel.app/astrowind/) | ✅ 200 |
| Astroship | [/astroship/](https://hippochat-preview.vercel.app/astroship/) | ✅ 200 |
| Landing | [/landing/](https://hippochat-preview.vercel.app/landing/) | ✅ 200 |
| Stone | [/stone/](https://hippochat-preview.vercel.app/stone/) | ✅ 200 |
| Accessible | [/accessible/](https://hippochat-preview.vercel.app/accessible/) | ✅ 200 |
| **Idol** | [/idol/](https://hippochat-preview.vercel.app/idol/) | ✅ 200 (was 404) |

**Commit:** `c7f747b` - "Fix asset paths for subpath deployment and Idol SSR→Static"

---

## 🆕 Audit Results (2026-02-02)

### Image Audit Summary
**See:** `AUDIT-IMAGES.md` for full details

**Key Findings:**
- Custom site is intentionally minimal/text-focused ✅
- **3 critical diagrams needed** from spec:
  1. Cross-Org Architecture Diagram (Home, Product, Security)
  2. Status Quo vs HippoChat Comparison Diagram (Build vs Status Quo)
  3. External User Access Model (Security)
- Optional: Product mockup, use case illustrations, icon sets
- Total images needed: 6-8 essential, 4-6 optional polish

**Style Guidelines (from spec):**
- ❌ NO: Smiling clinicians, abstract shields, team collaboration metaphors
## Template Versions

**7 templates** available for comparison at https://hippochat-preview.vercel.app:

| Template | Location | Style | Preview URL |
|----------|----------|-------|-------------|
| **Custom** (Minimal) | `site/` | Clean, custom-built | [/custom/](https://hippochat-preview.vercel.app/custom/) |
| **AstroWind** | `templates/astrowind/` | Feature-rich | [/astrowind/](https://hippochat-preview.vercel.app/astrowind/) |
| **Astroship** | `templates/astroship/` | Clean SaaS | [/astroship/](https://hippochat-preview.vercel.app/astroship/) |
| **Landing** | `templates/landing/` | Dark mode | [/landing/](https://hippochat-preview.vercel.app/landing/) |
| **Stone** | `templates/stone/` | Professional SaaS | [/stone/](https://hippochat-preview.vercel.app/stone/) |
| **Accessible** | `templates/accessible/` | WCAG 2.2 compliant | [/accessible/](https://hippochat-preview.vercel.app/accessible/) |
| **Idol** | `templates/idol/` | Minimalist elegant | [/idol/](https://hippochat-preview.vercel.app/idol/) |

---

## Assets

| Asset | Location | Status |
|-------|----------|--------|
| Logo (hippo icon) | `assets/hippo-icon.png` | ✅ Complete |
| Logo - Black lines (transparent) | `site/public/logo-black.png` | ✅ Complete |
| Logo - White lines (transparent) | `site/public/logo-white.png` | ✅ Complete |
| Favicon | `assets/favicon.ico` | ✅ Complete |

### Logo Usage Guidelines

| Background | Logo File | Notes |
|------------|-----------|-------|
| Light/White | `logo-black.png` | Black lines on transparent |
| Dark/Black | `logo-white.png` | White lines on transparent |
| Any (with bg) | `logo.png` | Original with white background |
| Cross-Org Diagram | `site/public/images/cross-org-architecture.png` | ✅ Generated |
| Status Quo Diagram | `site/public/images/status-quo-vs-hippochat.png` | ✅ Generated |
| Access Model Diagram | `site/public/images/external-user-access.png` | ✅ Generated |
| Product Mockup | `site/public/images/product-mockup.png` | ✅ Generated |
| Nurse Triage Use Case | `site/public/images/use-case-nurse-triage.png` | ✅ Generated |
| Answering Service Use Case | `site/public/images/use-case-answering-service.png` | ✅ Generated |
| On-Call Coverage Use Case | `site/public/images/use-case-on-call.png` | ✅ Generated |
| OG Social Image | `site/public/images/og-image.png` | ✅ Generated |

---

## ⚠️ Build Requirements

**All demo builds MUST include these HippoChat assets:**

| Asset | Source | Copies To |
|-------|--------|-----------|
| **Favicon** | `site/public/favicon.ico` | All template `/public/` dirs |
| **Favicon SVG** | `site/public/favicon.svg` | All template `/public/` dirs |
| **Logo (hippo icon)** | `site/public/logo.png` | All template logo locations |
| **Site Title** | "HippoChat" | All configs, meta tags |
| **Tagline** | "HIPAA-Compliant Cross-Org Messaging" | All descriptions |

**Before demoing any template:**
1. ✅ Favicon shows HippoChat hippo icon (not template default)
2. ✅ Logo in nav/footer is HippoChat hippo line drawing
3. ✅ No "AstroWind", "Astroship", or template branding visible
4. ✅ Meta tags reference HippoChat, not template name
5. ✅ Generated images are in place (diagrams, mockups)
6. ✅ **Base path set correctly** in astro.config (see below)

### ⚠️ Base Path Requirement (Preview Site)

When deploying to `hippochat-preview.vercel.app`, each template lives in a subpath (`/stone/`, `/astrowind/`, etc.). Astro needs `base` configured or CSS/JS won't load.

| Template | Config File | Required Base |
|----------|-------------|---------------|
| custom | `site/astro.config.mjs` | `base: '/custom/'` |
| astrowind | `templates/astrowind/astro.config.ts` | `base: '/astrowind/'` |
| astroship | `templates/astroship/astro.config.mjs` | `base: '/astroship/'` |
| landing | `templates/landing/astro.config.mjs` | `base: '/landing/'` |
| stone | `templates/stone/astro.config.mjs` | `base: '/stone/'` |
| accessible | `templates/accessible/astro.config.mjs` | `base: '/accessible/'` |
| idol | `templates/idol/astro.config.mjs` | `base: '/idol/'` |

**If templates show unstyled:** Check base paths, rebuild, repush.

### ⚠️ Asset Path Requirement (Preview Site)

All asset references must use `import.meta.env.BASE_URL` when deployed to subpaths:

```astro
<!-- ✅ Correct (works on subpaths) -->
<img src={`${import.meta.env.BASE_URL}logo.png`} />
<link rel="icon" href={`${import.meta.env.BASE_URL}favicon.ico`} />

<!-- ❌ Wrong (breaks on subpaths) -->
<img src="/logo.png" />
<link rel="icon" href="/favicon.ico" />
```

**If images show broken:** Check for hardcoded `/` paths, update to use `BASE_URL`.

---

## Key Positioning

**Tagline:** Secure clinical messaging across organizations

**One-liner:** HIPAA-compliant messaging designed for clinical teams that span multiple organizations—without granting external users access to your internal systems.

---

### ✅ COMPLETE: Full Rebuild to Spec (2026-02-02)

**Goal:** Rebuild all 7 templates to match spec doc exactly — same sitemap, same content, nothing extra.

**Spec Doc:** https://docs.google.com/document/d/10XGvfZIkOoVFvtxmP5nOEPns_mWhWl-PouxoG4K3K9Q

**Deployed:** https://hippochat-preview.vercel.app (auto-deploy from GitHub push)

---

### 🔥 ACTIVE: Design Audit Fixes (2026-02-02)

**Goal:** Fix visual/design issues found in detailed audits of all 7 templates.

**Design Audit Reports:** `audits/DESIGN-AUDIT-{template}.md`

**Template Fix Progress:**
| # | Template | Audit Grade | Fix Status | Key Issues |
|---|----------|-------------|------------|------------|
| 1 | **Accessible** | B+ (best) | ✅ FIXED | Nav URLs, About wall of text, How It Works cards, comparison colors |
| 2 | **Stone** | ⚠️ Partial | ✅ FIXED | Created 3 missing pages, fixed images, nav URLs, theme backgrounds, grayscale icons |
| 3 | **Idol** | ❌ Wrong structure | ✅ REFACTORED | Converted to single-page landing (6 sections, anchor nav) |
| 4 | **Astroship** | ❌ Incomplete | ✅ FIXED | Created 6 missing pages, removed placeholders, fixed About/Pricing |
| 5 | **AstroWind** | ❌ Broken | ✅ FIXED | Fixed CSS contrast, created 6 pages, replaced placeholders |
| 6 | **Landing** | ❌ Broken | ✅ FIXED | Fixed routing, CSS, created 7 pages, standardized nav |
| 7 | **Custom** | ❌ Broken | ✅ FIXED | Fixed base path, 20+ nav links, CSS loads properly |

**Accessible Fixes Applied:**
## Preview Commands

```bash

# Custom site
cd site && npm run dev

# AstroWind
cd templates/astrowind && npm run dev

# Astroship
cd templates/astroship && npm run dev

# Landing
cd templates/landing && npm run dev

# Stone (NEW - full buildout)
cd templates/stone && npm run dev

# Accessible (NEW - full buildout, WCAG 2.2 AA compliant)
cd templates/accessible && npm run dev

# Idol (NEW - full buildout, single-page)
cd templates/idol && npm run dev
```

All dev servers run on http://localhost:4321

---

## 🆕 New Template Buildouts (2026-02-02)

### Template Comparison

| Template | Pages | Style | Best For |
|----------|-------|-------|----------|
| **Stone** | Multi-page | Professional SaaS | Full website with pricing |
| **Accessible** | Multi-page | WCAG compliant | Healthcare compliance focus |
| **Idol** | Single-page | Elegant minimal | Landing page / quick pitch |

---

## Key Files

- **Spec:** [Google Doc](https://docs.google.com/document/d/10XGvfZIkOoVFvtxmP5nOEPns_mWhWl-PouxoG4K3K9Q)
- **GitHub:** https://github.com/jegirard/hippochat-website
- **Live Site:** https://hippochat-website.vercel.app
- **Deployment Guide:** `DEPLOYMENT.md`
- **Image Audit:** `AUDIT-IMAGES.md`
- **Placeholder Audit:** `AUDIT-PLACEHOLDERS.md`
- **Logo:** `assets/hippo-icon.png`
- **Custom Site:** `site/`
- **Templates:** `templates/astrowind/`, `templates/astroship/`, `templates/landing/`, `templates/stone/`, `templates/accessible/`, `templates/idol/`

---

*Last updated: 2/2/2026, all 3 new templates (Stone, Accessible, Idol) fully built out with HippoChat content*