Added MyAnimeList (#205)

* Added MyAnimeList

* Fix image

docker-compose.yml

@@ -103,6 +103,7 @@ services:
       - KAKAOTALK=https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko
       - DESIGNBYHUMANS=https://www.designbyhumans.com/
       - DOCKERHUB=https://hub.docker.com/
+      - MYANIMELIST=https://myanimelist.net/
       - OG_SITE_NAME=Techno Tim Live (OG)
       - OG_TITLE=Techno Tim (OG)
       - OG_DESCRIPTION=Techno Tim Link page (OG)

public/css/brands.css

@@ -446,7 +446,7 @@ button {
   color: #02a0f2;
   background-color: #1c242e;
 }
-  
+
 /* Gitbucket */
 .button.button-gitbucket {
   color: #000;
@@ -503,3 +503,8 @@ button {
   background-color: #fff
 }
 
+/* MyAnimeList */
+.button.button-myAnimeList {
+  color: #133a95;
+  background-color: #fff
+}

src/components/Home/Home.js

@@ -75,6 +75,7 @@ import lineLogo from '../../icons/linemessenger.svg';
 import kakaoLogo from '../../icons/kaokotalk.svg';
 import designByHumansLogo from '../../icons/designbyhumans.svg';
 import dockerhubLogo from '../../icons/docker.svg';
+import myAnimeListLogo from '../../icons/myanimelist.svg';
 
 function Home(props) {
   let order = [];
@@ -798,6 +799,15 @@ function Home(props) {
                   order={buttonOrder('DOCKERHUB')}
                 />
               )}
+              {runtimeConfig.MYANIMELIST && (
+                <Button
+                  name="myAnimeList"
+                  href={runtimeConfig.MYANIMELIST}
+                  displayName="MyAnimeList"
+                  logo={myAnimeListLogo}
+                  order={buttonOrder('MYANIMELIST')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -118,6 +118,7 @@ export const runtimeConfig =
         KAKAOTALK: window?.env?.KAKAOTALK,
         DESIGNBYHUMANS: window?.env?.DESIGNBYHUMANS,
         DOCKERHUB: window?.env?.DOCKERHUB,
+        MYANIMELIST: window?.env?.MYANIMELIST,
         MATOMO_URL: window?.env?.MATOMO_URL,
         MATOMO_SITE_ID: window?.env?.MATOMO_SITE_ID,
         SHARE: window?.env?.SHARE,
@@ -428,6 +429,9 @@ export const runtimeConfig =
         DOCKERHUB: nodeIsProduction
           ? process.env.DOCKERHUB
           : process.env.RAZZLE_DOCKERHUB,
+        MYANIMELIST: nodeIsProduction
+          ? process.env.MYANIMELIST
+          : process.env.RAZZLE_MYANIMELIST,
         MATOMO_URL: nodeIsProduction
           ? process.env.MATOMO_URL
           : process.env.RAZZLE_MATOMO_URL,

src/icons/myanimelist.svg

@@ -0,0 +1 @@
+<svg style="color: rgb(19, 58, 149);" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MyAnimeList</title><path d="M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404-1.989-2.458-.02 5.285H.001L0 7.247h2.203l1.865 2.545 2.015-2.546 2.19.001zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.296 9.296 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.908 3.908 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687.351-.187.743-.264 1.107-.359a7.405 7.405 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.236 2.236 0 0 0-1.278 1.92l2.663.033.038-1.81h2.309zm3.992-2.099v6.627l3.107.032-.43 1.775h-4.807V7.187l2.13.03z" fill="#133a95"></path></svg>