Skip to content

Commit 8337d78

Browse files
Add improved icon generation from Hugo theme
1 parent 8ddd140 commit 8337d78

File tree

7 files changed

+76
-54
lines changed

7 files changed

+76
-54
lines changed

Rakefile.rb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
desc 'Builds the icons'
1111
task :icons do
1212
puts "==> Building #{artefact} icons..."
13-
sh 'cd _tools && ./generate-icons.sh webp'
14-
sh 'cd _tools && ./generate-icons.sh svg'
13+
sh '_tools/generate-icons.sh assets/css . webp'
14+
sh '_tools/generate-icons.sh assets/css . svg'
1515
end
1616

1717
desc 'Builds the site for deployment'

_includes/icons/none.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<link rel="icon" href="data:;base64,=">

_includes/icons/none.svg.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<link rel="icon" href="data:;base64,=">

_tools/generate-icon-include.sh

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22

33
set -euo pipefail
44

5-
output_dir="../_includes/icons"
6-
mkdir -p "${output_dir}"
7-
8-
if [[ ${#} -ne 2 ]]; then
9-
echo "Generates HTML include of icon in ${output_dir}"
10-
echo "Usage: ${0##*/} <theme-color> <image-format>"
5+
if [[ ${#} -ne 4 ]]; then
6+
echo "Generates HTML include of icon"
7+
echo "Usage: ${0##*/} <input_dir> <output_dir> <theme-color> <image-format>"
118
exit 1
129
fi
1310

14-
theme_color=${1}
15-
image_format=${2}
11+
input_dir="${1}"
12+
output_dir="${2}"
13+
mkdir -p "${output_dir}"
14+
15+
theme_color=${3}
16+
image_format=${4}
1617

1718
if [[ "${OSTYPE}" == "linux-gnu"* ]]; then
1819
parameters="-w0"
@@ -26,7 +27,15 @@ else
2627
exit 1
2728
fi
2829

29-
icon="../assets/icons/${theme_color}.${image_format}"
30+
if [[ "${theme_color}" == "none" ]]; then
31+
printf '<link rel="icon" href="data:;base64,=">' \
32+
> "${output_dir}/${theme_color}.svg.html"
33+
printf '<link rel="icon" href="data:;base64,=">' \
34+
> "${output_dir}/${theme_color}.html"
35+
exit
36+
fi
37+
38+
icon="${input_dir}/${theme_color}.${image_format}"
3039
base64_cmd="base64 ${parameters} ${icon}"
3140

3241
if [[ ${image_format} == "svg" ]]; then
@@ -36,9 +45,9 @@ if [[ ${image_format} == "svg" ]]; then
3645
printf "<link rel=\"icon\" type=\"${media_type}\" href=\"data:${media_type};base64,$(eval ${base64_cmd})\">" \
3746
> "${output_dir}/${theme_color}.svg.html"
3847
else
39-
media_type=$(file -b --mime-type ${icon})
48+
media_type=$(file -b --mime-type "${icon}")
4049
printf "<link rel=\"icon\" type=\"${media_type}\" href=\"{{ '/assets/icons/${theme_color}.${image_format}' | relative_url }}\">" \
4150
> "${output_dir}/${theme_color}.html"
4251
# printf "<link rel=\"icon\" type=\"${media_type}\" href=\"data:${media_type};base64,$(eval ${base64_cmd})\">" \
43-
# "> ${output_dir}/${theme_color}.html"
52+
# > "${output_dir}/${theme_color}.html"
4453
fi

_tools/generate-icon-svg.sh

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
#!/usr/bin/env sh
22

3-
if [ ${#} -ne 3 ]; then
3+
set -eu
4+
5+
if [ ${#} -ne 4 ]; then
46
echo "Creates a 180×180 SVG icon of a five-point star"
5-
echo "Usage: ${0##*/} <background-color> <foreground-color> <filename>"
7+
echo "Usage: ${0##*/} <output_dir> <background-color> <foreground-color> <filename>"
68
exit 1
79
fi
810

9-
output_dir="../assets/icons"
11+
output_dir="${1}"
1012
mkdir -p "${output_dir}"
1113

12-
cat > "${output_dir}/${3}" << END
14+
cat > "${output_dir}/${4}" << END
1315
<svg width="180px" height="180px" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
14-
<rect width="180" height="180" fill="${1}" />
15-
<path d="M90,16,106.45798706418924,67.34752415750147,160.37818220584137,67.13274241625389,116.6295824562643,98.65247584249853,133.496108669643,149.8672575837461,90,118,46.50389133035699,149.8672575837461,63.3704175437357,98.65247584249853,19.621817794158645,67.13274241625388,73.54201293581075,67.34752415750148Z" fill="${2}" />
16+
<rect width="180" height="180" fill="${2}" />
17+
<path d="M90,16,106.45798706418924,67.34752415750147,160.37818220584137,67.13274241625389,116.6295824562643,98.65247584249853,133.496108669643,149.8672575837461,90,118,46.50389133035699,149.8672575837461,63.3704175437357,98.65247584249853,19.621817794158645,67.13274241625388,73.54201293581075,67.34752415750148Z" fill="${3}" />
1618
</svg>
1719
END

_tools/generate-icon-unicode.sh

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
#!/usr/bin/env sh
22

3-
if [ ${#} -lt 5 ]; then
3+
set -eu
4+
5+
if [ ${#} -lt 6 ]; then
46
echo "Creates a 180×180 icon from a Unicode glyph, like ★"
57
echo "Sets filename to background color if not set as parameter"
6-
echo "Usage: ${0##*/} <background-color> <foreground-color> <font> <unicode-glyph> <file-extension> [filename]"
7-
echo "Example: ${0##*/} hotpink white /System/Library/Fonts/Apple\ Symbols.ttf ★ webp"
8+
echo "Usage: ${0##*/} <output_dir> <background-color> <foreground-color> <font> <unicode-glyph> <file-extension> [filename]"
9+
echo "Example: ${0##*/} static/assets/icons hotpink white /System/Library/Fonts/Apple\ Symbols.ttf ★ webp"
810
exit 1
911
fi
1012

11-
output_dir="../assets/icons"
13+
output_dir="${1}"
1214
mkdir -p "${output_dir}"
1315

14-
if [ -z "${6+x}" ]; then
15-
filename=${1}
16+
if [ -z "${7+x}" ]; then
17+
filename="${2}"
1618
else
17-
filename=${6}
19+
filename="${7}"
1820
fi
1921

2022
# Depending on the font metrics the glyph has to be manually centered.
@@ -26,12 +28,12 @@ fi
2628
# label:"${4}" \
2729

2830
convert \
29-
-background ${1} \
30-
-fill ${2} \
31+
-background "${2}" \
32+
-fill "${3}" \
3133
-size 180x180 \
3234
-gravity center \
33-
-font "${3}" \
35+
-font "${4}" \
3436
-pointsize 256 \
35-
-annotate +1+12 "${4}" \
37+
-annotate +1+12 "${5}" \
3638
label:' ' \
37-
"${output_dir}/${filename}.${5}"
39+
"${output_dir}/${filename}.${6}"

_tools/generate-icons.sh

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,60 @@
44
font="/System/Library/Fonts/Apple Symbols.ttf"
55
glyph=""
66

7-
set -e
7+
set -euo pipefail
88

9-
if [[ ${#} -ne 1 ]]; then
10-
echo "Generates icons in assets/icons/ and HTML include of icons in _includes/icons/"
11-
echo "Usage: ${0##*/} <image-format>"
9+
if [[ ${#} -ne 3 ]]; then
10+
echo "Generates icons and HTML include of icons"
11+
echo "Usage: ${0##*/} <scss_path> <output_path_prefix> <image-format>"
1212
echo "<image-format> can be one of: jpg png webp svg"
1313
exit 1
1414
fi
1515

16-
image_format=${1,,}
16+
dirname="${0%/*}"
17+
scss_path="${1}"
18+
output_path_prefix="${2}"
19+
icon_output_dir="${output_path_prefix}/assets/icons"
20+
include_input_dir="${icon_output_dir}"
21+
include_output_dir="${output_path_prefix}/_includes/icons"
22+
image_format="${3,,}"
1723
named_colors="aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen"
1824

1925
shopt -s nullglob
20-
for scss in ../assets/css/*.scss; do
21-
basename=$(basename "${scss}")
22-
theme_color=${basename%.*}
26+
for scss in "${scss_path}"/*.scss; do
27+
basename="${scss##*/}"
28+
theme_color="${basename%.*}"
2329

24-
if [[ ${theme_color} == "none" ]]; then
30+
if [[ "${theme_color}" == "none" ]]; then
31+
"${dirname}/generate-icon-include.sh" "${include_input_dir}" "${include_output_dir}" "${theme_color}" "${image_format}"
2532
continue
2633
fi
2734

2835
if [[ ${named_colors} =~ (^|[[:space:]])${theme_color}($|[[:space:]]) ]]; then
29-
if [[ ${theme_color} == "white" ]]; then
30-
if [[ ${image_format} == "svg" ]]; then
31-
./generate-icon-svg.sh white black ${theme_color}.svg
36+
if [[ "${theme_color}" == "white" ]]; then
37+
if [[ "${image_format}" == "svg" ]]; then
38+
"${dirname}/generate-icon-svg.sh" "${icon_output_dir}" white black "${theme_color}.svg"
3239
else
33-
./generate-icon-unicode.sh white black "${font}" ${glyph} ${image_format}
40+
"${dirname}/generate-icon-unicode.sh" "${icon_output_dir}" white black "${font}" "${glyph}" "${image_format}"
3441
fi
35-
elif [[ ${theme_color} == "grey" && ${image_format} != "svg" ]]; then
42+
elif [[ "${theme_color}" == "grey" && "${image_format}" != "svg" ]]; then
3643
# Grey is much lighter in convert
37-
./generate-icon-unicode.sh \#808080 white "${font}" ${glyph} ${image_format} grey
44+
"${dirname}/generate-icon-unicode.sh" "${icon_output_dir}" "#808080" white "${font}" "${glyph}" "${image_format}" grey
3845
else
39-
if [[ ${image_format} == "svg" ]]; then
40-
./generate-icon-svg.sh ${theme_color} white ${theme_color}.svg
46+
if [[ "${image_format}" == "svg" ]]; then
47+
"${dirname}/generate-icon-svg.sh" "${icon_output_dir}" "${theme_color}" white "${theme_color}.svg"
4148
else
42-
./generate-icon-unicode.sh ${theme_color} white "${font}" ${glyph} ${image_format}
49+
"${dirname}/generate-icon-unicode.sh" "${icon_output_dir}" "${theme_color}" white "${font}" "${glyph}" "${image_format}"
4350
fi
4451
fi
4552
else
46-
# Hash symbol cannot be part of the scss filename, otherwise it cannot be HTTP-served
47-
if [[ ${image_format} == "svg" ]]; then
48-
./generate-icon-svg.sh \#${theme_color} white ${theme_color}.svg
53+
# Hash symbol cannot be part of the SCSS filename, otherwise it cannot be HTTP-served
54+
if [[ "${image_format}" == "svg" ]]; then
55+
"${dirname}/generate-icon-svg.sh" "${icon_output_dir}" "#${theme_color}" white "${theme_color}.svg"
4956
else
50-
./generate-icon-unicode.sh \#${theme_color} white "${font}" ${glyph} ${image_format} ${theme_color}
57+
"${dirname}/generate-icon-unicode.sh" "${icon_output_dir}" "#${theme_color}" white "${font}" "${glyph}" "${image_format}" "${theme_color}"
5158
fi
5259
fi
5360

54-
./generate-icon-include.sh ${theme_color} ${image_format}
61+
"${dirname}/generate-icon-include.sh" "${include_input_dir}" "${include_output_dir}" "${theme_color}" "${image_format}"
5562
done
5663
shopt -u nullglob

0 commit comments

Comments
 (0)