🚀

Astro Integration

Learn how to integrate NoBlocky with Astro's island architecture, leveraging static generation and selective hydration for optimal performance.

🏝️ Live Astro Islands Demo

🚀

Loading Astro islands...

📝 Implementation Code

Astro Component (.astro)

---
// Component Script (Server-side)
import { detectAdblock, type NoBlockyResult } from 'noblocky';

// This runs at build time on the server
const buildTimeDetection = await detectAdblock({
  timeout: 3000
});

const timestamp = new Date().toISOString();
---

<div class="adblock-detection">
  <h2>Adblock Detection Status</h2>
  
  <!-- Static content rendered at build time -->
  <div class="build-info">
    <p>Built at: {timestamp}</p>
    <p>Build-time result: {buildTimeDetection.isBlocked ? 'Blocked' : 'Clear'}</p>
  </div>

  <!-- Interactive island that hydrates on the client -->
  <AdblockDetector 
    client:load
    initialData={buildTimeDetection}
    options={{ timeout: 5000 }}
  />
</div>

<script>
  // Client-side script (optional)
  console.log('Astro page loaded');
</script>

Interactive Island Component

// AdblockDetector.tsx (React/Preact/Vue component)
import { useState, useEffect } from 'react';
import { detectAdblock, type NoBlockyResult } from 'noblocky';

interface Props {
  initialData?: any;
  options?: {
    timeout?: number;
  };
}

export default function AdblockDetector({ initialData, options }: Props) {
  const [detection, setDetection] = useState(initialData);
  const [loading, setLoading] = useState(false);

  const runDetection = async () => {
    setLoading(true);
    try {
      const result = await detectAdblock(options);
      setDetection(result);
    } catch (error) {
      console.error('Detection failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="adblock-detector">
      <p>Status: {detection?.isBlocked ? 'Blocked' : 'Clear'}</p>
      <button 
        onClick={runDetection}
        disabled={loading}
      >
        {loading ? 'Detecting...' : 'Refresh'}
      </button>
    </div>
  );
}