FEATURE: Added blurred white theme

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 src/dist
 dev/docker/stacks/main/assets
-.env
+.env
+.DS_Store

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Nikurasu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -16,4 +16,6 @@ A up to date docker image is provided at my gitea, but you can also build it you
 3. Build the image. For unix like systems I provide a bash script in `dev/shell/docker-prod.sh`. I hated the hassle to type the full command every time ;)
 
 ### Deploy
-Done with docker-compose. Use the file at `dev/docker/stacks/main/compose.yml` and edit it to your needs.
+1. Done with docker-compose. Use the file at `dev/docker/stacks/main/compose.yml` and edit it to your needs.
+2. Configure the resulting config.yml file under your mounted assets volume `config/config.yml` and replace the profile pic in the img folder `img/profilepic.jpg`.
+   The image name can be ajusted in the config file if needed.

assets/config/config.yml

@@ -1,12 +1,14 @@
 name: "Nikurasu"                                # The name on the linktree
+# 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
-theme: 'simple-orange'
+theme: 'blurred-white'
 links:
   - text: "YouTube"                             # text on the link
     hyperlink: "Test"                           # the actual hyperlink
     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:
@@ -15,4 +17,4 @@ smallLinks:
   - platform: "facebook"
     hyperlink: "https://facebook.com"
   - platform: "youtube"
-    hyperlink: "https://youtu.be"
+    hyperlink: "https://youtu.be"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "socialtree",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The awesome and damn simple, selfhosted alternative to linktree",
   "main": "src/index.js",
   "author": "nikurasu",

src/index.js

@@ -20,6 +20,7 @@ app.get('/', (req, res) => {
     res.render('index', {
         name: config.name,
         filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
+        summaryText: config.summaryText ? config.summaryText: '',
         links: config.links,
         smallLinks: config.smallLinks,
         theme: config.theme

src/public/themes/blurred-white.scss

@@ -0,0 +1,27 @@
+@import '../util/main.scss';
+@import '../util/blurred-basic.scss';
+@import '../util/colors.scss';
+
+$gradient1: #e0f3ff;
+$gradient2: #d5efff;
+$gradient3: #a6d0ff;
+$gradient4: #c1dbff;
+
+
+body {
+    background-image: linear-gradient(120deg, $gradient1, $gradient2, $gradient3, $gradient4, $gradient3, $gradient2, $gradient1);
+}
+
+.mainLinkbox {
+    >a{
+        >button{
+            background-color: $white;
+        }
+    }
+}
+
+.smallLinkbox {
+    a {
+        color: $white;
+    }
+}

src/public/util/blurred-basic.scss

@@ -0,0 +1,102 @@
+@import './fonts/open-sans.scss';
+@import './encodedImages/noise.scss';
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+    
+    &::before {
+        content: '';
+        background-image: url($noiseTexture);
+        opacity: 7.5%;
+        filter: blur(.5px);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: -1;      
+    }
+}
+
+.container {
+    padding-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+}
+
+.headingbox{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: 1.5rem;
+
+    h1 {
+        font-size: 1.5rem;
+        font-weight: 800;
+    }
+
+    .summaryBox {
+        max-width: 90vw;
+        width: 750px;
+        .summaryText {
+            font-weight: 600;
+            font-size: 1rem;
+            text-align: center;
+        }
+    }
+}
+
+.imgbox>img {
+    height: 10rem;
+    width: 10rem;
+    border-radius: .5rem;
+}
+
+.mainLinkbox {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    >a{
+        >button {
+            font-family: 'Open Sans', sans-serif;
+            font-size: 1rem;
+            font-weight: 600;
+            border: none;
+            border-radius: .25rem;
+            width: 750px;
+            max-width: 90vw;
+            height: 3rem;
+            cursor: pointer;
+            transition: transform .25s ease-in-out;
+            filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
+
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+}
+
+.smallLinkbox {
+    margin: 1rem 0;
+    width: 500px;
+    max-width: 90vw;
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    a {
+        font-size: 2rem;
+        text-decoration: none;
+        filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
+        transition: transform .25s ease-in-out;
+        
+        &:hover {
+            transform: scale(1.15);
+        }
+    }
+}

src/public/util/fonts/open-sans.scss

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/OpenSans.ttf'), format('truetype');
+}

src/public/util/simple-basic.scss

@@ -1,6 +1,7 @@
-@import "colors.scss";
-
 body {
+    font-family: monospace;
+    display: flex;
+    justify-content: center;
     min-height: 100vh;
 }
 
@@ -12,10 +13,27 @@ body {
     gap: .5rem;
 }
 
-.headingbox>h1 {
-    font-size: 1.5rem;
-    font-weight: 800;
-    font-family: monospace;
+.headingbox{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: 1.5rem;
+
+    h1 {
+        font-size: 1.5rem;
+        font-weight: 800;
+    }
+
+    .summaryBox {
+        max-width: 90vw;
+        width: 750px;
+        .summaryText {
+            font-weight: 600;
+            font-size: 1rem;
+            text-align: center;
+        }
+    }
 }
 
 .imgbox>img {
@@ -35,20 +53,19 @@ body {
             font-weight: 600;
             border: 4px solid;
             width: 750px;
+            max-width: 90vw;
             height: 3rem;
             cursor: pointer;
             transition: background-color .25s ease-in-out, color .25s ease-in-out;
-
-            &:hover {
-                background-position: 2rem;
-            }
         }
     }
 }
 
 .smallLinkbox {
     margin: 1rem 0;
-    max-width: 500px;
+    width: 500px;
+    max-width: 90vw;
+    justify-content: center;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;

src/views/index.ejs

@@ -6,10 +6,15 @@
     </div>
     <div class="headingbox">
         <h1><%= name %></h1>
+        <% if(summaryText !== '') { %>
+            <div class="summaryBox">
+                <p class="summaryText"><%= summaryText %></p>
+            </div>
+        <% } %>
     </div>
     <div class="mainLinkbox">
         <% links.forEach(link => { %>
-        <a href="<%= link.hyperlink %>"> 
+        <a <% if(link.verify && link.verify.toLowerCase() === 'mastodon') { %> rel="me" <% } %> href="<%= link.hyperlink %>"> 
             <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
         </a>
         <% }) %>
@@ -22,4 +27,4 @@
         <% }) %>
     </div>
 </div>
-<%- include('partials/footer') %> 
+<%- include('partials/footer') %>