[build] /static

Closes: https://github.com/searxng/searxng/issues/4190

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

Makefile

@@ -50,7 +50,7 @@ search.checker.%: install
 	$(Q)./manage pyenv.cmd searxng-checker -v "$(subst _, ,$(patsubst search.checker.%,%,$@))"
 
 PHONY += test ci.test test.shell
-ci.test: test.yamllint test.black test.pyright test.pylint test.unit test.robot test.rst test.pybabel
+ci.test: test.yamllint test.black test.pyright test.pylint test.unit test.robot test.rst test.pybabel test.themes
 test:    test.yamllint test.black test.pyright test.pylint test.unit test.robot test.rst test.shell
 test.shell:
 	$(Q)shellcheck -x -s dash \
@@ -83,8 +83,9 @@ MANAGE += node.env node.env.dev node.clean
 MANAGE += py.build py.clean
 MANAGE += pyenv pyenv.install pyenv.uninstall
 MANAGE += format.python
-MANAGE += test.yamllint test.pylint test.pyright test.black test.pybabel test.unit test.coverage test.robot test.rst test.clean
-MANAGE += themes.all themes.simple themes.simple.test pygments.less
+MANAGE += test.yamllint test.pylint test.pyright test.black test.pybabel test.unit test.coverage test.robot test.rst test.clean test.themes
+MANAGE += themes.all themes.fix themes.test
+MANAGE += themes.simple themes.simple.pygments themes.simple.fix
 MANAGE += static.build.commit static.build.drop static.build.restore
 MANAGE += nvm.install nvm.clean nvm.status nvm.nodejs
 

docs/dev/quickstart.rst

@@ -6,7 +6,8 @@ Development Quickstart
 
 .. _npm: https://www.npmjs.com/
 .. _Node.js: https://nodejs.org/
-
+.. _eslint: https://eslint.org/
+.. _stylelint: https://stylelint.io/
 
 .. sidebar:: further read
 
@@ -40,7 +41,8 @@ to our ":ref:`how to contribute`" guideline.
 
 If you implement themes, you will need to setup a :ref:`Node.js environment
 <make node.env>`.  Before you call *make run* (2.), you need to compile the
-modified styles and JavaScript: ``make node.clean themes.all``
+modified styles and JavaScript: ``make node.clean themes.all``.  If eslint_ or
+stylelint_ report some issues, try ``make themes.fix``.
 
 Alternatively you can also compile selective the theme you have modified,
 e.g. the *simple* theme.

searx/static/themes/simple/gruntfile.js

@@ -21,9 +21,10 @@ module.exports = function (grunt) {
     pkg: grunt.file.readJSON('package.json'),
     watch: {
       scripts: {
-        files: ['gruntfile.js', 'src/**'],
+        files: ['gruntfile.js', 'eslint.config.mjs', '.stylelintrc.json', 'src/**'],
         tasks: [
           'eslint',
+	  'stylelint',
           'copy',
           'uglify',
           'less',
@@ -49,6 +50,7 @@ module.exports = function (grunt) {
     stylelint: {
       options: {
         formatter: 'unix',
+        fix: grunt.option('fix')
       },
       src: [
         'src/less/**/*.less',
@@ -298,7 +300,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-stylelint');
   grunt.loadNpmTasks('grunt-eslint');
 
-  grunt.registerTask('test', ['eslint']);
+  grunt.registerTask('test', ['eslint', 'stylelint']);
 
   grunt.registerTask('default', [
     'eslint',

searx/static/themes/simple/package.json

@@ -29,12 +29,13 @@
   "scripts": {
     "all": "npm install && grunt",
     "build": "grunt",
-    "test": "grunt test",
+    "clean": "rm -Rf node_modules",
     "eslint": "grunt eslint",
     "eslint-fix": "grunt eslint --fix",
-    "watch": "grunt watch",
-    "clean": "rm -Rf node_modules",
+    "fix": "grunt test --fix",
     "stylelint": "grunt stylelint",
-    "stylelint-fix": "grunt stylelint --fix"
+    "stylelint-fix": "grunt stylelint --fix",
+    "test": "grunt test",
+    "watch": "grunt watch --fix"
   }
 }

searx/static/themes/simple/src/less/autocomplete.less

@@ -53,7 +53,7 @@
     color: var(--color-autocomplete-font);
     max-height: 32rem;
     overflow-y: auto;
-    z-index: 100;
+    z-index: 5000;
     margin-top: 3.5rem;
     border-radius: 0.8rem;
 

searx/static/themes/simple/src/less/definitions.less

@@ -280,7 +280,7 @@
 @results-image-row-height-phone: 10rem;
 @search-width: 44rem;
 // heigh of #search, see detail.less
-@search-height: 7.6rem;
+@search-height: 13rem;
 
 /// Device Size
 /// @desktop > @tablet

searx/static/themes/simple/src/less/detail.less

@@ -22,7 +22,7 @@ article.result-images .detail {
   bottom: 0;
   background: var(--color-result-detail-background);
   border: 1px solid var(--color-result-detail-background);
-  z-index: 10000;
+  z-index: 1000;
   padding: 4rem 3rem 3rem 3rem;
 
   a.result-images-source {
@@ -148,7 +148,7 @@ article.result-images .detail {
     height: 1.5rem;
     position: absolute;
     filter: opacity(40%);
-    z-index: 2000002;
+    z-index: 1200;
 
     span {
       display: block;

searx/static/themes/simple/src/less/search.less

@@ -158,7 +158,7 @@ button.category_button {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 10000;
+  z-index: 1000;
 
   &:hover {
     color: var(--color-search-background-hover);
@@ -183,7 +183,7 @@ html.no-js #clear_search.hide_if_nojs {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 2;
+  z-index: 100;
 }
 
 #q {
@@ -332,7 +332,7 @@ html.no-js #clear_search.hide_if_nojs {
     top: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000;
+    z-index: 2000;
 
     .search_box {
       border-bottom: 1px solid var(--color-search-border);

searx/static/themes/simple/src/less/style.less

@@ -543,7 +543,13 @@ article[data-vim-selected].category-social {
   margin-bottom: 0;
   .ltr-margin-left(@results-offset);
   display: grid;
-  grid-template: "corrections sidebar" min-content "answers sidebar" min-content "urls sidebar" 1fr "pagination sidebar" min-content / @results-width @results-sidebar-width;
+  grid-template:
+      "corrections sidebar" min-content
+      "answers sidebar" min-content
+      "urls sidebar" 1fr
+      "pagination sidebar" min-content
+      / @results-width @results-sidebar-width
+  ;
   gap: 0 @results-gap;
 }
 
@@ -967,7 +973,14 @@ summary.title {
     margin: 0 auto;
     justify-content: center;
     display: grid;
-    grid-template: "corrections" min-content "answers" min-content "sidebar" min-content "urls" 1fr "pagination" min-content min-content / @results-width;
+    grid-template:
+      "corrections" min-content
+      "answers" min-content
+      "sidebar" min-content
+      "urls" 1fr
+      "pagination" min-content
+      / @results-width
+    ;
     gap: 0;
   }
 }
@@ -1005,7 +1018,13 @@ summary.title {
 #main_results div#results.only_template_images {
   margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
-  grid-template: "corrections" min-content "answers" min-content "sidebar" min-content "urls" 1fr "pagination" min-content / 100%;
+  grid-template:
+    "corrections" min-content
+    "answers" min-content
+    "sidebar" min-content
+    "urls" 1fr
+    "pagination" min-content
+    / 100%;
   gap: 0;
 
   #sidebar {

searx/static/themes/simple/src/less/toolkit.less

@@ -203,7 +203,7 @@ div.selectable_url {
   left: 50%;
   margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 10000000;
+  z-index: 5000;
 
   h3 {
     margin-top: 0;
@@ -339,7 +339,7 @@ select {
   padding: 0.2rem !important;
   color: var(--color-search-font);
   font-size: 0.9rem;
-  z-index: 2;
+  z-index: 100;
 
   &:hover,
   &:focus {
@@ -413,7 +413,7 @@ input.checkbox-onoff[type="checkbox"] {
     border: 1px solid var(--color-btn-background);
     border-radius: 12px;
     box-shadow: var(--color-btn-background) 0 0 3px;
-    z-index: 10000;
+    z-index: 1200;
     top: -0.55em;
     left: -0.6em;
   }
@@ -573,7 +573,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   background: var(--color-toolkit-engine-tooltip-background);
   font-size: 14px;
   font-weight: normal;
-  z-index: 1000000;
+  z-index: 5000;
   text-align: left;
   .rounded-corners;
 }

utils/lib_sxng_static.sh

@@ -100,7 +100,8 @@ static.build.commit() {
     static.build.drop &>/dev/null
 
     (   set -e
-        # build the themes
+        # fix & build the themes
+	themes.fix
         themes.all
 
         # add build files

utils/lib_sxng_test.sh

@@ -89,7 +89,6 @@ test.robot() {
     dump_return $?
 }
 
-
 test.rst() {
     build_msg TEST "[reST markup] ${RST_FILES[*]}"
 
@@ -98,6 +97,12 @@ test.rst() {
     done
 }
 
+test.themes() {
+    build_msg TEST 'SearXNG themes'
+    themes.test
+    dump_return $?
+}
+
 test.pybabel() {
     TEST_BABEL_FOLDER="build/test/pybabel"
     build_msg TEST "[extract messages] pybabel"

utils/lib_sxng_themes.sh

@@ -7,21 +7,41 @@ declare _creset
 themes.help(){
     cat <<EOF
 themes.:
-  all       : build all themes
-  live      : to get live builds of CSS & JS use 'LIVE_THEME=simple make run'
-  simple.:    build simple theme
-    test    : test simple theme
+  all       : test & build all themes
+  test      : test all themes
+  fix       : fix JS & CSS (LESS)
+  live      : to get live builds of CSS & JS use: LIVE_THEME=simple make run
+  simple.:    test & build simple theme ..
     pygments: build pygment's LESS files for simple theme
+    test    : test simple theme
+    fix     : fix JS & CSS (LESS) of the simple theme
 EOF
 }
 
 themes.all() {
     (   set -e
+	node.env
         themes.simple
     )
     dump_return $?
 }
 
+themes.fix() {
+    (   set -e
+	node.env
+        themes.simple.fix
+    )
+    dump_return $?
+}
+
+themes.test() {
+    (   set -e
+	node.env
+        themes.simple.test
+    )
+    dump_return $?
+}
+
 themes.live() {
     local LIVE_THEME="${LIVE_THEME:-${1}}"
     case "${LIVE_THEME}" in
@@ -29,30 +49,30 @@ themes.live() {
             theme="searx/static/themes/${LIVE_THEME}"
             ;;
         '')
-            die_caller 42 "missing theme argument"
+            die 42 "missing theme argument"
             ;;
         *)
-            die_caller 42 "unknown theme '${LIVE_THEME}' // [simple]'"
+            die 42 "unknown theme '${LIVE_THEME}' // [simple]'"
             ;;
     esac
-    build_msg GRUNT "theme: $1 (live build)"
-    nodejs.ensure
+    build_msg SIMPLE "theme: $1 (live build)"
+    node.env
+    themes.simple.pygments
     cd "${theme}"
     {
-        npm install
         npm run watch
-    } 2>&1 \
-        | prefix_stdout "${_Blue}THEME ${1} ${_creset}  " \
-        | grep -E --ignore-case --color 'error[s]?[:]? |warning[s]?[:]? |'
+    } # 2>&1 \
+      #       | prefix_stdout "${_Blue}THEME ${1} ${_creset}  " \
+      #       | grep -E --ignore-case --color 'error[s]?[:]? |warning[s]?[:]? |'
 }
 
 themes.simple() {
     (   set -e
-	node.env
 	themes.simple.pygments
+	build_msg SIMPLE "theme: run build"
+	# "run build" includes tests from eslint and stylelint
+	npm --prefix searx/static/themes/simple run build
     )
-    build_msg GRUNT "theme: simple"
-    npm --prefix searx/static/themes/simple run build
     dump_return $?
 }
 
@@ -67,11 +87,14 @@ themes.simple.pygments() {
     return 0
 }
 
+themes.simple.fix() {
+    build_msg SIMPLE "theme: fix"
+    npm --prefix searx/static/themes/simple run fix
+    dump_return $?
+}
 
 themes.simple.test() {
-    build_msg TEST "theme: simple"
-    node.env
-    npm --prefix searx/static/themes/simple install
+    build_msg SIMPLE "theme: run test"
     npm --prefix searx/static/themes/simple run test
     dump_return $?
 }