feat: restores banner

Author: velopert

src/containers/post/HorizontalBanner.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import VelogResponsive from '../../components/velog/VelogResponsive';
+
+function HorizontalBanner() {
+  useEffect(() => {
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }, []);
+
+  return (
+    <StyledResponsive>
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block', textAlign: 'center' }}
+        data-ad-layout="in-article"
+        data-ad-format="fluid"
+        data-ad-client="ca-pub-9161852896103498"
+        data-ad-slot="6869845586"
+      ></ins>
+    </StyledResponsive>
+  );
+}
+
+const StyledResponsive = styled(VelogResponsive)`
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+`;
+
+export default HorizontalBanner;

src/containers/post/PostViewer.tsx

@@ -35,9 +35,8 @@ import { toast } from 'react-toastify';
 import MobileLikeButton from '../../components/post/MobileLikeButton';
 import RelatedPost from './RelatedPost';
 import optimizeImage from '../../lib/optimizeImage';
-import RelatedPostsForGuest from './RelatedPostsForGuest';
-import HorizontalAd from './HorizontalAd';
 import { useSetShowFooter } from '../../components/velog/VelogPageTemplate';
+import HorizontalBanner from './HorizontalBanner';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -323,7 +322,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
 
   const isVeryOld =
     Date.now() - new Date(post.released_at).getTime() >
-    1000 * 60 * 60 * 24 * 365;
+    1000 * 60 * 60 * 24 * 180;
 
   const url = `https://velog.io/@${username}/${post.url_slug}`;
 
@@ -389,6 +388,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
           />
         }
       />
+      {userId === null && isVeryOld ? <HorizontalBanner /> : null}
       <PostContent isMarkdown={post.is_markdown} body={post.body} />
       <UserProfileWrapper>
         <UserProfile
@@ -400,7 +400,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
-      {showRecommends && userId === null && !isVeryOld && (
+      {/* {showRecommends && userId === null && !isVeryOld && (
         <RelatedPostsForGuest
           postId={post.id}
           showAds={
@@ -410,15 +410,18 @@ const PostViewer: React.FC<PostViewerProps> = ({
             //   1000 * 60 * 60 * 24 * 21
           }
         />
-      )}
-      {/* {isVeryOld && userId === null && <HorizontalAd />} */}
+      )} */}
+      {userId === null && isVeryOld && post.body.length > 300 ? (
+        <HorizontalBanner />
+      ) : null}
+
       <PostComments
         count={post.comments_count}
         comments={post.comments}
         postId={post.id}
         ownPost={post.user.id === userId}
       />
-      {showRecommends && (userId !== null || isVeryOld) && (
+      {/* {showRecommends && (userId !== null || isVeryOld) && (
         <RelatedPost
           postId={post.id}
           showAds={
@@ -429,7 +432,8 @@ const PostViewer: React.FC<PostViewerProps> = ({
             //   1000 * 60 * 60 * 24 * 30
           }
         />
-      )}
+      )} */}
+      {showRecommends ? <RelatedPost postId={post.id} showAds={false} /> : null}
     </PostViewerProvider>
   );
 };

src/index.server.ts

@@ -24,9 +24,9 @@ const proxyMiddleware = proxy(
 app.use(router.routes()).use(router.allowedMethods());
 app.use(ssrMiddleware);
 app.use(proxyMiddleware);
-// router.get('/ads.txt', (ctx) => {
-//   ctx.body = `google.com, pub-5574866530496701, DIRECT, f08c47fec0942fa0`;
-// });
+router.get('/ads.txt', (ctx) => {
+  ctx.body = `google.com, pub-9161852896103498, DIRECT, f08c47fec0942fa0`;
+});
 // router.post('/graphql', proxyMiddleware);
 
 app.listen(3001, () => {