Merge pull request #162 from datacamp/oge-1878-add-course-ads

[OGE-1878] add course ads and apply styling feedback
datacamp · Aug 29, 2024 · d70e09c · d70e09c
2 parents ddeeb52 + 74a7225
commit d70e09c
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 34 deletions.
diff --git a/components/CourseAds.tsx b/components/CourseAds.tsx
@@ -0,0 +1,93 @@
+/** @jsxImportSource @emotion/react */
+import { Card } from '@datacamp/waffles/card';
+import { Heading } from '@datacamp/waffles/heading';
+import { mediaQuery } from '@datacamp/waffles/helpers';
+import { Link } from '@datacamp/waffles/link';
+import { tokens } from '@datacamp/waffles/tokens';
+import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+
+import { useRenderCourseAds } from '../helpers/hooks/useRenderCourseAds';
+
+const Wrapper = styled.div({
+  display: 'grid',
+  gridGap: tokens.spacing.medium,
+  gridTemplateColumns: '1fr',
+  marginBottom: tokens.spacing.medium,
+  [mediaQuery.aboveMedium]: {
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+});
+
+const cards = [
+  {
+    description:
+      'Level-up your R programming skills! Learn how to work with common data structures, optimize code, and write your own functions.',
+    link: 'https://www.datacamp.com/tracks/r-programming-fundamentals',
+    title: 'R Fundamentals',
+  },
+  {
+    description:
+      'Work with big data in R via parallel programming, interfacing with Spark, writing scalable & efficient R code, and learn ways to visualize big data.',
+    link: 'https://www.datacamp.com/tracks/big-data-with-r',
+    title: 'Big Data with R',
+  },
+  {
+    description:
+      'A machine learning scientist researches new approaches and builds machine learning models.',
+    link: 'https://www.datacamp.com/tracks/machine-learning-scientist-with-r',
+    title: 'Machine Learning with R',
+  },
+];
+
+function CourseAds() {
+  const shouldRender = useRenderCourseAds();
+  const router = useRouter();
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <section css={{ marginBottom: tokens.spacing.medium }}>
+      <Heading
+        css={{
+          marginBottom: tokens.spacing.large,
+          marginTop: tokens.spacing.small,
+        }}
+      >
+        Continue Improving Your R Skills
+      </Heading>
+      <Wrapper>
+        {cards.map(({ description, link, title }) => (
+          <Card
+            css={{
+              '&:active, &:focus, &:hover': {
+                cursor: 'pointer',
+              },
+            }}
+            data-trackid={`course-ads-${title}`}
+            key={title}
+            onClick={() => router.push(link)}
+          >
+            <Card.Header>
+              <Link
+                css={{
+                  '&:active, &:focus, &:hover': {
+                    cursor: 'pointer',
+                  },
+                }}
+                href={link}
+              >
+                {title}
+              </Link>
+            </Card.Header>
+            <Card.Body>{description}</Card.Body>
+          </Card>
+        ))}
+      </Wrapper>
+    </section>
+  );
+}
+
+export default CourseAds;
diff --git a/components/HomePageLinks.tsx b/components/HomePageLinks.tsx
@@ -2,7 +2,6 @@
 
 import { Button } from '@datacamp/waffles/button';
 import { mediaQuery } from '@datacamp/waffles/helpers';
-import { useMediaQuery } from '@datacamp/waffles/hooks';
 import { ExternalLink } from '@datacamp/waffles/icon';
 import { Link } from '@datacamp/waffles/link';
 import { Paragraph } from '@datacamp/waffles/paragraph';
@@ -73,13 +72,13 @@ const categoryStyle = {
 
 export const HomePageLinks = () => {
   const { theme } = useContext(ThemeContext);
-  const { isAboveSmall } = useMediaQuery();
-  const buttonSize = isAboveSmall ? 'medium' : 'large';
+  const buttonSize = 'large';
   return (
     <ContentWrapper data-theme={theme}>
       <Column>
         <Button
           as="a"
+          data-trackid={'course-link-r-fundamentals'}
           href="https://www.datacamp.com/tracks/r-programming-fundamentals"
           iconRight={<ExternalLink />}
           size={buttonSize}
@@ -92,12 +91,14 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={'course-link-free-introduction-to-r'}
             href="https://www.datacamp.com/courses/free-introduction-to-r"
           >
             Introduction to R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'course-link-data-visualization-with-r'}
             href="https://www.datacamp.com/tracks/data-visualization-with-r"
           >
             Data Visualization with R
@@ -107,18 +108,21 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-cheat-sheet-getting-started-r'}
             href="https://www.datacamp.com/cheat-sheet/getting-started-r"
           >
             R Basics Cheat Sheet
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-linear-regression-r'}
             href="https://www.datacamp.com/tutorial/linear-regression-R"
           >
             Linear Regression in R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-make-histogram-basic-r'}
             href="https://www.datacamp.com/tutorial/make-histogram-basic-r"
           >
             Histograms in R
@@ -128,6 +132,7 @@ export const HomePageLinks = () => {
       <Column>
         <Button
           as="a"
+          data-trackid={'course-link-big-data-with-r'}
           href="https://www.datacamp.com/tracks/big-data-with-r"
           iconRight={<ExternalLink />}
           size={buttonSize}
@@ -140,12 +145,16 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={
+              'course-link-practicing-statistics-interview-questions-in-r'
+            }
             href="https://www.datacamp.com/courses/practicing-statistics-interview-questions-in-r"
           >
             Practicing Interview Questions in R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'course-link-data-manipulation-with-r'}
             href="https://www.datacamp.com/tracks/data-manipulation-with-r"
           >
             Data Manipulation with R
@@ -155,18 +164,21 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-r-data-import-tutorial'}
             href="https://www.datacamp.com/tutorial/r-data-import-tutorial"
           >
             Importing Data into R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-pca-analysis-r'}
             href="https://www.datacamp.com/tutorial/pca-analysis-r"
           >
             Principal Component Analysis in R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-contingency-tables-r'}
             href="https://www.datacamp.com/tutorial/contingency-tables-r"
           >
             Contingency Tables in R
@@ -176,6 +188,7 @@ export const HomePageLinks = () => {
       <Column>
         <Button
           as="a"
+          data-trackid={'course-link-machine-learning-scientist-with-r'}
           href="https://www.datacamp.com/tracks/machine-learning-scientist-with-r"
           iconRight={<ExternalLink />}
           size={buttonSize}
@@ -188,12 +201,14 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={'course-link-machine-learning-in-the-tidyverse'}
             href="https://www.datacamp.com/courses/machine-learning-in-the-tidyverse"
           >
             Machine Learning in the Tidyverse
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={'course-link-supervised-machine-learning-in-r'}
             href="https://www.datacamp.com/tracks/supervised-machine-learning-in-r"
           >
             Supervised Machine Learning in R
@@ -203,12 +218,16 @@ export const HomePageLinks = () => {
           </Paragraph>
           <Link
             css={linkStyle}
+            data-trackid={'tutorial-link-tutorial-decision-trees-r'}
             href="https://www.datacamp.com/tutorial/decision-trees-R"
           >
             Decision Trees in R
           </Link>
           <Link
             css={linkStyle}
+            data-trackid={
+              'tutorial-link-tutorial-supervised-machine-learning-in-r'
+            }
             href="https://www.datacamp.com/tracks/supervised-machine-learning-in-r"
           >
             Hierarchical Clustering in R

diff --git a/components/HomeSearchBar.tsx b/components/HomeSearchBar.tsx
@@ -3,6 +3,7 @@ import { Button } from '@datacamp/waffles/button';
 import { mediaQuery } from '@datacamp/waffles/helpers';
 import { Search } from '@datacamp/waffles/icon';
 import { Input } from '@datacamp/waffles/input';
+import { lightThemeStyle } from '@datacamp/waffles/theme';
 import { tokens } from '@datacamp/waffles/tokens';
 import styled from '@emotion/styled';
 import { ChangeEvent } from 'react';
@@ -31,7 +32,14 @@ export default function HomeSearchBar({ onChange, value }: Props) {
   const p = PLACEHOLDERS[Math.floor(Math.random() * PLACEHOLDERS.length)];
 
   return (
-    <Wrapper>
+    <Wrapper
+      css={{
+        '&, &[data-theme="light"] *': {
+          ...lightThemeStyle,
+        },
+      }}
+      data-theme={'light'}
+    >
       <Input
         iconLeft={<Search aria-label="Search all packages and functions" />}
         onChange={onChange}

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,3 +1,4 @@
+import { mediaQuery } from '@datacamp/waffles/helpers';
 import {
   darkThemeStyle,
   lightThemeStyle,
@@ -32,8 +33,11 @@ const ContentWrapper = styled.div({
   flex: 1,
   flexDirection: 'column',
   margin: '0 auto',
-  maxWidth: 1200,
+  maxWidth: '100%',
   padding: `0 ${tokens.spacing.medium}`,
+  [mediaQuery.aboveSmall]: {
+    maxWidth: 1200,
+  },
 });
 
 const Divider = styled.hr({

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { DataCampLogo } from '@datacamp/waffles/brand';
 import { Button } from '@datacamp/waffles/button';
 import { Heading } from '@datacamp/waffles/heading';
@@ -12,7 +13,6 @@ import {
 } from '@datacamp/waffles/theme';
 import { tokens } from '@datacamp/waffles/tokens';
 import styled from '@emotion/styled';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useContext, useState } from 'react';
 import { FaGithub } from 'react-icons/fa';
@@ -78,6 +78,9 @@ const VerticalDivider = styled.hr(`
 `);
 
 const inputStyle = { flexGrow: 1, minWidth: '343px' };
+const buttonStyle = {
+  height: tokens.sizing.medium,
+};
 
 export default function Navbar() {
   const [searchInput, setSearchInput] = useState('');
@@ -96,25 +99,33 @@ export default function Navbar() {
   return (
     <Header data-theme={theme}>
       <nav>
-        <Link href="/">
-          <LogoWrapper>
-            <Heading style={{ color: themeTokens.text.main }}>
-              RDocumentation
+        <LogoWrapper>
+          <a href="/">
+            <Heading css={{ color: themeTokens.text.main, margin: 0 }}>
+              Rdocumentation
             </Heading>
-            <div>
-              <VerticalDivider />
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <Paragraph
-                style={{ color: themeTokens.text.secondary }}
-                variant="secondary"
-              >
-                powered by
-              </Paragraph>
-              <DataCampLogo />
-            </div>
-          </LogoWrapper>
-        </Link>
+          </a>
+
+          <div>
+            <VerticalDivider />
+          </div>
+          <a
+            css={{ display: 'flex', flexDirection: 'column' }}
+            href="https://www.datacamp.com"
+          >
+            <Paragraph
+              size="small"
+              style={{
+                color: themeTokens.text.secondary,
+                marginBottom: 0,
+              }}
+              variant="secondary"
+            >
+              powered by
+            </Paragraph>
+            <DataCampLogo css={{ flexShrink: 0, height: 18, width: 86 }} />
+          </a>
+        </LogoWrapper>
       </nav>
 
       <RightContainer>
@@ -136,6 +147,7 @@ export default function Navbar() {
           <Button
             aria-label="toggle dark mode"
             className="p-1"
+            css={{ ...buttonStyle, padding: '12px' }}
             onClick={toggleTheme}
             type="button"
           >
@@ -144,6 +156,7 @@ export default function Navbar() {
           <Button
             aria-label="github repository"
             as="a"
+            css={{ ...buttonStyle, padding: '12px' }}
             href="https://github.com/datacamp/rdocumentation-2.0"
             rel="noopener noreferrer"
             target="_blank"
@@ -152,9 +165,13 @@ export default function Navbar() {
           </Button>
           <Button
             as="a"
+            css={{
+              ...buttonStyle,
+              flexGrow: 1,
+              padding: `${tokens.spacing.small} ${tokens.spacing.medium}`,
+            }}
             href="https://www.datacamp.com/category/r"
             iconLeft={<DataCampBrand />}
-            style={{ flexGrow: 1 }}
             variant="primary"
           >
             Learn R Programming