Add codewars buton (#501)

docker-compose.yml

@@ -128,6 +128,7 @@ services:
       - PIXELFED=https://pixelfed.org/
       - VRCHAT=https://vrchat.com
       - X=https://x.com
+      - CODEWARS=https://www.codewars.com
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -598,3 +598,9 @@ button {
   color: #000000;
   background-color: #000000;
 }
+
+/* Codewars */
+.button.button-codewars {
+  color: #df605c;
+  background-color: #222327;
+}

src/components/Home/Home.js

@@ -90,6 +90,7 @@ import lemmyLogo from '../../icons/lemmy.svg';
 import pixelfedLogo from '../../icons/pixelfed.svg';
 import vrchatLogo from '../../icons/vrchat.svg';
 import xLogo from '../../icons/x.svg';
+import codewarsLogo from '../../icons/codewars.svg';
 
 function Home(props) {
   let order = [];
@@ -949,6 +950,15 @@ function Home(props) {
                   order={buttonOrder('X')}
                 />
               )}
+              {runtimeConfig.CODEWARS && (
+                <Button
+                  name="codewars"
+                  href={runtimeConfig.CODEWARS}
+                  displayName="Codewars"
+                  logo={codewarsLogo}
+                  order={buttonOrder('CODEWARS')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -142,6 +142,7 @@ export const runtimeConfig =
         PIXELFED: window?.env?.PIXELFED,
         VRCHAT: window?.env?.VRCHAT,
         X: window?.env?.X,
+        CODEWARS: window?.env?.CODEWARS,
       }
     : {
         // server
@@ -511,4 +512,7 @@ export const runtimeConfig =
           ? process.env.VRCHAT
           : process.env.RAZZLE_VRCHAT,
         X: nodeIsProduction ? process.env.X : process.env.RAZZLE_X,
+        CODEWARS: nodeIsProduction
+          ? process.env.CODEWARS
+          : process.env.RAZZLE_CODEWARS,
       };