## Quick wins (top 5)

1) Add `rehype-sanitize` (already applied) and remove unnecessary `set:html` usages to prevent XSS and improve content robustness.
2) Eliminate CDN for Mermaid; use local dependency (already applied) to improve performance, privacy, and CSP compliance.
3) Optimize hero and large images using `src/components/common/Image.astro` everywhere; enforce `width`/`height` and lazy loading for non-LCP images.
4) Reduce JS on static pages by avoiding unnecessary client-side logs and inline scripts; prefer islands.
5) Improve form UX: ensure visible error messages, labels, and aria-live regions are consistent; keep focus management for spam/manual-review flows.

## Issues table

| ID | Page/Component | Problem | Impact | Fix |
|---|---|---|---|---|
| D1 | `Hero/Hero2/HeroText` | `set:html` in multiple slots | Med | Potential rendering inconsistencies and sanitization risk | Prefer rendering plain strings or sanitized HTML only |
| D2 | `Image.astro` usage | Not consistently used across pages | High | LCP/CLS and bandwidth | Replace `<img>` with `Image.astro` wrapper for optimization |
| D3 | `Footer.astro` | email obfuscation used `innerHTML` | Low | Minor XSS risk | Switched to `textContent` (applied) |
| D4 | Typography | Some lines exceed 85ch | Low | Readability | Use `max-w-prose` or `ch`-based widths in content wrappers |
| D5 | Forms | Inline scripts manage state | Med | Maintainability/perf | Extract to small islands if complexity grows |

## Before/After snippets

Replace `set:html` for simple line breaks:

```astro
<!-- Before -->
<div set:html={text.replace(/\n/g, '<br/>')}></div>

<!-- After -->
<div>
  {text.split('\n').map((line) => (<>
    {line}<br/>
  </>))}
  </div>
```

Avoid `innerHTML` when setting modal titles:

```js
// Before
titleEl.innerHTML = title;

// After
titleEl.textContent = String(title);
```

## Asset and typography guidance

- Use `src/components/common/Image.astro` for all images. Ensure: `alt` always set, `loading="lazy"` for non-LCP, explicit `width/height` to prevent CLS.
- Fonts: prefer `font-display: swap` (already via Inter variable). Limit weights/axes for performance.
- Containers: keep readable line length using `max-w-prose` or `max-w-[75ch]` for long text sections.
- Hydration: ensure islands only where needed (forms, uptime widgets). Keep content pages server-rendered.