From cd2c0fe8952030dc0644b85bede6b4aff9ac059d Mon Sep 17 00:00:00 2001 From: Kieran <32241933+KieranRobson@users.noreply.github.com> Date: Tue, 25 Jul 2023 15:23:08 +0100 Subject: [PATCH] feat: Add new buttons (#457) * feat: Add buttons * fix: Remove technotim.live link * fix: Readd links * fix: Small mistake --- README.md | 4 +- docker-compose.yml | 3 + public/css/brands.css | 18 ++++++ src/components/Home/Home.js | 30 +++++++++ src/config.js | 10 +++ src/icons/lemmy.svg | 118 ++++++++++++++++++++++++++++++++++++ src/icons/pixelfed.svg | 101 ++++++++++++++++++++++++++++++ src/icons/vrchat.svg | 12 ++++ 8 files changed, 294 insertions(+), 2 deletions(-) create mode 100644 src/icons/lemmy.svg create mode 100644 src/icons/pixelfed.svg create mode 100644 src/icons/vrchat.svg diff --git a/README.md b/README.md index 125213a..01a203a 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Inspired by [littlelink](https://github.com/sethcottle/littlelink). LittleLink-Server is based on the great work from [littlelink](https://github.com/sethcottle/littlelink), a lightweight DIY alternative to services like [Linktree](https://linktr.ee) and [many.link](https://many.link/). LittleLink and LittleLink-Server is built using [Skeleton](http://getskeleton.com/), a dead simple, responsive boilerplate—we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊 -It takes the same simple approach to a link page and hosts it within a NodeJS server with React Server Side Rendering, containerized for you to use. Now, customizing `LittleLink` with `littlelink-server` is as easy as passing in some environment variables. If you need help configuring this, please see this [video](https://youtu.be/42SqfI_AjXU) at explains everything and a live example at [technotim.live](https://technotim.live/). +It takes the same simple approach to a link page and hosts it within a NodeJS server with React Server Side Rendering, containerized for you to use. Now, customizing `LittleLink` with `littlelink-server` is as easy as passing in some environment variables. If you need help configuring this, please see this [video](https://youtu.be/42SqfI_AjXU) at explains everything and a live example at [links.technotim.live](https://links.technotim.live/). ## ⭐ Features @@ -25,7 +25,7 @@ It takes the same simple approach to a link page and hosts it within a NodeJS se Check the [docker-compose.yml](/docker-compose.yml) file for all supported buttons and configuration! -The example below will generate a site exactly like +The example below will generate a site exactly like ### Using Docker-Compose diff --git a/docker-compose.yml b/docker-compose.yml index 74d938c..68972bc 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -123,6 +123,9 @@ services: - FIVEHUNDREDPX=https://500px.com/ - PRINTABLES=https://www.printables.com - SERIALIZD=https://www.serializd.com/ + - LEMMY=https://join-lemmy.org + - PIXELFED=https://pixelfed.org/ + - VRCHAT=https://vrchat.com ports: - 8080:3000 diff --git a/public/css/brands.css b/public/css/brands.css index be29ec0..e89cee2 100644 --- a/public/css/brands.css +++ b/public/css/brands.css @@ -563,3 +563,21 @@ button { color: #ffffff; background-color: #000000; } + +/* lemmy */ +.button.button-lemmy { + color: #000000; + background-color: #ffffff; +} + +/* pixelfed */ +.button.button-pixelfed { + color: #000000; + background-color: #ffffff; +} + +/* vrchat */ +.button.button-vrchat { + color: #000000; + background-color: #ffffff; +} diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index c35ed50..21a07be 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -85,6 +85,9 @@ import substackLogo from '../../icons/substack.svg'; import printablesLogo from '../../icons/printables.svg'; import serializdLogo from '../../icons/serializd.svg'; import threadsLogo from '../../icons/threads.svg'; +import lemmyLogo from '../../icons/lemmy.svg'; +import pixelfedLogo from '../../icons/pixelfed.svg'; +import vrchatLogo from '../../icons/vrchat.svg'; function Home(props) { let order = []; @@ -899,6 +902,33 @@ function Home(props) { order={buttonOrder('THREADS')} /> )} + {runtimeConfig.LEMMY && ( +