feat(button): Added Buy Me a coffee

docker-compose.yml

@@ -52,6 +52,7 @@ services:
       - MASTODON=https://mastodon.social/
       - MICRO_BLOG=https://micro.blog/
       - STRAVA=https://strava.com/
+      - BUYMEACOFFEE=https://www.buymeacoffee.com/
 
     ports:
       - 8080:3000

public/css/brands.css

@@ -404,3 +404,14 @@ button:hover,
 .button.button-strava:focus {
   filter: brightness(90%);
 }
+
+/* Buy Me a Coffee */
+.button.button-buymeacoffee {
+  color: #000000;
+  background-color: #FFDD00;
+}
+.button.button-strava:hover,
+.button.button-strava:focus {
+  filter: brightness(90%);
+}
+

src/components/Home/Home.js

@@ -24,7 +24,6 @@ import figmaLogo from '../../icons/figma.svg';
 import telegramLogo from '../../icons/telegram.svg';
 import tumblrLogo from '../../icons/tumblr.svg';
 import steamLogo from '../../icons/steam.svg';
-import stravaLogo from '../../icons/strava.svg';
 import vimeoLogo from '../../icons/vimeo.svg';
 import wordpressLogo from '../../icons/wordpress.svg';
 import goodreadsLogo from '../../icons/goodreads.svg';
@@ -35,6 +34,8 @@ import microblogLogo from '../../icons/microblog.svg';
 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 buyMeACoffeeLogo from '../../icons/buymeacoffee.svg';
 
 function Home(props) {
   return (
@@ -318,6 +319,14 @@ function Home(props) {
                 logo={stravaLogo}
               />
             )}
+            {runtimeConfig.BUYMEACOFFEE && (
+              <Button
+                name="buymeacoffee"
+                href={runtimeConfig.BUYMEACOFFEE}
+                displayName="Buy Me a Coffee"
+                logo={buyMeACoffeeLogo}
+              />
+            )}
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>
             </div>

src/config.js

@@ -50,6 +50,7 @@ export const runtimeConfig =
         FOOTER: window?.env?.FOOTER,
         WHATSAPP: window?.env?.WHATSAPP,
         STRAVA: window?.env?.STRAVA,
+        BUYMEACOFFEE: window?.env?.BUYMEACOFFEE,
       }
     : {
         // server
@@ -174,4 +175,7 @@ export const runtimeConfig =
         STRAVA: nodeIsProduction
           ? process.env.STRAVA
           : process.env.RAZZLE_STRAVA,
+        BUYMEACOFFEE: nodeIsProduction
+          ? process.env.BUYMEACOFFEE
+          : process.env.RAZZLE_BUYMEACOFFEE,
       };