Added Shazam (#166)

* Added Shazam

* Fix shazam typo

* Fix image

docker-compose.yml

@@ -95,6 +95,7 @@ services:
       - MATRIX=https://matrix.to/
       - ANILIST=https://anilist.co/
       - GITBUCKET=https://gitbucket.github.io/
+      - SHAZAM=https://www.shazam.com/myshazam
       - OG_SITE_NAME=Techno Tim Live (OG)
       - OG_TITLE=Techno Tim (OG)
       - OG_DESCRIPTION=Techno Tim Link page (OG)

public/css/brands.css

@@ -451,4 +451,10 @@ button {
 .button.button-gitbucket {
   color: #000;
   background-color: #fff
+}
+
+/* Shazam */
+.button.button-shazam {
+  color: #fff;
+  background-color: #1f5bfc
 }

src/components/Home/Home.js

@@ -66,6 +66,7 @@ import statusLogo from '../../icons/status.svg';
 import matrixLogo from '../../icons/matrix.svg';
 import anilistLogo from '../../icons/anilist.svg';
 import gitbucketLogo from '../../icons/gitbucket.svg';
+import shazamLogo from '../../icons/shazam.svg';
 
 function Home(props) {
   let order = [];
@@ -717,6 +718,15 @@ function Home(props) {
                   order={buttonOrder('GITBUCKET')}
                 />
               )}
+              {runtimeConfig.SHAZAM && (
+                <Button
+                  name="shazam"
+                  href={runtimeConfig.SHAZAM}
+                  displayName="Shazam"
+                  logo={shazamLogo}
+                  order={buttonOrder('SHAZAM')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>

src/config.js

@@ -108,6 +108,7 @@ export const runtimeConfig =
         MATRIX: window?.env?.MATRIX,
         ANILIST: window?.env?.ANILIST,
         GITBUCKET: window?.env?.GITBUCKET,
+        SHAZAM: window?.env?.SHAZAM,
         MATOMO_URL: window?.env?.MATOMO_URL,
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
       }
@@ -393,6 +394,9 @@ export const runtimeConfig =
         GITBUCKET: nodeIsProduction
           ? process.env.GITBUCKET
           : process.env.RAZZLE_GITBUCKET,
+        SHAZAM: nodeIsProduction
+          ? process.env.SHAZAM
+          : process.env.RAZZLE_SHAZAM,
         MATOMO_URL: nodeIsProduction
           ? process.env.MATOMO_URL
           : process.env.RAZZLE_MATOMO_URL,

src/icons/shazam.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84" height="84.00063" viewBox="0 0 84 84.00063">
+  <defs>
+    <linearGradient id="linear-gradient" x1="-2482.43666" y1="1511.39875" x2="-2481.43666" y2="1511.39875" gradientTransform="matrix(0, -105.13062, -105.13062, 0, 158936.29443, -260896.11629)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#25f"/>
+      <stop offset="1" stop-color="#0af"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="svg3336">
+      <g id="g3344">
+        <g>
+          <path id="path3396" d="M0,42.00063a42.01081,42.01081,0,0,0,42,42h0a42.01081,42.01081,0,0,0,42-42h0a42.01081,42.01081,0,0,0-42-42h0a41.93088,41.93088,0,0,0-42,42" style="fill: url(#linear-gradient)"/>
+          <path id="path3408" d="M64.5,57.62563c-4,4.375-11.125,11.25-11.5,11.5a5.0614,5.0614,0,0,1-3.375,1.375,4.87471,4.87471,0,0,1-3.375-8.375c.125-.125,7.25-6.875,11-11a9.98758,9.98758,0,0,0,2.5-7.125,10.12654,10.12654,0,0,0-3.75-7.25c-3-2.5-8.75-3.125-12.375.125-2.125,2-4.75,4.75-4.875,4.875a4.86457,4.86457,0,0,1-7.125-6.625c.125-.125,3-3.25,5.5-5.5a19.49463,19.49463,0,0,1,25.25-.25,20.1616,20.1616,0,0,1,7.125,14,18.76653,18.76653,0,0,1-5,14.25m-29.375.375a19.20239,19.20239,0,0,1-12.5-4.5,20.1616,20.1616,0,0,1-7.125-14,19.43965,19.43965,0,0,1,5-14.25c4-4.375,11.125-11.25,11.5-11.5a4.86216,4.86216,0,1,1,6.75,7c-.125.125-7.25,6.875-11,11a9.98758,9.98758,0,0,0-2.5,7.125,10.12654,10.12654,0,0,0,3.75,7.25c3,2.5,8.75,3.125,12.375-.125,2.125-2,4.75-4.75,4.875-4.875a4.86457,4.86457,0,1,1,7.125,6.625c-.125.125-3,3.25-5.5,5.5a19.20305,19.20305,0,0,1-12.75,4.75" style="fill: #fff"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>