feat: add AdSense slots for blog posts and implement debug component for local development

Author: FehmiCitiloglu

.env.example

@@ -6,3 +6,4 @@ PUBLIC_ADSENSE_CLIENT=
 # Ad unit slot IDs (configured in your AdSense dashboard). Each is optional; unset slots render nothing.
 PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE=
 PUBLIC_ADSENSE_SLOT_TOOL_FOOTER=
+PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE=

.github/workflows/deploy.yml

@@ -35,7 +35,9 @@ jobs:
         env:
           NODE_ENV: production
           PUBLIC_ADSENSE_CLIENT: ${{ secrets.PUBLIC_ADSENSE_CLIENT }}
-          PUBLIC_ADSENSE_FOOTER_SLOT: ${{ secrets.PUBLIC_ADSENSE_FOOTER_SLOT }}
+          PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE: ${{ secrets.PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE }}
+          PUBLIC_ADSENSE_SLOT_TOOL_FOOTER: ${{ secrets.PUBLIC_ADSENSE_SLOT_TOOL_FOOTER }}
+          PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE: ${{ secrets.PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE }}
 
       - name: Build Pagefind index
         run: npx pagefind --site dist

src/components/AdSenseDebug.astro

@@ -0,0 +1,41 @@
+---
+/**
+ * Dev-only debug banner showing AdSense env var status.
+ * Only renders in local development (import.meta.env.DEV).
+ * Helps troubleshoot why ad slots aren't appearing locally.
+ */
+
+const isDev = import.meta.env.DEV;
+const adsenseClient = import.meta.env.PUBLIC_ADSENSE_CLIENT;
+const slotToolInArticle = import.meta.env.PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE;
+const slotToolFooter = import.meta.env.PUBLIC_ADSENSE_SLOT_TOOL_FOOTER;
+const slotBlogInArticle = import.meta.env.PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE;
+
+const vars = [
+  { name: 'PUBLIC_ADSENSE_CLIENT', value: adsenseClient },
+  { name: 'PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE', value: slotToolInArticle },
+  { name: 'PUBLIC_ADSENSE_SLOT_TOOL_FOOTER', value: slotToolFooter },
+  { name: 'PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE', value: slotBlogInArticle },
+];
+---
+
+{isDev && (
+  <div class="fixed bottom-4 right-4 z-50 max-w-sm bg-yellow-50 dark:bg-yellow-900 border-2 border-yellow-300 dark:border-yellow-700 rounded-lg p-3 text-xs font-mono shadow-lg">
+    <div class="font-bold text-yellow-900 dark:text-yellow-100 mb-2">
+      AdSense Debug (Dev Only)
+    </div>
+    <div class="space-y-1">
+      {vars.map((v) => (
+        <div class="flex justify-between gap-2">
+          <span class="text-yellow-800 dark:text-yellow-200 truncate">{v.name}</span>
+          <span class={v.value ? 'text-green-700 dark:text-green-300 font-bold' : 'text-red-700 dark:text-red-300'}>
+            {v.value ? 'set' : 'empty'}
+          </span>
+        </div>
+      ))}
+    </div>
+    <div class="text-yellow-700 dark:text-yellow-300 mt-2 text-[10px]">
+      Set vars in .env to see ad slots render.
+    </div>
+  </div>
+)}

src/components/ads/AdSlot.astro

@@ -33,6 +33,8 @@ const {
 
 const adsenseClient = import.meta.env.PUBLIC_ADSENSE_CLIENT;
 const adsEnabled = Boolean(adsenseClient);
+const isInArticleFluid = format === 'fluid' && layout === 'in-article';
+const adStyle = isInArticleFluid ? 'display:block; text-align:center;' : 'display:block';
 ---
 
 {adsEnabled && (
@@ -42,12 +44,12 @@ const adsEnabled = Boolean(adsenseClient);
   >
     <ins
       class="adsbygoogle block"
-      style="display:block"
+      style={adStyle}
       data-ad-client={adsenseClient}
       data-ad-slot={slot}
       data-ad-format={format}
       data-ad-layout={layout}
-      data-full-width-responsive={responsive ? 'true' : 'false'}
+      data-full-width-responsive={isInArticleFluid ? undefined : responsive ? 'true' : 'false'}
     ></ins>
     <script is:inline>
       (window.adsbygoogle = window.adsbygoogle || []).push({});

src/env.d.ts

@@ -7,6 +7,8 @@ interface ImportMetaEnv {
   readonly PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE?: string;
   /** AdSense slot ID for the footer unit on tool pages. */
   readonly PUBLIC_ADSENSE_SLOT_TOOL_FOOTER?: string;
+  /** AdSense slot ID for the in-article unit on blog posts. */
+  readonly PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE?: string;
 }
 
 interface ImportMeta {

src/layouts/ArticleLayout.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro';
+import AdSlot from '@components/ads/AdSlot.astro';
 
 export interface Props {
   title: string;
@@ -33,6 +34,7 @@ const dateFormatter = new Intl.DateTimeFormat('en', {
 
 const rawBase = import.meta.env.BASE_URL;
 const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`;
+const adBlogInArticleSlot = import.meta.env.PUBLIC_ADSENSE_SLOT_BLOG_INARTICLE;
 ---
 
 <BaseLayout
@@ -81,6 +83,15 @@ const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`;
       <slot />
     </div>
 
+    {adBlogInArticleSlot && (
+      <AdSlot
+        slot={adBlogInArticleSlot}
+        format="fluid"
+        layout="in-article"
+        class="mx-auto my-6"
+      />
+    )}
+
     {relatedPosts.length > 0 && (
       <section class="space-y-4 border-t border-gray-200 pt-8 dark:border-gray-700" aria-labelledby="related-posts">
         <h2 id="related-posts" class="text-2xl font-bold text-gray-900 dark:text-white">Related Posts</h2>

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import '@/styles/global.css';
+import AdSenseDebug from '@components/AdSenseDebug.astro';
 
 export interface Props {
   title?: string;
@@ -38,6 +39,7 @@ const adsEnabled = Boolean(adsenseClient);
   </head>
   <body>
     <slot />
+    <AdSenseDebug />
   </body>
 </html>