feat: Add Viber, Spacehey, Neocities, Dreamwidth, Pillowfort (#716)

* Add buttons
    - Add dreamwidth
    - Add neocities
    - Add spacehey
    - Add viber

* Add Pillowfort

* fix docker image

docker-compose.yml

@@ -148,6 +148,11 @@ services:
       - TIDAL=https://tidal.com/
       - THESTORYGRAPH=https://www.thestorygraph.com/
       - GEOCACHING=https://www.geocaching.com/play
+      - NEOCITIES=https://neocities.org/
+      - VIBER=https://www.viber.com/en/
+      - SPACEHEY=https://spacehey.com/
+      - DREAMWIDTH=https://www.dreamwidth.org/login
+      - PILLOWFORT=https://www.pillowfort.social/log_in
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -735,5 +735,35 @@ button {
   background-color: #ffff;
 }
 
+/* Neocities */
+.button.button-neocities {
+  color: #ffff;
+  background-color: #65a0ad;
+}
+
+/*  Dreamwidth */
+.button.button-dreamwidth {
+  color: #C1272D;
+  background-color: #ffff;
+}
+
+/* Spacehey */
+.button.button-spacehey {
+  color: #204cdc;
+  background-color: #ffff;
+}
+
+/* Viber */
+.button.button-viber {
+  color: #583cbc;
+  background-color: #ffff;
+}
+
+/* Pillowfort */
+.button.button-pillowfort {
+  color: #000000;
+  background-color: #ffff;
+}
+
 
 

src/components/Home/Home.js

@@ -110,6 +110,11 @@ import googlemapsLogo from '../../icons/googlemaps.svg';
 import tidalLogo from '../../icons/tidal.svg';
 import thestorygraphLogo from '../../icons/storygraph.svg';
 import geocachingLogo from '../../icons/geocaching.svg';
+import neocitiesLogo from '../../icons/neocities.svg';
+import dreamwidthLogo from '../../icons/dreamwidth.svg';
+import spaceheyLogo from '../../icons/spacehey.svg';
+import viberLogo from '../../icons/viber.svg';
+import pillowfortLogo from '../../icons/pillowfort.svg';
 
 function Home(props) {
   let order = [];
@@ -1148,6 +1153,51 @@ function Home(props) {
                   order={buttonOrder('GEOCACHING')}
                 />
               )}
+              {runtimeConfig.NEOCITIES && (
+                <Button
+                  name="neocities"
+                  href={runtimeConfig.NEOCITIES}
+                  displayName="neocities"
+                  logo={neocitiesLogo}
+                  order={buttonOrder('NEOCITIES')}
+                />
+              )}
+              {runtimeConfig.DREAMWIDTH && (
+                <Button
+                  name="dreamwidth"
+                  href={runtimeConfig.DREAMWIDTH}
+                  displayName="dreamWIDTH"
+                  logo={dreamwidthLogo}
+                  order={buttonOrder('DREAMWIDTH')}
+                />
+              )}
+              {runtimeConfig.SPACEHEY && (
+                <Button
+                  name="spacehey"
+                  href={runtimeConfig.SPACEHEY}
+                  displayName="spacehey"
+                  logo={spaceheyLogo}
+                  order={buttonOrder('SPACEHEY')}
+                />
+              )}
+              {runtimeConfig.VIBER && (
+                <Button
+                  name="viber"
+                  href={runtimeConfig.VIBER}
+                  displayName="Viber"
+                  logo={viberLogo}
+                  order={buttonOrder('VIBER')}
+                />
+              )}
+              {runtimeConfig.PILLOWFORT && (
+                <Button
+                  name="pillowfort"
+                  href={runtimeConfig.PILLOWFORT}
+                  displayName="Pillowfort"
+                  logo={pillowfortLogo}
+                  order={buttonOrder('PILLOWFORT')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -163,6 +163,11 @@ export const runtimeConfig =
         TIDAL: window?.env?.TIDAL,
         THESTORYGRAPH: window?.env?.THESTORYGRAPH,
         GEOCACHING: window?.env?.GEOCACHING,
+        NEOCITIES: window?.env?.NEOCITIES,
+        DREAMWIDTH: window?.env?.DREAMWIDTH,
+        SPACEHEY: window?.env?.SPACEHEY,
+        VIBER: window?.env?.VIBER,
+        PILLOWFORT: window?.env?.PILLOWFORT,
       }
     : {
         // server
@@ -589,4 +594,17 @@ export const runtimeConfig =
         GEOCACHING: nodeIsProduction
           ? process.env.GEOCACHING
           : process.env.RAZZLE_GEOCACHING,
+        NEOCITIES: nodeIsProduction
+          ? process.env.NEOCITIES
+          : process.env.RAZZLE_NEOCITIES,
+        DREAMWIDTH: nodeIsProduction
+          ? process.env.DREAMWIDTH
+          : process.env.RAZZLE_DREAMWIDTH,
+        SPACEHEY: nodeIsProduction
+          ? process.env.SPACEHEY
+          : process.env.RAZZLE_SPACEHEY,
+        VIBER: nodeIsProduction ? process.env.VIBER : process.env.RAZZLE_VIBER,
+        PILLOWFORT: nodeIsProduction
+          ? process.env.PILLOWFORT
+          : process.env.RAZZLE_PILLOWFORT,
       };