Use own link component

Add key prop to list elements Add photography page Remove footer on index page
muuvmuuv · Jan 13, 2020 · d1943e8 · d1943e8
1 parent 627239a
commit d1943e8
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 61 deletions.
diff --git a/src/components/logo.jsx b/src/components/logo.jsx
@@ -1,15 +1,15 @@
 import React from 'react'
-import { Link } from 'gatsby'
 
 import { useSiteData } from '../hooks/use-site-data'
 import LogoComponent from '../images/logo.svg'
+import Link from '../components/Link'
 
 const Logo = () => {
   const sitedata = useSiteData()
 
   return (
     <div className="logo">
-      <Link href="/">
+      <Link to="/">
         <LogoComponent alt={`Logo of ${sitedata.title}`} />
       </Link>
     </div>

diff --git a/src/html.js b/src/html.js
@@ -7,8 +7,11 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import dayjs from 'dayjs'
 
 export default function HTML(props) {
+  const thisYear = dayjs().get('y')
+
   return (
     <html lang="en" {...props.htmlAttributes}>
       <head>
@@ -22,9 +25,9 @@ export default function HTML(props) {
       </head>
       <body {...props.bodyAttributes}>
         {props.preBodyComponents}
+        {/*TODO: Show beautiful message here*/}
         <noscript key="noscript" id="gatsby-noscript">
-          {/*TODO: Show beautiful message here*/}
-          This app works best with JavaScript enabled.
+          I mean... we have {thisYear}, please enable your JavaScript
         </noscript>
         <div
           key={`body`}

diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx
@@ -15,7 +15,7 @@ const Footer = () => {
       <Logo />
       <ul className="list social">
         {socialLinks.map(({ name, icon, link }) => (
-          <li>
+          <li key={name}>
             <a
               href={link}
               title={name}
@@ -30,7 +30,7 @@ const Footer = () => {
       </ul>
       <ul className="list links">
         {footerLinks.map(({ name, link }) => (
-          <li>
+          <li key={name}>
             <Link to={link}>{name}</Link>
           </li>
         ))}

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -40,21 +40,21 @@ const Page = ({
       />
 
       <div className="showcase">
-        <Link className="item" to="/projects">
+        <Link className="item" to="/projects" key="projects">
           <Backdrop img={Img01.childImageSharp.fluid}></Backdrop>
           <div className="content">
             <h2>Projects</h2>
             <h3>Basement dweller first</h3>
           </div>
         </Link>
-        <Link className="item" to="/photography">
+        <Link className="item" to="/photography" key="photography">
           <Backdrop img={Img02.childImageSharp.fluid}></Backdrop>
           <div className="content">
             <h2>Photography</h2>
             <h3>All around the world</h3>
           </div>
         </Link>
-        <Link className="item" to="/writings">
+        <Link className="item" to="/writings" key="writings">
           <Backdrop img={Img04.childImageSharp.fluid}></Backdrop>
           <div className="content">
             <h2>Writings</h2>

diff --git a/src/pages/photography.jsx b/src/pages/photography.jsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useContext } from 'react'
+import { graphql } from 'gatsby'
+import { Helmet } from 'react-helmet-async'
+
+import { isDev } from '../environment'
+import SEO from '../components/SEO'
+import { History } from '../store'
+
+const Page = ({ pageContext: { breadcrumb } }) => {
+  const pageName = 'Photography'
+  const historyDispatch = useContext(History.Dispatch)
+
+  useEffect(() => {
+    historyDispatch({
+      location: breadcrumb.location,
+      crumbLabel: pageName,
+      crumbs: breadcrumb.crumbs,
+    })
+  })
+
+  if (isDev) {
+    console.group(pageName)
+    // console.log(items)
+    console.log(breadcrumb)
+    console.groupEnd()
+  }
+
+  return (
+    <>
+      <SEO title={pageName} />
+      <Helmet
+        bodyAttributes={{
+          page: pageName.toLowerCase(),
+          class: 'home',
+        }}
+      />
+
+      <div className="gallery">content will come soon</div>
+    </>
+  )
+}
+
+// export const pageQuery = graphql``
+
+export default Page
diff --git a/src/styles/pages/_index.scss b/src/styles/pages/_index.scss
@@ -1,5 +1,5 @@
 [page='index'] {
-  footer {
+  #footer {
     display: none;
   }
 }
diff --git a/src/styles/palette.json b/src/styles/palette.json