Added Trakt (#125)

* Added Trakt

* Ran yarn lint --fix

docker-compose.yml

@@ -77,6 +77,7 @@ services:
       - UNTAPPD=https://untappd.com/
       - BUTTON_TARGET=_blank
       - INSTANTGAMING=https://www.instant-gaming.com/
+      - TRAKT=https://trakt.tv
       - OG_SITE_NAME=Techno Tim Live (OG)
       - OG_TITLE=Techno Tim (OG)
       - OG_DESCRIPTION=Techno Tim Link page (OG)

public/css/brands.css

@@ -356,3 +356,9 @@ button {
   color: #000;
   background-color: #fff;
 }
+
+/* trakt */
+.button.button-trakt {
+  color: #fff;
+  background-color: #000;
+}

src/components/Home/Home.js

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

src/config.js

@@ -91,6 +91,7 @@ export const runtimeConfig =
         TWITTER_SITE: window?.env?.TWITTER_SITE,
         TWITTER_CREATOR: window?.env?.TWITTER_CREATOR,
         GHOST: window?.env?.GHOST,
+        TRAKT: window?.env?.TRAKT,
         MATOMO_URL: window?.env?.MATOMO_URL,
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
       }
@@ -329,6 +330,7 @@ export const runtimeConfig =
           ? process.env.TWITTER_CREATOR
           : process.env.RAZZLE_TWITTER_CREATOR,
         GHOST: nodeIsProduction ? process.env.GHOST : process.env.RAZZLE_GHOST,
+        TRAKT: nodeIsProduction ? process.env.TRAKT : process.env.RAZZLE_TRAKT,
         MATOMO_URL: nodeIsProduction
           ? process.env.MATOMO_URL
           : process.env.RAZZLE_MATOMO_URL,

src/icons/trakt.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 144.8 144.8" enable-background="new 0 0 144.8 144.8" xml:space="preserve">
+<g>
+	<circle fill="#FFFFFF" cx="72.4" cy="72.4" r="72.4"/>
+	<path fill="#ED2224" d="M29.5,111.8c10.6,11.6,25.9,18.8,42.9,18.8c8.7,0,16.9-1.9,24.3-5.3L56.3,85L29.5,111.8z"/>
+	<path fill="#ED2224" d="M56.1,60.6L25.5,91.1L21.4,87l32.2-32.2h0l37.6-37.6c-5.9-2-12.2-3.1-18.8-3.1c-32.2,0-58.3,26.1-58.3,58.3
+		c0,13.1,4.3,25.2,11.7,35l30.5-30.5l2.1,2l43.7,43.7c0.9-0.5,1.7-1,2.5-1.6L56.3,72.7L27,102l-4.1-4.1l33.4-33.4l2.1,2l51,50.9
+		c0.8-0.6,1.5-1.3,2.2-1.9l-55-55L56.1,60.6z"/>
+	<path fill="#ED1C24" d="M115.7,111.4c9.3-10.3,15-24,15-39c0-23.4-13.8-43.5-33.6-52.8L60.4,56.2L115.7,111.4z M74.5,66.8l-4.1-4.1
+		l28.9-28.9l4.1,4.1L74.5,66.8z M101.9,27.1L68.6,60.4l-4.1-4.1L97.8,23L101.9,27.1z"/>
+	<g>
+		<g>
+			<path fill="#ED2224" d="M72.4,144.8C32.5,144.8,0,112.3,0,72.4C0,32.5,32.5,0,72.4,0s72.4,32.5,72.4,72.4
+				C144.8,112.3,112.3,144.8,72.4,144.8z M72.4,7.3C36.5,7.3,7.3,36.5,7.3,72.4s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1
+				S108.3,7.3,72.4,7.3z"/>
+		</g>
+	</g>
+</g>
+</svg>