Astro Support #558
Description
Feature Type
🚀 New Capability
Problem Statement
Supporting C15T with Astro is a bit less straightforward than it could be.
In server-side or pre-rendered Astro sites, you use "client" directives to load reactive elements that depend on the browser (from my understanding, the ConsentManagerProvider cannot be server-side or pre-rendered).
So my current solution is to include this in my Layout.astro:
Consent.tsx
import {
ConsentManagerDialog,
ConsentManagerProvider,
CookieBanner,
} from "@c15t/react";
export default function Consent() {
return (
<ConsentManagerProvider
options={{ ... }}
>
<CookieBanner />
<ConsentManagerDialog />
</ConsentManagerProvider>
);
}Layout.astro
<html>
<body>
<Consent client:only="react" />
</body>
</html>While this works, it feels a bit alien to Astro, since you cannot render or wrap your Astro components in a ConsentManagerProvider.
Proposed Solution
Astro has integrations, in my opinion this is the perfect candidate to provide first-class astro support (for example through a new package @c15t/astro).
In contrast to above, full c15t could be a few easy lines as an Astro integration:
astro.config.mjs
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import c15t from "@c15t/astro";
// https://astro.build/config
export default defineConfig({
integrations: [
react(),
c15t({
options: { ... }
}),
]
});Layout.astro
---
import { CookieBanner, ConsentManagerDialog } from "@c15t/astro";
---
<html>
<body>
<CookieBanner />
<ConsentManagerDialog />
</body>
</html>Or alternatively, the banner & dialog are handled purely through astro configuration.
DX simply becomes astro add @c15t/astro with the Astro add api.
Alternative Solutions
No response
Additional Context
No response