feat: Add 500px (#264)

* feat: Add 500px

* fix: Image

* fix: Move to bottom

* fix: Lint

* fix: Move logo

* fix: Move to bottom for real

docker-compose.yml

@@ -119,6 +119,8 @@ services:
       - TWITTER_SITE=@TechnoTimLive
       - TWITTER_CREATOR=@TechnoTimLive
       - SHARE=https://technotim.live
+      - FIVEHUNDREDPX=https://500px.com/
+
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -526,3 +526,9 @@ button {
   color: #133a95;
   background-color: #fff
 }
+
+/* 500px */
+.button.button-500px {
+  color: #000;
+  background-color: #fff
+}

src/components/Home/Home.js

@@ -79,6 +79,7 @@ import designByHumansLogo from '../../icons/designbyhumans.svg';
 import dockerhubLogo from '../../icons/docker.svg';
 import veroLogo from '../../icons/vero.svg';
 import myAnimeListLogo from '../../icons/myanimelist.svg';
+import fiveHundredPXLogo from '../../icons/500px.svg';
 
 function Home(props) {
   let order = [];
@@ -839,6 +840,15 @@ function Home(props) {
                   order={buttonOrder('MYANIMELIST')}
                 />
               )}
+              {runtimeConfig.FIVEHUNDREDPX && (
+                <Button
+                  name="500px"
+                  href={runtimeConfig.FIVEHUNDREDPX}
+                  displayName="500px"
+                  logo={fiveHundredPXLogo}
+                  order={buttonOrder('FIVEHUNDREDPX')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -126,6 +126,7 @@ export const runtimeConfig =
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
         SHARE: window?.env?.SHARE,
         DROP_SHADOW: window?.env?.DROP_SHADOW,
+        FIVEHUNDREDPX: window?.env?.FIVEHUNDREDPX,
       }
     : {
         // server
@@ -451,4 +452,7 @@ export const runtimeConfig =
         DROP_SHADOW: nodeIsProduction
           ? process.env.DROP_SHADOW
           : process.env.RAZZLE_DROP_SHADOW,
+        FIVEHUNDREDPX: nodeIsProduction
+          ? process.env.FIVEHUNDREDPX
+          : process.env.RAZZLE_FIVEHUNDREDPX,
       };

src/icons/500px.svg

@@ -0,0 +1 @@
+<svg id="logo_svg" data-name="Logo SVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20"><title>500px</title><path d="M24.83,0a10,10,0,1,0,10,10h0A10.09,10.09,0,0,0,24.83,0Zm0,17.9a7.85,7.85,0,1,1,7.8-7.9h0A7.9,7.9,0,0,1,24.83,17.9ZM46.32,0a10,10,0,1,0,10,10h0A10,10,0,0,0,46.32,0Zm0,17.9a7.85,7.85,0,1,1,7.8-7.9h0A7.77,7.77,0,0,1,46.32,17.9ZM7.63,6a6.74,6.74,0,0,0-5.3,1.4V2.1h9c0.3,0,.5-0.1.5-1s-0.4-.9-0.6-0.9H1.33a0.9,0.9,0,0,0-.9.9V9.9c0,0.5.3,0.6,0.8,0.7a0.76,0.76,0,0,0,.9-0.2h0a5.69,5.69,0,0,1,5-2.4,5.2,5.2,0,0,1,4.5,4.4A5.06,5.06,0,0,1,7.23,18H6.63a5.1,5.1,0,0,1-4.7-3.3c-0.1-.3-0.3-0.5-1.1-0.2s-0.9.5-.8,0.8a7.09,7.09,0,0,0,9,4.2,7.09,7.09,0,0,0,4.2-9A7,7,0,0,0,7.63,6ZM63.12,0.1a5.42,5.42,0,0,0-4.8,5.4v8.9c0,0.5.4,0.6,1,.6s1-.1,1-0.6V5.5a3.36,3.36,0,0,1,2.9-3.4,3.29,3.29,0,0,1,2.5.8,3.19,3.19,0,0,1,1.1,2.4,4,4,0,0,1-.7,1.9,3.15,3.15,0,0,1-2.8,1.3h0c-0.4,0-.7,0-0.8.9,0,0.6,0,.9.5,1a4.92,4.92,0,0,0,2.9-.6,5.37,5.37,0,0,0,2.9-4.2A5.18,5.18,0,0,0,64,0,2.77,2.77,0,0,1,63.12.1Zm13.1,5.2,3.6-3.6c0.1-.1.4-0.4-0.2-1.1a1,1,0,0,0-.7-0.4h0a0.52,0.52,0,0,0-.4.2L74.92,4l-3.6-3.7c-0.3-.3-0.6-0.2-1.1.2s-0.5.8-.2,1.1l3.6,3.6L70,8.9h0a0.76,0.76,0,0,0-.2.4,0.84,0.84,0,0,0,.4.7,1.61,1.61,0,0,0,.7.4h0a1.06,1.06,0,0,0,.5-0.2L75,6.6l3.6,3.6a0.52,0.52,0,0,0,.4.2h0a1,1,0,0,0,.7-0.4c0.3-.4.4-0.8,0.1-1Z" transform="translate(0)"></path></svg>