Add Buttons (#675)

docker-compose.yml

@@ -143,6 +143,11 @@ services:
       - GOOGLESCHOLAR=https://scholar.google.co.uk/
       - SIMPLEX=https://simplex.chat/
       - MIXCLOUD=https://www.mixcloud.com/
+      - INTERNETARCHIVE=https://archive.org/
+      - GOOGLEMAPS=https://www.google.com/maps
+      - TIDAL=https://tidal.com/
+      - THESTORYGRAPH=https://www.thestorygraph.com/
+      - GEOCACHING=https://www.geocaching.com/play
     ports:
       - 8080:3000
     restart: unless-stopped

public/css/brands.css

@@ -703,4 +703,37 @@ button {
 .button.button-mixcloud {
   color: #000000;
   background-color: #ffffff;
-}
+}
+
+/* Internet Archive */
+.button.button-internetarchive {
+  color: #000000;
+  background-color: #ffff;
+}
+
+/* Google Maps */
+.button.button-googlemaps {
+  color: #4482f1;
+  background-color: #fff;
+}
+
+/* Tidal */
+.button.button-tidal {
+  color: #000000;
+  background-color: #fff;
+}
+
+/* TheStoryGraph */
+.button.button-thestorygraph {
+  color: #ffff;
+  background-color: #18949c;
+}
+
+/* Geocaching */
+.button.button-geocaching {
+  color: #000000;
+  background-color: #ffff;
+}
+
+
+

src/components/Home/Home.js

@@ -105,6 +105,11 @@ import semanticscholarLogo from '../../icons/semanticscholar.svg';
 import googlescholarLogo from '../../icons/googlescholar.svg';
 import simplexLogo from '../../icons/simplex.svg';
 import mixcloudLogo from '../../icons/mixcloud.svg';
+import internetarchiveLogo from '../../icons/internetarchive.svg';
+import googlemapsLogo from '../../icons/googlemaps.svg';
+import tidalLogo from '../../icons/tidal.svg';
+import thestorygraphLogo from '../../icons/storygraph.svg';
+import geocachingLogo from '../../icons/geocaching.svg';
 
 function Home(props) {
   let order = [];
@@ -1098,6 +1103,51 @@ function Home(props) {
                   order={buttonOrder('MIXCLOUD')}
                 />
               )}
+              {runtimeConfig.INTERNETARCHIVE && (
+                <Button
+                  name="internetarchive"
+                  href={runtimeConfig.INTERNETARCHIVE}
+                  displayName="Internet Archive"
+                  logo={internetarchiveLogo}
+                  order={buttonOrder('INTERNETARCHIVE')}
+                />
+              )}
+              {runtimeConfig.GOOGLEMAPS && (
+                <Button
+                  name="googlemaps"
+                  href={runtimeConfig.GOOGLEMAPS}
+                  displayName="Google Maps"
+                  logo={googlemapsLogo}
+                  order={buttonOrder('GOOGLEMAPS')}
+                />
+              )}
+              {runtimeConfig.TIDAL && (
+                <Button
+                  name="tidal"
+                  href={runtimeConfig.TIDAL}
+                  displayName="Tidal"
+                  logo={tidalLogo}
+                  order={buttonOrder('TIDAL')}
+                />
+              )}
+              {runtimeConfig.THESTORYGRAPH && (
+                <Button
+                  name="thestorygraph"
+                  href={runtimeConfig.THESTORYGRAPH}
+                  displayName="The StoryGraph"
+                  logo={thestorygraphLogo}
+                  order={buttonOrder('THESTORYGRAPH')}
+                />
+              )}
+              {runtimeConfig.GEOCACHING && (
+                <Button
+                  name="geocaching"
+                  href={runtimeConfig.GEOCACHING}
+                  displayName="GEOCACHING"
+                  logo={geocachingLogo}
+                  order={buttonOrder('GEOCACHING')}
+                />
+              )}
             </Sort>
             <div>
               <p className="footer">

src/config.js

@@ -158,6 +158,11 @@ export const runtimeConfig =
         GOOGLESCHOLAR: window?.env?.GOOGLESCHOLAR,
         SIMPLEX: window?.env?.SIMPLEX,
         MIXCLOUD: window?.env?.MIXCLOUD,
+        INTERNETARCHIVE: window?.env?.INTERNETARCHIVE,
+        GOOGLEMAPS: window?.env?.GOOGLEMAPS,
+        TIDAL: window?.env?.TIDAL,
+        THESTORYGRAPH: window?.env?.THESTORYGRAPH,
+        GEOCACHING: window?.env?.GEOCACHING,
       }
     : {
         // server
@@ -571,4 +576,17 @@ export const runtimeConfig =
         MIXCLOUD: nodeIsProduction
           ? process.env.MIXCLOUD
           : process.env.RAZZLE_MIXCLOUD,
+        INTERNETARCHIVE: nodeIsProduction
+          ? process.env.INTERNETARCHIVE
+          : process.env.RAZZLE_INTERNETARCHIVE,
+        GOOGLEMAPS: nodeIsProduction
+          ? process.env.GOOGLEMAPS
+          : process.env.RAZZLE_GOOGLEMAPS,
+        TIDAL: nodeIsProduction ? process.env.TIDAL : process.env.RAZZLE_TIDAL,
+        THESTORYGRAPH: nodeIsProduction
+          ? process.env.THESTORYGRAPH
+          : process.env.RAZZLE_THESTORYGRAPH,
+        GEOCACHING: nodeIsProduction
+          ? process.env.GEOCACHING
+          : process.env.RAZZLE_GEOCACHING,
       };