feat(content): show an ad after the main content of the page

filipedeschamps · Jul 17, 2024 · 5bf6be2 · 5bf6be2
1 parent 564fc57
commit 5bf6be2
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 58 deletions.
diff --git a/pages/[username]/[slug]/index.public.js b/pages/[username]/[slug]/index.public.js
@@ -1,17 +1,18 @@
 import { getStaticPropsRevalidate } from 'next-swr';
 import { useEffect, useState } from 'react';
 
-import { Box, Button, Confetti, Content, DefaultLayout, Link, TabCoinButtons, Tooltip } from '@/TabNewsUI';
+import { AdBanner, Box, Button, Confetti, Content, DefaultLayout, Link, TabCoinButtons, Tooltip } from '@/TabNewsUI';
 import { CommentDiscussionIcon, CommentIcon, FoldIcon, UnfoldIcon } from '@/TabNewsUI/icons';
 import { NotFoundError, ValidationError } from 'errors';
 import webserver from 'infra/webserver.js';
+import ad from 'models/advertisement';
 import authorization from 'models/authorization.js';
 import content from 'models/content.js';
 import removeMarkdown from 'models/remove-markdown.js';
 import user from 'models/user.js';
 import { useCollapse } from 'pages/interface';
 
-export default function Post({ contentFound, rootContentFound, parentContentFound, contentMetadata }) {
+export default function Post({ adFound, contentFound, rootContentFound, parentContentFound, contentMetadata }) {
   const [childrenToShow, setChildrenToShow] = useState(108);
   const [showConfetti, setShowConfetti] = useState(false);
 
@@ -82,6 +83,8 @@ export default function Post({ contentFound, rootContentFound, parentContentFoun
             />
           </Box>
 
+          {adFound && <AdBanner ad={adFound} sx={{ ml: 5, pl: 1, width: '100%' }} />}
+
           <RenderChildrenTree
             key={contentFound.id}
             childrenDeepCount={contentFound.children_deep_count}
@@ -415,8 +418,12 @@ export const getStaticProps = getStaticPropsRevalidate(async (context) => {
     secureParentContentFound.body = removeMarkdown(secureParentContentFound.body, { maxLength: 50 });
   }
 
+  const adsFound = await ad.getRandom(1);
+  const secureAdValues = authorization.filterOutput(userTryingToGet, 'read:ad:list', adsFound);
+
   return {
     props: {
+      adFound: secureAdValues[0] ?? null,
       contentFound: JSON.parse(JSON.stringify(secureContentFound)),
       rootContentFound: JSON.parse(JSON.stringify(secureRootContentFound)),
       parentContentFound: JSON.parse(JSON.stringify(secureParentContentFound)),

diff --git a/pages/faq/index.public.js b/pages/faq/index.public.js
@@ -56,7 +56,7 @@ Atualmente, o único espaço de anúncio disponível é o de [publicações patr
       question: 'Como funciona uma publicação patrocinada?',
       answer: `_Esse tipo de anúncio está em desenvolvimento, então está em constante evolução. Você pode acompanhar o que está sendo feito no [issue #1491 do GitHub](https://github.com/filipedeschamps/tabnews.com.br/issues/1491)._
 
-No topo das listas de conteúdos [Relevantes](/) e [Recentes](/recentes/pagina/1), uma publicação patrocinada escolhida de forma aleatória é exibida. Caso a publicação tenha um link de "**fonte**", o visitante que clicar no título da publicação será redirecionado para o link. Caso o link seja para um site externo, o domínio será identificado após o título, por exemplo: \`Título da publicação patrocinada (site-externo.com.br)\`.
+No topo das listas de conteúdos [Relevantes](/) e [Recentes](/recentes/pagina/1), e também nas páginas de publicações e comentários, após o conteúdo principal, uma publicação patrocinada escolhida de forma aleatória é exibida. Caso a publicação tenha um link de "**fonte**", o visitante que clicar no título da publicação será redirecionado para o link. Caso o link seja para um site externo, o domínio será identificado após o título, por exemplo: \`Título da publicação patrocinada (site-externo.com.br)\`.
 
 Para criar uma publicação patrocinada, você investirá **100 TabCash**. A cada dia que passar, **10 TabCash** serão consumidos da publicação patrocinada.
 

diff --git a/pages/interface/components/AdBanner/index.js b/pages/interface/components/AdBanner/index.js
@@ -0,0 +1,50 @@
+import { Box, Link, Text, Tooltip } from '@/TabNewsUI';
+import { LinkExternalIcon } from '@/TabNewsUI/icons';
+import { getDomain, isExternalLink, isTrustedDomain } from 'pages/interface';
+
+export default function AdBanner({ ad, ...props }) {
+  const link = ad.source_url || `/${ad.owner_username}/${ad.slug}`;
+  const isAdToExternalLink = isExternalLink(link);
+  const domain = isAdToExternalLink ? `(${getDomain(link)})` : '';
+  const title = ad.title.length > 70 ? ad.title.substring(0, 67).trim().concat('...') : ad.title;
+
+  return (
+    <Box {...props} as="aside" sx={{ display: 'grid', ...props.sx }}>
+      <Box>
+        <Link
+          sx={{
+            overflow: 'auto',
+            fontWeight: 'semibold',
+            wordWrap: 'break-word',
+            ':link': {
+              color: 'success.fg',
+            },
+            ':visited': {
+              color: 'success.fg',
+            },
+          }}
+          href={link}
+          rel={isTrustedDomain(link) ? undefined : 'nofollow'}>
+          <Text sx={{ wordBreak: 'break-word', marginRight: 1 }}>
+            {title} {domain}
+          </Text>
+          {isAdToExternalLink && <LinkExternalIcon verticalAlign="middle" />}
+        </Link>
+      </Box>
+
+      <Text sx={{ whiteSpace: 'nowrap', fontSize: 0, color: 'neutral.emphasis' }}>
+        Contribuindo com{' '}
+        <Tooltip
+          aria-label={`Autor: ${ad.owner_username}`}
+          direction="nw"
+          sx={{ position: 'absolute', display: 'grid' }}>
+          <Link
+            sx={{ overflow: 'hidden', textOverflow: 'ellipsis', color: 'neutral.emphasis', mr: 2 }}
+            href={`/${ad.owner_username}`}>
+            {ad.owner_username}
+          </Link>
+        </Tooltip>
+      </Text>
+    </Box>
+  );
+}
diff --git a/pages/interface/components/ContentList/index.js b/pages/interface/components/ContentList/index.js
@@ -1,6 +1,15 @@
-import { Box, EmptyState, Link, Pagination, PastTime, TabCoinBalanceTooltip, Text, Tooltip } from '@/TabNewsUI';
-import { CommentIcon, LinkExternalIcon } from '@/TabNewsUI/icons';
-import { getDomain, isExternalLink, isTrustedDomain } from 'pages/interface';
+import {
+  AdBanner,
+  Box,
+  EmptyState,
+  Link,
+  Pagination,
+  PastTime,
+  TabCoinBalanceTooltip,
+  Text,
+  Tooltip,
+} from '@/TabNewsUI';
+import { CommentIcon } from '@/TabNewsUI/icons';
 
 export default function ContentList({ ad, contentList: list, pagination, paginationBasePath, emptyStateProps }) {
   const listNumberStart = pagination.perPage * (pagination.currentPage - 1) + 1;
@@ -19,8 +28,14 @@ export default function ContentList({ ad, contentList: list, pagination, paginat
           }}
           key={`content-list-${listNumberStart}`}
           start={listNumberStart}>
-          <Ad ad={ad} />
+          {ad && (
+            <Box as="li" sx={{ display: 'block', gridColumnStart: 2, '::marker': 'none' }}>
+              <AdBanner ad={ad} />
+            </Box>
+          )}
+
           <RenderItems />
+
           <EndOfRelevant />
         </Box>
       ) : (
@@ -147,54 +162,3 @@ export default function ContentList({ ad, contentList: list, pagination, paginat
     return <EmptyState title="Nenhum conteúdo encontrado" {...props} />;
   }
 }
-
-function Ad({ ad }) {
-  if (!ad) {
-    return;
-  }
-
-  const link = ad.source_url || `/${ad.owner_username}/${ad.slug}`;
-  const isAdToExternalLink = isExternalLink(link);
-  const domain = isAdToExternalLink ? `(${getDomain(link)})` : '';
-  const title = ad.title.length > 70 ? ad.title.substring(0, 67).trim().concat('...') : ad.title;
-
-  return (
-    <Box as="li" sx={{ display: 'grid', gridColumnStart: 2, '::marker': 'none' }}>
-      <Box>
-        <Link
-          sx={{
-            overflow: 'auto',
-            fontWeight: 'semibold',
-            wordWrap: 'break-word',
-            ':link': {
-              color: 'success.fg',
-            },
-            ':visited': {
-              color: 'success.fg',
-            },
-          }}
-          href={link}
-          rel={isTrustedDomain(link) ? undefined : 'nofollow'}>
-          <Text sx={{ wordBreak: 'break-word', marginRight: 1 }}>
-            {title} {domain}
-          </Text>
-          {isAdToExternalLink && <LinkExternalIcon verticalAlign="middle" />}
-        </Link>
-      </Box>
-
-      <Text sx={{ whiteSpace: 'nowrap', fontSize: 0, color: 'neutral.emphasis' }}>
-        Contribuindo com{' '}
-        <Tooltip
-          aria-label={`Autor: ${ad.owner_username}`}
-          direction="nw"
-          sx={{ position: 'absolute', display: 'grid' }}>
-          <Link
-            sx={{ overflow: 'hidden', textOverflow: 'ellipsis', color: 'neutral.emphasis', mr: 2 }}
-            href={`/${ad.owner_username}`}>
-            {ad.owner_username}
-          </Link>
-        </Tooltip>
-      </Text>
-    </Box>
-  );
-}
diff --git a/pages/interface/components/TabNewsUI/index.js b/pages/interface/components/TabNewsUI/index.js
@@ -1,3 +1,4 @@
+export { default as AdBanner } from '@/AdBanner';
 export { default as ButtonWithLoader } from '@/ButtonWithLoader';
 export { default as Confetti } from '@/Confetti';
 export { default as Content } from '@/Content';