Astro Integration

Astro Component (.astro)

---
// src/components/AdblockDetector.astro
---

<div id="adblock-status">
  <p>Checking adblock status...</p>
</div>

<script>
  import { detectAdblock } from 'noblocky';

  async function checkAdblock() {
    const statusEl = document.getElementById('adblock-status');
    
    try {
      const result = await detectAdblock({
        timeout: 5000,
        debug: true
      });

      if (statusEl) {
        statusEl.innerHTML = result.isBlocked
          ? '🚫 Adblock detected'
          : '✅ No adblock detected';
      }
    } catch (error) {
      console.error('Detection failed:', error);
      if (statusEl) {
        statusEl.innerHTML = '❌ Detection failed';
      }
    }
  }

  // Run detection when component loads
  checkAdblock();
</script>

Use in Astro Page

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import AdblockDetector from '../components/AdblockDetector.astro';
---

<Layout title="Welcome">
  <h1>Welcome to my site</h1>
  <AdblockDetector />
</Layout>

1. Install NoBlocky

npm install @wildebeest-webtech/noblocky

2. Import and Use

NoBlocky works seamlessly with Astro's island architecture. Simply import it in your component's client-side script.