Skip to content

Commit 77a5d91

Browse files
velopertvelopert
committed
fix: apply fuse on stage
1 parent 5558f14 commit 77a5d91

File tree

7 files changed

+149
-30
lines changed

7 files changed

+149
-30
lines changed

‎public/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,15 @@
3939
</script>
4040
<!-- Cloudflare (turnstile) -->
4141
<script defer src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onAppReady"></script>
42-
42+
<script async src="https://cdn.fuseplatform.net/publift/tags/2/4158/fuse.js"></script>
4343

4444
<title>React App</title>
4545
</head>
4646
<body>
4747
<noscript>You need to enable JavaScript to run this app.</noscript>
48+
<div id="fuse-sidebar"></div>
4849
<div id="root"></div>
50+
4951
<!--
5052
This HTML file is a template.
5153
If you open it directly in the browser, you will see an empty page.

‎src/components/common/MarkdownRender.tsx‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -349,26 +349,30 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
349349

350350
if (firstAdBlock) {
351351
// Insert first ad
352-
const adDiv1 = doc.createElement('ins');
353-
adDiv1.className = 'adsbygoogle';
354-
adDiv1.style.display = 'block';
355-
adDiv1.style.textAlign = 'center';
356-
adDiv1.setAttribute('data-ad-layout', 'in-article');
357-
adDiv1.setAttribute('data-ad-format', 'fluid');
358-
adDiv1.setAttribute('data-ad-client', 'ca-pub-5574866530496701');
359-
adDiv1.setAttribute('data-ad-slot', '9632367492');
352+
// const adDiv1 = doc.createElement('ins');
353+
// adDiv1.className = 'adsbygoogle';
354+
// adDiv1.style.display = 'block';
355+
// adDiv1.style.textAlign = 'center';
356+
// adDiv1.setAttribute('data-ad-layout', 'in-article');
357+
// adDiv1.setAttribute('data-ad-format', 'fluid');
358+
// adDiv1.setAttribute('data-ad-client', 'ca-pub-5574866530496701');
359+
// adDiv1.setAttribute('data-ad-slot', '9632367492');
360+
const adDiv1 = doc.createElement('div');
361+
adDiv1.setAttribute('data-fuse', 'incontent_1_articlepage');
360362
firstAdBlock.parentNode?.insertBefore(adDiv1, firstAdBlock);
361363

362364
// Insert second ad if applicable
363365
if (secondAdBlock) {
364-
const adDiv2 = doc.createElement('ins');
365-
adDiv2.className = 'adsbygoogle';
366-
adDiv2.style.display = 'block';
367-
adDiv2.style.textAlign = 'center';
368-
adDiv2.setAttribute('data-ad-layout', 'in-article');
369-
adDiv2.setAttribute('data-ad-format', 'fluid');
370-
adDiv2.setAttribute('data-ad-client', 'ca-pub-5574866530496701');
371-
adDiv2.setAttribute('data-ad-slot', '9632367492');
366+
// const adDiv2 = doc.createElement('ins');
367+
// adDiv2.className = 'adsbygoogle';
368+
// adDiv2.style.display = 'block';
369+
// adDiv2.style.textAlign = 'center';
370+
// adDiv2.setAttribute('data-ad-layout', 'in-article');
371+
// adDiv2.setAttribute('data-ad-format', 'fluid');
372+
// adDiv2.setAttribute('data-ad-client', 'ca-pub-5574866530496701');
373+
// adDiv2.setAttribute('data-ad-slot', '9632367492');
374+
const adDiv2 = doc.createElement('div');
375+
adDiv2.setAttribute('data-fuse', 'incontent_2_articlepage');
372376
secondAdBlock.parentNode?.insertBefore(adDiv2, secondAdBlock);
373377
}
374378

@@ -378,10 +382,18 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
378382

379383
// Push ads after 1 second
380384
setTimeout(() => {
381-
(window.adsbygoogle = window.adsbygoogle || []).push({});
382-
if (secondAdBlock) {
383-
(window.adsbygoogle = window.adsbygoogle || []).push({});
384-
}
385+
// (window.adsbygoogle = window.adsbygoogle || []).push({});
386+
// if (secondAdBlock) {
387+
// (window.adsbygoogle = window.adsbygoogle || []).push({});
388+
// }
389+
390+
const fusetag = window.fusetag || (window.fusetag = { que: [] });
391+
392+
fusetag.que.push(function () {
393+
const init = (fusetag as any).pageInit;
394+
if (!init) return;
395+
init({});
396+
});
385397
}, 1000);
386398
} else {
387399
setHtmlWithAds('');

‎src/components/post/FuseSideAd.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React, { useEffect, useState } from 'react';
2+
import styled from 'styled-components';
3+
import { getScrollTop } from '../../lib/utils';
4+
import { createPortal } from 'react-dom';
5+
6+
const INITIAL_TOP = 510;
7+
const FIXED_TOP = 80;
8+
const MIN_HEIGHT = 694;
9+
const MIN_WIDTH = 1140;
10+
11+
const Box = styled.div<{ fixed: boolean }>`
12+
position: ${({ fixed }) => (fixed ? 'fixed' : 'absolute')};
13+
top: ${({ fixed }) => (fixed ? `${FIXED_TOP}px` : `${INITIAL_TOP}px`)};
14+
right: calc(50% + 432px);
15+
`;
16+
17+
const Actual = styled.div`
18+
width: 120px;
19+
height: 600px;
20+
21+
@media (min-width: 1219px) {
22+
width: 160px;
23+
}
24+
25+
@media (min-width: 1619px) {
26+
width: 300px;
27+
}
28+
`;
29+
30+
function FuseSideAdInner() {
31+
const [fixed, setFixed] = useState(false);
32+
33+
useEffect(() => {
34+
const onScroll = () => {
35+
const scrollTop = getScrollTop();
36+
const shouldBeFixed = scrollTop >= INITIAL_TOP - FIXED_TOP;
37+
setFixed(shouldBeFixed);
38+
};
39+
40+
window.addEventListener('scroll', onScroll);
41+
onScroll();
42+
43+
return () => {
44+
window.removeEventListener('scroll', onScroll);
45+
};
46+
}, []);
47+
48+
useEffect(() => {
49+
const fusetag = window.fusetag || (window.fusetag = { que: [] });
50+
51+
fusetag.que.push(function () {
52+
const init = (fusetag as any).pageInit;
53+
if (!init) return;
54+
init({});
55+
});
56+
}, []);
57+
58+
return (
59+
<Box fixed={fixed}>
60+
<Actual>
61+
<div data-fuse="sidebar_LHS"></div>
62+
</Actual>
63+
</Box>
64+
);
65+
}
66+
67+
export default function FuseSideAd() {
68+
const [visible, setVisible] = useState(false);
69+
70+
useEffect(() => {
71+
const checkSize = () => {
72+
const meetsHeight = window.innerHeight >= MIN_HEIGHT;
73+
const meetsWidth = window.innerWidth >= MIN_WIDTH;
74+
setVisible(meetsHeight && meetsWidth);
75+
};
76+
77+
checkSize();
78+
window.addEventListener('resize', checkSize);
79+
80+
return () => {
81+
window.removeEventListener('resize', checkSize);
82+
};
83+
}, []);
84+
85+
if (!visible) return null;
86+
87+
const target = document.getElementById('fuse-sidebar');
88+
if (!target) return null;
89+
90+
return createPortal(<FuseSideAdInner />, target);
91+
}

‎src/containers/post/PostViewer.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import PostBanner from '../../components/post/PostBanner';
4949
import JobPositions from '../../components/post/JobPositions';
5050
import SideAd from '../../components/post/SideAd';
5151
import NarrowAd from '../../components/common/NarrowAd';
52+
import FuseSideAd from '../../components/post/FuseSideAd';
5253

5354
const UserProfileWrapper = styled(VelogResponsive)`
5455
margin-top: 16rem;
@@ -521,13 +522,15 @@ const PostViewer: React.FC<PostViewerProps> = ({
521522
onEdit={onEdit}
522523
onOpenStats={onOpenStats}
523524
shareButtons={
524-
<PostLikeShareButtons
525-
onLikeToggle={onLikeToggle}
526-
onShareClick={onShareClick}
527-
likes={post.likes}
528-
liked={post.liked}
529-
postId={post.id}
530-
/>
525+
userId ? (
526+
<PostLikeShareButtons
527+
onLikeToggle={onLikeToggle}
528+
onShareClick={onShareClick}
529+
likes={post.likes}
530+
liked={post.liked}
531+
postId={post.id}
532+
/>
533+
) : null
531534
}
532535
toc={<PostToc />}
533536
isPrivate={post.is_private}
@@ -544,9 +547,9 @@ const PostViewer: React.FC<PostViewerProps> = ({
544547
followingUserId={post.user.id}
545548
/>
546549
}
547-
sideAd={shouldShowAds ? <SideAd /> : undefined}
550+
sideAd={shouldShowAds ? <FuseSideAd /> : undefined}
548551
/>
549-
{shouldShowAds ? <NarrowAd /> : null}
552+
{/* {shouldShowAds ? <NarrowAd /> : null} */}
550553
{/* {shouldShowBanner ? (
551554
<PostBanner customAd={customAd} isDisplayAd={true} />
552555
) : null} */}

‎src/pages/PolicyPage.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,18 @@ const PolicyTemplate = styled(PageTemplate)`
1717
width: 768px;
1818
padding-bottom: 5rem;
1919
}
20+
21+
#fuse-privacy-tool {
22+
font-size: 0.5rem;
23+
}
2024
`;
2125

2226
function PolicyPage({ match }: PolicyPageProps) {
2327
const { type = 'terms' } = match.params;
2428

2529
return (
2630
<PolicyTemplate>
31+
<div data-fuse-privacy-tool></div>
2732
<main>
2833
<HorizontalTab activeTab={type} tabWidth={12}>
2934
<HorizontalTab.TabItem

‎src/server/Html.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,17 @@ function Html({
9090
gtag('config', 'G-8D0MD2S4PK');`,
9191
}}
9292
></script>
93+
<script
94+
async
95+
src="https://cdn.fuseplatform.net/publift/tags/2/4158/fuse.js"
96+
></script>
9397
<script
9498
defer
9599
src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onAppReady"
96100
></script>
97101
</head>
98102
<body data-theme={theme}>
103+
<div id="fuse-sidebar"></div>
99104
<div id="root" dangerouslySetInnerHTML={{ __html: content }}></div>
100105
<script
101106
dangerouslySetInnerHTML={{

‎src/types/window.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
declare global {
22
interface Window {
33
adsbygoogle: { [key: string]: unknown }[];
4+
fusetag: { que: unknown[] };
45
}
56
}
67

0 commit comments

Comments
 (0)