diff --git a/.env.example b/.env.example
index d2f58fa..6aa7dbb 100644
--- a/.env.example
+++ b/.env.example
@@ -25,3 +25,4 @@ RAZZLE_FOOTER=Thanks for stopping by!
RAZZLE_GA_TRACKING_ID=G-XXXXXXXXXX
RAZZLE_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
RAZZLE_UMAMI_APP_URL=https://your-umami-app.com
+RAZZLE_BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON
\ No newline at end of file
diff --git a/README.md b/README.md
index 1e21bab..8769d13 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ This container image is published on both [GitHub Container Registry](https://gi
---
version: "3.0"
services:
- little-link:
+ littlelink-server:
image: ghcr.io/techno-tim/littlelink-server:latest
# dockerhub is also supported timothystewart6/littlelink-server
#image: timothystewart6/littlelink-server:latest
@@ -112,6 +112,7 @@ services:
- DEVTO=https://dev.to/
- UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
- UMAMI_APP_URL=https://your-umami-app.com
+ - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON # use ENV variable names for order
ports:
- 8080:3000
restart: unless-stopped
diff --git a/docker-compose.yml b/docker-compose.yml
index 8ae63fd..75be1df 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -65,6 +65,7 @@ services:
- DEVTO=https://dev.to/
- UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
- UMAMI_APP_URL=https://your-umami-app.com
+ - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON
ports:
- 8080:3000
diff --git a/public/css/brands.css b/public/css/brands.css
index 224bbf8..2e175c3 100644
--- a/public/css/brands.css
+++ b/public/css/brands.css
@@ -105,7 +105,7 @@ button:hover,
}
/* Facebook Messenger */
-.button.button-messenger {
+.button.button-facebookmessenger {
color: #ffffff;
background-image: linear-gradient(
25deg,
@@ -117,8 +117,8 @@ button:hover,
#ff7061
);
}
-.button.button-messenger:hover,
-.button.button-messenger:focus {
+.button.button-facebookmessenger:hover,
+.button.button-facebookmessenger:focus {
filter: brightness(90%);
}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index eb7fac9..ba68c1d 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -1,5 +1,5 @@
import React, { memo } from 'react';
-import { string } from 'prop-types';
+import { string, number } from 'prop-types';
import { trackGoogleEvent } from '../../analytics/google';
import { runtimeConfig } from '../../config';
import { trackUmamiEvent } from '../../analytics/umami';
@@ -45,4 +45,5 @@ Button.propType = {
alt: string.isRequired,
href: string,
name: string,
+ order: number,
};
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index e58b61c..d5fb90e 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -39,8 +39,18 @@ import buyMeACoffeeLogo from '../../icons/buymeacoffee.svg';
import gitlabLogo from '../../icons/gitlab.svg';
import patreonLogo from '../../icons/patreon.svg';
import devtoLogo from '../../icons/devto.svg';
+import Sort from '../Sort/Sort';
function Home(props) {
+ let order = [];
+ if (runtimeConfig?.BUTTON_ORDER) {
+ order = runtimeConfig.BUTTON_ORDER.split(',').reverse();
+ }
+
+ const buttonOrder = button => {
+ return order.indexOf(button);
+ };
+
return (
<>
@@ -53,309 +63,348 @@ function Home(props) {
/>
{`${runtimeConfig.NAME}`}
{runtimeConfig.BIO}
- {runtimeConfig.YOUTUBE && (
-
- )}
- {runtimeConfig.TWITCH && (
-
- )}
- {runtimeConfig.TWITTER && (
-
- )}
- {runtimeConfig.INSTAGRAM && (
-
- )}
- {runtimeConfig.GITHUB && (
-
- )}
+
+ {runtimeConfig.YOUTUBE && (
+
+ )}
+ {runtimeConfig.TWITCH && (
+
+ )}
+ {runtimeConfig.TWITTER && (
+
+ )}
+ {runtimeConfig.INSTAGRAM && (
+
+ )}
+ {runtimeConfig.GITHUB && (
+
+ )}
- {runtimeConfig.DISCORD && (
-
- )}
+ {runtimeConfig.DISCORD && (
+
+ )}
- {runtimeConfig.TIKTOK && (
-
- )}
- {runtimeConfig.FACEBOOK && (
-
- )}
- {runtimeConfig.FACEBOOK_MESSENGER && (
-
- )}
- {runtimeConfig.LINKED_IN && (
-
- )}
- {runtimeConfig.PRODUCT_HUNT && (
-
- )}
- {runtimeConfig.SNAPCHAT && (
-
- )}
- {runtimeConfig.SPOTIFY && (
-
- )}
- {runtimeConfig.REDDIT && (
-
- )}
- {runtimeConfig.MEDIUM && (
-
- )}
- {runtimeConfig.PINTEREST && (
-
- )}
- {runtimeConfig.EMAIL && (
-
- )}
+ {runtimeConfig.TIKTOK && (
+
+ )}
+ {runtimeConfig.FACEBOOK && (
+
+ )}
+ {runtimeConfig.FACEBOOK_MESSENGER && (
+
+ )}
+ {runtimeConfig.LINKED_IN && (
+
+ )}
+ {runtimeConfig.PRODUCT_HUNT && (
+
+ )}
+ {runtimeConfig.SNAPCHAT && (
+
+ )}
+ {runtimeConfig.SPOTIFY && (
+
+ )}
+ {runtimeConfig.REDDIT && (
+
+ )}
+ {runtimeConfig.MEDIUM && (
+
+ )}
+ {runtimeConfig.PINTEREST && (
+
+ )}
+ {runtimeConfig.EMAIL && (
+
+ )}
- {runtimeConfig.EMAIL_ALT && (
-
- )}
+ {runtimeConfig.EMAIL_ALT && (
+
+ )}
- {runtimeConfig.SOUND_CLOUD && (
-
- )}
- {runtimeConfig.FIGMA && (
-
- )}
+ {runtimeConfig.SOUND_CLOUD && (
+
+ )}
+ {runtimeConfig.FIGMA && (
+
+ )}
- {runtimeConfig.TELEGRAM && (
-
- )}
+ {runtimeConfig.TELEGRAM && (
+
+ )}
- {runtimeConfig.TUMBLR && (
-
- )}
- {runtimeConfig.STEAM && (
-
- )}
+ {runtimeConfig.TUMBLR && (
+
+ )}
+ {runtimeConfig.STEAM && (
+
+ )}
- {runtimeConfig.VIMEO && (
-
- )}
- {runtimeConfig.WORDPRESS && (
-
- )}
- {runtimeConfig.GOODREADS && (
-
- )}
- {runtimeConfig.SKOOB && (
-
- )}
- {runtimeConfig.LETTERBOXD && (
-
- )}
- {runtimeConfig.MASTODON && (
-
- )}
- {runtimeConfig.MICRO_BLOG && (
-
- )}
- {runtimeConfig.WHATSAPP && (
-
- )}
- {runtimeConfig.KIT && (
-
- )}
- {runtimeConfig.STRAVA && (
-
- )}
- {runtimeConfig.BUYMEACOFFEE && (
-
- )}
- {runtimeConfig.GITLAB && (
-
- )}
- {runtimeConfig.PATREON && (
-
- )}
- {runtimeConfig.DEVTO && (
-
- )}
+ {runtimeConfig.VIMEO && (
+
+ )}
+ {runtimeConfig.WORDPRESS && (
+
+ )}
+ {runtimeConfig.GOODREADS && (
+
+ )}
+ {runtimeConfig.SKOOB && (
+
+ )}
+ {runtimeConfig.LETTERBOXD && (
+
+ )}
+ {runtimeConfig.MASTODON && (
+
+ )}
+ {runtimeConfig.MICRO_BLOG && (
+
+ )}
+ {runtimeConfig.WHATSAPP && (
+
+ )}
+ {runtimeConfig.KIT && (
+
+ )}
+ {runtimeConfig.STRAVA && (
+
+ )}
+ {runtimeConfig.BUYMEACOFFEE && (
+
+ )}
+ {runtimeConfig.GITLAB && (
+
+ )}
+ {runtimeConfig.PATREON && (
+
+ )}
+ {runtimeConfig.DEVTO && (
+
+ )}
+
diff --git a/src/components/Sort/Sort.js b/src/components/Sort/Sort.js
new file mode 100644
index 0000000..4bced74
--- /dev/null
+++ b/src/components/Sort/Sort.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Sort = ({ children }) => {
+ const sorted = React.Children.toArray(children).sort((a, b) => {
+ return b.props.order - a.props.order;
+ });
+
+ return sorted;
+};
+
+export default Sort;
diff --git a/src/components/Sort/Sort.test.js b/src/components/Sort/Sort.test.js
new file mode 100644
index 0000000..0bae42a
--- /dev/null
+++ b/src/components/Sort/Sort.test.js
@@ -0,0 +1,10 @@
+import Sort from './Sort';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('
', () => {
+ test('renders without exploding', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(
, div);
+ });
+});
diff --git a/src/config.js b/src/config.js
index 5bdf1a7..e9be263 100644
--- a/src/config.js
+++ b/src/config.js
@@ -59,6 +59,7 @@ export const runtimeConfig =
DEVTO: window?.env?.DEVTO,
UMAMI_WEBSITE_ID: window?.env?.UMAMI_WEBSITE_ID,
UMAMI_APP_URL: window?.env?.UMAMI_APP_URL,
+ BUTTON_ORDER: window?.env?.BUTTON_ORDER,
}
: {
// server
@@ -205,4 +206,7 @@ export const runtimeConfig =
UMAMI_APP_URL: nodeIsProduction
? process.env.UMAMI_APP_URL
: process.env.RAZZLE_UMAMI_APP_URL,
+ BUTTON_ORDER: nodeIsProduction
+ ? process.env.BUTTON_ORDER
+ : process.env.BUTTON_ORDER,
};