feat(button): Added Lastfm (#68)

* Added Last.fm

* Update lastfm.svg

* [lastfm] Lint: added missing ;

Co-authored-by: Jens Frost Lunding <jenlu@mobilepay.dk>

README.md

@@ -132,6 +132,7 @@ services:
       - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON 
       - PAYPAL=https://www.paypal.me/user
       - SLACK=https://slack.com/
+      - LASTFM=https://last.fm/
       # you can render an unlimited amount of custom buttons by adding 
       # the CUSTOM_BUTTON_* variables and by using a comma as a separator.
       - CUSTOM_BUTTON_TEXT=Visit My Site,Visit My OTHER Site

docker-compose.yml

@@ -69,7 +69,7 @@ services:
       - PAYPAL=https://www.paypal.me/user
       - SLACK=https://slack.com/
       - STACKOVERFLOW=https://stackoverflow.com/
-
+      - LASTFM=https://last.fm/
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -479,3 +479,13 @@ button:hover,
 .button.button-stackoverflow:focus {
   filter: brightness(90%)
 }
+
+/* Last.fm */
+.button.button-lastfm {
+  color: #ffffff;
+  background-color: #000101;
+}
+.button.button-lastfm:hover,
+.button.button-lastfm:focus {
+  filter: brightness(90%)
+}

src/components/Home/Home.js

@@ -43,6 +43,7 @@ import Sort from '../Sort/Sort';
 import paypalLogo from '../../icons/paypal.svg';
 import slackLogo from '../../icons/slack.svg';
 import stackoverflowLogo from '../../icons/stackoverflow.svg';
+import lastfmLogo from '../../icons/lastfm.svg';
 
 function Home(props) {
   let order = [];
@@ -478,6 +479,15 @@ function Home(props) {
                   order={buttonOrder('STACKOVERFLOW')}
                 />
               )}
+              {runtimeConfig.LASTFM && (
+                <Button
+                  name="lastfm"
+                  href={runtimeConfig.LASTFM}
+                  displayName="Last.fm"
+                  logo={lastfmLogo}
+                  order={buttonOrder('LASTFM')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>

src/config.js

@@ -71,6 +71,7 @@ export const runtimeConfig =
         CUSTOM_BUTTON_NAME: window?.env?.CUSTOM_BUTTON_NAME,
         CUSTOM_BUTTON_ICON: window?.env?.CUSTOM_BUTTON_ICON,
         STACKOVERFLOW: window?.env?.STACKOVERFLOW,
+        LASTFM: window?.env?.LASTFM,
       }
     : {
         // server
@@ -251,4 +252,7 @@ export const runtimeConfig =
         STACKOVERFLOW: nodeIsProduction
           ? process.env.STACKOVERFLOW
           : process.env.RAZZLE_STACKOVERFLOW,
+        LASTFM: nodeIsProduction
+          ? process.env.LASTFM
+          : process.env.RAZZLE_LASTFM,
       };

src/icons/lastfm.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+<path style="fill:#ba0000" d="M442.2,712.8l-36-97.6c0,0-58.4,65.1-145.8,65.1c-77.5,0-132.4-67.4-132.4-175.1c0-138,69.7-187.4,138-187.4c98.8,0,130.2,63.9,157.1,145.8l36,112.2c36,108.9,103.4,196.4,297.4,196.4c139.1,0,233.5-42.7,233.5-154.8c0-90.9-51.7-138-148.1-160.6l-71.8-15.7c-49.4-11.3-63.9-31.4-63.9-65.1c0-38.1,30.2-60.7,79.6-60.7c54,0,83.1,20.3,87.5,68.5l112.2-13.4c-9-101.1-78.7-142.6-193.1-142.6c-101.1,0-199.8,38.1-199.8,160.6c0,76.4,37.1,124.6,130.2,147l76.4,18c57.2,13.4,76.4,37.1,76.4,69.7c0,41.5-40.4,58.4-116.8,58.4c-113.3,0-160.6-59.5-187.4-141.5l-37.1-112.2c-46.9-146-122.1-199.8-271.4-199.8C97.7,227.9,10,332.2,10,509.7c0,170.5,87.5,262.6,244.8,262.6C381.5,772.3,442.2,712.7,442.2,712.8L442.2,712.8L442.2,712.8z"/>
+</svg>