Added the 98 theme from socialtree-jigsaw

README.md

@@ -8,8 +8,11 @@
 - [X] Dockerize
 
 ### TODO until 1.0:
-- [ ] Import my styles from the old socialtree
+- [X] Import my styles from the old socialtree
 - [X] Overwrite for round profile pictures
+- [ ] Testing if everything works like expected
+- [ ] Expand Documentation
+- [ ] Rewrite README
 
 ## Setup
 A up to date docker image is provided at my gitea, but you can also build it yourself.

assets/config/config.yml

@@ -2,7 +2,7 @@ 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
 roundPB: false
-theme: 'simple-orange'
+theme: '98'
 links:
   - text: "YouTube"                             # text on the link
     hyperlink: "Test"                           # the actual hyperlink

src/index.js

@@ -11,7 +11,7 @@ const port = process.env.PORT || 3000
 const engine = 'ejs'
 
 const customMainTagThemes = [
-    '89'
+    '98'
 ]
 
 app.set('view engine', engine)

src/public/themes/98.scss

@@ -0,0 +1,40 @@
+@import '../util/main.scss';
+
+body {
+    background-color: #008080;
+}
+
+.container {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+
+    .img-window {
+        width: 11rem;
+        img {
+            width: 10rem;
+        }
+    }
+    
+    .link-window {
+        width: 750px;
+        max-width: 90vw;
+
+        .mainLinkbox {
+            margin: .5rem 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: .5rem
+        }
+
+        .smallLinkbox {
+            a {
+                text-decoration: none;
+                color: unset;
+            }
+        }
+    }
+}

src/views/partials/98_main.ejs

@@ -0,0 +1,47 @@
+<div class="container">
+    <div class="window img-window">
+        <div class="title-bar">
+            <div class="title-bar-text">ImgViewer.exe</div>
+            <div class="title-bar-controls">
+                <button aria-label="Minimize"></button>
+                <button aria-label="Maximize"></button>
+                <button aria-label="Close"></button>
+            </div>
+        </div>
+        <div class="imgbox window-body">
+            <img src="img/<%= filenameProfilePic %> " alt="">
+        </div>
+    </div>
+    <div class="window link-window">
+        <div class="title-bar">
+            <div class="title-bar-text"><%= name %>.exe</div>
+            <div class="title-bar-controls">
+                <button aria-label="Minimize"></button>
+                <button aria-label="Maximize"></button>
+                <button aria-label="Close"></button>
+            </div>
+        </div>
+        <div class="mainLinkbox">
+            <% links.forEach(link => { %>
+            <a <% if(link.verify && link.verify.toLowerCase() === 'mastodon') { %> rel="me" <% } %> href="<%= link.hyperlink %>"> 
+                <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
+            </a>
+            <% }) %>
+        </div>
+        <div class="status-bar">
+            <div class="smallLinkbox status-bar-field">
+                <% smallLinks.forEach(link => { %>
+                    <a href="<%= link.hyperlink %>">
+                        <i class="fa fa-<%= link.platform.toLowerCase() %>" aria-hidden="true"></i>
+                    </a>
+                <% }) %>
+            </div>
+            <div class="status-bar-field">
+                <%= Intl.DateTimeFormat('en-US').format(Date.now()) %>
+            </div>
+            <div class="status-bar-field">
+                Powered by <a href="https://dev.cat-enby.club/Nikurasu/socialtree-js">Socialtree</a>
+            </div>
+        </div>
+    </div>
+</div>