mirror of
https://github.com/searxng/searxng
synced 2024-01-01 19:24:07 +01:00
[simple theme] update to ion icons 5 and drop webfont
* update from ionicons-npm to ionicons ver.5 * drop the webfont built by grunt for icons * built icons.html template for inlining icons with jinja2 into html * update icon to use mostly the outline version * add icons to categories and do not display them on mobile to save space * remove all legacy ion icon font files from simple theme * icons.html is added in this commit since make statc.build.restore requires git to know the file already * cleanup error-dialog
This commit is contained in:
parent
8877512e20
commit
566dfe3330
27 changed files with 260 additions and 868 deletions
|
|
@ -8,8 +8,8 @@ module.exports = function(grunt) {
|
|||
pkg: grunt.file.readJSON('package.json'),
|
||||
watch: {
|
||||
scripts: {
|
||||
files: ['src/**'],
|
||||
tasks: ['eslint', 'copy', 'concat', 'uglify', 'htmlmin', 'less:development', 'less:production']
|
||||
files: ['gruntfile.js', 'src/**'],
|
||||
tasks: ['eslint', 'copy', 'concat', 'svg2jinja', 'uglify', 'htmlmin', 'less:development', 'less:production']
|
||||
}
|
||||
},
|
||||
eslint: {
|
||||
|
|
@ -106,70 +106,6 @@ module.exports = function(grunt) {
|
|||
}
|
||||
}
|
||||
},
|
||||
webfont: {
|
||||
icons: {
|
||||
// src: 'node_modules/ionicons-npm/src/*.svg',
|
||||
src: [
|
||||
'node_modules/ionicons-npm/src/navicon-round.svg',
|
||||
'node_modules/ionicons-npm/src/search.svg',
|
||||
'node_modules/ionicons-npm/src/play.svg',
|
||||
'node_modules/ionicons-npm/src/link.svg',
|
||||
'node_modules/ionicons-npm/src/chevron-up.svg',
|
||||
'node_modules/ionicons-npm/src/chevron-left.svg',
|
||||
'node_modules/ionicons-npm/src/chevron-right.svg',
|
||||
'node_modules/ionicons-npm/src/arrow-down-a.svg',
|
||||
'node_modules/ionicons-npm/src/arrow-up-a.svg',
|
||||
'node_modules/ionicons-npm/src/arrow-swap.svg',
|
||||
'node_modules/ionicons-npm/src/telephone.svg',
|
||||
'node_modules/ionicons-npm/src/android-arrow-dropdown.svg',
|
||||
'node_modules/ionicons-npm/src/android-globe.svg',
|
||||
'node_modules/ionicons-npm/src/android-time.svg',
|
||||
'node_modules/ionicons-npm/src/location.svg',
|
||||
'node_modules/ionicons-npm/src/alert-circled.svg',
|
||||
'node_modules/ionicons-npm/src/android-alert.svg',
|
||||
'node_modules/ionicons-npm/src/ios-film-outline.svg',
|
||||
'node_modules/ionicons-npm/src/music-note.svg',
|
||||
'node_modules/ionicons-npm/src/ion-close-round.svg',
|
||||
'node_modules/ionicons-npm/src/android-more-vertical.svg',
|
||||
'src/fonts/magnet.svg',
|
||||
'node_modules/ionicons-npm/src/android-close.svg',
|
||||
],
|
||||
dest: 'fonts',
|
||||
destLess: 'src/generated',
|
||||
options: {
|
||||
font: 'ion',
|
||||
hashes : true,
|
||||
syntax: 'bem',
|
||||
styles : 'font,icon',
|
||||
types : 'eot,woff2,woff,ttf,svg',
|
||||
order : 'eot,woff2,woff,ttf,svg',
|
||||
stylesheets : ['css', 'less'],
|
||||
relativeFontPath : '../fonts/',
|
||||
autoHint : false,
|
||||
normalize : false,
|
||||
// ligatures : true,
|
||||
optimize : true,
|
||||
// fontHeight : 400,
|
||||
rename : function(name) {
|
||||
basename = path.basename(name);
|
||||
if (basename === 'android-alert.svg') {
|
||||
return 'error.svg';
|
||||
}
|
||||
if (basename === 'alert-circled.svg') {
|
||||
return 'warning.svg';
|
||||
}
|
||||
if (basename === 'ion-close-round.svg') {
|
||||
return 'close.svg';
|
||||
}
|
||||
return basename.replace(/(ios|md|android)-/i, '');
|
||||
},
|
||||
templateOptions: {
|
||||
baseClass: 'ion-icon',
|
||||
classPrefix: 'ion-'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
less: {
|
||||
development: {
|
||||
options: {
|
||||
|
|
@ -197,6 +133,89 @@ module.exports = function(grunt) {
|
|||
}
|
||||
},
|
||||
},
|
||||
svg2jinja: {
|
||||
all: {
|
||||
src: {
|
||||
'warning': 'node_modules/ionicons/dist/svg/alert-outline.svg',
|
||||
'close': 'node_modules/ionicons/dist/svg/close-outline.svg',
|
||||
'chevron-up-outline': 'node_modules/ionicons/dist/svg/chevron-up-outline.svg',
|
||||
'chevron-right': 'node_modules/ionicons/dist/svg/chevron-forward-outline.svg',
|
||||
'chevron-left': 'node_modules/ionicons/dist/svg/chevron-back-outline.svg',
|
||||
'menu-outline': 'node_modules/ionicons/dist/svg/menu-outline.svg',
|
||||
'ellipsis-vertical-outline': 'node_modules/ionicons/dist/svg/ellipsis-vertical-outline.svg',
|
||||
'magnet-outline': 'node_modules/ionicons/dist/svg/magnet-outline.svg',
|
||||
'globe-outline': 'node_modules/ionicons/dist/svg/globe-outline.svg',
|
||||
'search-outline': 'node_modules/ionicons/dist/svg/search-outline.svg',
|
||||
'image-outline': 'node_modules/ionicons/dist/svg/image-outline.svg',
|
||||
'play-outline': 'node_modules/ionicons/dist/svg/play-outline.svg',
|
||||
'newspaper-outline': 'node_modules/ionicons/dist/svg/newspaper-outline.svg',
|
||||
'location-outline': 'node_modules/ionicons/dist/svg/location-outline.svg',
|
||||
'musical-notes-outline': 'node_modules/ionicons/dist/svg/musical-notes-outline.svg',
|
||||
'layers-outline': 'node_modules/ionicons/dist/svg/layers-outline.svg',
|
||||
'school-outline': 'node_modules/ionicons/dist/svg/school-outline.svg',
|
||||
'file-tray-full-outline': 'node_modules/ionicons/dist/svg/file-tray-full-outline.svg',
|
||||
'people-outline': 'node_modules/ionicons/dist/svg/people-outline.svg',
|
||||
},
|
||||
dest: '../../../templates/simple/icons.html',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
grunt.registerMultiTask('svg2jinja', 'Create Jinja2 macro', function() {
|
||||
const ejs = require('ejs'), svgo = require('svgo');
|
||||
const icons = {}
|
||||
for(const iconName in this.data.src) {
|
||||
const svgFileName = this.data.src[iconName];
|
||||
try {
|
||||
const svgContent = grunt.file.read(svgFileName, { encoding: 'utf8' })
|
||||
const svgoResult = svgo.optimize(svgContent, {
|
||||
path: svgFileName,
|
||||
multipass: true,
|
||||
plugins: [
|
||||
{
|
||||
name: "removeTitle",
|
||||
},
|
||||
{
|
||||
name: "removeXMLNS",
|
||||
},
|
||||
{
|
||||
name: "addAttributesToSVGElement",
|
||||
params: {
|
||||
attributes: [
|
||||
{ "aria-hidden": "true" }
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
icons[iconName] = svgoResult.data.replace("'", "\\'");
|
||||
} catch (err) {
|
||||
grunt.log.error(err);
|
||||
}
|
||||
}
|
||||
const template = `{# this file was generated by searx/static/themes/simple/gruntfile.js #}
|
||||
{%- set icons = {
|
||||
<% for (const iconName in icons) { %> '<%- iconName %>':'<%- icons[iconName] %>',
|
||||
<% } %>
|
||||
}
|
||||
-%}
|
||||
|
||||
{% macro icon(action, alt) -%}
|
||||
{{ icons[action] | replace("ionicon", "ion-icon") | safe }}
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro icon_small(action) -%}
|
||||
{{ icons[action] | replace("ionicon", "ion-icon-small") | safe }}
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro icon_big(action, alt) -%}
|
||||
{{ icons[action] | replace("ionicon", "ion-icon-big") | safe }}
|
||||
{%- endmacro %}
|
||||
`;
|
||||
const result = ejs.render(template, { icons });
|
||||
grunt.file.write(this.data.dest, result, { encoding: 'utf8' });
|
||||
grunt.log.ok(this.data.dest + " created");
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
|
|
@ -207,7 +226,6 @@ module.exports = function(grunt) {
|
|||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-webfont');
|
||||
grunt.loadNpmTasks('grunt-stylelint');
|
||||
grunt.loadNpmTasks('grunt-eslint');
|
||||
|
||||
|
|
@ -218,6 +236,7 @@ module.exports = function(grunt) {
|
|||
'stylelint',
|
||||
'copy',
|
||||
'concat',
|
||||
'svg2jinja',
|
||||
'uglify',
|
||||
'htmlmin',
|
||||
'less:development',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue