Add Slack to the list of brands (#51)

README.md

@@ -114,6 +114,7 @@ services:
       - UMAMI_APP_URL=https://your-umami-app.com
       - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON # use ENV variable names for order, listed buttons will be boosted to the top
       - PAYPAL=https://www.paypal.me/user
+      - SLACK=https://slack.com/
     ports:
       - 8080:3000
     restart: unless-stopped

docker-compose.yml

@@ -67,6 +67,7 @@ services:
       - UMAMI_APP_URL=https://your-umami-app.com
       - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON
       - PAYPAL=https://www.paypal.me/user
+      - SLACK=https://slack.com/
 
     ports:
       - 8080:3000

public/css/brands.css

@@ -455,3 +455,11 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Slack */
+.button.button-slack {
+  color: #fff;
+  background-color: #4a154b;
+}
+.button.button-slack:hover,
+.button.button-slack:focus {
+  filter: brightness(90%) }

src/components/Home/Home.js

@@ -41,6 +41,7 @@ import patreonLogo from '../../icons/patreon.svg';
 import devtoLogo from '../../icons/devto.svg';
 import Sort from '../Sort/Sort';
 import paypalLogo from '../../icons/paypal.svg';
+import slackLogo from '../../icons/slack.svg';
 
 function Home(props) {
   let order = [];
@@ -414,6 +415,15 @@ function Home(props) {
                   order={buttonOrder('PAYPAL')}
                 />
               )}
+              {runtimeConfig.SLACK && (
+                <Button
+                  name="slack"
+                  href={runtimeConfig.SLACK}
+                  displayName="Slack"
+                  logo={slackLogo}
+                  order={buttonOrder('SLACK')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>

src/config.js

@@ -61,6 +61,7 @@ export const runtimeConfig =
         UMAMI_APP_URL: window?.env?.UMAMI_APP_URL,
         BUTTON_ORDER: window?.env?.BUTTON_ORDER,
         PAYPAL: window?.env?.PAYPAL,
+        SLACK: window?.env?.SLACK,
       }
     : {
         // server
@@ -213,4 +214,5 @@ export const runtimeConfig =
         PAYPAL: nodeIsProduction
           ? process.env.PAYPAL
           : process.env.RAZZLE_PAYPAL,
+        SLACK: nodeIsProduction ? process.env.SLACK : process.env.RAZZLE_SLACK,
       };

src/icons/slack.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0"/><path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d"/><path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e"/><path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a"/></g></svg>