From 6f7c54a3be3da7e30b4d35c08691cdf3a491fabb Mon Sep 17 00:00:00 2001 From: butlerx Date: Thu, 6 Aug 2020 20:03:50 +0100 Subject: [PATCH] gm ass scss compile to build --- .gitignore | 2 + assets/scss/options.scss | 55 ++++++++++++++++++ assets/scss/overlay.scss | 28 +++++++++ assets/scss/styles.scss | 25 ++++++++ assets/scss/terminal.scss | 6 ++ assets/scss/variables.scss | 4 ++ package.json | 21 +++++-- src/client/styles.scss | 114 ------------------------------------- yarn.lock | 9 ++- 9 files changed, 145 insertions(+), 119 deletions(-) create mode 100644 assets/scss/options.scss create mode 100644 assets/scss/overlay.scss create mode 100644 assets/scss/styles.scss create mode 100644 assets/scss/terminal.scss create mode 100644 assets/scss/variables.scss delete mode 100644 src/client/styles.scss diff --git a/.gitignore b/.gitignore index 0719ef3..9c9b375 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ web_modules lib +assets/css +build # Created by https://www.toptal.com/developers/gitignore/api/node # Edit at https://www.toptal.com/developers/gitignore?templates=node diff --git a/assets/scss/options.scss b/assets/scss/options.scss new file mode 100644 index 0000000..ff7c44c --- /dev/null +++ b/assets/scss/options.scss @@ -0,0 +1,55 @@ +@use './variables'; + +#options { + height: 16px; + position: absolute; + right: 1em; + top: 1em; + width: 16px; + z-index: 20; + + a { + .toggler { + color: variables.$lgrey; + display: inline-block; + font-size: 16px; + position: absolute; + right: 1em; + top: 0; + z-index: 20; + + :hover { + color: variables.$white; + } + } + } + + .editor { + background-color: rgba(0, 0, 0, 0.85); + border-color: rgba(255, 255, 255, 0.25); + border-radius: 0.3em; + color: #eee; + display: none; + font-size: 24px; + height: 100%; + padding: 0.5em; + position: relative; + right: 2em; + top: 1em; + width: 100%; + } + + .editor { + .error { + color: red; + } + } + + .opened { + height: 50%; + width: 50%; + .editor { + display: flex; + } + } +} diff --git a/assets/scss/overlay.scss b/assets/scss/overlay.scss new file mode 100644 index 0000000..e887254 --- /dev/null +++ b/assets/scss/overlay.scss @@ -0,0 +1,28 @@ +@use './variables'; + +#overlay { + background-color: variables.$grey; + display: none; + height: 100%; + position: absolute; + width: 100%; + z-index: 100; + + .error { + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + width: 100%; + + #msg { + align-self: center; + color: variables.$white; + } + + input { + align-self: center; + margin: 16px; + } + } +} diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss new file mode 100644 index 0000000..36f782b --- /dev/null +++ b/assets/scss/styles.scss @@ -0,0 +1,25 @@ +@use 'xterm/css/xterm.css'; +@use 'toastify-js/src/toastify.css'; +@use './variables'; +@use './overlay'; +@use './options'; +@use './terminal'; + +html, +body { + background-color: variables.$black; + height: 100%; + margin: 0; + overflow: hidden; + + .toastify { + border-radius: 0; + color: variables.$black; + } +} + +.xterm { + .xterm-viewport { + overflow-y: hidden; + } +} diff --git a/assets/scss/terminal.scss b/assets/scss/terminal.scss new file mode 100644 index 0000000..c447840 --- /dev/null +++ b/assets/scss/terminal.scss @@ -0,0 +1,6 @@ +#terminal { + display: flex; + height: 100%; + position: relative; + width: 100%; +} diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss new file mode 100644 index 0000000..7467452 --- /dev/null +++ b/assets/scss/variables.scss @@ -0,0 +1,4 @@ +$black: #000; +$grey: rgba(0, 0, 0, 0.75); +$white: #fff; +$lgrey: #ccc; diff --git a/package.json b/package.json index b42caae..bad9809 100644 --- a/package.json +++ b/package.json @@ -8,17 +8,19 @@ "main": "./lib/main.js", "module": "./lib/server.js", "files": [ - "lib/" + "lib/", + "assets/css" ], "scripts": { - "build": "tsc -p tsconfig.json", + "build": "snowpack build && tsc -p tsconfig.json", "contributor": "all-contributors", - "dev": "NODE_ENV=development concurrently --kill-others --success first \"tsc -p tsconfig.json \" \"nodemon .\"", + "dev": "NODE_ENV=development yarn build && concurrently --kill-others --success first \"tsc -p tsconfig.json \" \"snowpack dev\" \"nodemon .\"", "lint": "eslint --ext .ts,.js .", "prepublishOnly": "NODE_ENV=production yarn build", "start": "NODE_ENV=production node .", "test": "mocha -r babel-register-ts src/**/*.spec.ts", - "postinstall": "snowpack install" + "postinstall": "snowpack install", + "clean": "rm -rf assets/css build lib web_modules node_modules" }, "repository": { "type": "git", @@ -50,6 +52,7 @@ }, "nodemonConfig": { "ignore": [ + "*.scss", "src/*", "*.json" ] @@ -67,6 +70,15 @@ ], "exclude": [ "**" + ], + "plugins": [ + [ + "@snowpack/plugin-run-script", + { + "cmd": "sass assets/scss:assets/css --load-path=node_modules -s compressed --no-source-map", + "watch": "$1 --watch" + } + ] ] }, "dependencies": { @@ -81,6 +93,7 @@ "lodash": "^4.17.19", "node-pty": "^0.9.0", "node-sass-middleware": "^0.11.0", + "sass": "^1.26.10", "serve-favicon": "^2.5.0", "socket.io": "^2.2.0", "socket.io-client": "^2.2.0", diff --git a/src/client/styles.scss b/src/client/styles.scss deleted file mode 100644 index 955488b..0000000 --- a/src/client/styles.scss +++ /dev/null @@ -1,114 +0,0 @@ -@import '~xterm/dist/xterm'; -@import '~toastify-js/src/toastify.css'; - -$black: #000; -$grey: rgba(0, 0, 0, 0.75); -$white: #fff; -$lgrey: #ccc; -$red: red; - -html, -body { - background-color: $black; - height: 100%; - margin: 0; - overflow: hidden; - - #overlay { - background-color: $grey; - display: none; - height: 100%; - position: absolute; - width: 100%; - z-index: 100; - - .error { - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - width: 100%; - - #msg { - align-self: center; - color: $white; - } - - input { - align-self: center; - margin: 16px; - } - } - } - - #terminal { - display: flex; - height: 100%; - position: relative; - width: 100%; - } - - #options { - height: 16px; - position: absolute; - right: 1em; - top: 1em; - width: 16px; - z-index: 20; - - a { - .toggler { - color: $lgrey; - display: inline-block; - font-size: 16px; - position: absolute; - right: 1em; - top: 0; - z-index: 20; - - :hover { - color: $white; - } - } - } - - .editor { - background-color: rgba(0, 0, 0, 0.85); - border-color: rgba(255, 255, 255, 0.25); - border-radius: 0.3em; - color: #eee; - display: none; - font-size: 24px; - height: 100%; - padding: 0.5em; - position: relative; - right: 2em; - top: 1em; - width: 100%; - .error { - color: $red; - } - } - } - - #options { - .opened { - height: 50%; - width: 50%; - .editor { - display: flex; - } - } - } - - .toastify { - border-radius: 0; - color: $black; - } -} - -.xterm { - .xterm-viewport { - overflow-y: hidden; - } -} diff --git a/yarn.lock b/yarn.lock index b877722..5a73642 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1136,7 +1136,7 @@ check-error@^1.0.2: resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82" integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII= -chokidar@^3.2.2, chokidar@^3.4.0: +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.2.2, chokidar@^3.4.0: version "3.4.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1" integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g== @@ -4922,6 +4922,13 @@ sass-graph@2.2.5: scss-tokenizer "^0.2.3" yargs "^13.3.2" +sass@^1.26.10: + version "1.26.10" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760" + integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + saxes@^3.1.9: version "3.1.11" resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"