O componente AdSense renderiza blocos de anúncios do Google AdSense de forma otimizada para performance (Performance-First loading).

Interface do Componente (Props)

Propriedade	Tipo	Padrão	Descrição
`slot`	`string`	Obrigatório	Identificador do slot de anúncio fornecido pelo Google AdSense.
`format`	`'auto' \| 'fluid'`	`'auto'`	O formato geométrico do bloco de anúncios.
`responsive`	`boolean`	`true`	Habilita blocos responsivos.

Carregamento Otimizado (Performance-First)

Para evitar impactos negativos na nota do Lighthouse e nas métricas de Core Web Vitals (FCP/LCP), o script oficial do Google AdSense (adsbygoogle.js) não é carregado no primeiro carregamento de página. O carregamento do anúncio ocorre utilizando um Intersection Observer ou de forma postergada (lazy-load) somente quando o usuário interage com o site ou quando o elemento está prestes a entrar na tela.

Exemplo de Uso

---
import AdSense from '../components/AdSense.astro';
---
<div class="sidebar-ad">
  <AdSense slot="1234567890" format="auto" />
</div>

ConsentBanner

O componente ConsentBanner gerencia o banner flutuante de consentimento de cookies da plataforma, em total conformidade com a LGPD e privacidade do usuário.

Interface do Componente (Props & Slots)

Este componente não aceita propriedades externas (Props). Ele gerencia seu estado internamente utilizando localStorage.

Comportamento Interativo

Chaves de Armazenamento:
- dougdesign-consent-v1: Armazena se os cookies gerais de personalização foram aceitos (accepted) ou recusados (rejected).
- dougdesign-comments-consent-v1: Armazena a escolha de comentários (comments-accepted ou comments-rejected).
Eventos Disparados:
- doug:consent-granted: Emitido no document global quando o usuário clica em “Aceitar Tudo”.
- doug:consent-denied: Emitido no document global quando o usuário clica em “Recusar Tudo”.

Exemplo de Uso

O banner deve ser incluído uma única vez no layout principal do site:

---
import ConsentBanner from '../components/ConsentBanner.astro';
---
<html>
  <body>
    <!-- Outros componentes -->
    <ConsentBanner />
  </body>
</html>

PostCard

O componente PostCard é responsável por renderizar resumos de postagens na listagem principal do feed do blog.

Interface do Componente (Props)

Propriedade	Tipo	Padrão	Descrição
`post`	`BlogEntry`	Obrigatório	Objeto contendo os dados e metadados do post carregado de coleções do Astro.

Exemplo de Uso

---
import { getCollection } from 'astro:content';
import PostCard from '../components/PostCard.astro';

const posts = await getCollection('blog');
---
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  {posts.map(post => <PostCard post={post} />)}
</div>