Create a Dashboard with Next.js API Routes - YouTube API (leerob#148)

* Update MDX.

* Add youtube article.

* Some small tweaks on the article.

* Improve about page and nav.

* Update link in part 1.

.eslintignore

@@ -1,2 +1 @@
-.next
-dist
+.next

.prettierignore

@@ -1,2 +1 @@
-.next
-dist
+.next

components/GlobalStyle.js

@@ -101,6 +101,7 @@ const GlobalStyle = createGlobalStyle`
 
         code {
             padding: 0;
+            background: none;
         }
     }
 

components/elements/code.js

@@ -3,11 +3,10 @@ import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 
 const Code = (props) => {
     const codeElementProps = props.children.props;
-    const languageHighlightClassName = codeElementProps.props.className;
 
     return (
         <SyntaxHighlighter language={props.language} style={{overflow: 'scroll'}} useInlineStyles={false}>
-            <code className={languageHighlightClassName}>{codeElementProps.children}</code>
+            <>{codeElementProps.children}</>
         </SyntaxHighlighter>
     );
 };

components/nav.js

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import Link from './link';
-// import DarkModeToggle from './dark-mode-toggle';
 
 const StyledNav = styled.nav`
     padding: 25px;
@@ -70,11 +69,10 @@ const Nav = () => (
             <Logo alt="Lee Robinson" src="/static/images/logo.png" />
         </Link>
         <Centered>
-            <NavLink slug={'about'}>{'Start Here'}</NavLink>
-            <NavLink slug={'speaking'}>{'Speaking'}</NavLink>
+            <NavLink slug={'about'}>{'About'}</NavLink>
+            <NavLink slug={'dashboard'}>{'Dashboard'}</NavLink>
             <NavLink slug={'blog'}>{'Blog'}</NavLink>
             <ProjectsLink slug={'projects'}>{'Projects'}</ProjectsLink>
-            {/* <DarkModeToggle /> */}
         </Centered>
     </StyledNav>
 );

components/post.js

@@ -1,4 +1,4 @@
-import {MDXProvider} from '@mdx-js/tag';
+import {MDXProvider} from '@mdx-js/react';
 import React from 'react';
 import styled from 'styled-components';
 

components/socials/social-link.js

@@ -9,10 +9,8 @@ const StyledSocialLink = styled.a`
     text-decoration: none;
 
     svg {
-        display: inline-block;
         height: 24px;
-        margin-right: ${spacing.extrasmall};
-        vertical-align: middle;
+        margin-right: ${spacing.normal};
         width: 24px;
     }
 `;

components/socials/social.js

@@ -1,35 +1,37 @@
 import React from 'react';
+import styled from 'styled-components';
 
+import {spacing} from '../../styles/vars';
 import LinkedInIcon from '../../icons/linkedin.svg';
 import GitHubIcon from '../../icons/github.svg';
 import TwitterIcon from '../../icons/twitter.svg';
 
 import SocialLink from './social-link';
-import SocialListItem from './social-list-item';
+
+const Centered = styled.ul`
+    display: flex;
+    justify-content: center;
+    margin-top: ${spacing.large};
+`;
 
 const Social = () => (
-    <nav>
-        <ul>
-            <SocialListItem>
-                <SocialLink href="https://twitter.com/leeerob" title="Twitter">
-                    <TwitterIcon />
-                    {'Twitter'}
-                </SocialLink>
-            </SocialListItem>
-            <SocialListItem>
-                <SocialLink href="https://github.com/leerob" title="GitHub">
-                    <GitHubIcon />
-                    {'GitHub'}
-                </SocialLink>
-            </SocialListItem>
-            <SocialListItem>
-                <SocialLink href="https://www.linkedin.com/in/leejamesrobinson/" title="LinkedIn">
-                    <LinkedInIcon />
-                    {'LinkedIn'}
-                </SocialLink>
-            </SocialListItem>
-        </ul>
-    </nav>
+    <Centered>
+        <li>
+            <SocialLink href="https://twitter.com/leeerob" title="Twitter">
+                <TwitterIcon />
+            </SocialLink>
+        </li>
+        <li>
+            <SocialLink href="https://github.com/leerob" title="GitHub">
+                <GitHubIcon />
+            </SocialLink>
+        </li>
+        <li>
+            <SocialLink href="https://www.linkedin.com/in/leejamesrobinson/" title="LinkedIn">
+                <LinkedInIcon />
+            </SocialLink>
+        </li>
+    </Centered>
 );
 
 export default Social;

data/articles.js

@@ -1,4 +1,9 @@
 export default [
+    {
+        date: 'February 5, 2020',
+        slug: 'youtube-api-nextjs',
+        title: 'Create a Dashboard with Next.js API Routes - YouTube API'
+    },
     {
         date: 'February 4, 2020',
         slug: 'unsplash-api-nextjs',

data/speaking.js

@@ -1,10 +1,4 @@
 export default [
-    {
-        date: 'June 11th, 2019',
-        link: 'https://www.talent42.com/home',
-        location: 'Seattle, WA',
-        name: 'Talent42'
-    },
     {
         date: 'September 10th, 2019',
         link: 'https://dsmjs.com/',

next.config.js

@@ -1,8 +1,8 @@
 const rehypePrism = require('@mapbox/rehype-prism');
-const withMDX = require('@zeit/next-mdx')({
-    extension: /\.mdx?$/u,
+const withMDX = require('@next/mdx')({
+    extension: /\.(mdx)?$/u,
     options: {
-        hastPlugins: [rehypePrism]
+        rehypePlugins: [rehypePrism]
     }
 });
 

package.json

@@ -64,7 +64,7 @@
     "dependencies": {
         "@mapbox/rehype-prism": "0.4.0",
         "@mdx-js/mdx": "1.5.5",
-        "@mdx-js/tag": "0.20.3",
+        "@mdx-js/react": "1.5.5",
         "comma-number": "2.0.1",
         "date-fns": "1.30.1",
         "firebase": "7.8.0",
@@ -86,7 +86,8 @@
     },
     "devDependencies": {
         "@babel/core": "^7.8.4",
-        "@zeit/next-mdx": "1.2.0",
+        "@mdx-js/loader": "1.5.5",
+        "@next/mdx": "9.2.1",
         "babel-plugin-inline-react-svg": "1.1.1",
         "babel-plugin-styled-components": "1.10.7",
         "eslint": "6.8.0",

pages/about.js

@@ -3,8 +3,10 @@ import styled from 'styled-components';
 
 import {heading} from '../styles/mixins';
 import {spacing} from '../styles/vars';
+import events from '../data/speaking';
 import A from '../components/elements/a';
 import Footer from '../components/footer';
+import H2 from '../components/elements/h2';
 import H3 from '../components/elements/h3';
 import Main from '../components/main';
 import Nav from '../components/nav';
@@ -56,13 +58,59 @@ const Index = () => (
                     {'email me.'}
                 </A>
             </p>
-            <H3>{'Contact'}</H3>
             <Social />
-            <H3>{'Music'}</H3>
+            <H2>{'Speaking'}</H2>
+            <H3>{`Recruiting Engineers (From An Engineer's Perspective)`}</H3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>{'Event'}</th>
+                        <th>{'Date'}</th>
+                        <th>{'Location'}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <A href="https://www.talent42.com/">{'Talent42'}</A>
+                        </td>
+                        <td>{'June 11th, 2019'}</td>
+                        <td>{'Seattle, WA'}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p>{`Hiring talent is becoming increasingly difficult with low unemployment rates and the tech industry booming. What you can do to stick out? Learn from an engineer who's been involved on both sides - both as a candidate and with hiring - on what candidates REALLY want out of a position.`}</p>
+            <A href="/recruiting-engineers-talent42-lee-robinson.pdf">{'View Slides'}</A>
+            {' | '}
+            <A href="https://www.youtube.com/watch?v=chWOJB1LYkk">{'Watch Recording'}</A>
+            <H3>{'Building Component Libraries with a Monorepo'}</H3>
+            <table>
+                <thead>
+                    <tr>
+                        <th>{'Event'}</th>
+                        <th>{'Date'}</th>
+                        <th>{'Location'}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {events.map((event) => (
+                        <tr key={event.date}>
+                            <td>
+                                <A href={event.link}>{event.name}</A>
+                            </td>
+                            <td>{event.date}</td>
+                            <td>{event.location}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            <p>{`Learn why your organization needs a component library and discover the best practices for building, scaling, and adopting it across all platforms. We'll be using industry-standard technology (React, JavaScript, Storybook) alongside cutting-edge solutions (CSS-in-JS, Monorepo).`}</p>
+            <A href="/building-component-libraries-with-a-monorepo.pdf">{'View Slides'}</A>
+            <H2>{'Music'}</H2>
             <p>{'Some of my favorite albums that have been on repeat lately 🎶'}</p>
             <MusicGrid />
             <ConcertList />
-            <H3>{'Travel Map'}</H3>
+            <H2>{'Travel Map'}</H2>
             <p>{' Check out the map below to see every place I’ve traveled to ✈️ '}</p>
             <iframe
                 height="280"

pages/blog/unsplash-api-nextjs.mdx

@@ -149,6 +149,6 @@ Cache-Control: public, max-age=120, stale-while-revalidate=60
 **Create a Dashboard with Next.js API Routes**
 
 -   Part 1 - <Link slug="blog/unsplash-api-nextjs" title="Create a Dashboard with Next.js API Routes - Unsplash API">Unsplash API</Link>
--   Part 2 - YouTube API (Coming Soon!)
+-   Part 2 - <Link slug="blog/youtube-api-nextjs" title="Create a Dashboard with Next.js API Routes - YouTube API">YouTube API</Link>
 -   Part 3 - Google Analytics API (Coming Soon!)
 -   Part 4 - Fetching Data with SWR (Coming Soon!)