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"
-    npm --prefix searx/static/themes/simple run build
+    local src="searx/static/themes/simple/src"
+    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 {
-  width: 40px;
+#search_logo svg {
+  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 {
-  width: 40px;
+#search_logo svg {
+  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 {
-  width: 40px;
+  svg {
+    flex: 1;
+    width: 30px;
+    height: 30px;
+    margin: 0.5rem 0 auto 0;
+  }
 }
 
 .search_categories {

searx/static/themes/simple/src/svg/searxng-wordmark.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 92 92"
+   height="92mm"
+   width="92mm">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-40.921303,-17.416526)"
+     id="layer1">
+    <circle
+       r="0"
+       style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       cy="92"
+       cx="75"
+       id="path3713" />
+    <circle
+       r="30"
+       cy="53.902557"
+       cx="75.921303"
+       id="path834"
+       style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282"
+       id="path852"
+       style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       transform="rotate(-46.234709)"
+       ry="1.8669105e-13"
+       y="122.08995"
+       x="3.7063529"
+       height="39.963303"
+       width="18.846331"
+       id="rect912"
+       style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>

searx/templates/__common__/searxng-wordmark.min.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 92 92" height="92mm" width="92mm"><defs id="defs2"/><metadata id="metadata5"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g transform="translate(-40.921303,-17.416526)" id="layer1"><circle r="0" style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cy="92" cx="75" id="path3713"/><circle r="30" cy="53.902557" cx="75.921303" id="path834" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><path d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282" id="path852" style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><rect transform="rotate(-46.234709)" ry="1.8669105e-13" y="122.08995" x="3.7063529" height="39.963303" width="18.846331" id="rect912" style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/></g></svg>

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(){