Showcase

---
import { WebVitals } from "@casoon/astro-webvitals";
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Default</title>
	</head>
	<body>
		<h1>Default</h1>
		<WebVitals />
	</body>
</html>

---
import { WebVitals } from "@casoon/astro-webvitals";

// Your consent state, e.g. from a consent manager.
const hasAnalyticsConsent = true;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Production</title>
	</head>
	<body>
		<h1>Production</h1>
		<WebVitals
			endpoint="/api/analytics/vitals"
			sampleRate={0.1}
			consent={hasAnalyticsConsent}
			respectDnt={true}
		/>
	</body>
</html>

import { webVitalsDashboard } from "@casoon/astro-webvitals/integration";
import { defineConfig } from "astro/config";

// Demo project for the website showcase. `node examples/capture.mjs` builds it and
// writes what the component and the integration generate to examples/output/.
export default defineConfig({
	integrations: [webVitalsDashboard()],
});

pnpm install
node examples/capture.mjs

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Spring sale – Example shop</title>
		<link rel="canonical" href="https://example.com/sale/" />
		<meta property="og:title" content="Spring sale" />
		<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage"}</script>
	</head>
	<body>
		<a href="#main">Skip to content</a>
		<main id="main">
			<h1>Spring sale</h1>
			<h3>Shoes</h3>
			<img src="/shoes.jpg" />
			<a href="/cart"><svg aria-hidden="true" width="16" height="16"></svg></a>
			<form>
				<label for="email">Email</label>
				<input id="email" type="email" />
				<input type="search" placeholder="Search" />
				<button type="submit"></button>
			</form>
		</main>
	</body>
</html>

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Spring sale – Example shop</title>
		<link rel="canonical" href="https://example.com/sale/" />
		<meta property="og:title" content="Spring sale" />
		<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage"}</script>
	</head>
	<body>
		<a href="#main">Skip to content</a>
		<main id="main">
			<h1>Spring sale</h1>
			<h3>Shoes</h3>
			<img src="/shoes.jpg" />
			<a href="/cart"><svg aria-hidden="true" width="16" height="16"></svg></a>
			<form>
				<label for="email">Email</label>
				<input id="email" type="email" />
				<input type="search" placeholder="Search" />
				<button type="submit"></button>
			</form>
		</main>
	</body>
</html>