From 69a49f8df74e3bdab9f2f97b61b5c9a17776cd28 Mon Sep 17 00:00:00 2001 From: nikurasu Date: Tue, 18 Oct 2022 09:20:54 +0200 Subject: [PATCH] Added scss --- config/config.yml | 1 + package.json | 7 ++- src/dist/style/simple-orange.css | 44 +++++++++++++++++++ src/dist/style/simple-orange.css.map | 1 + src/index.js | 7 +-- .../simple-orange.scss} | 3 ++ src/public/{main.css => util/main.scss} | 0 .../simple-basic.scss} | 6 +++ src/views/index.ejs | 2 +- src/views/partials/head.ejs | 4 +- yarn.lock | 21 ++++++++- 11 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 src/dist/style/simple-orange.css create mode 100644 src/dist/style/simple-orange.css.map rename src/public/{simple-orange.css => themes/simple-orange.scss} (65%) rename src/public/{main.css => util/main.scss} (100%) rename src/public/{simple-basic.css => util/simple-basic.scss} (81%) diff --git a/config/config.yml b/config/config.yml index 465228a..9cf0d64 100644 --- a/config/config.yml +++ b/config/config.yml @@ -1,5 +1,6 @@ name: "Nikurasu" # The name on the linktree # profilePic: # uncomment and set this if your profile pic has a custom name +theme: 'simple-orange' links: - text: "YouTube" # text on the link hyperlink: "Test" # the actual hyperlink diff --git a/package.json b/package.json index 355594b..4810d37 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,15 @@ "license": "MIT", "scripts": { "start": "node src/index.js", - "dev": "nodemon src/index.js" + "dev": "nodemon src/index.js & sass --watch src/public/themes:src/dist/style", + "watch-css": "sass --watch src/public/themes:src/dist/style", + "build": "sass src/public/themes:src/dist/style" }, "dependencies": { "ejs": "^3.1.8", "express": "^4.18.2", - "js-yaml": "^4.1.0" + "js-yaml": "^4.1.0", + "sass": "^1.55.0" }, "devDependencies": { "nodemon": "^2.0.20" diff --git a/src/dist/style/simple-orange.css b/src/dist/style/simple-orange.css new file mode 100644 index 0000000..2b734a3 --- /dev/null +++ b/src/dist/style/simple-orange.css @@ -0,0 +1,44 @@ +* { + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; +} + +.container { + padding-top: 3rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} + +.headingbox > h1 { + font-size: 1.5rem; + font-weight: 800; + font-family: monospace; +} + +.imgbox > img { + height: 10rem; + width: 10rem; + border-radius: 0.5rem; +} + +.linkbox { + display: flex; + flex-direction: column; + gap: 1rem; +} + +body { + background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%); +} + +.headingbox { + color: #FFFFFF; +} + +/*# sourceMappingURL=simple-orange.css.map */ diff --git a/src/dist/style/simple-orange.css.map b/src/dist/style/simple-orange.css.map new file mode 100644 index 0000000..a199681 --- /dev/null +++ b/src/dist/style/simple-orange.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../public/util/main.scss","../../public/util/simple-basic.scss","../../public/themes/simple-orange.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;ACxBJ;EACI;;;AAGJ;EACI","file":"simple-orange.css"} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 83a64c8..717540a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import express from 'express' import yaml from 'js-yaml' -import fs, { cpSync } from 'node:fs' +import fs from 'node:fs' console.log('🔧 Configuring socialtree...') @@ -10,7 +10,7 @@ const engine = 'ejs' app.set('view engine', engine) app.set('views', './src/views') -app.use(express.static('src/public')) +app.use(express.static('src/dist')) app.use(express.static('src/assets')) app.get('/', (req, res) => { @@ -18,7 +18,8 @@ app.get('/', (req, res) => { res.render('index', { name: config.name, filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg', - links: config.links + links: config.links, + theme: config.theme }) }) diff --git a/src/public/simple-orange.css b/src/public/themes/simple-orange.scss similarity index 65% rename from src/public/simple-orange.css rename to src/public/themes/simple-orange.scss index a3d7ac4..dd9be68 100644 --- a/src/public/simple-orange.css +++ b/src/public/themes/simple-orange.scss @@ -1,3 +1,6 @@ +@import '../util/main.scss'; +@import '../util/simple-basic.scss'; + body { background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%); } diff --git a/src/public/main.css b/src/public/util/main.scss similarity index 100% rename from src/public/main.css rename to src/public/util/main.scss diff --git a/src/public/simple-basic.css b/src/public/util/simple-basic.scss similarity index 81% rename from src/public/simple-basic.css rename to src/public/util/simple-basic.scss index c5e2743..e4798e1 100644 --- a/src/public/simple-basic.css +++ b/src/public/util/simple-basic.scss @@ -20,4 +20,10 @@ body { height: 10rem; width: 10rem; border-radius: .5rem; +} + +.linkbox { + display: flex; + flex-direction: column; + gap: 1rem; } \ No newline at end of file diff --git a/src/views/index.ejs b/src/views/index.ejs index 0918a79..236d020 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -9,7 +9,7 @@
<% links.forEach(link => { %> -

Hello World

+ <% }) %>
diff --git a/src/views/partials/head.ejs b/src/views/partials/head.ejs index 190302c..4302063 100644 --- a/src/views/partials/head.ejs +++ b/src/views/partials/head.ejs @@ -2,7 +2,5 @@ - - - + diff --git a/yarn.lock b/yarn.lock index bebe122..1a311c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -116,7 +116,7 @@ chalk@^4.0.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -chokidar@^3.5.2: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -366,6 +366,11 @@ ignore-by-default@^1.0.1: resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09" integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA== +immutable@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" + integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== + inherits@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" @@ -585,6 +590,15 @@ safe-buffer@5.2.1: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass@^1.55.0: + version "1.55.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c" + integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + semver@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" @@ -645,6 +659,11 @@ simple-update-notifier@^1.0.7: dependencies: semver "~7.0.0" +"source-map-js@>=0.6.2 <2.0.0": + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + statuses@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"