chore: add ad for yuque (#10182)

site/theme/static/header.less

@@ -142,3 +142,27 @@
     right: 16px;
   }
 }
+
+.promote-banner {
+  position: relative;
+  display: block;
+  text-align: center;
+  background-color: #a5d6d3;
+
+  img {
+    max-width: 100%;
+  }
+  .anticon-cross {
+    position: absolute;
+    font-size: 24px;
+    cursor: pointer;
+    right: 24px;
+    top: 28px;
+    color: #fff;
+    transition: all .3s;
+    opacity: 0;
+  }
+  &:hover .anticon-cross {
+    opacity: 1;
+  }
+}

site/theme/template/Layout/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import { Icon } from 'antd';
 import { enquireScreen } from 'enquire-js';
 import { addLocaleData, IntlProvider } from 'react-intl';
 import Header from './Header';
@@ -25,6 +26,8 @@ enquireScreen((b) => {
   isMobile = b;
 });
 
+const promoteBannerImageUrl = 'https://gw.alipayobjects.com/zos/rmsportal/bpKcpwimYnZMTarUxCEd.png';
+
 export default class Layout extends React.Component {
   static contextTypes = {
     router: PropTypes.object.isRequired,
@@ -44,9 +47,16 @@ export default class Layout extends React.Component {
     const { pathname } = props.location;
     const appLocale = utils.isZhCN(pathname) ? cnLocale : enLocale;
     addLocaleData(appLocale.data);
+
+    const adBannerClosed = (
+      typeof window !== 'undefined' &&
+        window.localStorage &&
+        window.localStorage.getItem(`adBannerClosed-${promoteBannerImageUrl}`) === 'true'
+    );
     this.state = {
       appLocale,
       isMobile,
+      adBannerClosed,
     };
   }
 
@@ -75,12 +85,38 @@ export default class Layout extends React.Component {
     clearTimeout(this.timer);
   }
 
+  closePromoteBanner = (e) => {
+    e.preventDefault();
+    this.makeAdBannerClosed();
+  }
+
+  makeAdBannerClosed = () => {
+    this.setState({
+      adBannerClosed: true,
+    });
+    if (window.localStorage) {
+      window.localStorage.setItem(`adBannerClosed-${promoteBannerImageUrl}`, 'true');
+    }
+  }
+
   render() {
     const { children, ...restProps } = this.props;
     const { appLocale } = this.state;
+
+    const promoteBanner = this.state.adBannerClosed ? null : (
+      <a href="http://www.anijue.com/p/q/yuque423/pages/home/index.html?chInfo=ch_yuquebooks__chsub_antd" className="promote-banner" onClick={this.makeAdBannerClosed}>
+        <img
+          src={promoteBannerImageUrl}
+          alt="seeconf"
+        />
+        <Icon type="cross" title="close ad" onClick={this.closePromoteBanner} />
+      </a>
+    );
+
     return (
       <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
         <div className="page-wrapper">
+          {promoteBanner}
           <Header {...restProps} />
           {children}
           <Footer {...restProps} />