From c6f1235e86b4b65159424163f7b8520b6b9b5256 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Fri, 14 Sep 2018 12:52:11 +0200
Subject: [PATCH] Accessibility and SEO best practices changes

---
 src/components/Card.js        |  2 +-
 src/components/Footer.js      | 24 ++++++++++++++++++++----
 src/components/Header.css     |  8 ++++++++
 src/components/Header.js      |  8 ++++----
 src/components/SideMenu.js    | 24 ++++++++++++++++++++----
 src/layouts/index.js          |  4 +++-
 src/pages/index.js            |  1 +
 src/styles/general.css        |  4 ++++
 src/templates/blog.js         |  1 +
 src/templates/post-default.js |  4 +++-
 10 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index 7faded1..ef3284f 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -11,7 +11,7 @@ const Card = ({ ...props }) => (
     <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
       {props.image && <img className="w-full" src={props.image.src} />}
       {props.teamMember && (
-        <img className="w-full rounded" src={props.teamMember} />
+        <img className="w-full rounded" alt={props.imgAlt ? props.imgAlt : 'saburly image'} src={props.teamMember} />
       )}
       <div
         className={`px-6 py-4 ${
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 149157c..82b3efb 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -45,7 +45,11 @@ const Footer = () => (
         />
         <div className="flex justify-between social-icons py-2">
           <div>
-            <a href="https://facebook.com/saburly" target="_blank">
+            <a
+              href="https://facebook.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
@@ -54,7 +58,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://instagram.com/saburly" target="_blank">
+            <a
+              href="https://instagram.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
@@ -63,7 +71,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://twitter.com/saburly" target="_blank">
+            <a
+              href="https://twitter.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
@@ -72,7 +84,11 @@ const Footer = () => (
             </a>
           </div>
           <div>
-            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
+            <a
+              href="https://www.linkedin.com/company/saburly/"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"
diff --git a/src/components/Header.css b/src/components/Header.css
index d77824a..0ce0339 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -21,6 +21,14 @@
   width: 25px;
 }
 
+.side-toggle {
+  cursor: pointer;
+}
+
+.side-toggle:hover {
+  opacity: 0.7;
+}
+
 .menu_bar-mid {
   width: 20px;
 }
diff --git a/src/components/Header.js b/src/components/Header.js
index d1c1b36..03b3637 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -20,18 +20,18 @@ class Header extends Component {
               <div className="max-w-xs mr-8">
                 <img
                   src={LogoSaburlyWhite}
-                  className="saburly-logo"
+                  className="saburly-logo saburly-transition"
                   alt="Saburly Logo"
                 />
               </div>
             </Link>
 
-            <div className="side-toggle">
-              <button className="menu_icon visible lg:invisible">
+            <div className="side-toggle saburly-transition">
+              <div className="menu_icon visible lg:invisible">
                 <span className="menu_bar-top" />
                 <span className="menu_bar-mid" />
                 <span className="menu_bar-bot" />
-              </button>
+              </div>
             </div>
 
             <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
diff --git a/src/components/SideMenu.js b/src/components/SideMenu.js
index 5c8106d..6074240 100644
--- a/src/components/SideMenu.js
+++ b/src/components/SideMenu.js
@@ -86,7 +86,11 @@ class SideMenu extends Component {
         </ul>
         <div className="absolute pin-b hidden social-icons p-8">
           <div>
-            <a href="https://facebook.com/saburly" target="_blank">
+            <a
+              href="https://facebook.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Facebook}
                 alt="Facebook Social Media"
@@ -95,7 +99,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://instagram.com/saburly" target="_blank">
+            <a
+              href="https://instagram.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Instagram}
                 alt="Instagram Social Media"
@@ -104,7 +112,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://twitter.com/saburly" target="_blank">
+            <a
+              href="https://twitter.com/saburly"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={Twitter}
                 alt="Twitter Social Media"
@@ -113,7 +125,11 @@ class SideMenu extends Component {
             </a>
           </div>
           <div>
-            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
+            <a
+              href="https://www.linkedin.com/company/saburly/"
+              rel="noreferrer"
+              target="_blank"
+            >
               <img
                 src={LinkedIn}
                 alt="LinkedIn Social Media"
diff --git a/src/layouts/index.js b/src/layouts/index.js
index c1d2017..fa2a924 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -15,7 +15,9 @@ const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
     <Helmet
       link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` }]}
-    />
+    >
+      <html lang="en" />
+    </Helmet>
     <main className="side-panel panel">
       <Header />
       {children()}
diff --git a/src/pages/index.js b/src/pages/index.js
index ed71739..0f6792e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -176,6 +176,7 @@ const IndexPage = ({ ...props }) => (
                   url={`blog/${node.slug}`}
                   title={node.title}
                   date={node.date}
+                  imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
                     node.featured_media
diff --git a/src/styles/general.css b/src/styles/general.css
index 744250d..612fdbe 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -143,6 +143,10 @@ body {
   max-height: 22px;
 }
 
+.saburly-logo:hover {
+  opacity: 0.7;
+}
+
 @media (min-width: 992px) {
   .saburly-logo {
     max-height: 30px;
diff --git a/src/templates/blog.js b/src/templates/blog.js
index a5fc68d..d8dceee 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -45,6 +45,7 @@ class Blog extends Component {
                 <Card
                   title={node.title}
                   date={node.date}
+                  imgAlt={node.title}
                   excerpt={node.excerpt}
                   image={
                     node.featured_media
diff --git a/src/templates/post-default.js b/src/templates/post-default.js
index b370dc2..e64c346 100644
--- a/src/templates/post-default.js
+++ b/src/templates/post-default.js
@@ -30,7 +30,9 @@ class PostDefault extends Component {
           link={[
             { rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` },
           ]}
-        />
+        >
+          <html lang="en" />
+        </Helmet>
         <main className="container mx-auto p-4 max-w-lg sm:p-10">
           <img
             className="w-full rounded"