feat: add ads?

diegomura · Aug 30, 2022 · c544334 · c544334
1 parent 86e75a4
commit c544334
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 6 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -13,6 +13,7 @@ require('../public/styles/fonts.css');
 require('../public/styles/prism.css');
 require('../public/styles/tooltips.css');
 require('../public/styles/codemirror.css');
+require('../public/styles/carbon.css');
 
 import App from 'next/app';
 

diff --git a/public/styles/carbon.css b/public/styles/carbon.css
@@ -0,0 +1,100 @@
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 130px;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+  font-size: 12px;
+  margin-bottom: 50px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+
+#carbonads a {
+  background-image: none;
+  color: #111;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: #111;
+}
+
+#carbonads .carbon-img {
+  display: block;
+  max-width: 130px;
+  line-height: 1;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+  width: 130px;
+  height: 100px;
+  margin: 0 auto;
+}
+
+#carbonads .carbon-text {
+  display: block;
+  padding: 8px 10px;
+  background-color: hsl(0, 0%, 98%);
+  line-height: 1.35;
+  text-align: left;
+}
+
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 10px;
+  background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      hsla(0, 0%, 0%, 0.025) 5px,
+      hsla(0, 0%, 0%, 0.025) 10px
+    )
+    hsla(203, 11%, 95%, 0.4);
+  background-color: hsl(0, 0%, 98%);
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 0;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    position: relative;
+    max-width: 330px;
+    margin: 20px 0;
+    float: none;
+  }
+
+  #carbonads .carbon-wrap {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #carbonads .carbon-img {
+    margin: 0;
+  }
+
+  #carbonads .carbon-text {
+    padding: 10px 10px 0 10px;
+
+    font-size: 12px;
+  }
+
+  #carbonads .carbon-poweredby {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+    border-top-left-radius: 3px;
+    text-align: center;
+  }
+}
diff --git a/src/components/Layout/Ads.js b/src/components/Layout/Ads.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Ads = () => {
+  return (
+    <script
+      async
+      type="text/javascript"
+      src="//cdn.carbonads.com/carbon.js?serve=CEAIP2QW&placement=react-pdforg"
+      id="_carbonads_js"
+    ></script>
+  );
+};
+
+export default Ads;
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import styled from '@emotion/styled';
 import { withRouter } from 'next/router';
 
+import Ads from './Ads';
 import Logo from '../UI/Logo';
 import GitHubIcon from './GitHubIcon';
 import media from '../../styled/media';
@@ -67,6 +68,7 @@ const List = styled.ul`
   width: 100%;
   overflow: auto;
   list-style: none;
+  alignitems: 'center';
 
   ${media.phone} {
     margin: 35px 0px;
@@ -97,12 +99,16 @@ const Item = withRouter(({ router, to, title, children, ...props }) => {
   return (
     <ItemWrapper>
       {isAbsoluteUrl && (
-        <MenuLink href={to} target="_blank" {...props} active={active}>{title}</MenuLink>
+        <MenuLink href={to} target="_blank" {...props} active={active}>
+          {title}
+        </MenuLink>
       )}
 
       {!isAbsoluteUrl && (
         <Link href={to} {...props}>
-          <MenuLink href={to} active={active}>{title}</MenuLink>
+          <MenuLink href={to} active={active}>
+            {title}
+          </MenuLink>
         </Link>
       )}
       {children && <SubItems active={active}>{children}</SubItems>}
@@ -178,9 +184,9 @@ const Menu = ({ opened }) => (
       </Item>
 
       <Item to="/node" title="Node API">
-      <Item to="/node#rendertofile" title="renderToFile" />
-      <Item to="/node#rendertostring" title="renderToString" />
-      <Item to="/node#rendertostream" title="renderToStream" />
+        <Item to="/node#rendertofile" title="renderToFile" />
+        <Item to="/node#rendertostring" title="renderToString" />
+        <Item to="/node#rendertostream" title="renderToStream" />
       </Item>
 
       <Item to="/advanced" title="Advanced">
@@ -197,14 +203,19 @@ const Menu = ({ opened }) => (
         <Item to="/advanced#dynamic-content" title="Dynamic content" />
         <Item to="/advanced#debugging" title="Debugging" />
         <Item to="/advanced#hyphenation" title="Hyphenation" />
-        <Item to="/advanced#usage-with-express.js" title="Usage with Express.js" />
+        <Item
+          to="/advanced#usage-with-express.js"
+          title="Usage with Express.js"
+        />
       </Item>
 
       <Item to="/repl" title="Playground / REPL" />
 
       <Item to="https://opencollective.com/react-pdf" title="Donate" />
     </List>
 
+    <Ads />
+
     <GitHubIcon />
   </Nav>
 );