feat(button): Added ghost (#38) (#97)

README.md

@@ -160,6 +160,7 @@ services:
       - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
       - TWITTER_SITE=@TechnoTimLive
       - TWITTER_CREATOR=@TechnoTimLive
+      - GHOST=https://ghost.org/
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -539,3 +539,13 @@ button:hover,
 .button.button-instantgaming:focus {
   filter: brightness(90%)
 }
+
+/* ghost */
+.button.button-ghost {
+  color: #000;
+  background-color: #fff;
+}
+.button.button-ghost:hover,
+.button.button-ghost:focus {
+  filter: brightness(90%)
+}

src/components/Home/Home.js

@@ -49,6 +49,7 @@ import polyworkLogo from '../../icons/polywork.svg';
 import signalLogo from '../../icons/signal.svg';
 import untappdLogo from '../../icons/untappd.svg';
 import instantGamingLogo from '../../icons/instantgaming.svg';
+import ghostLogo from '../../icons/ghost.svg';
 
 function Home(props) {
   let order = [];
@@ -538,6 +539,15 @@ function Home(props) {
                   order={buttonOrder('INSTANTGAMING')}
                 />
               )}
+              {runtimeConfig.GHOST && (
+                <Button
+                  name="ghost"
+                  href={runtimeConfig.GHOST}
+                  displayName="ghost"
+                  logo={ghostLogo}
+                  order={buttonOrder('GHOST')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>

src/config.js

@@ -78,6 +78,18 @@ export const runtimeConfig =
         UNTAPPD: window?.env?.UNTAPPD,
         BUTTON_TARGET: window?.env?.BUTTON_TARGET,
         INSTANTGAMING: window?.env?.INSTANTGAMING,
+        OG_SITE_NAME: window?.env?.OG_SITE_NAME,
+        OG_TITLE: window?.env?.OG_TITLE,
+        OG_DESCRIPTION: window?.env?.OG_DESCRIPTION,
+        OG_URL: window?.env?.OG_URL,
+        OG_IMAGE: window?.env?.OG_IMAGE,
+        OG_IMAGE_WIDTH: window?.env?.OG_IMAGE_WIDTH,
+        OG_IMAGE_HEIGHT: window?.env?.OG_IMAGE_HEIGHT,
+        TWITTER_CARD: window?.env?.TWITTER_CARD,
+        TWITTER_IMAGE: window?.env?.TWITTER_IMAGE,
+        TWITTER_SITE: window?.env?.TWITTER_SITE,
+        TWITTER_CREATOR: window?.env?.TWITTER_CREATOR,
+        GHOST: window?.env?.GHOST,
       }
     : {
         // server
@@ -310,4 +322,5 @@ export const runtimeConfig =
         TWITTER_CREATOR: nodeIsProduction
           ? process.env.TWITTER_CREATOR
           : process.env.RAZZLE_TWITTER_CREATOR,
+        GHOST: nodeIsProduction ? process.env.GHOST : process.env.RAZZLE_GHOST,
       };