Skip to content

Commit 65af780

Browse files
simplearyansimplearyan
committed
AD Fixes
1 parent 292f2cc commit 65af780

5 files changed

Lines changed: 132 additions & 75 deletions

File tree

‎src/components/ads/HorizontalAd.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
background-color: var(--color-bg-offset);
3434
/* padding: 1rem 0; */
3535
margin-bottom: 2rem;
36+
overflow: hidden;
3637
}
3738

3839
.ad-label {

‎src/components/ads/ThinVerticalRailAd.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,10 @@
8787
background-color: var(--color-bg-offset);
8888
}
8989
.right-rail {
90-
right: 0px;
90+
right: -25px;
9191
}
9292
.left-rail {
93-
left: 0px;
93+
left: -25px;
9494
}
9595
}
9696
</style>

‎src/pages/blog/[...slug].astro‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,24 @@ const components = {
238238

239239
<ShareButtons title={post.data.title} url={url!} />
240240

241+
<div id="in-article-ad-source" style="display: none;">
242+
<InArticleAd />
243+
</div>
244+
245+
<script>
246+
import { insertAd } from "../../scripts/insertAd";
247+
248+
function initAd() {
249+
insertAd('.prose', 'in-article-ad-source');
250+
}
251+
252+
if (document.readyState === 'loading') {
253+
document.addEventListener('DOMContentLoaded', initAd);
254+
} else {
255+
initAd();
256+
}
257+
</script>
258+
241259
{relatedPostsToShow.length > 0 && (
242260
<div class="related-post-container">
243261
<FixedHorizontalAd />
@@ -307,18 +325,7 @@ const components = {
307325
</div>
308326
)}
309327

310-
<div id="in-article-ad-source" class="hidden">
311-
<InArticleAd />
312-
</div>
313-
314-
<script>
315-
import { insertAd } from "../../scripts/insertAd";
316-
requestAnimationFrame(() => {
317-
insertAd('.prose', 'in-article-ad-source');
318-
});
319-
</script>
320-
321-
<MultiplexAd />
328+
<MultiplexAd />
322329
</article>
323330
</Layout>
324331
) : type === "tag" && tag && tagPosts ? (

‎src/scripts/insertAd.ts‎

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,79 @@
11
export function insertAd(proseSelector: string, adContainerId: string) {
2+
console.log("insertAd: Starting", { proseSelector, adContainerId });
23
const prose = document.querySelector(proseSelector);
34
const adPlaceholder = document.getElementById(adContainerId);
45

56
// Get the ad content (the div with class 'in-article-ad-container' inside the placeholder)
67
const adContent = adPlaceholder?.firstElementChild;
78

8-
if (!prose || !adPlaceholder || !adContent) return;
9+
if (!prose || !adPlaceholder || !adContent) {
10+
console.error("insertAd: Missing elements", { prose: !!prose, placeholder: !!adPlaceholder, content: !!adContent });
11+
return;
12+
}
913

10-
const headings = prose.querySelectorAll('h2');
11-
let primaryAdUsed = false;
14+
const headings = prose.querySelectorAll('h2, h3');
15+
console.log("insertAd: Found headings", headings.length);
1216

13-
// Rule 1: Insert before 3rd h2
17+
// Priority 1: Before 3rd Heading (index 2)
18+
// Matches CivicThesis logic (conceptually "Before 2nd section break" -> 3rd header)
1419
if (headings.length >= 3) {
20+
console.log("insertAd: Inserting before 3rd heading");
1521
headings[2].insertAdjacentElement('beforebegin', adContent);
16-
primaryAdUsed = true;
17-
try {
18-
((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
19-
} catch (e) {
20-
console.error("AdSense push failed", e);
21-
}
22-
}
23-
24-
// Rule 2: Insert before last h2 if > 4 headings
25-
// "more than 4 headings" usually means 5 or more.
26-
if (headings.length > 5) {
27-
const lastHeading = headings[headings.length - 1];
28-
29-
if (primaryAdUsed) {
30-
// Clone the ad for the second slot
31-
const adClone = adContent.cloneNode(true) as HTMLElement;
32-
33-
// Reset the 'ins' element in the clone to ensure a fresh ad request
34-
const ins = adClone.querySelector('ins');
35-
if (ins) {
36-
ins.removeAttribute('data-adsbygoogle-status');
37-
ins.removeAttribute('data-ad-status');
38-
ins.innerHTML = ''; // Clear any existing content/iframe
39-
}
40-
41-
lastHeading.insertAdjacentElement('beforebegin', adClone);
42-
43-
// Trigger ad load for the new slot
22+
setTimeout(() => {
4423
try {
24+
console.log("insertAd: Pushing to adsbygoogle (P1)");
4525
((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
4626
} catch (e) {
4727
console.error("AdSense push failed", e);
4828
}
49-
} else {
50-
// Capture this edge case if logic changes, though currently covered by Rule 1
51-
lastHeading.insertAdjacentElement('beforebegin', adContent);
52-
primaryAdUsed = true;
29+
}, 100);
30+
return;
31+
}
32+
33+
// Priority 2: Before 1st Heading (index 0)
34+
// Fallback for shorter articles with at least one header
35+
if (headings.length >= 1) {
36+
console.log("insertAd: Inserting before 1st heading");
37+
headings[0].insertAdjacentElement('beforebegin', adContent);
38+
// Add a small delay to ensure DOM is updated and script can see the element
39+
setTimeout(() => {
5340
try {
41+
console.log("insertAd: Pushing to adsbygoogle (P2)");
5442
((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
5543
} catch (e) {
5644
console.error("AdSense push failed", e);
5745
}
58-
}
46+
}, 100);
47+
return;
5948
}
6049

61-
// Fallback: Paragraphs (only if no ads inserted yet)
62-
// The user said "also insert...". This implies the header rules function together.
63-
// The paragraph rule is a fallback if "no heading tag is there" (from previous prompt).
64-
// So if we inserted ANY ad in headers, we skip paragraphs.
65-
if (!primaryAdUsed) {
66-
const paragraphs = prose.querySelectorAll('p');
50+
// Priority 3: Paragraph based fallback
51+
const paragraphs = prose.querySelectorAll('p');
52+
console.log("insertAd: Fallback to paragraphs", paragraphs.length);
6753

68-
// Insert after 3rd paragraph
69-
if (paragraphs.length >= 3) {
70-
// Previous prompt said "after above 3rd paragraph" -> interpreted as after 3rd.
71-
// Wait, "after above 3rd paragraph" is ambiguous. "insert after above 3rd paragraph" -> maybe "insert after the paragraph that is above the 3rd one" (i.e. 2nd)?
72-
// Or "insert above 3rd paragraph" (before 3rd)?
73-
// Code in Step 153 used `afterend` on paragraphs[2] (after 3rd).
74-
// Let's stick to "After 3rd paragraph" as a reasonable default unless clarified.
75-
// Actually, let's use 'beforebegin' on the 3rd to match the "above" sentiment of header rule?
76-
// "if no heading tag is there then insert after above 3rd paragraph"
77-
// "after above 3rd paragraph" -> literally could mean "after the 3rd paragraph".
78-
// Let's stick to paragraphs[2].afterend (after 3rd).
79-
paragraphs[2].insertAdjacentElement('afterend', adContent);
80-
}
81-
// Fallback: Append to end
82-
else {
83-
prose.appendChild(adContent);
84-
}
54+
// Before 3rd paragraph
55+
if (paragraphs.length >= 3) {
56+
paragraphs[2].insertAdjacentElement('beforebegin', adContent);
57+
}
58+
// After 2nd paragraph
59+
else if (paragraphs.length >= 2) {
60+
paragraphs[1].insertAdjacentElement('afterend', adContent);
61+
}
62+
// After 1st paragraph
63+
else if (paragraphs.length >= 1) {
64+
paragraphs[0].insertAdjacentElement('afterend', adContent);
65+
}
66+
// End of content
67+
else {
68+
prose.appendChild(adContent);
69+
}
70+
71+
setTimeout(() => {
8572
try {
73+
console.log("insertAd: Pushing to adsbygoogle (Fallback)");
8674
((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
8775
} catch (e) {
8876
console.error("AdSense push failed", e);
8977
}
90-
}
78+
}, 100);
9179
}

‎src/styles/global.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,4 +541,65 @@ p {
541541

542542
:global([data-theme="dark"]) .video-container-wrapper:hover {
543543
box-shadow: 0 0 20px var(--color-primary);
544+
}
545+
546+
/* Prose Table Styles */
547+
.prose table {
548+
width: 100%;
549+
margin: 2rem 0;
550+
border-collapse: collapse;
551+
font-size: 0.95rem;
552+
font-family: var(--font-sans);
553+
border-radius: 8px;
554+
overflow: hidden;
555+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
556+
}
557+
558+
.prose thead {
559+
background-color: var(--color-primary);
560+
color: var(--color-text);
561+
}
562+
563+
.prose th {
564+
padding: 1rem;
565+
text-align: left;
566+
font-weight: 600;
567+
text-transform: uppercase;
568+
font-size: 0.85rem;
569+
letter-spacing: 0.05em;
570+
border-bottom: 2px solid var(--color-border);
571+
}
572+
573+
/* Specific color override for light/dark mode on table headers if needed */
574+
[data-theme="dark"] .prose thead {
575+
background-color: rgba(255, 255, 255, 0.1);
576+
}
577+
578+
[data-theme="light"] .prose thead {
579+
background-color: var(--color-primary);
580+
color: #fff;
581+
}
582+
583+
.prose td {
584+
padding: 0.75rem 1rem;
585+
border-bottom: 1px solid var(--color-border);
586+
color: var(--color-text);
587+
}
588+
589+
.prose tr:last-child td {
590+
border-bottom: none;
591+
}
592+
593+
.prose tr:hover td {
594+
background-color: var(--color-bg-offset);
595+
transition: background-color 0.2s ease;
596+
}
597+
598+
/* Responsive Tables */
599+
@media (max-width: 640px) {
600+
.prose table {
601+
display: block;
602+
overflow-x: auto;
603+
white-space: nowrap;
604+
}
544605
}

0 commit comments

Comments
 (0)