From e07e089785967e9092f57404d9bbc8be66f5fda2 Mon Sep 17 00:00:00 2001
From: Choubakawa <Choubakawa@users.noreply.github.com>
Date: Sun, 5 Dec 2021 18:18:48 +0100
Subject: [PATCH] feat(button): Added Stack Overflow (#66)

---
 README.md                   |  1 +
 docker-compose.yml          |  3 ++-
 public/css/brands.css       | 17 ++++++++++++++++-
 src/components/Home/Home.js | 10 ++++++++++
 src/config.js               |  4 ++++
 src/icons/stackoverflow.svg |  6 ++++++
 6 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/stackoverflow.svg

diff --git a/README.md b/README.md
index a9965ee..4c9f63f 100644
--- a/README.md
+++ b/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
diff --git a/docker-compose.yml b/docker-compose.yml
index 11ed8db..d44a7e1 100644
--- a/docker-compose.yml
+++ b/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
diff --git a/public/css/brands.css b/public/css/brands.css
index 784ed4d..bda929d 100644
--- a/public/css/brands.css
+++ b/public/css/brands.css
@@ -463,4 +463,19 @@ button:hover,
 .button.button-slack:hover,
 .button.button-slack:focus {
   filter: brightness(90%) 
-}
\ No newline at end of file
+}
+
+/* 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%)
+}
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 43c2954..286a8ae 100644
--- a/src/components/Home/Home.js
+++ b/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>
diff --git a/src/config.js b/src/config.js
index fc08e28..36d0eb6 100644
--- a/src/config.js
+++ b/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,
       };
diff --git a/src/icons/stackoverflow.svg b/src/icons/stackoverflow.svg
new file mode 100644
index 0000000..a1aa312
--- /dev/null
+++ b/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>