diff --git a/apps/web/package.json b/apps/web/package.json
index fa315def..21caf04f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -47,6 +47,7 @@
"reflect-metadata": "^0.1.13",
"remark-gfm": "^3.0.1",
"sharp": "^0.31.3",
+ "tailwind-merge": "^2.2.1",
"type-graphql": "2.0.0-beta.3",
"zod": "^3.17.3"
},
diff --git a/apps/web/src/components/AdContainer.tsx b/apps/web/src/components/AdContainer.tsx
index 566baca1..1954d20b 100644
--- a/apps/web/src/components/AdContainer.tsx
+++ b/apps/web/src/components/AdContainer.tsx
@@ -1,11 +1,14 @@
import React, { useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
interface Props {
slotId: string;
className?: string;
+ test?: boolean;
+ type?: 'display' | 'in-feed';
}
-const AdContainer = ({ slotId, className }: Props) => {
+const AdContainer = ({ slotId, className, test, type = 'display' }: Props) => {
useEffect(() => {
if (process.env.NODE_ENV === 'production') {
if (typeof window !== 'undefined') {
@@ -15,14 +18,24 @@ const AdContainer = ({ slotId, className }: Props) => {
}, []);
return (
- <div className={className}>
- <ins
- className='adsbygoogle block'
- data-ad-client='ca-pub-4274133898976040'
- data-ad-slot={slotId}
- data-ad-format='auto'
- data-full-width-responsive='true'
- />
+ <div className={twMerge(className, test && 'h-24 bg-blue-200')}>
+ {type === 'in-feed' ? (
+ <ins
+ className='adsbygoogle block'
+ data-ad-client='ca-pub-4274133898976040'
+ data-ad-slot={slotId}
+ data-ad-format='fluid'
+ data-ad-layout-key='-fb+5w+4e-db+86'
+ />
+ ) : (
+ <ins
+ className='adsbygoogle block'
+ data-ad-client='ca-pub-4274133898976040'
+ data-ad-slot={slotId}
+ data-ad-format='auto'
+ data-full-width-responsive='true'
+ />
+ )}
</div>
);
};
diff --git a/apps/web/src/components/FeedAdContainer.tsx b/apps/web/src/components/FeedAdContainer.tsx
deleted file mode 100644
index 09508ad0..00000000
--- a/apps/web/src/components/FeedAdContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useEffect } from 'react';
-
-interface Props {
- slotId: string;
- className?: string;
-}
-
-const AdContainer = ({ slotId, className }: Props) => {
- useEffect(() => {
- if (process.env.NODE_ENV === 'production') {
- if (typeof window !== 'undefined') {
- (window.adsbygoogle = window.adsbygoogle || []).push({});
- }
- }
- }, []);
-
- return (
- <div className={className}>
- <ins
- className='adsbygoogle block'
- data-ad-client='ca-pub-4274133898976040'
- data-ad-layout-key="-il+e-1e-2w+ap"
- data-ad-slot={slotId}
- data-ad-format='fluid'
- />
- </div>
- );
-};
-
-export default AdContainer;
diff --git a/apps/web/src/pages/global.tsx b/apps/web/src/pages/global.tsx
index 2e6b944c..d94ee953 100644
--- a/apps/web/src/pages/global.tsx
+++ b/apps/web/src/pages/global.tsx
@@ -18,9 +18,6 @@ import type { NextPageWithLayout } from '..';
const AdContainer = dynamic(() => import('@/components/AdContainer'), {
ssr: false,
});
-const FeedAdContainer = dynamic(() => import('@/components/FeedAdContainer'), {
- ssr: false,
-});
const Global: NextPageWithLayout = () => {
const [sendGlobalModal, setSendGlobalModal] = useState(false);
@@ -82,7 +79,7 @@ const Global: NextPageWithLayout = () => {
<p className='mt-4'>
🎉 Huge update coming to <strong>Umamin Global</strong>!
</p>
- <p className='text-secondary-400 mt-5 border-t border-secondary-100 pt-5'>
+ <p className='text-secondary-400 border-secondary-100 mt-5 border-t pt-5'>
Follow us for updates:
</p>
@@ -90,7 +87,7 @@ const Global: NextPageWithLayout = () => {
<Link
className='flex items-center space-x-2 leading-none'
href='https://www.instagram.com/umamin.app/'
- target="_blank"
+ target='_blank'
>
<BsInstagram className='text-primary-300' />
<p>@umamin.app</p>
@@ -99,7 +96,7 @@ const Global: NextPageWithLayout = () => {
<Link
className='flex items-center space-x-2 leading-none'
href='https://www.facebook.com/umamin.official/'
- target="_blank"
+ target='_blank'
>
<BsFacebook className='text-primary-300' />
<p>@umamin.official</p>
@@ -145,11 +142,15 @@ const Global: NextPageWithLayout = () => {
{messageData && (
<GlobalPost message={messageData} key={messageData.id} />
)}
- {messages?.map((m) => (
- <GlobalPost message={m} key={m?.id} />
- ))}
+ {messages?.map((m, i) => (
+ <div key={m?.id}>
+ {(i + 1) % 5 === 0 && (
+ <AdContainer slotId='1966757556' test className='mb-12' />
+ )}
- <FeedAdContainer slotId='1966757556' className='my-4' />
+ <GlobalPost message={m} />
+ </div>
+ ))}
</div>
<Container className='mt-12 grid place-items-center'>
diff --git a/yarn.lock b/yarn.lock
index 1e579da7..8d86a282 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1163,6 +1163,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.23.7":
+ version "7.23.9"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+ integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.18.10":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -7607,6 +7614,11 @@ regenerator-runtime@^0.13.4:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+regenerator-runtime@^0.14.0:
+ version "0.14.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+ integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
regenerator-transform@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -8311,6 +8323,13 @@ swap-case@^2.0.2:
dependencies:
tslib "^2.0.3"
+tailwind-merge@^2.2.1:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb"
+ integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==
+ dependencies:
+ "@babel/runtime" "^7.23.7"
+
tailwindcss@^3.1.4:
version "3.1.7"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.7.tgz#ce99425f30a74e01457a2e6a724463b0df3159ac"