Add partner link on devops page

.github/workflows/deploy.yml

@@ -17,7 +17,7 @@ jobs:
         persist-credentials: false
     - uses: actions/setup-node@v1
       with:
-        node-version: 14
+        node-version: 16
     - name: Setup Environment
       run: |
         npm install

components/custom-ad.tsx

@@ -1,37 +1,53 @@
+import { Box, Flex, Heading, Image, Link } from '@chakra-ui/react';
+import { getParameterByName } from '../pages/upcoming';
+
+function getPageSlug() {
+  const pathname = (typeof window !== 'undefined' ? window : {} as any)?.location?.pathname || '';
+
+  return pathname?.replace(/\//g, '');
+}
+
 export const CustomAd = () => {
+  const slug = getPageSlug();
+  if (slug !== 'devops') {
+    return null;
+  }
+
+  const shouldShowAd = getParameterByName('ad');
+  if (!shouldShowAd) {
+    return null;
+  }
+
   return (
-    <div id='carbonads'>
+    <Link href='https://thenewstack.io/ebooks/devops/cloud-native-devops-2019/?utm_source=Roadmap&utm_medium=Banner&utm_campaign=DevOps+ebook' id='custom-ad' pos='fixed' bottom='15px' right='20px' zIndex={999} display='flex' maxWidth='330px'
-      <span>
+          bg='white' boxShadow='0 1px 4px 1px hsla(0, 0%, 0%, .1)' _hover={{ textDecoration: 'none' }} rel="noopener sponsored">
-        <span className='carbon-wrap'>
+      <Image
-          <a
+        src='https://i.imgur.com/fEKq19S.png'
-            href='https://freemote.com/strategy?sl=roadmap'
+        alt='Custom Logo'
-            className='carbon-img'
+        height={['100px', '100px', '100px', 'auto']}
-            target='_blank'
+        width='130'
-          >
+        style={{ maxWidth: '130px', border: 'none' }}
-            <img
+      />
-              src='/fm-img.png'
+      <Flex as='span' flexDirection='column' justifyContent='space-between'>
-              alt='Custom Logo'
+        <Box as='span' p='10px'>
-              height='100'
+          <Heading as='span' fontSize='14px' mb='5px' display='block'>Free DevOps eBook</Heading>
-              width='130'
+          <Box display='block' as='span' fontSize='13px' lineHeight={1.5} fontWeight={500} color='gray.500'>
-              style={{ maxWidth: '130px', border: 'none' }}
+            Learn all about doing DevOps the Cloud Native way with this free ebook from our partner, The New Stack
-            />
+          </Box>
-          </a>
+        </Box>
-          <a
+        <Box as='span'
-            href='https://freemote.com/strategy?sl=roadmap'
+             textAlign='center'
-            className='carbon-text'
+             fontWeight={600}
-            target='_blank'
+             fontSize='9px'
-          >
+             letterSpacing='0.5px'
-            He Went from ZERO TO $74,000 as a Full Time Developer in 7 Weeks
+             textTransform='uppercase'
-          </a>
+             padding='5px 10px'
-        </span>
+             display={'block'}
-        <a
+             background='repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4)'
-          href='https://github.com/sponsors/kamranahmedse'
-          className='carbon-poweredby'
-          target='_blank'
         >
-          Sponsored by
+          Partner Content
-        </a>
+        </Box>
-      </span>
+      </Flex>
-    </div>
+    </Link>
   );
 };

components/footer.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 import { CustomAd } from './custom-ad';
+import React from 'react';
 
 function NavigationLinks() {
   return (
@@ -62,6 +63,8 @@ export function Footer() {
           </Text>
         </Box>
       </Container>
+
+      <CustomAd />
     </Box>
   );
 }

pages/[roadmap]/index.tsx

@@ -14,7 +14,7 @@ import MdRenderer from '../../components/md-renderer';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
 import { InteractiveRoadmapRenderer } from './interactive';
-import { FreeSignUp, SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
+import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
 import { BellIcon, EmailIcon } from '@chakra-ui/icons';
 import { RelatedRoadmaps } from '../../components/related-roadmaps';
 
@@ -107,6 +107,7 @@ export default function Roadmap(props: RoadmapPageProps) {
         <UpcomingRoadmap roadmap={roadmap} />
       </Box>
       <RelatedRoadmaps roadmaps={relatedRoadmaps} />
+
       <OpensourceBanner />
       <Footer />
     </Box>

pages/upcoming.tsx

@@ -10,7 +10,7 @@ import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from './signup';
 import React from 'react';
 import { upcomingRoadmaps } from '../components/home/featured-roadmaps-list';
 
-function getParameterByName(name: string, url: string = (typeof window !== 'undefined' ? window : {} as any)?.location?.href) {
+export function getParameterByName(name: string, url: string = (typeof window !== 'undefined' ? window : {} as any)?.location?.href) {
   name = name.replace(/[\[\]]/g, '\\$&');
 
   let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');

scripts/build.sh

@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
 
+set -e
+
 rm -rf out
 next build
 next export

styles/carbon.css

@@ -1,63 +0,0 @@
-#carbonads {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-  Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: fixed;
-  bottom: 15px;
-  right: 20px;
-  z-index: 9999;
-}
-
-#carbonads {
-  display: flex;
-  max-width: 330px;
-  background-color: hsl(0, 0%, 98%);
-  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
-}
-
-#carbonads a {
-  color: inherit;
-  text-decoration: none;
-}
-
-#carbonads a:hover {
-  color: inherit;
-}
-
-#carbonads span {
-  position: relative;
-  display: block;
-  overflow: hidden;
-}
-
-#carbonads .carbon-wrap {
-  display: flex;
-}
-
-.carbon-img {
-  display: block;
-  margin: 0;
-  line-height: 1;
-}
-
-.carbon-img img {
-  display: block;
-}
-
-.carbon-text {
-  font-size: 13px;
-  padding: 10px;
-  line-height: 1.5;
-  text-align: left;
-}
-
-.carbon-poweredby {
-  display: block;
-  padding: 8px 10px;
-  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  font-weight: 600;
-  font-size: 9px;
-  line-height: 1;
-}