Add LinkedIn to footer

Related to #61

content/settings/footer/index.md

@@ -12,6 +12,7 @@ socials:
   github: https://github.com/openknowledgebe
   twitter: https://twitter.com/openknowledgebe
   facebook: https://www.facebook.com/OpenKnowledgeBE
+  linkedin: https://www.linkedin.com/company/open-knowledge-belgium/
 footer_nav:
   - label: About
     to: /about

src/components/Footer.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Markdown from 'markdown-to-jsx';
 
 import NavItems from './NavItems';
-import { facebookIcon, githubIcon, twitterIcon } from '../images/icons';
+import { facebookIcon, githubIcon, twitterIcon, linkedinIcon } from '../images/icons';
 import { breakpoints } from '../styles/globals';
 
 const StyledFooter = styled.footer`
@@ -114,6 +114,14 @@ const Footer = ({ data }) => (
           >
             <img src={facebookIcon} alt="Facebook" />
           </a>
+          <a
+            href={data.socials.linkedin}
+            className="mg-r-b"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={linkedinIcon} alt="LinkedIn" />
+          </a>
         </div>
       </div>
     </div>

src/components/Layout.jsx

@@ -30,6 +30,7 @@ const Layout = ({ children }) => {
                 github
                 twitter
                 facebook
+                linkedin
               }
             }
           }

src/components/UI/Person.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { twitterBlackIcon, mailIcon, linkedinIcon, headshotIcon } from '../../images/icons';
+import { twitterBlackIcon, mailIcon, linkedinBlackIcon, headshotIcon } from '../../images/icons';
 
 import Img from './Img';
 
@@ -64,7 +64,7 @@ const Person = ({ name, picture, socials, task }) => (
           )}
           {socials.linkedin && (
             <a href={socials.linkedin} target="_blank" rel="noopener noreferrer">
-              <img src={linkedinIcon} alt="LinkedIn" />
+              <img src={linkedinBlackIcon} alt="LinkedIn" />
             </a>
           )}
           {socials.twitter && (

src/images/icons/index.js

@@ -4,6 +4,7 @@ export { default as twitterIcon } from './twitter.svg';
 export { default as arrow } from './arrow.svg';
 export { default as twitterBlackIcon } from './twitter-black.svg';
 export { default as mailIcon } from './mail.svg';
+export { default as linkedinBlackIcon } from './linkedin-black.svg';
 export { default as linkedinIcon } from './linkedin.svg';
 export { default as headshotIcon } from './placeholder-person.svg';
 export { default as btmFacingArrow } from './btm-facing-arrow.svg';

src/templates/Activity.jsx

@@ -11,7 +11,7 @@ import {
   btmFacingArrow,
   facebookBlackIcon,
   twitterBlackIcon,
-  linkedinIcon,
+  linkedinBlackIcon,
   githubBlackIcon
 } from '../images/icons';
 
@@ -279,7 +279,7 @@ export const ActivityTemplate = ({ data }) => (
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <img src={linkedinIcon} alt="Linkedin" />
+                      <img src={linkedinBlackIcon} alt="Linkedin" />
                     </a>
                   )}
 

static/admin/config.yml

@@ -470,6 +470,7 @@ collections:
               - { label: Github, name: github, widget: string }
               - { label: 'Twitter', name: 'twitter', widget: 'string' }
               - { label: 'Facebook', name: 'facebook', widget: 'string' }
+              - { label: 'LinkedIn', name: 'linkedin', widget: 'string' }
           - label: 'Footer Navigation'
             name: 'footer_nav'
             widget: 'list'