Merge pull request #358 from node-red-contrib-themes/process-improvement

DEVELOPMENT.md

@@ -2,9 +2,12 @@
 
 This document describes the process for creating/updating themes.
 
+Please read and follow [our contribution guidelines][contribution-guidelines].
+
 ## Getting started
 
 1. [Fork][fork] and clone this project
+
 1. Enter the project directory and initialize the development environment
 
         cd theme-collection
@@ -16,41 +19,61 @@ This document describes the process for creating/updating themes.
 
 With the development environment initialized, follow these steps to create a new theme:
 
-***NOTE:** Replace `<theme-name>` with the name of the theme you are working on.*
+1. Create the new theme following these rules:
+
+    - Must start with a letter or number
+    - Must be at least 3 characters long
+    - Only letters, numbers, and - are allowed
+
+    e.g., theme, theme-name, or 007-theme
+
+    This creates a theme named ***example-theme***, replace it with the theme name being created.
+
+        npm run create-theme example-theme
+
+    The result will be following directory structure.
+
+        themes
+        └── example-theme
+            ├── theme.scss
+            ├── theme-custom.css
+            ├── theme-mermaid.json
+            └── theme-monaco.json
 
-1. Create the new theme directory structure
+1. Enter the theme directory and start the development environment
 
-        npm run create-theme <theme-name>
+        cd themes/example-theme
+        npm run dev example-theme
 
-2. Start the development environment
+    ***NOTE:** Replace ***example-theme*** with the name of the theme being created/updated.*
 
-        npm run dev <theme-name>
+1. Access Node-RED at [http://localhost:41880](http://localhost:41880)
 
-3. Access Node-RED at [`http://localhost:41880`](http://localhost:41880)
+1. Update the colors in `theme.scss` as required
 
-4. Update the colors in `themes/<theme-name>/<theme-name>.scss` as required & save
+1. ***(OPTIONAL)*** If additional customizations are needed, add them to `theme-custom.css`.
 
-5. ***(OPTIONAL)*** If additional customizations are needed, add them to `themes/<theme-name>/<theme-name>-custom.css`.
+1. ***(OPTIONAL)*** Update `theme-monaco.json` to customize the colors of the Monaco Editor.
 
-6. ***(OPTIONAL)*** Update `themes/<theme-name>/<theme-name>-monaco.json` to customize the colors of the Monaco Editor. This file can be configured in two different ways:
+    The default value is `"tomorrow-night-bright"`. Replace it with the name of one of the themes in this [list][monaco-editor-builtin-themes] or with a custom Monaco theme object (see the Node-RED documentation [file example][setting-a-custom-monaco-theme-from-a-json-file] for reference).
 
-   - Built-in theme - Add `"<monaco-theme-name>"` to the file. Replace `"<monaco-theme-name>"` with the name of one of the themes in this [list][monaco-editor-builtin-themes].
-   - Custom Monaco theme object - See the [`my-custom-theme-monaco-theme.json` file example][setting-a-custom-monaco-theme-from-a-json-file] in the Node-RED documentation for reference.
+1. ***(OPTIONAL)*** Customize Mermaid's theme file - `theme-mermaid.json`
 
-7. ***(OPTIONAL)*** Customize Mermaid's theme by adding `"<mermaid-theme-name>"` to `themes/<theme-name>/<theme-name>-mermaid.json`. Replace `<mermaid-theme-name>` with the name of one of the themes in this [list](https://mermaid.js.org/config/theming.html#available-themes). If the file doesn't exist, the value `"dark"` is used by default.
+    The default value is `"dark"`. Replace it with the name of one of the themes in this [list](https://mermaid.js.org/config/theming.html#available-themes).
 
-8. Refresh Node-RED in the browser to preview the changes
+1. Refresh Node-RED in the browser to preview the changes
 
-9. Repeat steps 4 to 7 as needed. When finished, press `ctrl-D` to quit the development environment.
+1. Repeat steps 4 to 8 as needed. When finished, press `ctrl-D` to quit the development environment
 
-10. Commit, push, and create a pull request.
+1. Commit, push, and create a pull request
 
 ## Updating an existing theme
 
 Follow the process above, skipping step 1.
 
 Thanks for taking the time to contribute! 😍
 
+[contribution-guidelines]: .github/CONTRIBUTING.md
 [fork]: https://github.com/node-red-contrib-themes/theme-collection/fork
 [monaco-editor-builtin-themes]: https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme
 [setting-a-custom-monaco-theme-from-a-json-file]: https://nodered.org/docs/api/ui/themes/#setting-a-custom-monaco-theme-from-a-json-file

README.md

@@ -18,7 +18,7 @@ A collection of themes for [Node-RED][node-red].
 - [Usage](#usage)
   - [Themed Scrollbars \[DEPRECATED\]](#themed-scrollbars-deprecated)
   - [Monaco Editor Theme](#monaco-editor-theme)
-- [Contributing](#contributing)
+- [Development](#development)
 - [License](#license)
 
 ## Installation
@@ -116,20 +116,18 @@ editorTheme: {
 },
 ```
 
-## Contributing
+## Development
 
-First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are **greatly appreciated**.
-
-Please read [our contribution guidelines][contribution-guidelines], and thank you again for being involved!
+Please refer to the [`DEVELOPMENT.md`][development] file for details on how to set up a local development environment.
 
 ## License
 
 This project is licensed under the [MIT license][license].
 
 [buymecoffee-link]: https://www.buymeacoffee.com/mbonani
 [buymecoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png
-[contribution-guidelines]: .github/CONTRIBUTING.md
 [creating-a-new-theme]: DEVELOPMENT.md
+[development]: DEVELOPMENT.md
 [license-badge]: https://img.shields.io/github/license/node-red-contrib-themes/theme-collection.svg?style=for-the-badge
 [license]: LICENSE
 [node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes

scripts/build.js

@@ -8,21 +8,25 @@ const themesPath = path.join(rootPath, 'themes')
 const themes = readdirSync(themesPath)
 
 themes.forEach(themeName => {
-
     const themePath = path.join(themesPath, themeName)
-    const buildIn = path.join(themePath, themeName + '.scss')
-    const buildOut = path.join(themePath, themeName + '.min.css')
+    const buildIn = path.join(themePath, 'theme.scss')
+    const buildOut = path.join(themePath, `${themeName}.min.css`)
     const buildSrc = path.join(rootPath, 'node-red')
 
     exec(`node ${rootPath}/scripts/build-theme.js --in=${buildIn} --out=${buildOut} --src=${buildSrc}`)
 
-    const themeCustomCss = readFileSync(path.resolve(themePath, themeName + '-custom.css'), 'utf-8')
+    const themeCustomCss = readFileSync(path.resolve(themePath, 'theme-custom.css'), 'utf-8')
     const minifiedCss = minify(themeCustomCss).css
 
-    writeFileSync(path.resolve(themePath, themeName + '-custom.min.css'), minifiedCss)
+    writeFileSync(path.resolve(themePath, `${themeName}-custom.min.css`), minifiedCss)
+
+    const mermaidOptions = JSON.parse(readFileSync(path.resolve(themePath, 'theme-mermaid.json'), 'utf-8'))
+    const minifiedMermaidOptions = JSON.stringify(mermaidOptions)
+
+    writeFileSync(path.resolve(themePath, `${themeName}-mermaid.min.json`), minifiedMermaidOptions)
 
-    const monacoOptions = JSON.parse(readFileSync(path.resolve(themePath, themeName + '-monaco.json'), 'utf-8'))
+    const monacoOptions = JSON.parse(readFileSync(path.resolve(themePath, 'theme-monaco.json'), 'utf-8'))
     const minifiedMonacoOptions = JSON.stringify(monacoOptions)
 
-    writeFileSync(path.resolve(themePath, themeName + '-monaco.min.json'), minifiedMonacoOptions)
+    writeFileSync(path.resolve(themePath, `${themeName}-monaco.min.json`), minifiedMonacoOptions)
 })

scripts/create-theme.js

@@ -7,10 +7,17 @@ const rootPath = path.join(__dirname, '..')
 const themePath = path.join(rootPath, 'themes', options.themeName)
 
 if (!options.themeName) {
+	console.error('Missing argument: theme-name')
 	showUsageAndExit(1)
 }
 
 if (!/^[a-zA-Z0-9][a-zA-Z0-9\-]{2,}$/.test(options.themeName)) {
+	console.error('Theme name does not follow the rules')
+	console.log('')
+	console.log('Rules for theme names:')
+	console.log('- at least 3 characters long')
+	console.log('- only letters, numbers, and -')
+	console.log('- start with a letter or number')
 	showUsageAndExit(1)
 }
 
@@ -23,20 +30,13 @@ if (existsSync(themePath)) {
 mkdirSync(themePath)
 
 // Copy template files to theme directory
-copyFileSync(path.join(rootPath, 'template/template.scss'), path.join(themePath, options.themeName + '.scss'))
-copyFileSync(path.join(rootPath, 'template/template-monaco.json'), path.join(themePath, options.themeName + '-monaco.json'))
-copyFileSync(path.join(rootPath, 'template/template-custom.css'), path.join(themePath, options.themeName + '-custom.css'))
+copyFileSync(path.join(rootPath, 'template/theme.scss'), path.join(themePath, 'theme.scss'))
+copyFileSync(path.join(rootPath, 'template/theme-custom.css'), path.join(themePath, 'theme-custom.css'))
+copyFileSync(path.join(rootPath, 'template/theme-mermaid.json'), path.join(themePath, 'theme-mermaid.json'))
+copyFileSync(path.join(rootPath, 'template/theme-monaco.json'), path.join(themePath, 'theme-monaco.json'))
 
 function showUsageAndExit(exitCode) {
 	console.log('')
-	console.log('Usage:   create-theme theme-name')
-	console.log('Example: npm run create-theme theme-name')
-	console.log('Example: node ./scripts/create-theme.js theme-name')
-	console.log('')
-	console.log('Rules for theme names:')
-	console.log('- must be at least 3 characters')
-	console.log('- only letters, numbers, and -')
-	console.log('- start with a letter or number')
-	console.log('    e.g., theme-name or 007-theme')
+	console.log('Usage: npm run create-theme theme-name')
 	process.exit(exitCode)
 }

scripts/dev.js

@@ -6,42 +6,51 @@ const { existsSync, readFileSync, watch, writeFileSync } = require('fs')
 const { exec } = require('child_process')
 const { minify } = require('csso')
 const nodemon = require('nodemon')
-const themeName = String(options.themeName.split('-scroll', 1))
-const rootPath = path.join(__dirname, '..')
-const themePath = path.join(rootPath, 'themes', themeName)
-const buildIn = path.join(themePath, themeName + '.scss')
-const buildOut = path.join(themePath, themeName + '.min.css')
-const buildSrc = path.join(rootPath, 'node-red')
 
 if (!options.themeName) {
     showUsageAndExit(1)
 }
+
+const rootPath = path.join(__dirname, '..')
+const themeName = String(options.themeName.split('-scroll', 1))
+const themePath = path.join(rootPath, 'themes', themeName)
+const buildIn = path.join(themePath, 'theme.scss')
+const buildOut = path.join(themePath, `${themeName}.min.css`)
+const buildSrc = path.join(rootPath, 'node-red')
+
 if (options.themeName && !existsSync(themePath)) {
-    console.warn('')
-    console.warn(`Theme path is not valid. Could not find '${themePath}'`)
-    console.warn('Please create the theme first')
-    console.warn('')
-    console.warn('Example:')
-    console.warn(`npm run create-theme ${themeName}`)
+    console.error(`Theme path is not valid. Could not find '${themePath}'`)
+    console.log('')
+    console.log('Please create the theme first')
+    console.log('')
+    console.log('Example:')
+    console.log(`npm run create-theme ${themeName}`)
     process.exit(2)
 }
 
-watch(path.join(themePath, themeName + '.scss'), () => {
+watch(path.join(themePath, 'theme.scss'), () => {
     exec(`node ${rootPath}/scripts/build-theme.js --in=${buildIn} --out=${buildOut} --src=${buildSrc}`)
 })
 
-watch(path.join(themePath, themeName + '-custom.css'), () => {
-    const themeCustomCss = readFileSync(path.join(themePath, themeName + '-custom.css'), 'utf-8')
+watch(path.join(themePath, 'theme-custom.css'), () => {
+    const themeCustomCss = readFileSync(path.join(themePath, 'theme-custom.css'), 'utf-8')
     const minifiedCss = minify(themeCustomCss).css
 
-    writeFileSync(path.join(themePath, themeName + '-custom.min.css'), minifiedCss)
+    writeFileSync(path.join(themePath, `${themeName}-custom.min.css`), minifiedCss)
+})
+
+watch(path.join(themePath, 'theme-mermaid.json'), () => {
+    const mermaidOptions = JSON.parse(readFileSync(path.join(themePath, 'theme-mermaid.json'), 'utf-8'))
+    const minifiedMermaidOptions = JSON.stringify(mermaidOptions)
+
+    writeFileSync(path.join(themePath, `${themeName}-mermaid.min.json`), minifiedMermaidOptions)
 })
 
-watch(path.join(themePath, themeName + '-monaco.json'), () => {
-    const monacoOptions = JSON.parse(readFileSync(path.join(themePath, themeName + '-monaco.json'), 'utf-8'))
+watch(path.join(themePath, 'theme-monaco.json'), () => {
+    const monacoOptions = JSON.parse(readFileSync(path.join(themePath, 'theme-monaco.json'), 'utf-8'))
     const minifiedMonacoOptions = JSON.stringify(monacoOptions)
 
-    writeFileSync(path.join(themePath, themeName + '-monaco.min.json'), minifiedMonacoOptions)
+    writeFileSync(path.join(themePath, `${themeName}-monaco.min.json`), minifiedMonacoOptions)
 })
 
 nodemon({
@@ -56,8 +65,6 @@ nodemon({
 
 function showUsageAndExit(exitCode) {
     console.log('')
-    console.log('Usage: dev theme-name')
-    console.log('Example: npm run dev theme-name')
-    console.log('Example: node ./scripts/dev.js theme-name')
+    console.log('Usage: npm run dev theme-name')
     process.exit(exitCode)
 }

scripts/init.js

@@ -52,7 +52,7 @@
     async function step(command, workingDir, stepPrompt) {
         try {
             await runner(command, { cwd: workingDir }, stepPrompt)
-            log(String(stepPrompt.split(" - ", 1) + ' ✔'))
+            log(`${stepPrompt.split(" - ", 1)} ✔`)
         } catch (err) {
             error(err.toString())
             error(err.stderr)

template/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes.js

@@ -12,8 +12,8 @@ module.exports = function (RED) {
         const type = { type: 'node-red-theme' }
         const cssArray = []
         const css = { css: cssArray }
-        const themeCSS = themeName + '.min.css'
-        const themeCustomCSS = themeName + '-custom.min.css'
+        const themeCSS = `${themeName}.min.css`
+        const themeCustomCSS = `${themeName}-custom.min.css`
         const scrollbarsCSS = 'common/scrollbars.min.css'
         const mermaidTheme = existsSync(path.join(themePath, `${themeName}-mermaid.json`)) ? JSON.parse(readFileSync(path.join(themePath, `${themeName}-mermaid.json`), 'utf-8')) : "dark"
         const mermaidOptions = { mermaid: { theme: mermaidTheme } }
@@ -44,7 +44,7 @@ module.exports = function (RED) {
         cssScrollArray.push(path.join(themeRelativePath, themeCustomCSS))
 
         RED.plugins.registerPlugin(themeName, Object.assign({}, type, css, mermaidOptions, monacoOptions))
-        RED.plugins.registerPlugin(themeName + '-scroll', Object.assign({}, type, cssScroll, mermaidOptions, monacoOptions))
+        RED.plugins.registerPlugin(`${themeName}-scroll`, Object.assign({}, type, cssScroll, mermaidOptions, monacoOptions))
     })
     RED.log.info(`Node-RED Contrib Theme Collection version: v${package.version}`)
 }

themes/aurora/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/cobalt2/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/dark/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/dracula/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/espresso-libre/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/github-dark-default/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/github-dark-dimmed/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/github-dark/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/midnight-red/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/monoindustrial/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/monokai-dimmed/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/monokai/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/noctis/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/oceanic-next/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/oled/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/one-dark-pro-darker/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/one-dark-pro/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/solarized-dark/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/tokyo-night-storm/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/tokyo-night/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

themes/zenburn/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"