Skip to content

Commit 3a6a01c

Browse files
muhammad-fiazmuhammad-fiaz
committed
added ads
1 parent 5e3b987 commit 3a6a01c

File tree

13 files changed

+374
-135
lines changed

13 files changed

+374
-135
lines changed

‎.github/workflows/astro_deploy.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ jobs:
3030
# 3. Create .env file with secrets
3131
- name: Create .env file
3232
run: |
33+
echo "RUN_KEYSTATIC=false" >> .env
34+
echo "PUBLIC_BUILD_ENV=production" >> .env
3335
echo "PUBLIC_GISCUS_REPO=${{ secrets.PUBLIC_GISCUS_REPO }}" >> .env
3436
echo "PUBLIC_GISCUS_REPO_ID=${{ secrets.PUBLIC_GISCUS_REPO_ID }}" >> .env
3537
echo "PUBLIC_GISCUS_CATEGORY=${{ secrets.PUBLIC_GISCUS_CATEGORY }}" >> .env

‎bun.lock‎

Lines changed: 91 additions & 103 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,34 @@
1111
},
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.4",
14-
"@astrojs/mdx": "^4.3.4",
15-
"@astrojs/react": "^4.3.0",
14+
"@astrojs/mdx": "^4.3.5",
15+
"@astrojs/react": "^4.3.1",
1616
"@astrojs/rss": "^4.0.12",
17-
"@astrojs/sitemap": "^3.5.1",
18-
"@fontsource-variable/source-serif-4": "^5.2.8",
17+
"@astrojs/sitemap": "^3.6.0",
18+
"@fontsource-variable/source-serif-4": "^5.2.9",
1919
"@fontsource/source-sans-pro": "^5.2.5",
2020
"@keystatic/astro": "^5.0.6",
2121
"@keystatic/core": "^0.5.48",
2222
"@pagefind/default-ui": "^1.4.0",
23-
"@tailwindcss/vite": "^4.1.12",
24-
"@types/react": "^19.1.12",
23+
"@tailwindcss/vite": "^4.1.13",
24+
"@types/react": "^19.1.13",
2525
"@types/react-dom": "^19.1.9",
26-
"astro": "^5.13.5",
27-
"astro-pagefind": "^1.8.4",
26+
"astro": "^5.13.9",
27+
"astro-pagefind": "^1.8.5",
2828
"date-fns": "^4.1.0",
2929
"mdast-util-to-string": "^4.0.0",
3030
"pagefind": "^1.4.0",
3131
"react": "^19.1.1",
3232
"react-dom": "^19.1.1",
3333
"reading-time": "^1.5.0",
3434
"rehype-shift-heading": "^2.0.0",
35-
"tailwindcss": "^4.1.12",
35+
"tailwindcss": "^4.1.13",
3636
"typescript": "^5.9.2"
3737
},
3838
"devDependencies": {
39-
"@tailwindcss/typography": "^0.5.16",
39+
"@tailwindcss/typography": "^0.5.18",
4040
"cross-env": "^10.0.0",
41-
"daisyui": "^5.1.6",
41+
"daisyui": "^5.1.13",
4242
"prettier": "3.6.2"
4343
}
4444
}

‎public/ads.txt‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/elements/AdUnit.astro‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
import { GOOGLE_CONFIG } from "@/utils/google-config";
3+
4+
interface Props {
5+
adSlot: string;
6+
adType?: "in-article" | "display" | "fluid-layout" | "autorelaxed";
7+
adFormat?: string;
8+
adLayout?: string;
9+
adLayoutKey?: string;
10+
className?: string;
11+
}
12+
13+
const {
14+
adSlot,
15+
adType = "in-article",
16+
adFormat,
17+
adLayout,
18+
adLayoutKey,
19+
className = "",
20+
} = Astro.props;
21+
---
22+
23+
{
24+
GOOGLE_CONFIG.ADSENSE_CLIENT_ID && (
25+
<div class={`ad-container ${className}`} style="min-height: 0;">
26+
<script
27+
is:inline
28+
async
29+
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}
30+
crossorigin="anonymous"
31+
/>
32+
33+
{adType === "display" && (
34+
<ins
35+
class="adsbygoogle"
36+
style="display:block; min-height: 0;"
37+
data-ad-client={GOOGLE_CONFIG.ADSENSE_CLIENT_ID}
38+
data-ad-slot={adSlot}
39+
data-ad-format={adFormat || "auto"}
40+
data-full-width-responsive="true"
41+
/>
42+
)}
43+
44+
{adType === "fluid-layout" && (
45+
<ins
46+
class="adsbygoogle"
47+
style="display:block"
48+
data-ad-format="fluid"
49+
data-ad-layout-key={adLayoutKey}
50+
data-ad-client={GOOGLE_CONFIG.ADSENSE_CLIENT_ID}
51+
data-ad-slot={adSlot}
52+
/>
53+
)}
54+
55+
{adType === "autorelaxed" && (
56+
<ins
57+
class="adsbygoogle"
58+
style="display:block"
59+
data-ad-format="autorelaxed"
60+
data-ad-client={GOOGLE_CONFIG.ADSENSE_CLIENT_ID}
61+
data-ad-slot={adSlot}
62+
/>
63+
)}
64+
65+
{adType === "in-article" && (
66+
<ins
67+
class="adsbygoogle"
68+
style="display:block; text-align:center;"
69+
data-ad-layout={adLayout || "in-article"}
70+
data-ad-format={adFormat || "fluid"}
71+
data-ad-client={GOOGLE_CONFIG.ADSENSE_CLIENT_ID}
72+
data-ad-slot={adSlot}
73+
/>
74+
)}
75+
76+
<script is:inline>
77+
(adsbygoogle = window.adsbygoogle || []).push({});
78+
</script>
79+
80+
<style>
81+
.ad-container:empty,
82+
.ad-container:has(.adsbygoogle:not([data-ad-status])) {
83+
display: none !important;
84+
}
85+
.adsbygoogle {
86+
min-height: 0 !important;
87+
}
88+
.adsbygoogle[data-ad-status="unfilled"] {
89+
display: none !important;
90+
}
91+
</style>
92+
</div>
93+
)
94+
}

‎src/layouts/content.astro‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
---
2+
// Content layout component
3+
---
4+
15
<article
26
class="prose md:prose-lg py-8 container prose-img:border prose-img:mx-auto prose-img:border-base-200 prose-img:rounded-lg prose-p:break-words prose-a:break-all prose-pre:break-words prose-pre:cursor-text prose-code:break-words prose-code:whitespace-pre-wrap"
37
data-pagefind-body
48
>
5-
<slot />
9+
<div id="article-content">
10+
<slot />
11+
</div>
612
</article>

‎src/pages/ads.txt.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { GOOGLE_CONFIG } from "@/utils/google-config";
2+
3+
export async function GET() {
4+
const adsTxtContent = `google.com, ${GOOGLE_CONFIG.ADSENSE_CLIENT_ID.replace('ca-pub-', '')}, DIRECT, f08c47fec0942fa0
5+
`;
6+
7+
return new Response(adsTxtContent, {
8+
headers: {
9+
'Content-Type': 'text/plain',
10+
},
11+
});
12+
}

‎src/pages/articles/[page].astro‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { SITE } from "@/lib/config";
55
import Pagination from "@/components/shared/pagination.astro";
66
import { getEntry } from "astro:content";
77
import WideCard from "@/components/cards/wideCard.astro";
8+
import AdUnit from "@/components/elements/AdUnit.astro";
89
910
import { articlesHandler } from "@/lib/handlers/articles";
1011
@@ -31,11 +32,26 @@ const [HEADER] = entry.data.blocks;
3132
<section class="flex-1">
3233
<ul class="flex flex-col gap-4">
3334
{
34-
articles.map((article) => (
35-
<WideCard
36-
article={article}
37-
isLast={articles.lastIndexOf(article) === articles.length - 1}
38-
/>
35+
articles.map((article, index) => (
36+
<>
37+
<WideCard
38+
article={article}
39+
isLast={articles.lastIndexOf(article) === articles.length - 1}
40+
/>
41+
{/* Insert ad after every 3rd item, but not after the last item */}
42+
{index > 0 &&
43+
(index + 1) % 3 === 0 &&
44+
index !== articles.length - 1 && (
45+
<li class="my-4">
46+
<AdUnit
47+
adType="fluid-layout"
48+
adSlot="5304666400"
49+
adLayoutKey="-fb+5w+4e-db+86"
50+
className="w-full"
51+
/>
52+
</li>
53+
)}
54+
</>
3955
))
4056
}
4157
</ul>

‎src/pages/articles/[year]/[month]/[day]/[slug].astro‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import BaseLayout from "@/layouts/base.astro";
44
import ContentLayout from "@/layouts/content.astro";
55
import ArticleHeader from "../../../_components/article-header.astro";
66
import Giscus from "@/components/elements/giscus.astro";
7+
import AdUnit from "@/components/elements/AdUnit.astro";
78
import NewsCard from "@/components/cards/newsCard.astro";
89
import { SITE } from "@/lib/config";
910
@@ -98,8 +99,9 @@ if (recommended.length < 3) {
9899
</details>
99100
</div>
100101
</div>
101-
<ContentLayout>
102+
<ContentLayout showAds={true}>
102103
<Content />
104+
<AdUnit adSlot="2308296961" adLayout="in-article" adFormat="fluid" />
103105
</ContentLayout>
104106

105107
{
@@ -261,4 +263,37 @@ if (recommended.length < 3) {
261263
}
262264
document.addEventListener("astro:page-load", initTOC);
263265
document.addEventListener("astro:after-swap", initTOC);
266+
267+
// Position the ad after the 3rd paragraph
268+
function positionArticleAd() {
269+
const articleContent = document.getElementById("article-content");
270+
const adContainer = document.querySelector(".ad-container");
271+
272+
if (!articleContent || !adContainer) return;
273+
274+
// Get all paragraphs in the article
275+
const paragraphs = articleContent.querySelectorAll("p");
276+
277+
// Move ad after the 3rd paragraph (if it exists)
278+
if (paragraphs.length >= 3) {
279+
const targetParagraph = paragraphs[2];
280+
targetParagraph.parentNode.insertBefore(
281+
adContainer,
282+
targetParagraph.nextSibling
283+
);
284+
}
285+
}
286+
287+
// Run ad positioning after TOC is initialized
288+
const initAds = () => {
289+
setTimeout(positionArticleAd, 100); // Small delay to ensure content is rendered
290+
};
291+
292+
if (document.readyState === "loading") {
293+
document.addEventListener("DOMContentLoaded", initAds, { once: true });
294+
} else {
295+
initAds();
296+
}
297+
document.addEventListener("astro:page-load", initAds);
298+
document.addEventListener("astro:after-swap", initAds);
264299
</script>

‎src/pages/authors/[id]/[page].astro‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { articlesHandler } from "@/lib/handlers/articles";
55
import { authorsHandler } from "@/lib/handlers/authors";
66
import ListLayout from "@/layouts/list.astro";
77
import WideCard from "@/components/cards/wideCard.astro";
8+
import AdUnit from "@/components/elements/AdUnit.astro";
89
import Pagination from "@/components/shared/pagination.astro";
910
import { getEntry } from "astro:content";
1011
@@ -117,11 +118,24 @@ const [HEADER] = entry.data.blocks;
117118
<section class="flex-1">
118119
<ul class="flex flex-col gap-4">
119120
{
120-
articles.map((article) => (
121-
<WideCard
122-
article={article}
123-
isLast={articles.lastIndexOf(article) === articles.length - 1}
124-
/>
121+
articles.map((article, index) => (
122+
<>
123+
<WideCard
124+
article={article}
125+
isLast={articles.lastIndexOf(article) === articles.length - 1}
126+
/>
127+
{/* Insert ad after every 3rd item, but not after the last item */}
128+
{index > 0 && (index + 1) % 3 === 0 && index !== articles.length - 1 && (
129+
<li class="my-4">
130+
<AdUnit
131+
adType="fluid-layout"
132+
adSlot="5304666400"
133+
adLayoutKey="-fb+5w+4e-db+86"
134+
className="w-full"
135+
/>
136+
</li>
137+
)}
138+
</>
125139
))
126140
}
127141
</ul>

0 commit comments

Comments
 (0)