feat(button): Added Stack Overflow (#66)

README.md

@@ -140,6 +140,7 @@ services:
       - CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
       - CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
       - CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
+      - STACKOVERFLOW=https://stackoverflow.com/
     ports:
       - 8080:3000
     restart: unless-stopped

docker-compose.yml

@@ -45,7 +45,7 @@ services:
       - EMAIL_TEXT=Email Me!
       - EMAIL_ALT=you@example.com
       - EMAIL_ALT_TEXT=Email me!
-      - SOUND_CLOUD=https://souncloud.com
+      - SOUND_CLOUD=https://soundcloud.com
       - FIGMA=https://figma.com
       - TELEGRAM=https://telegram.org/
       - TUMBLR=https://www.tumblr.com/
@@ -68,6 +68,7 @@ services:
       - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON
       - PAYPAL=https://www.paypal.me/user
       - SLACK=https://slack.com/
+      - STACKOVERFLOW=https://stackoverflow.com/
 
     ports:
       - 8080:3000

public/css/brands.css

@@ -463,4 +463,19 @@ button:hover,
 .button.button-slack:hover,
 .button.button-slack:focus {
   filter: brightness(90%) 
-}
+}
+
+/* Stack Overflow */
+.button.button-stackoverflow {
+  color: #000;
+  background-color: #f8f9f9;
+  font-weight: 100;
+}
+.button.button-stackoverflow:after {
+  content: "overflow";
+  font-weight: 700;
+}
+.button.button-stackoverflow:hover,
+.button.button-stackoverflow:focus {
+  filter: brightness(90%)
+}

src/components/Home/Home.js

@@ -42,6 +42,7 @@ import devtoLogo from '../../icons/devto.svg';
 import Sort from '../Sort/Sort';
 import paypalLogo from '../../icons/paypal.svg';
 import slackLogo from '../../icons/slack.svg';
+import stackoverflowLogo from '../../icons/stackoverflow.svg';
 
 function Home(props) {
   let order = [];
@@ -466,6 +467,15 @@ function Home(props) {
                   order={buttonOrder('SLACK')}
                 />
               )}
+              {runtimeConfig.STACKOVERFLOW && (
+                <Button
+                  name="stackoverflow"
+                  href={runtimeConfig.STACKOVERFLOW}
+                  displayName="stack"
+                  logo={stackoverflowLogo}
+                  order={buttonOrder('STACKOVERFLOW')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>

src/config.js

@@ -69,6 +69,7 @@ export const runtimeConfig =
         CUSTOM_BUTTON_TEXT_COLOR: window?.env?.CUSTOM_BUTTON_TEXT_COLOR,
         CUSTOM_BUTTON_ALT_TEXT: window?.env?.CUSTOM_BUTTON_ALT_TEXT,
         CUSTOM_BUTTON_NAME: window?.env?.CUSTOM_BUTTON_NAME,
+        STACKOVERFLOW: window?.env?.STACKOVERFLOW,
       }
     : {
         // server
@@ -243,4 +244,7 @@ export const runtimeConfig =
         CUSTOM_BUTTON_NAME: nodeIsProduction
           ? process.env.CUSTOM_BUTTON_NAME
           : process.env.RAZZLE_CUSTOM_BUTTON_NAME,
+        STACKOVERFLOW: nodeIsProduction
+          ? process.env.STACKOVERFLOW
+          : process.env.RAZZLE_STACKOVERFLOW,
       };

src/icons/stackoverflow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="32px" height="38px" viewBox="-135 22 32 38" enable-background="new -135 22 190 38" xml:space="preserve">
+    <g>
+      <polygon fill="#BCBBBB" points="-108.5,56.2 -108.5,46.3 -105.2,46.3 -105.2,59.5 -135,59.5 -135,46.3 -131.7,46.3 -131.7,56.2       "/>
+      <path fill="#F48024" d="M-128,45.4l16.2,3.4l0.7-3.2l-16.2-3.4L-128,45.4z M-125.9,37.6l15,7l1.4-3l-15-7L-125.9,37.6z     M-121.7,30.2l12.7,10.6l2.1-2.5l-12.7-10.6L-121.7,30.2z M-113.5,22.4l-2.7,2l9.9,13.3l2.7-2L-113.5,22.4z M-128.4,52.9h16.6    v-3.3h-16.6V52.9z"/>
+    </g>
+</svg>