Compare commits

..

No commits in common. "95333f10336554d591deb7f37eb7cc0eefa8dd87" and "25addb9c4124739fbb532f1b680fb652c8254b2a" have entirely different histories.

4 changed files with 16 additions and 32 deletions

View file

@ -5,8 +5,6 @@
[![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://dev.cat-enby.club/Nikurasu/socialtree-js/raw/branch/main/LICENSE.txt)
[![Speed - Blazing ⚡](https://img.shields.io/badge/Speed_-Blazing_⚡-blue)](https://www.youtube.com/watch?v=oPTwBv9lvhw)
![Screenshot of Nikus Socialtree](https://fileshare.cat-enby.club/GaTA4/PUROBIgo31.png/raw)
- [TODO](#todo)
- [Setup](#setup)
- [Build your own Themes](#build-your-own-theme)
@ -22,8 +20,8 @@
- [X] Import my themes from the old socialtree
- [X] Overwrite for round profile pictures
- [X] Testing if everything works like expected
- [X] Expand Documentation
- [X] Rewrite README
- [ ] Expand Documentation
- [ ] Rewrite README
## Setup
A up to date docker image is provided at my gitea, but you can also build it yourself.
@ -39,18 +37,4 @@ A up to date docker image is provided at my gitea, but you can also build it you
The image name can be ajusted in the config file if needed.
## Build your own theme
### SCSS only
1. Create a new scss file with the themes name in `/src/public/themes`
2. Import any dependencies you need. E.g. for a variant of the blurred theme, you can import the blurred-basic.scss from the utils. If you create a completely new theme create your own basic scss file. Write everything that has to do with the layout in this file. In the scss file in the themes folder, you should only define the colours, if possible.
3. Change the theme variable in `asstets/config.yml`
4. If you want I can merge your theme in the main project here. You can reach me over any platform on my [Socialtree](https://links.nikurasu.gay). I would be happy if the ammont of avalable themes grows.
### Own HTML Body
If you want a completely new layout that requires another layout in the HTML you can also do that.
1. create a new main.ejs for you theme in `src/views/partials`
2. Add your themes name to the customMainPartialThemes array in `src/index.js`
3. Write your own layout. You can see the available variables and their names in `src/index.js`
4. Do the Stuff needed for a SCSS only theme.
To use your themes in Docker you have to rebuild the image.
1. Create a new scss file with the themes name in `/src/public/themes`

View file

@ -1,20 +1,20 @@
name: "Nikurasu" # The name on the linktree
# summaryText: 'A simple sample text' # A short summary for what you do, will appear if uncommened
# summaryText: 'A simple sample text' # A short summary for what you do, will appear under the name if uncommened
# profilePic: # uncomment and set this if your profile pic has a custom name
roundPB: false # Set true if you want a round profile picture
theme: '98' # Your theme
links: # the links to your social accounts
roundPB: false
theme: '98'
links:
- text: "YouTube" # text on the link
hyperlink: "Test" # the actual hyperlink
verify: "Mastodon" # set it if your want to verify the link, have a look for the currently supported platforms in the readme
brandcolor: "youtube" # set this if you want to set the color of the link to the brand color of a platform... (not supported by all themes)
color: "#0D0D0D" # or that if you want to set it to an exact color (not supported by all themes)
brandcolor: "youtube" # set this if you want to set the color of the link to the brand color of a platform...
color: "#0D0D0D" # or that if you want to set it to an exact color
- text: "Twitter"
verify: "Mastodon"
hyperlink: "test"
brandcolor: "twitter"
smallLinks: # the links in the small box below the main tree, unset if you dont want it
- platform: "twitter" # used for choosing the icon, I use font-awesome here so all icons of that font are available here
hyperlink: "https://twitter.com" # the hyperlink
smallLinks:
- platform: "twitter"
hyperlink: "https://twitter.com"
- platform: "facebook"
hyperlink: "https://facebook.com"
- platform: "youtube"

View file

@ -10,7 +10,7 @@ const app = express()
const port = process.env.PORT || 3000
const engine = 'ejs'
const customMainPartialThemes = [ // Array of themes that require a custom main partial
const customMainTagThemes = [
'98'
]
@ -29,7 +29,7 @@ app.get('/', (req, res) => {
smallLinks: config.smallLinks,
theme: config.theme,
roundPB: config.roundPB,
customMainPartialThemes: customMainPartialThemes
customMainTagThemes
})
})

View file

@ -1,6 +1,6 @@
<%- include('partials/head') %>
<%- include('partials/header') %>
<% if(customMainPartialThemes.includes(theme)) { %>
<% if(customMainTagThemes.includes(theme)) { %>
<%- include(`partials/${theme}_main`) %>
<% } else { %>
<%- include('partials/defaultMain') %>