Added osu! (#181)

* Added osu!

added the rhythm game osu!

* Update Home.js

* Update Home.js

* ran "yarn lint --fix"

docker-compose.yml

@@ -98,6 +98,7 @@ services:
       - SHAZAM=https://www.shazam.com/myshazam
       - TPDB=https://theposterdb.com/
       - FLICKR=https://www.flickr.com/
+      - OSU=https://osu.ppy.sh/users/
       - OG_SITE_NAME=Techno Tim Live (OG)
       - OG_TITLE=Techno Tim (OG)
       - OG_DESCRIPTION=Techno Tim Link page (OG)

public/css/brands.css

@@ -469,4 +469,10 @@ button {
 .button.button-tpdb {
   color: #fff;
   background-color: #FA6940
+}
+
+/* osu! */
+.button.button-osu {
+  color: #fff;
+  background-color: #FF8EE6
 }

src/components/Home/Home.js

@@ -70,6 +70,7 @@ import gitbucketLogo from '../../icons/gitbucket.svg';
 import shazamLogo from '../../icons/shazam.svg';
 import flickrLogo from '../../icons/flickr.svg';
 import tpdbLogo from '../../icons/tpdb.svg';
+import osuLogo from '../../icons/osu.svg';
 
 function Home(props) {
   let order = [];
@@ -748,6 +749,15 @@ function Home(props) {
                   order={buttonOrder('TPDB')}
                 />
               )}
+              {runtimeConfig.OSU && (
+                <Button
+                  name="osu"
+                  href={runtimeConfig.OSU}
+                  displayName="osu!"
+                  logo={osuLogo}
+                  order={buttonOrder('OSU')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -111,6 +111,7 @@ export const runtimeConfig =
         SHAZAM: window?.env?.SHAZAM,
         FLICKR: window?.env?.FLICKR,
         TPDB: window?.env?.TPDB,
+        OSU: window?.env?.OSU,
         MATOMO_URL: window?.env?.MATOMO_URL,
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
         SHARE: window?.env?.SHARE,
@@ -404,6 +405,7 @@ export const runtimeConfig =
           ? process.env.FLICKR
           : process.env.RAZZLE_FLICKR,
         TPDB: nodeIsProduction ? process.env.TPDB : process.env.RAZZLE_TPDB,
+        OSU: nodeIsProduction ? process.env.OSU : process.env.RAZZLE_OSU,
         MATOMO_URL: nodeIsProduction
           ? process.env.MATOMO_URL
           : process.env.RAZZLE_MATOMO_URL,