docs(Ads): fix multiple ads (#3215)

* docs(Ads): fix multiple ads * add comments * fix(CarbonAd): prevent duplicate ads * fix(Introduction): propType warning * reduce ad size, improve sidebar UX
Semantic-Org · Oct 15, 2018 · 845c347 · 845c347
1 parent 87f467a
commit 845c347
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 77 deletions.
diff --git a/docs/public/style.css b/docs/public/style.css
@@ -80,7 +80,7 @@ code:not(.hljs)::after {
 }
 
 #carbonads {
-  display: block;
+  line-height: 1.4;
 }
 
 #carbonads span {
@@ -93,17 +93,28 @@ code:not(.hljs)::after {
 
 .carbon-img img {
   display: block;
+  width: 98px;
+  height: 75px;
 }
 
 .carbon-text {
   display: block;
-  margin-top: 0.5em;
+  margin-top: 0.25em;
+  font-size: 0.9em;
+  color: #aaa;
+}
+.carbon-text:hover {
+  color: #ddd
 }
 
 .carbon-poweredby {
   display: block;
-  margin-top: 0.25em;
-  font-size: 0.8em;
+  margin-top: 0.125em;
+  font-size: 0.75em;
+  text-align: right;
   color: #ffffff;
   opacity: 0.5;
 }
+.carbon-poweredby:hover {
+  color: #ddd;
+}
diff --git a/docs/src/components/CarbonAd/CarbonAd.js b/docs/src/components/CarbonAd/CarbonAd.js
@@ -2,29 +2,49 @@ import _ from 'lodash'
 import React, { Component } from 'react'
 
 const style = {
-  padding: '1rem',
+  padding: '0.5rem',
   background: '#222',
   boxShadow: '0 0 2rem black',
 }
 
-class CarbonAd extends Component {
-  componentDidMount() {
-    this.lastHref = location.href
+let isLoading = true
+
+const adExist = () => !!document.querySelector('#docs-carbonads #carbonads')
+
+const script = document.createElement('script')
+script.async = true
+script.id = '_carbonads_js'
+script.type = 'text/javascript'
+script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom'
+script.onload = () => {
+  isLoading = false
+}
 
-    const script = document.createElement('script')
-    script.async = true
-    script.id = '_carbonads_js'
-    script.type = 'text/javascript'
-    script.src = '//cdn.carbonads.com/carbon.js?serve=CK7DT23J&placement=reactsemanticuicom'
+const waitForLoad = () => {
+  if (adExist()) isLoading = false
+  else setTimeout(waitForLoad, 50)
+}
 
-    this.ifRef(ref => ref.appendChild(script))
+class CarbonAd extends Component {
+  componentDidMount() {
+    this.ifRef((ref) => {
+      // always add the script as it is used to insert the ad
+      ref.appendChild(script)
+
+      // On the first mount, the script fetches the first ad itself, so do nothing
+      // On subsequent mounts, we need to call refresh to insert a new ad
+      // Ensure we don't call refresh during an existing refresh or we'll get a double ad insert
+      // https://github.com/Semantic-Org/Semantic-UI-React/pull/3215
+      if (!isLoading) {
+        isLoading = true
+        _.invoke(window._carbonads, 'refresh')
+        waitForLoad()
+      }
+    })
   }
 
-  componentWillUpdate() {
-    if (location.href !== this.lastHref) {
-      this.lastHref = location.href
-      _.invoke(window._carbonads, 'refresh')
-    }
+  shouldComponentUpdate() {
+    return false
   }
 
   ifRef = (cb) => {

diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js
@@ -188,74 +188,69 @@ class Sidebar extends Component {
     const { query } = this.state
 
     return (
-      <div style={style}>
-        <Menu
-          fluid
-          inverted
-          vertical
-          borderless
-          compact
-          style={{ display: 'flex', flexDirection: 'column', flex: 1 }}
-        >
-          <Menu.Item>
-            <Logo spaced='right' size='mini' />
-            <strong>
-              Semantic UI React &nbsp;
-              <small>
-                <em>{version}</em>
-              </small>
-            </strong>
-          </Menu.Item>
-          <Menu.Item style={{ boxShadow: '0 0 1rem black' }}>
-            <Menu.Header>Getting Started</Menu.Header>
-            <Menu.Menu>
-              <Menu.Item as={Link} exact to='/' activeClassName='active'>
-                Introduction
-              </Menu.Item>
-              <Menu.Item as={Link} exact to='/usage' activeClassName='active'>
-                Usage
-              </Menu.Item>
-              <Menu.Item as={Link} exact to='/theming' activeClassName='active'>
-                Theming
-              </Menu.Item>
-              <Menu.Item as={Link} exact to='/layouts' activeClassName='active'>
-                Layouts
-              </Menu.Item>
-              <Menu.Item as={Link} exact to='/prototypes' activeClassName='active'>
-                Prototypes
-              </Menu.Item>
-              <Menu.Item as='a' href={repoURL} target='_blank' rel='noopener noreferrer'>
-                <Icon name='github' /> GitHub
-              </Menu.Item>
-              <Menu.Item
-                as='a'
-                href={`${repoURL}/blob/master/CHANGELOG.md`}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <Icon name='file alternate outline' /> CHANGELOG
-              </Menu.Item>
-            </Menu.Menu>
-          </Menu.Item>
-          <div style={{ flex: 1, overflowY: 'scroll' }}>
+      <div style={{ ...style, display: 'flex', flexDirection: 'column', flex: 1 }}>
+        <div style={{ flex: 1, overflowY: 'scroll' }}>
+          <Menu fluid inverted vertical borderless compact>
+            <Menu.Item>
+              <Logo spaced='right' size='mini' />
+              <strong>
+                Semantic UI React &nbsp;
+                <small>
+                  <em>{version}</em>
+                </small>
+              </strong>
+              <Menu.Menu>
+                <Menu.Item as='a' href={repoURL} target='_blank' rel='noopener noreferrer'>
+                  <Icon name='github' /> GitHub
+                </Menu.Item>
+                <Menu.Item
+                  as='a'
+                  href={`${repoURL}/blob/master/CHANGELOG.md`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <Icon name='file alternate outline' /> CHANGELOG
+                </Menu.Item>
+              </Menu.Menu>
+            </Menu.Item>
+            <Menu.Item>
+              <Menu.Header>Getting Started</Menu.Header>
+              <Menu.Menu>
+                <Menu.Item as={Link} exact to='/' activeClassName='active'>
+                  Introduction
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/usage' activeClassName='active'>
+                  Usage
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/theming' activeClassName='active'>
+                  Theming
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/layouts' activeClassName='active'>
+                  Layouts
+                </Menu.Item>
+                <Menu.Item as={Link} exact to='/prototypes' activeClassName='active'>
+                  Prototypes
+                </Menu.Item>
+              </Menu.Menu>
+            </Menu.Item>
             <Menu.Item fitted>
               <Ref innerRef={this.handleSearchRef}>
                 <Input
                   fluid
                   icon={{ name: 'filter', color: 'teal', inverted: true, bordered: true }}
-                  placeholder='Press &quot;/&quot; to find a component'
+                  placeholder='Press &quot;/&quot; to filter components'
                   value={query}
                   onChange={this.handleSearchChange}
                   onKeyDown={this.handleSearchKeyDown}
                 />
               </Ref>
             </Menu.Item>
             {query ? this.renderSearchItems() : this.menuItemsByType}
-          </div>
-          <div style={{ flex: '0 0 auto' }}>
-            <CarbonAd />
-          </div>
-        </Menu>
+          </Menu>
+        </div>
+        <div style={{ flex: '0 0 auto' }}>
+          <CarbonAd />
+        </div>
       </div>
     )
   }

diff --git a/docs/src/pages/Introduction.js b/docs/src/pages/Introduction.js
@@ -109,7 +109,7 @@ const MenuItemLinkAugmentationHTML = `<div class="ui menu">
 const Comparison = ({ jsx, html }) => (
   <Segment inverted className='code-example'>
     <Grid columns='equal' centered textAlign='left'>
-      <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
+      <Grid.Column computer='8' largeScreen='7' widescreen='7'>
         <Label color='grey' size='tiny' attached='top left'>
           JSX
         </Label>
@@ -120,7 +120,7 @@ const Comparison = ({ jsx, html }) => (
           <Icon name='right arrow circle' />
         </Divider>
       </Grid.Column>
-      <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
+      <Grid.Column computer='8' largeScreen='7' widescreen='7'>
         <Label color='grey' size='tiny' attached='top right'>
           Rendered HTML
         </Label>