refactor header & footer, add github token auth

.env.example

@@ -0,0 +1 @@
+#GITHUB_TOKEN=

gatsby-node.js

@@ -35,7 +35,12 @@ async function getGithubRepos(data) {
     const repoName = item.split('/')[1]
     const repo = await axios.get(
       `https://api.github.com/repos/${user}/${repoName}`,
-      { headers: { 'User-Agent': 'kremalicious/portfolio' } }
+      {
+        headers: {
+          'User-Agent': 'kremalicious/portfolio',
+          Authorization: `token ${process.env.GITHUB_TOKEN}`
+        }
+      }
     )
 
     holder.name = repo.data.name

package.json

@@ -25,7 +25,6 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
-    "classnames": "^2.2.6",
     "file-saver": "^2.0.2",
     "gatsby": "^2.17.10",
     "gatsby-image": "^2.2.30",

src/components/molecules/LogoUnit.jsx

@@ -1,8 +1,7 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Link, StaticQuery, graphql } from 'gatsby'
+import { Link, graphql, useStaticQuery } from 'gatsby'
 import posed from 'react-pose'
-import classNames from 'classnames'
 import { moveInBottom } from '../atoms/Transitions'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
@@ -16,40 +15,24 @@ const query = graphql`
   }
 `
 
-export default class LogoUnit extends PureComponent {
-  static propTypes = {
+LogoUnit.propTypes = {
   minimal: PropTypes.bool
-  }
+}
 
-  Animation = posed.div(moveInBottom)
-
-  nameClasses = classNames('p-name', [styles.title])
-  descriptionClasses = classNames('p-job-title', [styles.description])
-
-  render() {
-    const wrapClasses = classNames([styles.logounit], {
-      [styles.minimal]: this.props.minimal
-    })
-
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
+export default function LogoUnit({ minimal }) {
+  const data = useStaticQuery(query)
+  const Animation = posed.div(moveInBottom)
   const { title, tagline } = data.metaYaml
 
   return (
-            <this.Animation>
-              <Link className={wrapClasses} to={'/'}>
+    <Animation>
+      <Link className={minimal ? styles.minimal : styles.logounit} to={'/'}>
         <Logo className={styles.logo} />
-                <h1 className={this.nameClasses}>{title.toLowerCase()}</h1>
-                <p className={this.descriptionClasses}>
+        <h1 className={`p-name ${styles.title}`}>{title.toLowerCase()}</h1>
+        <p className={`p-job-title ${styles.description}`}>
           {tagline.toLowerCase()}
         </p>
       </Link>
-            </this.Animation>
+    </Animation>
   )
-        }}
-      />
-    )
-  }
 }

src/components/molecules/LogoUnit.module.scss

@@ -48,8 +48,8 @@
 }
 
 .minimal {
+    composes: logounit;
     pointer-events: all;
-    width: auto;
 
     &,
     &:hover,

src/components/molecules/Networks.jsx

@@ -1,32 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import posed from 'react-pose'
-import classNames from 'classnames'
 import { moveInTop } from '../atoms/Transitions'
 import LinkIcon from '../atoms/LinkIcon'
 import { useMeta } from '../../hooks/use-meta'
 import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
-const Animation = posed.aside(moveInTop)
-
-const linkClasses = key =>
-  classNames({
-    'u-url': key !== 'Email',
-    'u-email': key === 'Email',
-    [styles.link]: true
-  })
-
-const Networks = ({ small, hide }) => {
+export default function Networks({ small, hide }) {
   const { social } = useMeta()
+  if (hide) return null
 
-  const wrapClasses = classNames([styles.networks], {
-    [styles.small]: small
-  })
+  const Animation = posed.aside(moveInTop)
+
+  const linkClasses = key =>
+    key === 'Email' ? `u-email ${styles.link}` : `u-url ${styles.link}`
 
   return (
-    !hide && (
-      <Animation className={wrapClasses}>
+    <Animation className={small ? styles.small : styles.networks}>
       {Object.keys(social).map((key, i) => (
         <a
           className={linkClasses(key)}
@@ -40,12 +31,9 @@ const Networks = ({ small, hide }) => {
       ))}
     </Animation>
   )
-  )
 }
 
 Networks.propTypes = {
   small: PropTypes.bool,
   hide: PropTypes.bool
 }
-
-export default Networks

src/components/molecules/Networks.module.scss

@@ -52,6 +52,8 @@
 }
 
 .small {
+    composes: networks;
+
     .link {
         padding: $spacer / 4;
         margin-left: $spacer / 4;

src/components/organisms/Footer.jsx

@@ -1,7 +1,6 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
-import classNames from 'classnames'
+import { graphql, useStaticQuery } from 'gatsby'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
 import Networks from '../molecules/Networks'
@@ -22,13 +21,9 @@ const query = graphql`
   }
 `
 
-const FooterMarkup = ({ pkg, meta, year }) => {
-  const classes = classNames('h-card', [styles.footer])
-
-  return (
-    <footer className={classes}>
+const FooterMarkup = ({ pkg, meta, year }) => (
+  <footer className={`h-card ${styles.footer}`}>
     <LogoUnit minimal />
-
     <Networks minimal />
 
     <p className={styles.actions}>
@@ -48,8 +43,7 @@ const FooterMarkup = ({ pkg, meta, year }) => {
       </small>
     </p>
   </footer>
-  )
-}
+)
 
 FooterMarkup.propTypes = {
   pkg: PropTypes.object.isRequired,
@@ -57,20 +51,11 @@ FooterMarkup.propTypes = {
   year: PropTypes.number.isRequired
 }
 
-export default class Footer extends PureComponent {
-  state = { year: new Date().getFullYear() }
-
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
+export default function Footer() {
+  const data = useStaticQuery(query)
   const pkg = data.portfolioJson
   const meta = data.metaYaml
+  const year = new Date().getFullYear()
 
-          return <FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />
-        }}
-      />
-    )
-  }
+  return <FooterMarkup year={year} pkg={pkg} meta={meta} />
 }

src/components/organisms/Header.jsx

@@ -1,7 +1,6 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
-import classNames from 'classnames'
+import { graphql, useStaticQuery } from 'gatsby'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
@@ -18,33 +17,19 @@ const query = graphql`
   }
 `
 
-export default class Header extends PureComponent {
-  static propTypes = {
+Header.propTypes = {
   minimal: PropTypes.bool
-  }
+}
 
-  render() {
-    const { minimal } = this.props
+export default function Header({ minimal }) {
+  const { metaYaml } = useStaticQuery(query)
 
   return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const meta = data.metaYaml
-          const headerClasses = classNames([styles.header], {
-            [styles.minimal]: minimal
-          })
-
-          return (
-            <header className={headerClasses}>
+    <header className={minimal ? styles.minimal : styles.header}>
       <ThemeSwitch />
       <LogoUnit minimal={minimal} />
       <Networks hide={minimal} />
-              <Availability hide={minimal && !meta.availability.status} />
+      <Availability hide={minimal && !metaYaml.availability.status} />
     </header>
   )
-        }}
-      />
-    )
-  }
 }

src/components/organisms/Header.module.scss

@@ -13,6 +13,7 @@
 }
 
 .minimal {
+    composes: header;
     min-height: 0;
     padding-top: $spacer * 2;
     padding-bottom: 0;

src/components/organisms/Header.test.jsx

@@ -13,7 +13,7 @@ describe('Header', () => {
 
   it('renders correctly', () => {
     const { container } = render(
-      <Context.Provider value={{ dark: false, toggleDark: () => null }}>
+      <Context.Provider value={{ darkMode: false, toggleDark: () => null }}>
         <Header />
       </Context.Provider>
     )
@@ -22,7 +22,7 @@ describe('Header', () => {
 
   it('Availability can be hidden', () => {
     const { container } = render(
-      <Context.Provider value={{ dark: false, toggleDark: () => null }}>
+      <Context.Provider value={{ darkMode: false, toggleDark: () => null }}>
         <Header minimal={true} />
       </Context.Provider>
     )