mirror of
https://github.com/techno-tim/littlelink-server.git
synced 2025-01-05 12:27:59 +01:00
feata(custom buttons): Added custom buttons (#61)
This commit is contained in:
Techno Tim
GitHub
parent
4a8d3c51ee
commit
80dfc03fff
@ -26,4 +26,10 @@ 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
|
||||
RAZZLE_BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON
|
||||
RAZZLE_CUSTOM_BUTTON_TEXT=Visit My Site,Visit My OTHER Site
|
||||
RAZZLE_CUSTOM_BUTTON_URL=https://technotim.live,https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A
|
||||
RAZZLE_CUSTOM_BUTTON_COLOR=#ED2756,#0085FF
|
||||
RAZZLE_CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
|
||||
RAZZLE_CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
|
||||
RAZZLE_CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
|
||||
@ -70,7 +70,7 @@ services:
|
||||
littlelink-server:
|
||||
image: ghcr.io/techno-tim/littlelink-server:latest
|
||||
# dockerhub is also supported timothystewart6/littlelink-server
|
||||
#image: timothystewart6/littlelink-server:latest
|
||||
# image: timothystewart6/littlelink-server:latest
|
||||
container_name: littlelink-server
|
||||
environment:
|
||||
- META_TITLE=Techno Tim
|
||||
@ -131,6 +131,13 @@ services:
|
||||
- BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON # use ENV variable names for order, listed buttons will be boosted to the top
|
||||
- PAYPAL=https://www.paypal.me/user
|
||||
- SLACK=https://slack.com/
|
||||
# you can render an unlimited amount of custom buttons by adding the CUSTOM_BUTTON_* variables and by using a comma as a separator.
|
||||
- CUSTOM_BUTTON_TEXT=Visit My Site,Visit My OTHER Site
|
||||
- CUSTOM_BUTTON_URL=https://technotim.live,https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A
|
||||
- CUSTOM_BUTTON_COLOR=#ED2756,#0085FF
|
||||
- CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
|
||||
- CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
|
||||
- CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
|
||||
ports:
|
||||
- 8080:3000
|
||||
restart: unless-stopped
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { memo } from 'react';
|
||||
import { string, number } from 'prop-types';
|
||||
import { string, number, object } from 'prop-types';
|
||||
import { trackGoogleEvent } from '../../analytics/google';
|
||||
import { runtimeConfig } from '../../config';
|
||||
import { trackUmamiEvent } from '../../analytics/umami';
|
||||
|
||||
function Button(props) {
|
||||
const { name, href, displayName, logo } = props;
|
||||
const { name, href, displayName, logo, styles } = props;
|
||||
|
||||
const handleClick = () => {
|
||||
const eventName = `${name}-button`;
|
||||
@ -21,11 +21,12 @@ function Button(props) {
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
className={`button button-${name}`}
|
||||
className={styles ? 'button' : `button button-${name}`}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={handleClick}
|
||||
style={styles ? styles : undefined}
|
||||
>
|
||||
{logo && (
|
||||
<img className="icon" src={logo} alt={`${displayName} logo`} />
|
||||
@ -41,9 +42,11 @@ export default memo(Button);
|
||||
|
||||
Button.propType = {
|
||||
src: string.isRequired,
|
||||
srcSet: string,
|
||||
alt: string.isRequired,
|
||||
href: string,
|
||||
name: string,
|
||||
order: number,
|
||||
displayName: string.isRequired,
|
||||
href: string.isRequired,
|
||||
name: string.isRequired,
|
||||
order: number.isRequired,
|
||||
logo: string,
|
||||
styles: object,
|
||||
};
|
||||
|
||||
@ -53,6 +53,29 @@ function Home(props) {
|
||||
return order.indexOf(button);
|
||||
};
|
||||
|
||||
const renderCustomButtons = () => {
|
||||
const names = runtimeConfig.CUSTOM_BUTTON_NAME?.split(',');
|
||||
const urls = runtimeConfig.CUSTOM_BUTTON_URL?.split(',');
|
||||
const altTexts = runtimeConfig.CUSTOM_BUTTON_ALT_TEXT?.split(',');
|
||||
const texts = runtimeConfig.CUSTOM_BUTTON_TEXT?.split(',');
|
||||
const buttonColors = runtimeConfig.CUSTOM_BUTTON_COLOR?.split(',');
|
||||
const textColors = runtimeConfig.CUSTOM_BUTTON_TEXT_COLOR?.split(',');
|
||||
// have to clean up some of the strings to standardize for analytics
|
||||
return texts.map((t, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
name={names[i].trim().toLowerCase()}
|
||||
href={urls[i].trim()}
|
||||
displayName={altTexts[i].trim()}
|
||||
styles={{
|
||||
backgroundColor: buttonColors[i].trim(),
|
||||
color: textColors[i].trim(),
|
||||
}}
|
||||
order={buttonOrder(names[i].trim())}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
@ -66,6 +89,7 @@ function Home(props) {
|
||||
<h1>{`${runtimeConfig.NAME}`}</h1>
|
||||
<p>{runtimeConfig.BIO}</p>
|
||||
<Sort>
|
||||
{runtimeConfig.CUSTOM_BUTTON_TEXT && renderCustomButtons()}
|
||||
{runtimeConfig.YOUTUBE && (
|
||||
<Button
|
||||
name="youtube"
|
||||
|
||||
@ -63,6 +63,12 @@ export const runtimeConfig =
|
||||
BUTTON_ORDER: window?.env?.BUTTON_ORDER,
|
||||
PAYPAL: window?.env?.PAYPAL,
|
||||
SLACK: window?.env?.SLACK,
|
||||
CUSTOM_BUTTON_TEXT: window?.env?.CUSTOM_BUTTON_TEXT,
|
||||
CUSTOM_BUTTON_URL: window?.env?.CUSTOM_BUTTON_URL,
|
||||
CUSTOM_BUTTON_COLOR: window?.env?.CUSTOM_BUTTON_COLOR,
|
||||
CUSTOM_BUTTON_TEXT_COLOR: window?.env?.CUSTOM_BUTTON_TEXT_COLOR,
|
||||
CUSTOM_BUTTON_ALT_TEXT: window?.env?.CUSTOM_BUTTON_ALT_TEXT,
|
||||
CUSTOM_BUTTON_NAME: window?.env?.CUSTOM_BUTTON_NAME,
|
||||
}
|
||||
: {
|
||||
// server
|
||||
@ -219,4 +225,22 @@ export const runtimeConfig =
|
||||
? process.env.PAYPAL
|
||||
: process.env.RAZZLE_PAYPAL,
|
||||
SLACK: nodeIsProduction ? process.env.SLACK : process.env.RAZZLE_SLACK,
|
||||
CUSTOM_BUTTON_TEXT: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_TEXT
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_TEXT,
|
||||
CUSTOM_BUTTON_URL: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_URL
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_URL,
|
||||
CUSTOM_BUTTON_COLOR: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_COLOR
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_COLOR,
|
||||
CUSTOM_BUTTON_TEXT_COLOR: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_TEXT_COLOR
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_TEXT_COLOR,
|
||||
CUSTOM_BUTTON_ALT_TEXT: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_ALT_TEXT
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_ALT_TEXT,
|
||||
CUSTOM_BUTTON_NAME: nodeIsProduction
|
||||
? process.env.CUSTOM_BUTTON_NAME
|
||||
: process.env.RAZZLE_CUSTOM_BUTTON_NAME,
|
||||
};
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -1359,9 +1359,9 @@
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/html-minifier-terser@^6.0.0":
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz#563c1c6c132cd204e71512f9c0b394ff90d3fae7"
|
||||
integrity sha512-NZwaaynfs1oIoLAV1vg18e7QMVDvw+6SQrdJc8w3BwUaoroVSf6EBj/Sk4PBWGxsq0dzhA2drbsuMC1/6C6KgQ==
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
|
||||
integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
|
||||
|
||||
"@types/http-proxy@^1.17.5":
|
||||
version "1.17.7"
|
||||
@ -1405,9 +1405,9 @@
|
||||
integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
|
||||
|
||||
"@types/node@*":
|
||||
version "16.11.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.9.tgz#879be3ad7af29f4c1a5c433421bf99fab7047185"
|
||||
integrity sha512-MKmdASMf3LtPzwLyRrFjtFFZ48cMf8jmX5VRYrDQiJa8Ybu5VAmkqBWqKU8fdCwD8ysw4mQ9nrEHvzg6gunR7A==
|
||||
version "16.11.10"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.10.tgz#2e3ad0a680d96367103d3e670d41c2fed3da61ae"
|
||||
integrity sha512-3aRnHa1KlOEEhJ6+CvyHKK5vE9BcLGjtUpwvqYLRvYNQKMfabu3BwfJaA/SLW8dxe28LsNDjtHwePTuzn3gmOA==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.1"
|
||||
@ -3232,9 +3232,9 @@ ee-first@1.1.1:
|
||||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.896:
|
||||
version "1.3.906"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.906.tgz#144e212691e35fa8c294431e2ecb51e4b03f7577"
|
||||
integrity sha512-UjoECdcOYIVzWmrbtNnYpPrDuu+RtiO5W08Vdbid9ydGQMSdnqtJUtvOqQEAVQqpoXN9kSW9YnQufvzLQMYQOw==
|
||||
version "1.3.907"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.907.tgz#c8e155a17cb642a1023481c601aa3ad9ee61f402"
|
||||
integrity sha512-xoUPSkjimw51d9ryeH38XUwmR3HmCA+eky4hk0YEgsWeBWGyhb35OCvT3lWAdmvIkcGYCRNOB8LvtO00dJQpOA==
|
||||
|
||||
emittery@^0.7.1:
|
||||
version "0.7.2"
|
||||
@ -9477,14 +9477,14 @@ write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
|
||||
typedarray-to-buffer "^3.1.5"
|
||||
|
||||
ws@^7.4.6:
|
||||
version "7.5.5"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
|
||||
integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
|
||||
version "7.5.6"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
|
||||
integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
|
||||
|
||||
ws@^8.1.0:
|
||||
version "8.2.3"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
|
||||
integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
|
||||
version "8.3.0"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-8.3.0.tgz#7185e252c8973a60d57170175ff55fdbd116070d"
|
||||
integrity sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==
|
||||
|
||||
xml-name-validator@^3.0.0:
|
||||
version "3.0.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user