11import { Link } from '@tanstack/react-router'
22import React from 'react'
33import { twMerge } from 'tailwind-merge'
4- import { getLibrary , libraries } from '~/libraries'
4+ import { libraries } from '~/libraries'
55
66declare global {
77 interface Window {
@@ -27,152 +27,96 @@ declare global {
2727 }
2828 }
2929 } >
30+ fusetag : {
31+ que : {
32+ push : ( fn : ( ) => void ) => void
33+ }
34+ pageInit : ( ) => void
35+ }
3036 }
3137}
3238
33- const adSlots = {
34- leaderboard : {
35- id : 'div-gpt-ad-1738811978953-leaderboard' ,
36- sizes : [ [ 728 , 90 ] ] ,
37- targeting : 'leaderboard' ,
38- refreshInterval : 45_000 ,
39- } ,
40- footer : {
41- id : 'div-gpt-ad-1738811978953-footer' ,
42- sizes : [ [ 728 , 90 ] ] ,
43- targeting : 'footer' ,
44- refreshInterval : 45_000 ,
45- } ,
46- rightRail : {
47- id : 'div-gpt-ad-1738811978953-right-rail' ,
48- sizes : [ [ 300 , 250 ] ] ,
49- targeting : 'right-side-rail' ,
50- refreshInterval : 45_000 ,
51- } ,
52- leftRail : {
53- id : 'div-gpt-ad-1738811978953-left-rail' ,
54- sizes : [ [ 300 , 250 ] ] ,
55- targeting : 'left-side-rail' ,
56- refreshInterval : 45_000 ,
57- } ,
58- } as Record <
59- string ,
60- {
61- id : string
62- sizes : [ number , number ] [ ]
63- targeting : string
64- refreshInterval : number
65- slot ?: any
66- }
67- >
68-
69- export function GoogleScripts ( ) {
70- return (
71- < >
72- < script
73- async
74- src = "https://securepubads.g.doubleclick.net/tag/js/gpt.js"
75- > </ script >
76- </ >
77- )
39+ export function GamOnPageChange ( ) {
40+ if ( typeof window === 'undefined' || ! window . fusetag ) return
41+ window . fusetag . que . push ( function ( ) {
42+ window . fusetag . pageInit ( )
43+ } )
7844}
7945
80- function Gad ( {
46+ export const GamScripts = ( ) => (
47+ < >
48+ < script
49+ async
50+ src = "https://cdn.fuseplatform.net/publift/tags/2/4019/fuse.js"
51+ />
52+ < script
53+ dangerouslySetInnerHTML = { {
54+ __html : `window.googletag = window.googletag || { cmd: [] };
55+ googletag.cmd.push(function () {
56+ googletag.pubads().set("page_url", "https://tanstack.com/ ");
57+ });` ,
58+ } }
59+ />
60+ </ >
61+ )
62+
63+ // GAM divs for ad placement
64+ const gamDivs = {
65+ incontent_1 : 'incontent_1' ,
66+ incontent_2 : 'incontent_2' ,
67+ incontent_3 : 'incontent_3' ,
68+ incontent_4 : 'incontent_4' ,
69+ incontent_footer : 'incontent_footer' ,
70+ mrec_1 : 'mrec_1' ,
71+ mrec_2 : 'mrec_2' ,
72+ } as const
73+
74+ function GamAd ( {
8175 name,
8276 children,
8377 ...props
84- } : { name : keyof typeof adSlots } & React . HTMLAttributes < HTMLDivElement > ) {
85- const adSlot = adSlots [ name ] !
86- const adId = adSlot . id
87-
88- React . useEffect ( ( ) => {
89- const googletag = window . googletag
90- if ( ! googletag ) return
91-
92- const cmd = googletag . cmd
93- if ( ! cmd ) return
94-
95- cmd . push ( function ( ) {
96- // Define all ad slots
97- if ( ! adSlot . slot ) {
98- adSlot . slot = googletag
99- . defineSlot ?.( '/23278945940/TopLevel' , adSlot . sizes , adSlot . id )
100- . addService ( googletag . pubads ?.( ) )
101- . setTargeting ( adSlot . targeting , [ adSlot . targeting ] )
102- googletag . pubads ?.( ) . enableSingleRequest ( )
103- googletag . enableServices ?.( )
104- googletag . display ?.( adId )
105- } else {
106- googletag . display ?.( adId )
107- googletag . pubads ?.( ) . refresh ( [ adSlot . slot ] )
108- }
109- } )
110-
111- // Set individual refresh intervals for each ad
112- const interval = setInterval ( function ( ) {
113- cmd . push ( function ( ) {
114- googletag . pubads ?.( ) . refresh ( [ adSlot . slot ] )
115- } )
116- } , adSlot . refreshInterval )
117-
118- return ( ) => {
119- clearInterval ( interval )
120- }
121- } , [ ] )
78+ } : { name : keyof typeof gamDivs } & React . HTMLAttributes < HTMLDivElement > ) {
79+ const gamId = gamDivs [ name ]
12280
12381 return (
124- < div
125- { ...props }
126- className = "grid [&>*]:col-start-1 [&>*]:row-start-1"
127- id = { adId }
128- >
129- { /* <div className="w-full flex-1 z-10"></div> */ }
82+ < div { ...props } className = "grid [&>*]:col-start-1 [&>*]:row-start-1" >
13083 < div className = "flex items-center justify-center" > { children } </ div >
84+ < div data-fuse = { gamId } />
13185 </ div >
13286 )
13387}
13488
135- export function GadLeader ( ) {
136- // return (
137- // <div className="overflow-hidden h-0 w-0">
138- // <Gad
139- // adId={adSlots.leaderboard.id}
140- // style={{
141- // maxWidth: '728px',
142- // aspectRatio: '728 / 90',
143- // }}
144- // />
145- // </div>
146- // )
147-
89+ export function GamLeader ( ) {
14890 return null
14991}
15092
151- export function GadFooter ( ) {
152- return (
153- < Gad name = "footer" style = { { maxWidth : '728px' , aspectRatio : '728 / 90' } } />
154- )
93+ export function GamFooter ( ) {
94+ return < GamAd name = "incontent_footer" style = { { maxWidth : '728px' } } />
15595}
15696
157- const libraryHalfIndex = Math . ceil ( libraries . length / 2 )
97+ const supportedLibraries = libraries . filter (
98+ ( d ) => d . id && d . name && d . description && d . description . length > 0
99+ )
158100
159- export function GadRightRailSquare ( ) {
101+ const libraryHalfIndex = Math . ceil ( supportedLibraries . length / 2 )
102+
103+ export function GamRightRailSquare ( ) {
160104 const randomLibrary = React . useMemo ( ( ) => {
161- const sampledLibraries = libraries . slice ( 0 , libraryHalfIndex )
105+ const sampledLibraries = supportedLibraries . slice ( 0 , libraryHalfIndex )
162106 const seed = Math . floor ( Date . now ( ) / ( 1000 * 60 * 5 ) ) // Change seed every 5 minutes
163107 return sampledLibraries [ seed % sampledLibraries . length ]
164108 } , [ ] )
165109
166110 return (
167- < Gad
168- name = "rightRail "
111+ < GamAd
112+ name = "mrec_1 "
169113 className = "[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
170114 >
171115 < Link
172- to = { `/${ randomLibrary . id } }
116+ to = { `/${ randomLibrary . id } as any }
173117 className = "flex flex-col justify-center items-center h-[250px] w-[250px] gap-4 group"
174118 >
175- < div className = "flex items-center gap-2 text-3xl font-black uppercase tracking-tighter" >
119+ < div className = "flex items-center gap-2 flex-wrap justify-center text-3xl font-black uppercase tracking-tighter leading-none " >
176120 < span > TanStack</ span >
177121 < span
178122 className = { twMerge (
@@ -196,27 +140,27 @@ export function GadRightRailSquare() {
196140 </ button >
197141 </ div >
198142 </ Link >
199- </ Gad >
143+ </ GamAd >
200144 )
201145}
202146
203- export function GadLeftRailSquare ( ) {
147+ export function GamLeftRailSquare ( ) {
204148 const randomRemainingLibrary = React . useMemo ( ( ) => {
205- const remainingLibraries = libraries . slice ( libraryHalfIndex )
149+ const remainingLibraries = supportedLibraries . slice ( libraryHalfIndex )
206150 const seed = Math . floor ( Date . now ( ) / ( 1000 * 60 * 5 ) ) // Change seed every 5 minutes
207151 return remainingLibraries [ seed % remainingLibraries . length ]
208152 } , [ ] )
209153
210154 return (
211- < Gad
212- name = "leftRail "
155+ < GamAd
156+ name = "mrec_2 "
213157 className = "[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
214158 >
215159 < Link
216- to = { `/${ randomRemainingLibrary . id } }
160+ to = { `/${ randomRemainingLibrary . id } as any }
217161 className = "flex flex-col justify-center items-center h-[250px] w-[250px] gap-4 group"
218162 >
219- < div className = "flex items-center gap-2 text-3xl font-black uppercase tracking-tighter" >
163+ < div className = "flex items-center gap-2 flex-wrap justify-center text-3xl font-black uppercase tracking-tighter leading-none " >
220164 < span > TanStack</ span >
221165 < span
222166 className = { twMerge (
@@ -242,6 +186,35 @@ export function GadLeftRailSquare() {
242186 </ button >
243187 </ div >
244188 </ Link >
245- </ Gad >
189+ </ GamAd >
246190 )
247191}
192+
193+ // Export GAM div components for direct use
194+ export function GamIncontent1 ( ) {
195+ return < GamAd name = "incontent_1" />
196+ }
197+
198+ export function GamIncontent2 ( ) {
199+ return < GamAd name = "incontent_2" />
200+ }
201+
202+ export function GamIncontent3 ( ) {
203+ return < GamAd name = "incontent_3" />
204+ }
205+
206+ export function GamIncontent4 ( ) {
207+ return < GamAd name = "incontent_4" />
208+ }
209+
210+ export function GamIncontentFooter ( ) {
211+ return < GamAd name = "incontent_footer" />
212+ }
213+
214+ export function GamMrec1 ( ) {
215+ return < GamAd name = "mrec_1" />
216+ }
217+
218+ export function GamMrec2 ( ) {
219+ return < GamAd name = "mrec_2" />
220+ }
0 commit comments