Make pro badge in docs clickable

docs/_sidebar.md

@@ -1,14 +1,15 @@
 * [Getting started](GETTING_STARTED)
+* [Pro version<img src="/assets/pro.svg">](https://imgproxy.net/#pro)
 * [Installation](installation)
 * [Configuration](configuration)
 * [Generating the URL](generating_the_url)
-* [Getting the image info<i class='badge badge-pro'></i>](getting_the_image_info)
+* [Getting the image info<img title="imgproxy Pro feature" src="/assets/pro.svg">](getting_the_image_info)
 * [Signing the URL](signing_the_url)
 * [Watermark](watermark)
 * [Presets](presets)
-* [Object detection<i class='badge badge-pro'></i>](object_detection)
-* [Autoquality<i class='badge badge-pro'></i>](autoquality)
-* [Chained pipelines<i class='badge badge-pro'></i>](chained_pipelines)
+* [Object detection<img title="imgproxy Pro feature" src="/assets/pro.svg">](object_detection)
+* [Autoquality<img title="imgproxy Pro feature" src="/assets/pro.svg">](autoquality)
+* [Chained pipelines<img title="imgproxy Pro feature" src="/assets/pro.svg">](chained_pipelines)
 * [Serving local files](serving_local_files)
 * [Serving files from Amazon S3](serving_files_from_s3)
 * [Serving files from Google Cloud Storage](serving_files_from_google_cloud_storage)

docs/assets/docsify-pro-badge.js

@@ -0,0 +1,19 @@
+; (function (win) {
+  win.ProBadgePlugin = {}
+
+  function create() {
+    var regex = /\!\[pro\]\((\S+)\)/g;
+    var proLink = '<a class="badge" href="https://imgproxy.net/#pro" target="_blank">' +
+      '<img src="$1" title="This feature is available in imgproxy Pro"/>' +
+    '</a>';
+
+    return function (hook) {
+      hook.beforeEach(function (content, next) {
+        content = content.replaceAll(regex, proLink)
+        next(content)
+      })
+    }
+  }
+
+  win.ProBadgePlugin.create = create
+})(window)

docs/assets/style.css

@@ -88,29 +88,28 @@ body::before {
     transform: rotate(360deg);
   }
 }
+.sidebar-nav li>a:only-child {
+  padding: var(--sidebar-nav-pagelink-padding, var(--sidebar-nav-link-padding));
+}
+
+.sidebar-nav li > a > img {
+  height: 1em;
+}
 
-i.badge::before {
-  display: inline-block;
-  height: 1.5em;
-  line-height: 1.5em;
+.badge img {
+  height: 1em;
   vertical-align: middle;
-  border: 1px solid;
-  font-size: .6em;
-  font-weight: 700;
-  font-style: normal;
-  border-radius: 0.75em;
-  padding: 0 .5em;
+  margin-top: -0.25em;
 }
 
-i.badge-pro::before {
-  content: "pro";
-  color: #177bd3;
-  border-color: #177bd3;
-  text-transform: uppercase;
+.badge img:hover {
+  filter: brightness(1.5);
 }
 
-h1 i.badge, h2 i.badge, h3 i.badge, h4 i.badge, .sidebar-nav i.badge {
-  margin-left: .5ch;
+h1 .badge img, h3 .badge img, h3 .badge img, h4 .badge img, h5 .badge img {
+  height: 0.8em;
+  margin-top: -0.20em;
+  margin-left: .1em;
 }
 
 .github-edit-btn {

docs/autoquality.md

@@ -1,4 +1,4 @@
-# Autoquality<i class='badge badge-pro'></i>
+# Autoquality![pro](/assets/pro.svg)
 
 imgproxy can calculate quality for your resultant images so they best fit the selected metric. The supported methods are [none](#none), [size](#autoquality-by-file-size), [dssim](#autoquality-by-dssim), and [ml](#autoquality-with-ml).
 

docs/chained_pipelines.md

@@ -1,4 +1,4 @@
-# Chained pipelines<i class='badge badge-pro'></i>
+# Chained pipelines![pro](/assets/pro.svg)
 
 Though imgproxy's [processing pipeline](about_processing_pipeline.md) is suitable for most cases, sometimes it's handy to run multiple chained pipelines with different options.
 

docs/chaining_the_processing.md

@@ -1,4 +1,4 @@
-# Chaining the processing<i class='badge badge-pro'></i>
+# Chaining the processing![pro](/assets/pro.svg)
 
 Though imgproxy's [processing pipeline](about_processing_pipeline.md) is suitable for most cases, sometimes it's handy to run multiple chained pipelines with different options.
 

docs/configuration.md

@@ -42,16 +42,16 @@ echo $(xxd -g 2 -l 64 -p /dev/random | tr -d '\n')
 * `IMGPROXY_USER_AGENT`: the User-Agent header that will be sent with the source image request. Default: `imgproxy/%current_version`
 * `IMGPROXY_USE_ETAG`: when set to `true`, enables using the [ETag](https://en.wikipedia.org/wiki/HTTP_ETag) HTTP header for HTTP cache control. Default: `false`
 * `IMGPROXY_ETAG_BUSTER`: change this to change ETags for all the images. Default: blank
-* `IMGPROXY_CUSTOM_REQUEST_HEADERS`: <i class='badge badge-pro'></i> list of custom headers that imgproxy will send while requesting the source image, divided by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`
-* `IMGPROXY_CUSTOM_RESPONSE_HEADERS`: <i class='badge badge-pro'></i> a list of custom response headers, separated by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`
-* `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`: <i class='badge badge-pro'></i> a string that will be used as a custom header separator. Default: `\;`
+* `IMGPROXY_CUSTOM_REQUEST_HEADERS`: ![pro](/assets/pro.svg) list of custom headers that imgproxy will send while requesting the source image, divided by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`
+* `IMGPROXY_CUSTOM_RESPONSE_HEADERS`: ![pro](/assets/pro.svg) a list of custom response headers, separated by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`
+* `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`: ![pro](/assets/pro.svg) a string that will be used as a custom header separator. Default: `\;`
 * `IMGPROXY_ENABLE_DEBUG_HEADERS`: when set to `true`, imgproxy will add debug headers to the response. Default: `false`. The following headers will be added:
   * `X-Origin-Content-Length`: the size of the source image
   * `X-Origin-Width`: the width of the source image
   * `X-Origin-Height`: the height of the source image
   * `X-Result-Width`: the width of the resultant image
   * `X-Result-Height`: the height of the resultant image
-* `IMGPROXY_SERVER_NAME`: <i class='badge badge-pro'></i> the `Server` header value. Default: `imgproxy`
+* `IMGPROXY_SERVER_NAME`: ![pro](/assets/pro.svg) the `Server` header value. Default: `imgproxy`
 
 ## Security
 
@@ -120,11 +120,11 @@ When cookie forwarding is activated, by default, imgproxy assumes the scope of t
 ### Advanced JPEG compression
 
 * `IMGPROXY_JPEG_PROGRESSIVE`: when true, enables progressive JPEG compression. Default: `false`
-* `IMGPROXY_JPEG_NO_SUBSAMPLE`: <i class='badge badge-pro'></i> when true, chrominance subsampling is disabled. This will improve quality at the cost of larger file size. Default: `false`
-* `IMGPROXY_JPEG_TRELLIS_QUANT`: <i class='badge badge-pro'></i> when true, enables trellis quantisation for each 8x8 block. Reduces file size but increases compression time. Default: `false`
-* `IMGPROXY_JPEG_OVERSHOOT_DERINGING`: <i class='badge badge-pro'></i> when true, enables overshooting of samples with extreme values. Overshooting may reduce ringing artifacts from compression, in particular in areas where black text appears on a white background. Default: `false`
-* `IMGPROXY_JPEG_OPTIMIZE_SCANS`: <i class='badge badge-pro'></i> when true, splits the spectrum of DCT coefficients into separate scans. Reduces file size but increases compression time. Requires `IMGPROXY_JPEG_PROGRESSIVE` to be true. Default: `false`
-* `IMGPROXY_JPEG_QUANT_TABLE`: <i class='badge badge-pro'></i> quantization table to use. Supported values are:
+* `IMGPROXY_JPEG_NO_SUBSAMPLE`: ![pro](/assets/pro.svg) when true, chrominance subsampling is disabled. This will improve quality at the cost of larger file size. Default: `false`
+* `IMGPROXY_JPEG_TRELLIS_QUANT`: ![pro](/assets/pro.svg) when true, enables trellis quantisation for each 8x8 block. Reduces file size but increases compression time. Default: `false`
+* `IMGPROXY_JPEG_OVERSHOOT_DERINGING`: ![pro](/assets/pro.svg) when true, enables overshooting of samples with extreme values. Overshooting may reduce ringing artifacts from compression, in particular in areas where black text appears on a white background. Default: `false`
+* `IMGPROXY_JPEG_OPTIMIZE_SCANS`: ![pro](/assets/pro.svg) when true, splits the spectrum of DCT coefficients into separate scans. Reduces file size but increases compression time. Requires `IMGPROXY_JPEG_PROGRESSIVE` to be true. Default: `false`
+* `IMGPROXY_JPEG_QUANT_TABLE`: ![pro](/assets/pro.svg) quantization table to use. Supported values are:
   * `0`: Table from JPEG Annex K (default)
   * `1`: Flat table
   * `2`: Table tuned for MSSIM on Kodak image set
@@ -145,8 +145,8 @@ When cookie forwarding is activated, by default, imgproxy assumes the scope of t
 
 <!-- ### Advanced GIF compression
 
-* `IMGPROXY_GIF_OPTIMIZE_FRAMES`: <i class='badge badge-pro'></i> when true, enables GIF frame optimization. This may produce a smaller result, but may increase compression time.
-* `IMGPROXY_GIF_OPTIMIZE_TRANSPARENCY`: <i class='badge badge-pro'></i> when true, enables GIF transparency optimization. This may produce a smaller result, but may also increase compression time. -->
+* `IMGPROXY_GIF_OPTIMIZE_FRAMES`: ![pro](/assets/pro.svg) when true, enables GIF frame optimization. This may produce a smaller result, but may increase compression time.
+* `IMGPROXY_GIF_OPTIMIZE_TRANSPARENCY`: ![pro](/assets/pro.svg) when true, enables GIF transparency optimization. This may produce a smaller result, but may also increase compression time. -->
 
 ### Advanced AVIF compression
 
@@ -158,17 +158,17 @@ imgproxy can calculate the quality of the resulting image based on selected metr
 
 **⚠️Warning:** Autoquality requires the image to be saved several times. Use it only when you prefer the resulting size and quality over the speed.
 
-* `IMGPROXY_AUTOQUALITY_METHOD`: <i class='badge badge-pro'></i> the method of quality calculation. Default: `none`
-* `IMGPROXY_AUTOQUALITY_TARGET`: <i class='badge badge-pro'></i> desired value of the autoquality method metric. Default: 0.02
-* `IMGPROXY_AUTOQUALITY_MIN`: <i class='badge badge-pro'></i> minimal quality imgproxy can use. Default: 70
-* `IMGPROXY_AUTOQUALITY_FORMAT_MIN`: <i class='badge badge-pro'></i> the minimal quality imgproxy can use per format, comma divided. Example: `jpeg=70,avif=40,webp=60`. When value for the resulting format is not set, `IMGPROXY_AUTOQUALITY_MIN` value is used. Default: `avif=40`
-* `IMGPROXY_AUTOQUALITY_MAX`: <i class='badge badge-pro'></i> the maximum quality imgproxy can use. Default: 80
-* `IMGPROXY_AUTOQUALITY_FORMAT_MAX`: <i class='badge badge-pro'></i> the maximum quality imgproxy can use per format, comma divided. Example: `jpeg=70,avif=40,webp=60`. When a value for the resulting format is not set, the `IMGPROXY_AUTOQUALITY_MAX` value is used. Default: `avif=50`
-* `IMGPROXY_AUTOQUALITY_ALLOWED_ERROR`: <i class='badge badge-pro'></i> the allowed `IMGPROXY_AUTOQUALITY_TARGET` error. Applicable only to `dssim` and `ml` methods. Default: 0.001
-* `IMGPROXY_AUTOQUALITY_MAX_RESOLUTION`: <i class='badge badge-pro'></i> when this value is greater then zero and the resultant resolution exceeds the value, autoquality won't be used. Default: 0
-* `IMGPROXY_AUTOQUALITY_JPEG_NET`: <i class='badge badge-pro'></i> the path to the neural network for JPEG.
-* `IMGPROXY_AUTOQUALITY_WEBP_NET`: <i class='badge badge-pro'></i> the path to the neural network for WebP.
-* `IMGPROXY_AUTOQUALITY_AVIF_NET`: <i class='badge badge-pro'></i> the path to the neural network for AVIF.
+* `IMGPROXY_AUTOQUALITY_METHOD`: ![pro](/assets/pro.svg) the method of quality calculation. Default: `none`
+* `IMGPROXY_AUTOQUALITY_TARGET`: ![pro](/assets/pro.svg) desired value of the autoquality method metric. Default: 0.02
+* `IMGPROXY_AUTOQUALITY_MIN`: ![pro](/assets/pro.svg) minimal quality imgproxy can use. Default: 70
+* `IMGPROXY_AUTOQUALITY_FORMAT_MIN`: ![pro](/assets/pro.svg) the minimal quality imgproxy can use per format, comma divided. Example: `jpeg=70,avif=40,webp=60`. When value for the resulting format is not set, `IMGPROXY_AUTOQUALITY_MIN` value is used. Default: `avif=40`
+* `IMGPROXY_AUTOQUALITY_MAX`: ![pro](/assets/pro.svg) the maximum quality imgproxy can use. Default: 80
+* `IMGPROXY_AUTOQUALITY_FORMAT_MAX`: ![pro](/assets/pro.svg) the maximum quality imgproxy can use per format, comma divided. Example: `jpeg=70,avif=40,webp=60`. When a value for the resulting format is not set, the `IMGPROXY_AUTOQUALITY_MAX` value is used. Default: `avif=50`
+* `IMGPROXY_AUTOQUALITY_ALLOWED_ERROR`: ![pro](/assets/pro.svg) the allowed `IMGPROXY_AUTOQUALITY_TARGET` error. Applicable only to `dssim` and `ml` methods. Default: 0.001
+* `IMGPROXY_AUTOQUALITY_MAX_RESOLUTION`: ![pro](/assets/pro.svg) when this value is greater then zero and the resultant resolution exceeds the value, autoquality won't be used. Default: 0
+* `IMGPROXY_AUTOQUALITY_JPEG_NET`: ![pro](/assets/pro.svg) the path to the neural network for JPEG.
+* `IMGPROXY_AUTOQUALITY_WEBP_NET`: ![pro](/assets/pro.svg) the path to the neural network for WebP.
+* `IMGPROXY_AUTOQUALITY_AVIF_NET`: ![pro](/assets/pro.svg) the path to the neural network for AVIF.
 
 ## AVIF/WebP support detection
 
@@ -199,10 +199,10 @@ imgproxy can use the `Width`, `Viewport-Width` or `DPR` HTTP headers to determin
 
 imgproxy Pro can extract specific video frames to create thumbnails. This feature is disabled by default, but can be enabled with `IMGPROXY_ENABLE_VIDEO_THUMBNAILS`.
 
-* `IMGPROXY_ENABLE_VIDEO_THUMBNAILS`: <i class='badge badge-pro'></i> when true, enables video thumbnail generation. Default: `false`
-* `IMGPROXY_VIDEO_THUMBNAIL_SECOND`: <i class='badge badge-pro'></i> the timestamp of the frame (in seconds) that will be used for a thumbnail. Default: 1
-* `IMGPROXY_VIDEO_THUMBNAIL_PROBE_SIZE`: <i class='badge badge-pro'></i> the maximum amount of bytes used to determine the format. Lower values can decrease memory usage but can produce inaccurate data, or even lead to errors. Default: 5000000
-* `IMGPROXY_VIDEO_THUMBNAIL_MAX_ANALYZE_DURATION`: <i class='badge badge-pro'></i> the maximum number of milliseconds used to get the stream info. Lower values can decrease memory usage but can produce inaccurate data, or even lead to errors. When set to 0, the heuristic is used. Default: 0
+* `IMGPROXY_ENABLE_VIDEO_THUMBNAILS`: ![pro](/assets/pro.svg) when true, enables video thumbnail generation. Default: `false`
+* `IMGPROXY_VIDEO_THUMBNAIL_SECOND`: ![pro](/assets/pro.svg) the timestamp of the frame (in seconds) that will be used for a thumbnail. Default: 1
+* `IMGPROXY_VIDEO_THUMBNAIL_PROBE_SIZE`: ![pro](/assets/pro.svg) the maximum amount of bytes used to determine the format. Lower values can decrease memory usage but can produce inaccurate data, or even lead to errors. Default: 5000000
+* `IMGPROXY_VIDEO_THUMBNAIL_MAX_ANALYZE_DURATION`: ![pro](/assets/pro.svg) the maximum number of milliseconds used to get the stream info. Lower values can decrease memory usage but can produce inaccurate data, or even lead to errors. When set to 0, the heuristic is used. Default: 0
 
 **⚠️Warning:** Though using `IMGPROXY_VIDEO_THUMBNAIL_PROBE_SIZE` and `IMGPROXY_VIDEO_THUMBNAIL_MAX_ANALYZE_DURATION` can lower the memory footprint of video thumbnail generation, they should be used in production only when you know what you're doing.
 
@@ -212,7 +212,7 @@ imgproxy Pro can extract specific video frames to create thumbnails. This featur
 * `IMGPROXY_WATERMARK_PATH`: the path to the locally stored image
 * `IMGPROXY_WATERMARK_URL`: the watermark image URL
 * `IMGPROXY_WATERMARK_OPACITY`: the watermark's base opacity
-* `IMGPROXY_WATERMARKS_CACHE_SIZE`: <i class='badge badge-pro'></i> custom watermarks cache size. When set to `0`, the watermark cache is disabled. 256 watermarks are cached by default.
+* `IMGPROXY_WATERMARKS_CACHE_SIZE`: ![pro](/assets/pro.svg) custom watermarks cache size. When set to `0`, the watermark cache is disabled. 256 watermarks are cached by default.
 
 Read more about watermarks in the [Watermark](watermark.md) guide.
 
@@ -220,23 +220,23 @@ Read more about watermarks in the [Watermark](watermark.md) guide.
 
 imgproxy Pro can apply an unsharpening mask to your images.
 
-* `IMGPROXY_UNSHARPENING_MODE`: <i class='badge badge-pro'></i> controls when an unsharpenning mask should be applied. The following modes are supported:
+* `IMGPROXY_UNSHARPENING_MODE`: ![pro](/assets/pro.svg) controls when an unsharpenning mask should be applied. The following modes are supported:
   * `auto`: _(default)_ apply an unsharpening mask only when an image is downscaled and the `sharpen` option has not been set.
   * `none`: the unsharpening mask is not applied.
   * `always`: always applies the unsharpening mask.
-* `IMGPROXY_UNSHARPENING_WEIGHT`: <i class='badge badge-pro'></i> a floating-point number that defines how neighboring pixels will affect the current pixel. The greater the value, the sharper the image. This value should be greater than zero. Default: `1`
-* `IMGPROXY_UNSHARPENING_DIVIDOR`: <i class='badge badge-pro'></i> a floating-point number that defines the unsharpening strength. The lesser the value, the sharper the image. This value be greater than zero. Default: `24`
+* `IMGPROXY_UNSHARPENING_WEIGHT`: ![pro](/assets/pro.svg) a floating-point number that defines how neighboring pixels will affect the current pixel. The greater the value, the sharper the image. This value should be greater than zero. Default: `1`
+* `IMGPROXY_UNSHARPENING_DIVIDOR`: ![pro](/assets/pro.svg) a floating-point number that defines the unsharpening strength. The lesser the value, the sharper the image. This value be greater than zero. Default: `24`
 
 ## Object detection
 
 imgproxy can detect objects on the image and use them to perform smart cropping, to blur the detections, or to draw the detections.
 
-* `IMGPROXY_OBJECT_DETECTION_CONFIG`: <i class='badge badge-pro'></i> the path to the neural network config. Default: blank
-* `IMGPROXY_OBJECT_DETECTION_WEIGHTS`: <i class='badge badge-pro'></i> the path to the neural network weights. Default: blank
-* `IMGPROXY_OBJECT_DETECTION_CLASSES`: <i class='badge badge-pro'></i> the path to the text file with the classes names, one per line. Default: blank
-* `IMGPROXY_OBJECT_DETECTION_NET_SIZE`: <i class='badge badge-pro'></i> the size of the neural network input. The width and the heights of the inputs should be the same, so this config value should be a single number. Default: 416
-* `IMGPROXY_OBJECT_DETECTION_CONFIDENCE_THRESHOLD`: <i class='badge badge-pro'></i> detections with confidences below this value will be discarded. Default: 0.2
-* `IMGPROXY_OBJECT_DETECTION_NMS_THRESHOLD`: <i class='badge badge-pro'></i> non-max supression threshold. Don't change this if you don't know what you're doing. Default: 0.4
+* `IMGPROXY_OBJECT_DETECTION_CONFIG`: ![pro](/assets/pro.svg) the path to the neural network config. Default: blank
+* `IMGPROXY_OBJECT_DETECTION_WEIGHTS`: ![pro](/assets/pro.svg) the path to the neural network weights. Default: blank
+* `IMGPROXY_OBJECT_DETECTION_CLASSES`: ![pro](/assets/pro.svg) the path to the text file with the classes names, one per line. Default: blank
+* `IMGPROXY_OBJECT_DETECTION_NET_SIZE`: ![pro](/assets/pro.svg) the size of the neural network input. The width and the heights of the inputs should be the same, so this config value should be a single number. Default: 416
+* `IMGPROXY_OBJECT_DETECTION_CONFIDENCE_THRESHOLD`: ![pro](/assets/pro.svg) detections with confidences below this value will be discarded. Default: 0.2
+* `IMGPROXY_OBJECT_DETECTION_NMS_THRESHOLD`: ![pro](/assets/pro.svg) non-max supression threshold. Don't change this if you don't know what you're doing. Default: 0.4
 
 ## Fallback image
 
@@ -247,7 +247,7 @@ You can set up a fallback image that will be used in case imgproxy is unable to
 * `IMGPROXY_FALLBACK_IMAGE_URL`: the fallback image URL
 * `IMGPROXY_FALLBACK_IMAGE_HTTP_CODE`: the HTTP code for the fallback image response. When set to zero, imgproxy will respond with the usual HTTP code. Default: `200`
 * `IMGPROXY_FALLBACK_IMAGE_TTL`: a duration (in seconds) sent via the `Expires` and `Cache-Control: max-age` HTTP headers when a fallback image was used. When blank or `0`, the value from `IMGPROXY_TTL` is used.
-* `IMGPROXY_FALLBACK_IMAGES_CACHE_SIZE`: <i class='badge badge-pro'></i> the size of custom fallback images cache. When set to `0`, the fallback image cache is disabled. 256 fallback images are cached by default.
+* `IMGPROXY_FALLBACK_IMAGES_CACHE_SIZE`: ![pro](/assets/pro.svg) the size of custom fallback images cache. When set to `0`, the fallback image cache is disabled. 256 fallback images are cached by default.
 
 ## Skip processing
 
@@ -425,5 +425,5 @@ imgproxy can send logs to syslog, but this feature is disabled by default. To en
 * `IMGPROXY_AUTO_ROTATE`: when `true`, imgproxy will automatically rotate images based on the EXIF Orientation parameter (if available in the image meta data). The orientation tag will be removed from the image in all cases. Default: `true`
 * `IMGPROXY_ENFORCE_THUMBNAIL`: when `true` and the source image has an embedded thumbnail, imgproxy will always use the embedded thumbnail instead of the main image. Currently, only thumbnails embedded in `heic` and `avif` are supported. Default: `false`
 * `IMGPROXY_RETURN_ATTACHMENT`: when `true`, response header `Content-Disposition` will include `attachment`. Default: `false`
-* `IMGPROXY_HEALTH_CHECK_MESSAGE`: <i class='badge badge-pro'></i> the content of the health check response. Default: `imgproxy is running`
+* `IMGPROXY_HEALTH_CHECK_MESSAGE`: ![pro](/assets/pro.svg) the content of the health check response. Default: `imgproxy is running`
 * `IMGPROXY_HEALTH_CHECK_PATH`: an additional path of the health check. Default: blank

docs/generating_the_url.md

@@ -62,7 +62,7 @@ Defines how imgproxy will resize the source image. Supported resizing types are:
 
 Default: `fit`
 
-### Resizing algorithm<i class='badge badge-pro'></i> :id=resizing-algorithm
+### Resizing algorithm![pro](/assets/pro.svg) :id=resizing-algorithm
 
 ```
 resizing_algorithm:%algorithm
@@ -200,7 +200,7 @@ Default: `ce:0:0`
 **Special gravities**:
 
 * `gravity:sm`: smart gravity. `libvips` detects the most "interesting" section of the image and considers it as the center of the resulting image. Offsets are not applicable here.
-* `gravity:obj:%class_name1:%class_name2:...:%class_nameN`: <i class='badge badge-pro'></i> object-oriented gravity. imgproxy [detects objects](object_detection.md) of provided classes on the image and calculates the resulting image center using their positions. If class names are omited, imgproxy will use all the detected objects.
+* `gravity:obj:%class_name1:%class_name2:...:%class_nameN`: ![pro](/assets/pro.svg) object-oriented gravity. imgproxy [detects objects](object_detection.md) of provided classes on the image and calculates the resulting image center using their positions. If class names are omited, imgproxy will use all the detected objects.
 * `gravity:fp:%x:%y`: the gravity focus point . `x` and `y` are floating point numbers between 0 and 1 that define the coordinates of the center of the resulting image. Treat 0 and 1 as right/left for `x` and top/bottom for `y`.
 
 ### Crop
@@ -296,7 +296,7 @@ With no arguments provided, disables any background manipulations.
 
 Default: disabled
 
-### Background alpha<i class='badge badge-pro'></i> :id=background-alpha
+### Background alpha![pro](/assets/pro.svg) :id=background-alpha
 
 ```
 background_alpha:%alpha
@@ -307,7 +307,7 @@ Adds an alpha channel to `background`. The value of `alpha` is a positive floati
 
 Default: 1
 
-### Adjust<i class='badge badge-pro'></i> :id=adjust
+### Adjust![pro](/assets/pro.svg) :id=adjust
 
 ```
 adjust:%brightness:%contrast:%saturation
@@ -316,7 +316,7 @@ a:%brightness:%contrast:%saturation
 
 This is a meta-option that defines the [brightness](#brightness), [contrast](#contrast), and [saturation](#saturation). All arguments are optional and can be omitted to use their default values.
 
-### Brightness<i class='badge badge-pro'></i> :id=brightness
+### Brightness![pro](/assets/pro.svg) :id=brightness
 
 ```
 brightness:%brightness
@@ -327,7 +327,7 @@ When set, imgproxy will adjust brightness of the resulting image. `brightness` i
 
 Default: 0
 
-### Contrast<i class='badge badge-pro'></i> :id=contrast
+### Contrast![pro](/assets/pro.svg) :id=contrast
 
 ```
 contrast:%contrast
@@ -338,7 +338,7 @@ When set, imgproxy will adjust the contrast of the resulting image. `contrast` i
 
 Default: 1
 
-### Saturation<i class='badge badge-pro'></i> :id=saturation
+### Saturation![pro](/assets/pro.svg) :id=saturation
 
 ```
 saturation:%saturation
@@ -384,7 +384,7 @@ When set, imgproxy will apply the pixelate filter to the resulting image. The va
 
 Default: disabled
 
-### Unsharpening<i class='badge badge-pro'></i> :id=unsharpening
+### Unsharpening![pro](/assets/pro.svg) :id=unsharpening
 
 ```
 unsharpening:%mode:%weight:%dividor
@@ -393,7 +393,7 @@ ush:%mode:%weight:%dividor
 
 Allows redefining unsharpening options. All arguments have the same meaning as [Unsharpening](configuration.md#unsharpening) configs. All arguments are optional and can be omitted.
 
-### Blur detections<i class='badge badge-pro'></i> :id=blur-detections
+### Blur detections![pro](/assets/pro.svg) :id=blur-detections
 
 ```
 blur_detections:%sigma:%class_name1:%class_name2:...:%class_nameN
@@ -404,7 +404,7 @@ imgproxy [detects objects](object_detection.md) of the provided classes and blur
 
 The value of `sigma` defines the size of the mask imgproxy will use.
 
-### Draw detections<i class='badge badge-pro'></i> :id=draw-detections
+### Draw detections![pro](/assets/pro.svg) :id=draw-detections
 
 ```
 draw_detections:%draw:%class_name1:%class_name2:...:%class_nameN
@@ -439,7 +439,7 @@ Places a watermark on the processed image.
 
 Default: disabled
 
-### Watermark URL<i class='badge badge-pro'></i> :id=watermark-url
+### Watermark URL![pro](/assets/pro.svg) :id=watermark-url
 
 ```
 watermark_url:%url
@@ -450,7 +450,7 @@ When set, imgproxy will use the image from the specified URL as a watermark. `ur
 
 Default: blank
 
-### Watermark text<i class='badge badge-pro'></i> :id=watermark-text
+### Watermark text![pro](/assets/pro.svg) :id=watermark-text
 
 ```
 watermark_text:%text
@@ -465,7 +465,7 @@ If you want to use a custom font, you need to put it in `/usr/share/fonts` insid
 
 Default: blank
 
-### Watermark Size<i class='badge badge-pro'></i> :id=watermark-size
+### Watermark Size![pro](/assets/pro.svg) :id=watermark-size
 
 ```
 watermark_size:%width:%height
@@ -482,7 +482,7 @@ When `%height` is set to `0`, imgproxy will calculate the height using the defin
 
 Default: `0:0`
 
-### Style<i class='badge badge-pro'></i> :id=style
+### Style![pro](/assets/pro.svg) :id=style
 
 ```
 style:%style
@@ -558,7 +558,7 @@ fq:%format1:%quality1:%format2:%quality2:...:%formatN:%qualityN
 
 Adds or redefines `IMGPROXY_FORMAT_QUALITY` values.
 
-### Autoquality<i class='badge badge-pro'></i> :id=autoquality
+### Autoquality![pro](/assets/pro.svg) :id=autoquality
 
 ```
 autoquality:%method:%target:%min_quality:%max_quality:%allowed_error
@@ -584,7 +584,7 @@ When set, imgproxy automatically degrades the quality of the image until the ima
 
 Default: 0
 
-### JPEG options<i class='badge badge-pro'></i> :id=jpeg-options
+### JPEG options![pro](/assets/pro.svg) :id=jpeg-options
 
 ```
 jpeg_options:%progressive:%no_subsample:%trellis_quant:%overshoot_deringing:%optimize_scans:%quant_table
@@ -593,7 +593,7 @@ jpgo:%progressive:%no_subsample:%trellis_quant:%overshoot_deringing:%optimize_sc
 
 Allows redefining JPEG saving options. All arguments have the same meaning as the [Advanced JPEG compression](configuration.md#advanced-jpeg-compression) configs. All arguments are optional and can be omitted.
 
-### PNG options<i class='badge badge-pro'></i> :id=png-options
+### PNG options![pro](/assets/pro.svg) :id=png-options
 
 ```
 png_options:%interlaced:%quantize:%quantization_colors
@@ -602,7 +602,7 @@ pngo:%interlaced:%quantize:%quantization_colors
 
 Allows redefining PNG saving options. All arguments have the same meaning as with the [Advanced PNG compression](configuration.md#advanced-png-compression) configs. All arguments are optional and can be omitted.
 
-<!-- ### GIF options<i class='badge badge-pro'></i> :id=gif-options
+<!-- ### GIF options![pro](/assets/pro.svg) :id=gif-options
 
 ```
 gif_options:%optimize_frames:%optimize_transparency
@@ -623,7 +623,7 @@ Specifies the resulting image format. Alias for the [extension](#extension) part
 
 Default: `jpg`
 
-### Page<i class='badge badge-pro'></i> :id=page
+### Page![pro](/assets/pro.svg) :id=page
 
 ```
 page:%page
@@ -634,7 +634,7 @@ When a source image supports pagination (PDF, TIFF) or animation (GIF, WebP), th
 
 Default: 0
 
-### Video thumbnail second<i class='badge badge-pro'></i> :id=video-thumbnail-second
+### Video thumbnail second![pro](/assets/pro.svg) :id=video-thumbnail-second
 
 ```
 video_thumbnail_second:%second
@@ -643,7 +643,7 @@ vts:%second
 
 Allows redefining `IMGPROXY_VIDEO_THUMBNAIL_SECOND` config.
 
-### Fallback image URL<i class='badge badge-pro'></i> :id=fallback-image-url
+### Fallback image URL![pro](/assets/pro.svg) :id=fallback-image-url
 
 You can use a custom fallback image by specifying its URL with the `fallback_image_url` processing option:
 

docs/getting_the_image_info.md

@@ -1,4 +1,4 @@
-# Getting the image info<i class='badge badge-pro'></i>
+# Getting the image info![pro](/assets/pro.svg)
 
 imgproxy can fetch and return a source image info without downloading the whole image.
 

docs/image_formats_support.md

@@ -14,9 +14,9 @@ At the moment, imgproxy supports only the most popular image formats:
 | HEIC   | `heic`    | Yes    | No     |
 | BMP    | `bmp`     | Yes    | Yes    |
 | TIFF   | `tiff`    | Yes    | Yes    |
-| PDF<i class='badge badge-pro'></i> | `pdf` | Yes | No |
-| MP4 (h264)<i class='badge badge-pro'></i> | `mp4` | [See notes](#video-thumbnails) | Yes |
-| Other video formats<i class='badge badge-pro'></i> | | [See notes](#video-thumbnails) | No |
+| PDF ![pro](/assets/pro.svg) | `pdf` | Yes | No |
+| MP4 (h264) ![pro](/assets/pro.svg) | `mp4` | [See notes](#video-thumbnails) | Yes |
+| Other video formats ![pro](/assets/pro.svg) | | [See notes](#video-thumbnails) | No |
 
 ## SVG support
 
@@ -36,13 +36,13 @@ Since the processing of animated images is a pretty heavy process, only one fram
 
 **📝Note:** imgproxy summarizes all frames resolutions while the checking source image resolution.
 
-## Converting animated images to MP4<i class='badge badge-pro'></i> :id=converting-animated-images-to-mp4
+## Converting animated images to MP4![pro](/assets/pro.svg) :id=converting-animated-images-to-mp4
 
 Animated image results can be converted to MP4 by specifying the `mp4` extension.
 
 Since MP4 requires use of a `<video>` tag instead of `<img>`, automatic conversion to MP4 is not provided.
 
-## Video thumbnails<i class='badge badge-pro'></i> :id=video-thumbnails
+## Video thumbnails![pro](/assets/pro.svg) :id=video-thumbnails
 
 If you provide a video as a source, imgproxy takes a specific frame to create a thumbnail. To do this, imgproxy downloads only the amount of data required to reach the needed frame.
 

docs/index.html

@@ -41,8 +41,9 @@
       <div class="loading__spinner"></div>
     </div>
   </div>
-  <script src="assets/docsify-edit-link.js"></script>
-  <script src="assets/docsify-gitter.js"></script>
+  <script src="/assets/docsify-edit-link.js"></script>
+  <script src="/assets/docsify-gitter.js"></script>
+  <script src="/assets/docsify-pro-badge.js"></script>
   <script>
     if (window.DOCSIFY_ROUTER_MODE === "history") {
       var clink = document.createElement("link")
@@ -68,6 +69,7 @@
       plugins: [
         EditOnGithubPlugin.create('https://github.com/imgproxy/imgproxy/blob/master/docs/'),
         GitterPlugin.create("imgproxy/imgproxy", "1775d3"),
+        ProBadgePlugin.create(),
         function (hook, vm) {
           hook.beforeEach(function () {
             if (clink) {

docs/object_detection.md

@@ -1,4 +1,4 @@
-# Object detection<i class='badge badge-pro'></i>
+# Object detection![pro](/assets/pro.svg)
 
 imgproxy can detect objects on the image and use them for smart cropping, bluring the detections, or drawing the detections.
 

docs/watermark.md

@@ -43,7 +43,7 @@ The available arguments are:
 * `x_offset`, `y_offset` - (optional) specify watermark offset by X and Y axes. When using `re` position, these values define the spacing between the tiles.
 * `scale` - (optional) a floating point number that defines the watermark size relative to the resulting image size. When set to `0` or omitted, the watermark size won't be changed.
 
-## Custom watermarks<i class='badge badge-pro'></i> :id=custom-watermarks
+## Custom watermarks![pro](/assets/pro.svg) :id=custom-watermarks
 
 You can use a custom watermark by specifying its URL with the `watermark_url` processing option: