feature: dark theme: add (#332)

coderaiser · coderaiser · commit 6bc4f3ec269a · 2024-03-29T13:27:38.000+02:00
diff --git a/.webpack/css.js b/.webpack/css.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const {env} = require('node:process');
 const fs = require('node:fs');
 const {
     basename,
@@ -10,7 +11,6 @@ const {
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
-const {env} = require('node:process');
 const isDev = env.NODE_ENV === 'development';
 
 const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
@@ -23,6 +23,7 @@ const cssNames = [
     'terminal',
     'user-menu',
     ...getCSSList('columns'),
+    ...getCSSList('themes'),
 ];
 
 const cssPlugins = cssNames.map(extractCSS);
@@ -36,7 +37,7 @@ const plugins = clean([
 
 const rules = [{
     test: /\.css$/,
-    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
+    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*|themes.*)\.css/,
     use: extractMain.extract(['css-loader']),
 }, ...cssPlugins.map(extract), {
     test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
diff --git a/.webpack/html.js b/.webpack/html.js
@@ -1,7 +1,7 @@
 'use strict';
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const {env} = require('node:process');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const isDev = env.NODE_ENV === 'development';
 
diff --git a/HELP.md b/HELP.md
@@ -93,7 +93,7 @@ Cloud Commander supports the following command-line parameters:
 | `--terminal-command`          | set command to run in terminal (shell by default)
 | `--terminal-auto-restart`     | restart command on exit
 | `--vim`                       | enable vim hot keys
-| `--columns`                   | set visible columns
+| `--themes`                   | set visible themes
 | `--export`                    | enable export of config through a server
 | `--export-token`              | authorization token used by export server
 | `--import`                    | enable import of config
@@ -122,7 +122,7 @@ Cloud Commander supports the following command-line parameters:
 | `--no-terminal-command`       | set default shell to run in terminal
 | `--no-terminal-auto-restart`  | do not restart command on exit
 | `--no-vim`                    | disable vim hot keys
-| `--no-columns`                | set default visible columns
+| `--no-themes`                | set default visible themes
 | `--no-export`                 | disable export config through a server
 | `--no-import`                 | disable import of config
 | `--no-import-listen`          | disable listen on config updates from import server
@@ -408,7 +408,7 @@ Here's a description of all options:
     "terminalCommand": "", // set command to run in terminal
     "terminalAutoRestart": true, // restart command on exit
     "vim": false, // disable vim hot keys
-    "columns": "name-size-date-owner-mode", // set visible columns
+    "themes": "name-size-date-owner-mode", // set visible themes
     "export": false, // enable export of config through a server
     "exportToken": "root", // token used by export server
     "import": false, // enable import of config
@@ -428,7 +428,7 @@ Some config options can be overridden with environment variables, such as:
 - `CLOUDCMD_NAME` - set tab name in web browser
 - `CLOUDCMD_OPEN` - open web browser when server started
 - `CLOUDCMD_EDITOR` - set editor
-- `CLOUDCMD_COLUMNS` - set visible columns
+- `CLOUDCMD_COLUMNS` - set visible themes
 - `CLOUDCMD_CONTACT` - enable contact
 - `CLOUDCMD_CONFIG_DIALOG` - enable config dialog
 - `CLOUDCMD_CONFIG_AUTH` - enable auth change in config dialog
diff --git a/bin/cloudcmd.mjs b/bin/cloudcmd.mjs
@@ -1,15 +1,16 @@
 #!/usr/bin/env node
 
+import process from 'node:process';
 import {createRequire} from 'node:module';
 import {promisify} from 'node:util';
 import tryToCatch from 'try-to-catch';
 import {createSimport} from 'simport';
 import parse from 'yargs-parser';
-import process from 'node:process';
 import exit from '../server/exit.js';
 import {createConfig, configPath} from '../server/config.js';
 import env from '../server/env.js';
 import prefixer from '../server/prefixer.js';
+import * as validate from '../server/validate.mjs';
 
 process.on('unhandledRejection', exit);
 
@@ -61,6 +62,7 @@ const yargsOptions = {
         'terminal-path',
         'terminal-command',
         'columns',
+        'theme',
         'import-url',
         'import-token',
         'export-token',
@@ -112,6 +114,7 @@ const yargsOptions = {
         'contact': choose(env.bool('contact'), config('contact')),
         'terminal': choose(env.bool('terminal'), config('terminal')),
         'columns': env('columns') || config('columns') || '',
+        'theme': env('theme') || config('theme') || '',
         'vim': choose(env.bool('vim'), config('vim')),
         'log': config('log'),
         
@@ -174,6 +177,9 @@ async function main() {
     if (args.repl)
         repl();
     
+    validate.columns(args.columns);
+    validate.theme(args.theme);
+    
     port(args.port);
     
     config('name', args.name);
@@ -194,6 +200,7 @@ async function main() {
     config('prefixSocket', prefixer(args.prefixSocket));
     config('root', args.root || '/');
     config('vim', args.vim);
+    config('theme', args.theme);
     config('columns', args.columns);
     config('log', args.log);
     config('confirmCopy', args.confirmCopy);
@@ -221,14 +228,15 @@ async function main() {
         prefix: config('prefix'),
         prefixSocket: config('prefixSocket'),
         columns: config('columns'),
+        theme: config('theme'),
     };
     
     const password = env('password') || args.password;
     
     if (password)
         config('password', await getPassword(password));
     
-    await validateRoot(options.root, config);
+    validateRoot(options.root, config);
     
     if (args.showConfig)
         await showConfig();
@@ -245,8 +253,7 @@ async function main() {
     await importConfig(config);
 }
 
-async function validateRoot(root, config) {
-    const validate = await simport(`${DIR_SERVER}validate.js`);
+function validateRoot(root, config) {
     validate.root(root, config);
     
     if (root === '/')
diff --git a/client/cloudcmd.js b/client/cloudcmd.js
@@ -1,10 +1,7 @@
 'use strict';
 
 const process = require('node:process');
-require('../css/main.css');
-require('../css/nojs.css');
-require('../css/columns/name-size-date.css');
-require('../css/columns/name-size.css');
+require('./css');
 
 const wraptile = require('wraptile');
 const load = require('load.js');
diff --git a/client/css.js b/client/css.js
@@ -0,0 +1,8 @@
+'use strict';
+
+require('../css/main.css');
+require('../css/nojs.css');
+require('../css/columns/name-size-date.css');
+require('../css/columns/name-size.css');
+require('../css/themes/light.css');
+require('../css/themes/dark.css');
diff --git a/client/modules/config/index.js b/client/modules/config/index.js
@@ -137,13 +137,15 @@ async function fillTemplate() {
         editor,
         packer,
         columns,
+        theme,
         configAuth,
         ...obj
     } = input.convert(config);
     
     obj[`${editor}-selected`] = 'selected';
     obj[`${packer}-selected`] = 'selected';
     obj[`${columns}-selected`] = 'selected';
+    obj[`${theme}-selected`] = 'selected';
     obj.configAuth = configAuth ? '' : 'hidden';
     
     const innerHTML = rendy(Template, obj);
diff --git a/css/main.css b/css/main.css
@@ -1,5 +1,3 @@
-/* @import url(./themes/dark.css); */
-@import url(./themes/light.css);
 @import url(./urls.css);
 @import url(./reset.css);
 @import url(./style.css);
diff --git a/css/style.css b/css/style.css
@@ -41,6 +41,7 @@ code {
     -ms-user-select: initial;
     -o-user-select: initial;
     user-select: text;
+    color: var(--column-color);
 }
 
 .panel,
diff --git a/css/vars.css b/css/vars.css
diff --git a/html/index.html b/html/index.html
@@ -15,6 +15,9 @@
         <style data-name="columns">
             {{ columns }}
         </style>
+        <style data-name="themes">
+            {{ themes }}
+        </style>
     </head>
     <body>
         <div class="fm">{{ fm }}</div>
diff --git a/json/config.json b/json/config.json
@@ -34,6 +34,7 @@
     "showFileName": false,
     "vim": false,
     "columns": "name-size-date-owner-mode",
+    "theme": "light",
     "export": false,
     "exportToken": "root",
     "import": false,
diff --git a/json/help.json b/json/help.json
@@ -32,6 +32,7 @@
     "--terminal-auto-restart    ": "restart command on exit",
     "--vim                      ": "enable vim hot keys",
     "--columns                  ": "set visible columns",
+    "--theme                    ": "set theme 'light' or 'dark'",
     "--export                   ": "enable export of config through a server",
     "--export-token             ": "authorization token used by export server",
     "--import                   ": "enable import of config",
diff --git a/man/cloudcmd.1 b/man/cloudcmd.1
@@ -55,6 +55,7 @@ programs in browser from any computer, mobile or tablet device.
   --terminal-auto-restart       restart command on exit
   --vim                         enable vim hot keys
   --columns                     set visible columns
+  --theme                       set theme 'light' or 'dark'
   --export                      enable export of config through a server
   --export-token                authorization token used by export server
   --import                      enable import of config
diff --git a/server/cloudcmd.mjs b/server/cloudcmd.mjs
@@ -21,7 +21,7 @@ import modulas from './modulas.js';
 import userMenu from './user-menu.mjs';
 import rest from './rest/index.js';
 import route from './route.mjs';
-import validate from './validate.js';
+import * as validate from './validate.mjs';
 import prefixer from './prefixer.js';
 import terminal from './terminal.js';
 import distribute from './distribute/index.js';
@@ -64,7 +64,7 @@ function cloudcmd(params) {
         if (/root/.test(name))
             validate.root(value, config);
         
-        if (/editor|packer|columns/.test(name))
+        if (/editor|packer|themes/.test(name))
             validate[name](value);
         
         if (/prefix/.test(name))
diff --git a/server/columns.mjs b/server/columns.mjs
@@ -1,13 +1,14 @@
-'use strict';
-
-const fullstore = require('fullstore');
-const process = require('node:process');
-const path = require('node:path');
-const fs = require('node:fs');
-
-const {nanomemoize} = require('nano-memoize');
-const readFilesSync = require('@cloudcmd/read-files-sync');
-
+import path, {dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import process from 'node:process';
+import fs from 'node:fs';
+import fullstore from 'fullstore';
+import nanomemoizeDefault from 'nano-memoize';
+import readFilesSync from '@cloudcmd/read-files-sync';
+
+const {nanomemoize} = nanomemoizeDefault;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const isMap = (a) => /\.map$/.test(a);
 const not = (fn) => (a) => !fn(a);
 
@@ -19,9 +20,9 @@ const defaultColumns = {
 const _isDev = fullstore(process.env.NODE_ENV === 'development');
 const getDist = (isDev) => isDev ? 'dist-dev' : 'dist';
 
-module.exports.isDev = _isDev;
+export const isDev = _isDev;
 
-module.exports.getColumns = ({isDev = _isDev()} = {}) => {
+export const getColumns = ({isDev = _isDev()} = {}) => {
     const columns = readFilesSyncMemo(isDev);
     
     return {
diff --git a/server/columns.spec.mjs b/server/columns.spec.mjs
@@ -1,8 +1,11 @@
-'use strict';
+import {dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import test from 'supertape';
+import fs from 'node:fs';
+import {getColumns, isDev} from './columns.mjs';
 
-const test = require('supertape');
-const fs = require('node:fs');
-const {getColumns, isDev} = require('./columns');
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 test('columns: prod', (t) => {
     const columns = getColumns({
diff --git a/server/route.mjs b/server/route.mjs
@@ -13,8 +13,9 @@ import {contentType} from 'mime-types';
 import root from './root.js';
 import prefixer from './prefixer.js';
 import CloudFunc from '../common/cloudfunc.js';
-import {getColumns} from './columns.js';
 import Template from './template.js';
+import {getColumns} from './columns.mjs';
+import {getThemes} from './theme.mjs';
 
 const require = createRequire(import.meta.url);
 const {stringify} = JSON;
@@ -164,6 +165,7 @@ function indexProcessing(config, options) {
         prefix: getPrefix(config),
         config: stringify(config('*')),
         columns: getColumns()[config('columns')],
+        themes: getThemes()[config('theme')],
     });
     
     return data;
diff --git a/server/theme.mjs b/server/theme.mjs
@@ -0,0 +1,33 @@
+import path, {dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import process from 'node:process';
+import fs from 'node:fs';
+import fullstore from 'fullstore';
+import nanomemoizeDefault from 'nano-memoize';
+import readFilesSync from '@cloudcmd/read-files-sync';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const isMap = (a) => /\.map$/.test(a);
+const not = (fn) => (a) => !fn(a);
+
+const _isDev = fullstore(process.env.NODE_ENV === 'development');
+const getDist = (isDev) => isDev ? 'dist-dev' : 'dist';
+
+export const isDev = _isDev;
+
+export const getThemes = ({isDev = _isDev()} = {}) => {
+    return readFilesSyncMemo(isDev);
+};
+
+const {nanomemoize} = nanomemoizeDefault;
+
+const readFilesSyncMemo = nanomemoize((isDev) => {
+    const dist = getDist(isDev);
+    const themesDir = path.join(__dirname, '..', dist, 'themes');
+    const names = fs
+        .readdirSync(themesDir)
+        .filter(not(isMap));
+    
+    return readFilesSync(themesDir, names, 'utf8');
+});
diff --git a/server/themes.spec.mjs b/server/themes.spec.mjs
diff --git a/server/validate.mjs b/server/validate.mjs
diff --git a/server/validate.spec.mjs b/server/validate.spec.mjs
diff --git a/tmpl/config.hbs b/tmpl/config.hbs

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/* @import url(./themes/dark.css); */`
`2`		`-@import url(./themes/light.css);`
`3`	`1`	`@import url(./urls.css);`
`4`	`2`	`@import url(./reset.css);`
`5`	`3`	`@import url(./style.css);`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ code {`
`41`	`41`	`-ms-user-select: initial;`
`42`	`42`	`-o-user-select: initial;`
`43`	`43`	`user-select: text;`
	`44`	`+ color: var(--column-color);`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`.panel,`