From e10ad8c7c47273fe43668f7f84462748922b35ea Mon Sep 17 00:00:00 2001
From: Sebastian Thiele <sebastian+git@thiele.me>
Date: Sat, 7 Oct 2023 17:44:15 +0200
Subject: [PATCH] Add BlueSky (#498)

---
 docker-compose.yml          |  1 +
 public/css/brands.css       | 11 +++++++++++
 src/components/Home/Home.js | 10 ++++++++++
 src/config.js               |  4 ++++
 src/icons/bluesky.svg       | 14 ++++++++++++++
 5 files changed, 40 insertions(+)
 create mode 100644 src/icons/bluesky.svg

diff --git a/docker-compose.yml b/docker-compose.yml
index afb4b24..a854fb1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -60,6 +60,7 @@ services:
       - MICRO_BLOG=https://micro.blog/
       - WHATSAPP=https://www.whatsapp.com/
       - STRAVA=https://www.strava.com/
+      - BLUESKY=https://bsky.app/profile/bsky.app
       - BUYMEACOFFEE=https://www.buymeacoffee.com/
       - GITLAB=https://www.gitlab.com/
       - PATREON=https://www.patreon.com/technotim
diff --git a/public/css/brands.css b/public/css/brands.css
index 67b4e91..9faf6e1 100644
--- a/public/css/brands.css
+++ b/public/css/brands.css
@@ -268,6 +268,17 @@ button {
   background-color: #fd5000;
 }
 
+/* Bluesky */
+.button.button-bluesky {
+  color: #000000;
+  background-color: #F3F9FF;
+  border: 1px solid #212121;
+}
+.button.button-bluesky:hover,
+.button.button-bluesky:focus {
+  filter: brightness(90%);
+}
+
 /* Buy Me a Coffee */
 .button.button-buymeacoffee {
   color: #000000;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index af199e9..bf8f689 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -36,6 +36,7 @@ import emailLogo from '../../icons/email.svg';
 import emailAltLogo from '../../icons/email_alt.svg';
 import whatsappLogo from '../../icons/whatsapp.svg';
 import stravaLogo from '../../icons/strava.svg';
+import blueSkyLogo from '../../icons/bluesky.svg';
 import buyMeACoffeeLogo from '../../icons/buymeacoffee.svg';
 import gitlabLogo from '../../icons/gitlab.svg';
 import patreonLogo from '../../icons/patreon.svg';
@@ -462,6 +463,15 @@ function Home(props) {
                   order={buttonOrder('STRAVA')}
                 />
               )}
+              {runtimeConfig.BLUESKY && (
+                <Button
+                  name="bluesky"
+                  href={runtimeConfig.BLUESKY}
+                  displayName="BlueSky"
+                  logo={blueSkyLogo}
+                  order={buttonOrder('BLUESKY')}
+                />
+              )}
               {runtimeConfig.BUYMEACOFFEE && (
                 <Button
                   name="buymeacoffee"
diff --git a/src/config.js b/src/config.js
index 6e0dc12..74bf904 100644
--- a/src/config.js
+++ b/src/config.js
@@ -56,6 +56,7 @@ export const runtimeConfig =
         FOOTER: window?.env?.FOOTER,
         WHATSAPP: window?.env?.WHATSAPP,
         STRAVA: window?.env?.STRAVA,
+        BLUESKY: window?.env?.BLUESKY,
         BUYMEACOFFEE: window?.env?.BUYMEACOFFEE,
         GITLAB: window?.env?.GITLAB,
         PATREON: window?.env?.PATREON,
@@ -280,6 +281,9 @@ export const runtimeConfig =
         STRAVA: nodeIsProduction
           ? process.env.STRAVA
           : process.env.RAZZLE_STRAVA,
+        BLUESKY: nodeIsProduction
+          ? process.env.BLUESKY
+          : process.env.RAZZLE_BLUESKY,
         BUYMEACOFFEE: nodeIsProduction
           ? process.env.BUYMEACOFFEE
           : process.env.RAZZLE_BUYMEACOFFEE,
diff --git a/src/icons/bluesky.svg b/src/icons/bluesky.svg
new file mode 100644
index 0000000..c21441e
--- /dev/null
+++ b/src/icons/bluesky.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1432_8560)">
+<path d="M20 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H20C22.2091 24 24 22.2091 24 20V4C24 1.79086 22.2091 0 20 0Z" fill="url(#paint0_linear_1432_8560)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1432_8560" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0066FF"/>
+<stop offset="1" stop-color="#71C0FF"/>
+</linearGradient>
+<clipPath id="clip0_1432_8560">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>