Merge pull request #473 from return42/searxng-wordmark

[simple theme] SearXNG wordmark & favicon

manage

@@ -692,11 +692,45 @@ themes.oscar() {
 }
 
 themes.simple() {
-    build_msg GRUNT "theme: simple"
+    local src="searx/static/themes/simple/src"
-    npm --prefix searx/static/themes/simple run build
+    local static="searx/static/themes/simple"
+    (   set -e
+        convert_if_newer "$src/svg/searxng-wordmark.svg" "$static/img/favicon.png" \
+                         -transparent white -resize 64x64
+        build_msg GRUNT "theme: simple"
+        npm --prefix searx/static/themes/simple run build
+    )
     dump_return $?
 }
 
+convert_if_newer() {
+
+    # usage: convert_if_newer <origfile> <outfile> [<options>, ...]
+    #
+    #    convert_if_newer "path/to/origin.svg" "path/to/converted.png" -resize 100x100
+    #
+    # Run's ImageMagik' convert comand to generate <outfile> from <origfile>, if
+    # <origfile> is newer than <outfile>.  The command line is to convert is::
+    #
+    #    convert <origfile> [<options>, ...] <outfile>
+
+    local src_file="$1" && shift
+    local dst_file="$1" && shift
+
+    if [[ "${src_file}" -nt "${dst_file}" ]]; then
+        if ! required_commands convert; then
+            info_msg "to install build tools use::"
+            info_msg "   sudo -H ./utils/searx.sh install buildhost"
+            die 1 "install needed build tools first"
+        fi
+        build_msg CONVERT "${src_file}" "$@" "${dst_file}"
+        convert "${src_file}" "$@" "${dst_file}"
+    else
+        build_msg CONVERT "${dst_file} (up-to-date)"
+    fi
+}
+
+
 PYLINT_FILES=()
 while IFS= read -r line; do
    PYLINT_FILES+=("$line")

searx/static/themes/simple/css/searxng-rtl.css

@@ -2369,9 +2369,15 @@ article.result-images .detail {
 }
 #search_logo {
   grid-area: logo;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.search_logo_img {
+#search_logo svg {
-  width: 40px;
+  flex: 1;
+  width: 30px;
+  height: 30px;
+  margin: 0.5rem 0 auto 0;
 }
 .search_categories {
   grid-area: categories;

searx/static/themes/simple/css/searxng.css

@@ -2369,9 +2369,15 @@ article.result-images .detail {
 }
 #search_logo {
   grid-area: logo;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.search_logo_img {
+#search_logo svg {
-  width: 40px;
+  flex: 1;
+  width: 30px;
+  height: 30px;
+  margin: 0.5rem 0 auto 0;
 }
 .search_categories {
   grid-area: categories;

searx/static/themes/simple/gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
     watch: {
       scripts: {
         files: ['src/**'],
-        tasks: ['eslint', 'copy', 'concat', 'uglify', 'less:development', 'less:production']
+        tasks: ['eslint', 'copy', 'concat', 'uglify', 'htmlmin', 'less:development', 'less:production']
       }
     },
     eslint: {
@@ -95,6 +95,17 @@ module.exports = function(grunt) {
         }
       }
     },
+    htmlmin: {
+      dist: {
+        options: {
+          removeComments: true,
+          collapseWhitespace: true
+        },
+        files: {
+          '../../../templates/__common__/searxng-wordmark.min.svg': 'src/svg/searxng-wordmark.svg'
+        }
+      }
+    },
     webfont: {
       icons: {
         // src: 'node_modules/ionicons-npm/src/*.svg',
@@ -191,6 +202,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-htmlmin');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-less');
@@ -207,6 +219,7 @@ module.exports = function(grunt) {
     'copy',
     'concat',
     'uglify',
+    'htmlmin',
     'less:development',
     'less:production'
   ]);

searx/static/themes/simple/package.json

@@ -8,6 +8,8 @@
     "grunt-contrib-jshint": "~3.1.1",
     "grunt-contrib-less": "~3.0.0",
     "grunt-contrib-uglify": "~5.0.1",
+    "grunt-xmlmin": "~0.1.8",
+    "grunt-contrib-htmlmin": "~3.1.0",
     "grunt-contrib-watch": "~1.1.0",
     "grunt-stylelint": "^0.16.0",
     "grunt-eslint": "^23.0.0",

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

@@ -18,10 +18,16 @@
 
 #search_logo {
   grid-area: logo;
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-.search_logo_img {
+  svg {
-  width: 40px;
+    flex: 1;
+    width: 30px;
+    height: 30px;
+    margin: 0.5rem 0 auto 0;
+  }
 }
 
 .search_categories {

searx/templates/simple/search.html

@@ -1,6 +1,7 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
   <a id="search_logo" href="{{ url_for('index') }}">
-    <img class="search_logo_img" src="{{ url_for('static', filename='img/favicon.png') }}">
+    <span hidden>SearXNG</span>
+    {% include '__common__/searxng-wordmark.min.svg' without context %}
   </a>
   <div id="search_wrapper">
     <div class="search_box">

utils/lib_static.sh

@@ -11,6 +11,8 @@ STATIC_BUILT_PATHS=(
     searx/static/themes/simple/css
     searx/static/themes/simple/js
     searx/static/themes/simple/src/generated/pygments.less
+    searx/static/themes/simple/img/favicon.png
+    searx/templates/__common__/searxng-wordmark.min.svg
 )
 
 static_help(){