Add Dev.to to the list of brands (#43)

* Add Dev.to to the list of brands

* Move new changes to the end of files

* Oneliner

README.md

@@ -96,6 +96,7 @@ services:
       - BUYMEACOFFEE=https://www.buymeacoffee.com/
       - GITLAB=https://www.gitlab.com/
       - PATREON=https://www.patreon.com/technotim
+      - DEVTO=https://dev.to/
     ports:
       - 8080:3000
     restart: unless-stopped
@@ -154,7 +155,7 @@ Or use a values.yaml files
 `helm install littlelink-server k8s-at-home/littlelink-server -f values.yaml`
 
 
-# 👇 What is LittleLink? 
+# 👇 What is LittleLink?
 
 ![LittleLink](https://cdn.cottle.cloud/littlelink/social-circle.png)
 
@@ -163,7 +164,7 @@ and [many.link](https://www.google.com). LittleLink was built using [Skeleton](h
 
 ![Themes](https://cdn.cottle.cloud/littlelink/themes.png)
 
-LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing. 
+LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update `skeleton-light.css` or `skeleton-dark.css` to the HEX values of your choosing.
 
 ![Performance](https://cdn.cottle.cloud/littlelink/performance.png)
 

docker-compose.yml

@@ -62,6 +62,7 @@ services:
       - BUYMEACOFFEE=https://www.buymeacoffee.com/
       - GITLAB=https://www.gitlab.com/
       - PATREON=https://www.patreon.com/technotim
+      - DEVTO=https://dev.to/
 
     ports:
       - 8080:3000

public/css/brands.css

@@ -422,7 +422,7 @@ button:hover,
 }
 .button.button-gitlab:hover,
 .button.button-gitlab:focus {
-  filter: brightness(90%) 
+  filter: brightness(90%)
 }
 
 /* Patreon */
@@ -432,6 +432,16 @@ button:hover,
 }
 .button.button-patreon:hover,
 .button.button-patreon:focus {
-  filter: brightness(90%) 
+  filter: brightness(90%)
+}
+
+/* Dev.to */
+.button.button-devto {
+  color: #000;
+  background-color: #fff;
+}
+.button.button-devto:hover,
+.button.button-devto:focus {
+  filter: brightness(90%);
 }
 

src/components/Home/Home.js

@@ -38,6 +38,7 @@ import stravaLogo from '../../icons/strava.svg';
 import buyMeACoffeeLogo from '../../icons/buymeacoffee.svg';
 import gitlabLogo from '../../icons/gitlab.svg';
 import patreonLogo from '../../icons/patreon.svg';
+import devtoLogo from '../../icons/devto.svg';
 
 function Home(props) {
   return (
@@ -347,6 +348,14 @@ function Home(props) {
                 logo={patreonLogo}
               />
             )}
+            {runtimeConfig.DEVTO && (
+              <Button
+                name="devto"
+                href={runtimeConfig.DEVTO}
+                displayName="Dev.to"
+                logo={devtoLogo}
+              />
+            )}
             <div>
               <p className="footer">{runtimeConfig.FOOTER}</p>
             </div>

src/config.js

@@ -56,6 +56,7 @@ export const runtimeConfig =
         BUYMEACOFFEE: window?.env?.BUYMEACOFFEE,
         GITLAB: window?.env?.GITLAB,
         PATREON: window?.env?.PATREON,
+        DEVTO: window?.env?.DEVTO,
       }
     : {
         // server
@@ -195,4 +196,5 @@ export const runtimeConfig =
         PATREON: nodeIsProduction
           ? process.env.PATREON
           : process.env.RAZZLE_PATREON,
+        DEVTO: nodeIsProduction ? process.env.DEVTO : process.env.RAZZLE_DEVTO,
       };

src/icons/devto.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="40" rx="3" style="fill: currentColor;"/>
+<path d="M19.099 23.508c0 1.31-.423 2.388-1.27 3.234-.838.839-1.942 1.258-3.312 1.258h-4.403V12.277h4.492c1.31 0 2.385.423 3.224 1.27.846.838 1.269 1.912 1.269 3.223v6.738zm-2.808 0V16.77c0-.562-.187-.981-.562-1.258-.374-.285-.748-.427-1.122-.427h-1.685v10.107h1.684c.375 0 .75-.138 1.123-.415.375-.285.562-.708.562-1.27zM28.185 28h-5.896c-.562 0-1.03-.187-1.404-.561-.375-.375-.562-.843-.562-1.404V14.243c0-.562.187-1.03.562-1.404.374-.375.842-.562 1.404-.562h5.896v2.808H23.13v3.65h3.088v2.808h-3.088v3.65h5.054V28zm7.12 0c-.936 0-1.684-.655-2.246-1.965l-3.65-13.758h3.089l2.807 10.804 2.808-10.804H41.2l-3.65 13.758C36.99 27.345 36.241 28 35.305 28z" fill="white"/>
+</svg>