feat: add ad

app/javascript/mastodon/components/scrollable_list.js

@@ -3,6 +3,7 @@ import ScrollContainer from 'mastodon/containers/scroll_container';
 import PropTypes from 'prop-types';
 import IntersectionObserverArticleContainer from '../containers/intersection_observer_article_container';
 import LoadMore from './load_more';
+import { Adsense } from '@ctrl/react-adsense';
 import LoadPending from './load_pending';
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
 import { throttle } from 'lodash';
@@ -292,7 +293,13 @@ class ScrollableList extends PureComponent {
     const { children, scrollKey, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, emptyMessage, onLoadMore } = this.props;
     const { fullscreen } = this.state;
     const childrenCount = React.Children.count(children);
-
+    let globalTheme = 'dark';
+    if (
+      document.body &&
+      document.body.classList.contains('theme-mastodon-light')
+    ) {
+      globalTheme = 'light';
+    }
     const loadMore     = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
     const loadPending  = (numPending > 0) ? <LoadPending count={numPending} onClick={this.handleLoadPending} /> : null;
     let scrollableArea = null;
@@ -336,7 +343,23 @@ class ScrollableList extends PureComponent {
             ))}
 
             {loadMore}
-
+            {globalTheme === 'light' ? <Adsense
+              client='ca-pub-8575447765690857'
+              slot='4023331835'
+              style={{ display: 'block' }}
+              layout='in-article'
+              format='fluid'
+              className='adsbygoogle'
+              layoutKey='-fb+5w+4e-db+86'
+            /> : <Adsense
+              client='ca-pub-8575447765690857'
+              slot='7375171918'
+              style={{ display: 'block' }}
+              layout='in-article'
+              format='fluid'
+              className='adsbygoogle'
+              layoutKey='-fc+56+8s-cu-6p'
+            />}
             {!hasMore && append}
           </div>
         </div>

app/javascript/mastodon/features/status/index.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Adsense } from '@ctrl/react-adsense';
 import { createSelector } from 'reselect';
 import { fetchStatus } from '../../actions/statuses';
 import MissingIndicator from '../../components/missing_indicator';
@@ -673,6 +674,14 @@ class Status extends ImmutablePureComponent {
     const { isLoading, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
     const { fullscreen, isPayShow, supoortLikers, isSupportSuccess } = this.state;
 
+    let globalTheme = 'dark';
+    if (
+      document.body &&
+      document.body.classList.contains('theme-mastodon-light')
+    ) {
+      globalTheme = 'light';
+    }
+
     if (isLoading) {
       return (
         <Column>
@@ -785,6 +794,24 @@ class Status extends ImmutablePureComponent {
                     <LikePay account={status.get('account').get('username')} username={status.get('account').get('username')} isSupportSuccess={isSupportSuccess} likerId={status.get('account').get('liker_id')} statusId={status.get('id')} isShow={isPayShow} handleLikePay={this.openPay} />
                   </div>) : null
                 }
+
+                {globalTheme === 'light' ? <Adsense
+                  client='ca-pub-8575447765690857'
+                  slot='4023331835'
+                  style={{ display: 'block' }}
+                  layout='in-article'
+                  format='fluid'
+                  className='adsbygoogle'
+                  layoutKey='-fb+5w+4e-db+86'
+                /> : <Adsense
+                  client='ca-pub-8575447765690857'
+                  slot='7375171918'
+                  style={{ display: 'block' }}
+                  layout='in-article'
+                  format='fluid'
+                  className='adsbygoogle'
+                  layoutKey='-fc+56+8s-cu-6p'
+                />}
               </div>
             </HotKeys>
 

config/environments/development.rb

@@ -70,7 +70,7 @@
   # use letter_opener_web, accessible at  /letter_opener.
   # Otherwise, use letter_opener, which launches a browser window to view sent mail.
   config.action_mailer.delivery_method = (ENV['HEROKU'] || ENV['VAGRANT'] || ENV['REMOTE_DEV']) ? :letter_opener_web : :letter_opener
-
+  config.hosts << /[a-z0-9]+\.liker\.social/
   config.after_initialize do
     Bullet.enable        = true
     Bullet.bullet_logger = true

package.json

@@ -37,6 +37,7 @@
     "@blueprintjs/popover2": "^1.14.1",
     "@cosmjs/crypto": "^0.30.1",
     "@cosmjs/stargate": "^0.30.1",
+    "@ctrl/react-adsense": "^1.7.0",
     "@gamestdio/websocket": "^0.3.2",
     "@github/webauthn-json": "^0.5.7",
     "@headlessui/react": "^1.7.14",

yarn.lock

@@ -1534,6 +1534,13 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
+"@ctrl/react-adsense@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@ctrl/react-adsense/-/react-adsense-1.7.0.tgz#9c1aee202fcae2c2cb6c63ec10b21f45f20213cc"
+  integrity sha512-TrDGbAo8KRPHnX/Jtv9CkMV90vK7M/sz8KNECTQgcsHO4e5GyNZL3jqCY4WA0MCwfT48NH34qzyV9e2SWsceLw==
+  dependencies:
+    tslib "^2.5.0"
+
 "@discoveryjs/json-ext@0.5.7", "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -17642,7 +17649,7 @@ tslib@1.14.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.5.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==