Add BlueSky (#498)

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

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;

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"

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,

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>