fix: ethical ads integration

Author: LinceMathew

frontend/src/components/banner/AdBanner.astro

@@ -59,6 +59,9 @@ const link = 'https://hexmos.com/livereview/';
 // Randomly select a variation
 const randomIndex = Math.floor(Math.random() * adVariations.length);
 const currentAd = adVariations[randomIndex];
+
+// disable google ads for cheatsheet category pages, because there we using ethical ads
+const cheatsheetCategory = Astro.url?.pathname?.includes('/c/') ?? false;
 ---
 
 <div
@@ -241,4 +244,5 @@ const currentAd = adVariations[randomIndex];
     </div>
   </a>
 </div>
-<Banner type="banner" />
+{!cheatsheetCategory && <Banner type="banner" />}
+

frontend/src/components/banner/EABanner.astro

@@ -0,0 +1,41 @@
+---
+export interface Props {
+  keywords?: string[];
+  style?: string;
+}
+
+const { keywords = [], style = '' } = Astro.props;
+const eaKeywords = Array.isArray(keywords) ? keywords.join('|') : String(keywords);
+const mobileClass = 'ea-banner-mobile-center';
+---
+
+<style>
+  @media (max-width: 768px) {
+    .ea-banner-mobile-center {
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
+      width: 100% !important;
+      margin: 24px 0 !important;
+    }
+  }
+</style>
+<script is:inline>
+  if (!window.__ethicalAdsLoaded) {
+    window.__ethicalAdsLoaded = true;
+    var s = document.createElement('script');
+    s.async = true;
+    s.src = 'https://media.ethicalads.io/media/client/ethicalads.min.js';
+    document.head.appendChild(s);
+  }
+</script>
+
+<div
+  id="fdt-ethical-ads-image-ad"
+  data-ea-publisher="hexmoscom"
+  data-ea-type="image"
+  data-ea-style="stickybox"
+  data-ea-keywords={eaKeywords}
+  class={mobileClass}
+  style={style}
+></div>

frontend/src/pages/c/[category]/[name].astro

@@ -7,6 +7,7 @@ import ToolContainer from '../../../components/tool/ToolContainer';
 import ToolHead from '../../../components/tool/ToolHead';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { getCheatsheet } from '../../../lib/cheatsheets-utils';
+import EABanner from '@/components/banner/EABanner.astro';
 
 function processCheatsheetLinks(html: string): string {
   // First, add IDs to all headings (h1-h6) so anchor links work
@@ -167,7 +168,7 @@ const breadcrumbItems = [
 
     <SeeAlsoIndex />
     <div class="mb-10">
-      <Banner type="text" />
+      <!-- <Banner type="text" /> -->
     </div>
 
     <div class="mt-8 pt-6 mb-8 border-t border-slate-200 dark:border-slate-700">
@@ -187,5 +188,6 @@ const breadcrumbItems = [
         <CreditsButton href="/freedevtools/c/credits/" />
       </div>
     </div>
+    <EABanner keywords={keywords} />
   </ToolContainer>
 </BaseLayout>

frontend/src/pages/c/[category]/[page].astro

@@ -98,5 +98,6 @@ const keywords = [
     totalPages={totalPages}
     seoDescription={seoDescription}
     breadcrumbItems={breadcrumbItems}
+    keywords={keywords}
   />
 </BaseLayout>

frontend/src/pages/c/[category]/_CategoryCheatsheetsPage.astro

@@ -4,7 +4,7 @@ import CreditsButton from '../../../components/buttons/CreditsButton';
 import ToolContainer from '../../../components/tool/ToolContainer';
 import ToolHead from '../../../components/tool/ToolHead';
 import AdBanner from '../../../components/banner/AdBanner.astro';
-
+import EABanner from '@/components/banner/EABanner.astro';
 const {
   categoryName,
   categorySlug,
@@ -14,6 +14,7 @@ const {
   totalPages,
   seoDescription,
   breadcrumbItems,
+  keywords,
 } = Astro.props;
 ---
 
@@ -93,6 +94,7 @@ const {
       <CreditsButton href="/freedevtools/c/credits/" />
     </div>
   </div>
+  <EABanner keywords={keywords} />
 </ToolContainer>
 
 <script>

frontend/src/pages/c/[page].astro

@@ -84,5 +84,6 @@ const mainKeywords = [
     totalCategories={totalCategories}
     totalCheatsheets={totalCheatsheets}
     breadcrumbItems={breadcrumbItems}
+    keywords={mainKeywords}
   />
 </BaseLayout>

frontend/src/pages/c/_CheatsheetPage.astro

@@ -4,14 +4,15 @@ import Pagination from '../../components/PaginationComponent.astro';
 import ToolContainer from '../../components/tool/ToolContainer';
 import ToolHead from '../../components/tool/ToolHead';
 import AdBanner from '../../components/banner/AdBanner.astro';
-
+import EABanner from '@/components/banner/EABanner.astro';
 const {
   categories,
   currentPage,
   totalPages,
   totalCategories,
   totalCheatsheets,
   breadcrumbItems,
+  keywords,
 } = Astro.props;
 ---
 
@@ -117,6 +118,7 @@ const {
       <CreditsButton href="/freedevtools/c/credits/" />
     </div>
   </div>
+    <EABanner keywords={keywords} />
 </ToolContainer>
 
 <script>

frontend/src/pages/c/index.astro

@@ -2,6 +2,7 @@
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { generateCheatsheetStaticPaths, getAllCheatsheetCategories } from '../../lib/cheatsheets-utils';
 import CheatsheetPage from './_CheatsheetPage.astro';
+import EABanner from '@/components/banner/EABanner.astro';
 
 export async function getStaticPaths() {
   return await generateCheatsheetStaticPaths();
@@ -82,4 +83,5 @@ const mainKeywords = [
     totalCheatsheets={totalCheatsheets}
     breadcrumbItems={breadcrumbItems}
   />
+  <EABanner keywords={mainKeywords} />
 </BaseLayout>