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 && ( -