From 60d3804b93b40e1b1cc163f6b06344993780e2e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Reis?= <frederic.reis@uni.lu>
Date: Thu, 31 Oct 2024 17:27:12 +0100
Subject: [PATCH] issue #579: Fix the display of the bluesky icon

---
 .env                            | 1 +
 src/components/Footer/Footer.js | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.env b/.env
index d1731bed..0f4cc0e4 100644
--- a/.env
+++ b/.env
@@ -7,6 +7,7 @@ REACT_APP_TAG_EDITORIAL=editorial
 REACT_APP_ENABLE_AUTH_0=false
 REACT_APP_TWITTER=Journal_DigHist
 REACT_APP_FACEBOOK=journalofdigitalhistory
+REACT_APP_BLUESKY=jdighist.bsky.social
 REACT_APP_THEBE_TOKEN=********
 REACT_APP_THEBE_DEV_BINDER=false
 REACT_APP_THEBE_JUPYTER_URL=http://localhost:8888
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 1b917c6a..667b2d0b 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -19,7 +19,7 @@ import {
 import { Facebook, GitHub } from 'react-feather'
 import DeGruyterLogo from '../../assets/images/Verlag_Walter_de_Gruyter_Logo_Oldenbourg.svg'
 import UniluLogo from '../../assets/images/unilu-c2dh-logo.svg'
-import BlueskyIcon from '../../assets/icons/bluesky.svg'
+import { ReactComponent as BlueskyIcon } from '../../assets/images/bluesky.svg';
 import '../../styles/components/Footer.scss'
 
 
@@ -81,8 +81,8 @@ const Footer = ({ hideOnRoutes=[]}) => {
           <Col {...BootstrapFullColumLayout}>
             <div className="border-top pt-3 mt-3 d-md-flex justify-content-center">
             <div className="me-3 mb-3 mb-md-0 ">
-              <a className="plain-a" href="https://bsky.app/profile/jdighist.bsky.social" target="_blank" rel="noreferrer">
-              <Bluesky size={15}/> @jdighist.bsky.social
+                <a className="plain-a" href={`https://bsky.app/profile/${process.env.REACT_APP_BLUESKY}`} target="_blank" rel="noreferrer">
+                  <BlueskyIcon style={{width: '15px'}} /> @{process.env.REACT_APP_BLUESKY}
               </a>
             </div>
             <div className="d-none d-md-block"> &middot;</div>