feat: add ads?

Author: diegomura

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';
 

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;
+	}
+}

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;

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>
 );