Better pro badge usage in docs

CHANGELOG.md

@@ -25,7 +25,7 @@
 ### Added
 - `IMGPROXY_PROMETHEUS_NAMESPACE` config.
 - [strip_metadata](https://docs.imgproxy.net/#/generating_the_url_advanced?id=strip-metadata) processing option.
-- (pro) Configurable unsharpening. See [Unsharpening](https://docs.imgproxy.net/#/configuration?id=unsharpening) configs and [unsharpening](https://docs.imgproxy.net/#/generating_the_url_advanced?id=unsharpening-) processing option.
+- (pro) Configurable unsharpening. See [Unsharpening](https://docs.imgproxy.net/#/configuration?id=unsharpening) configs and [unsharpening](https://docs.imgproxy.net/#/generating_the_url_advanced?id=unsharpening) processing option.
 
 ### Changed
 - Better for libvips memory metrics for Prometheus.

docs/_sidebar.md

@@ -3,7 +3,7 @@
 * [Configuration](configuration)
 * [Generating the URL (Basic)](generating_the_url_basic)
 * [Generating the URL (Advanced)](generating_the_url_advanced)
-* [Getting the image info <img class="pro-badge" src="assets/pro.svg" alt="pro" />](getting_the_image_info)
+* [Getting the image info <img class='pro-badge' src='assets/pro.svg' alt='pro' />](getting_the_image_info)
 * [Signing the URL](signing_the_url)
 * [Watermark](watermark)
 * [Presets](presets)

docs/assets/style.css

@@ -90,6 +90,10 @@ body::before {
   vertical-align: middle;
 }
 
+h1 .pro-badge, h2 .pro-badge, h3 .pro-badge, h4 .pro-badge {
+  margin-left: .25ch;
+}
+
 .github-edit-btn {
   display: block;
   position: fixed;

docs/configuration.md

@@ -40,9 +40,9 @@ echo $(xxd -g 2 -l 64 -p /dev/random | tr -d '\n')
 * `IMGPROXY_PATH_PREFIX`: URL path prefix. Example: when set to `/abc/def`, imgproxy URL will be `/abc/def/%signature/%processing_options/%source_url`. Default: blank.
 * `IMGPROXY_USER_AGENT`: User-Agent header that will be sent with source image request. Default: `imgproxy/%current_version`;
 * `IMGPROXY_USE_ETAG`: when `true`, enables using [ETag](https://en.wikipedia.org/wiki/HTTP_ETag) HTTP header for HTTP cache control. Default: false;
-* `IMGPROXY_CUSTOM_REQUEST_HEADERS`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> 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`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> list of custom response headers, divided by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`;
-* `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> string that will be used as a custom headers separator. Default: `\;`;
+* `IMGPROXY_CUSTOM_REQUEST_HEADERS`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> 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`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> list of custom response headers, divided by `\;` (can be redefined by `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`). Example: `X-MyHeader1=Lorem\;X-MyHeader2=Ipsum`;
+* `IMGPROXY_CUSTOM_HEADERS_SEPARATOR`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> string that will be used as a custom headers separator. Default: `\;`;
 
 ## Security
 
@@ -91,11 +91,11 @@ Also you may want imgproxy to respond with the same error message that it writes
 ### Advanced JPEG compression
 
 * `IMGPROXY_JPEG_PROGRESSIVE`: when true, enables progressive JPEG compression. Default: false;
-* `IMGPROXY_JPEG_NO_SUBSAMPLE`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> when true, chrominance subsampling is disabled. This will improve quality at the cost of larger file size. Default: false;
-* `IMGPROXY_JPEG_TRELLIS_QUANT`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> when true, enables trellis quantisation for each 8x8 block. Reduces file size but increases compression time. Default: false;
-* `IMGPROXY_JPEG_OVERSHOOT_DERINGING`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> 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`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> when true, split 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`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> quantization table to use. Supported values are:
+* `IMGPROXY_JPEG_NO_SUBSAMPLE`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> when true, chrominance subsampling is disabled. This will improve quality at the cost of larger file size. Default: false;
+* `IMGPROXY_JPEG_TRELLIS_QUANT`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> when true, enables trellis quantisation for each 8x8 block. Reduces file size but increases compression time. Default: false;
+* `IMGPROXY_JPEG_OVERSHOOT_DERINGING`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> 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`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> when true, split 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`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> 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;
@@ -116,8 +116,8 @@ Also you may want imgproxy to respond with the same error message that it writes
 
 ### Advanced GIF compression
 
-* `IMGPROXY_GIF_OPTIMIZE_FRAMES`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> when true, enables GIF frames optimization. This may produce a smaller result, but may increase compression time.
-* `IMGPROXY_GIF_OPTIMIZE_TRANSPARENCY`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> when true, enables GIF transparency optimization. This may produce a smaller result, but may increase compression time.
+* `IMGPROXY_GIF_OPTIMIZE_FRAMES`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> when true, enables GIF frames optimization. This may produce a smaller result, but may increase compression time.
+* `IMGPROXY_GIF_OPTIMIZE_TRANSPARENCY`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> when true, enables GIF transparency optimization. This may produce a smaller result, but may increase compression time.
 
 ## WebP support detection
 
@@ -142,10 +142,10 @@ imgproxy can use the `Width`, `Viewport-Width` or `DPR` HTTP headers to determin
 
 imgproxy Pro can extract specific frames of videos to create thumbnails. The feature is disabled by default, but can be enabled with `IMGPROXY_ENABLE_VIDEO_THUMBNAILS`.
 
-* `IMGPROXY_ENABLE_VIDEO_THUMBNAILS`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> then true, enables video thumbnails generation. Default: false;
-* `IMGPROXY_VIDEO_THUMBNAIL_SECOND`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> the timestamp of the frame in seconds that will be used for a thumbnail. Default: 1.
-* `IMGPROXY_VIDEO_THUMBNAIL_PROBE_SIZE`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> 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`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> the maximum of milliseconds used to get the stream info. Low 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`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> then true, enables video thumbnails generation. Default: false;
+* `IMGPROXY_VIDEO_THUMBNAIL_SECOND`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> the timestamp of the frame in seconds that will be used for a thumbnail. Default: 1.
+* `IMGPROXY_VIDEO_THUMBNAIL_PROBE_SIZE`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> 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`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> the maximum of milliseconds used to get the stream info. Low 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 thumbnails generation, you should use them in production only when you know what are you doing.
 
@@ -155,7 +155,7 @@ imgproxy Pro can extract specific frames of videos to create thumbnails. The fea
 * `IMGPROXY_WATERMARK_PATH`: path to the locally stored image;
 * `IMGPROXY_WATERMARK_URL`: watermark image URL;
 * `IMGPROXY_WATERMARK_OPACITY`: watermark base opacity;
-* `IMGPROXY_WATERMARKS_CACHE_SIZE`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> size of custom watermarks cache. When set to `0`, watermarks cache is disabled. By default 256 watermarks are cached.
+* `IMGPROXY_WATERMARKS_CACHE_SIZE`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> size of custom watermarks cache. When set to `0`, watermarks cache is disabled. By default 256 watermarks are cached.
 
 Read more about watermarks in the [Watermark](watermark.md) guide.
 
@@ -163,12 +163,12 @@ Read more about watermarks in the [Watermark](watermark.md) guide.
 
 imgproxy Pro can apply unshapening mask to your images.
 
-* `IMGPROXY_UNSHARPENING_MODE`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> controls when unsharpenning mask should be applied. The following modes are supported:
+* `IMGPROXY_UNSHARPENING_MODE`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> controls when unsharpenning mask should be applied. The following modes are supported:
   * `auto`: _(default)_ apply unsharpening mask only when image is downscaled and `sharpen` option is not set.
   * `none`: don't apply the unsharpening mask.
   * `always`: always apply the unsharpening mask.
-* `IMGPROXY_UNSHARPENING_WEIGHT`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> a floating-point number that defines how neighbor pixels will affect the current pixel. Greater the value - sharper the image. Should be greater than zero. Default: `1`.
-* `IMGPROXY_UNSHARPENING_DIVIDOR`: <img class="pro-badge" src="assets/pro.svg" alt="pro" /> a floating-point number that defines the unsharpening strength. Lesser the value - sharper the image. Should be greater than zero. Default: `24`.
+* `IMGPROXY_UNSHARPENING_WEIGHT`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> a floating-point number that defines how neighbor pixels will affect the current pixel. Greater the value - sharper the image. Should be greater than zero. Default: `1`.
+* `IMGPROXY_UNSHARPENING_DIVIDOR`: <img class='pro-badge' src='assets/pro.svg' alt='pro' /> a floating-point number that defines the unsharpening strength. Lesser the value - sharper the image. Should be greater than zero. Default: `24`.
 
 ## Fallback image
 

docs/generating_the_url_advanced.md

@@ -64,7 +64,7 @@ Defines how imgproxy will resize the source image. Supported resizing types are:
 
 Default: `fit`
 
-#### Resizing algorithm <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Resizing algorithm<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 resizing_algorithm:%algorithm
@@ -250,7 +250,7 @@ With no arguments provided, disables any background manipulations.
 
 Default: disabled
 
-#### Background alpha <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Background alpha<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 background_alpha:%alpha
@@ -261,7 +261,7 @@ Adds alpha channel to `background`. `alpha` is a positive floating point number
 
 Default: 1
 
-#### Adjust <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Adjust<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 adjust:%brightness:%contrast:%saturation
@@ -270,7 +270,7 @@ a:%brightness:%contrast:%saturation
 
 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 <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Brightness<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 brightness:%brightness
@@ -281,7 +281,7 @@ When set, imgproxy will adjust brightness of the resulting image. `brightness` i
 
 Default: 0
 
-#### Contrast <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Contrast<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 contrast:%contrast
@@ -292,7 +292,7 @@ When set, imgproxy will adjust contrast of the resulting image. `contrast` is a
 
 Default: 1
 
-#### Saturation <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Saturation<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 saturation:%saturation
@@ -327,7 +327,7 @@ As an approximate guideline, use 0.5 sigma for 4 pixels/mm (display resolution),
 
 Default: disabled
 
-#### Pixelate <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Pixelate<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 pixelate:%size
@@ -338,7 +338,7 @@ When set, imgproxy will apply the pixelate filter to the resulting image. `size`
 
 Default: disabled
 
-#### Unsharpening <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Unsharpening<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 unsharpening:%mode:%weight:%dividor
@@ -373,7 +373,7 @@ Puts watermark on the processed image.
 
 Default: disabled
 
-#### Watermark URL <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Watermark URL<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 watermark_url:%url
@@ -384,7 +384,7 @@ When set, imgproxy will use the image from the specified URL as a watermark. `ur
 
 Default: blank
 
-#### Style <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Style<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 style:%style
@@ -395,7 +395,7 @@ When set, imgproxy will prepend `<style>` node with provided content to the `<sv
 
 Default: blank
 
-#### JPEG options <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### JPEG options<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 jpeg_options:%progressive:%no_subsample:%trellis_quant:%overshoot_deringing:%optimize_scans:%quant_table
@@ -404,7 +404,7 @@ jpgo:%progressive:%no_subsample:%trellis_quant:%overshoot_deringing:%optimize_sc
 
 Allows redefining JPEG saving options. All arguments have the same meaning as [Advanced JPEG compression](configuration.md#advanced-jpeg-compression) configs. All arguments are optional and can be omitted.
 
-#### PNG options <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### PNG options<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 png_options:%png_interlaced:%png_quantize:%png_quantization_colors
@@ -413,7 +413,7 @@ pngo:%png_interlaced:%png_quantize:%png_quantization_colors
 
 Allows redefining PNG saving options. All arguments have the same meaning as [Advanced PNG compression](configuration.md#advanced-png-compression) configs. All arguments are optional and can be omitted.
 
-#### GIF options <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### GIF options<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 gif_options:%gif_optimize_frames:%gif_optimize_transparency
@@ -422,7 +422,7 @@ gifo:%gif_optimize_frames:%gif_optimize_transparency
 
 Allows redefining GIF saving options. All arguments have the same meaning as [Advanced GIF compression](configuration.md#advanced-gif-compression) configs. All arguments are optional and can be omitted.
 
-#### Page <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Page<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 page:%page
@@ -433,7 +433,7 @@ When source image supports pagination (PDF, TIFF) or animation (GIF, WebP), this
 
 Default: 0
 
-#### Video thumbnail second <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+#### Video thumbnail second<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 ```
 video_thumbnail_second:%second

docs/getting_the_image_info.md

@@ -1,4 +1,4 @@
-# Getting the image info <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+# Getting the image info<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 imgproxy can fetch and return the source image info without downloading the whole image.
 

docs/image_formats_support.md

@@ -13,9 +13,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 <img class="pro-badge" src="assets/pro.svg" alt="pro" /> | `pdf` | Yes | No |
-| MP4 (h264) <img class="pro-badge" src="assets/pro.svg" alt="pro" /> | `mp4` | [See notes](#video-thumbnails-) | Yes |
-| Other video formats <img class="pro-badge" src="assets/pro.svg" alt="pro" /> | | [See notes](#video-thumbnails-) | No |
+| PDF <img class='pro-badge' src='assets/pro.svg' alt='pro' /> | `pdf` | Yes | No |
+| MP4 (h264) <img class='pro-badge' src='assets/pro.svg' alt='pro' /> | `mp4` | [See notes](#video-thumbnails) | Yes |
+| Other video formats <img class='pro-badge' src='assets/pro.svg' alt='pro' /> | | [See notes](#video-thumbnails) | No |
 
 ## GIF support
 
@@ -53,13 +53,13 @@ Since processing of animated images is pretty heavy, only one frame is processed
 
 **📝Note:** imgproxy summarizes all frames resolutions while checking source image resolution.
 
-## Converting animated images to MP4 <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+## Converting animated images to MP4<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 Animated images results can be converted to MP4 by specifying `mp4` extension.
 
 Since MP4 requires usage of a `<video>` tag instead of `<img>`, automatic conversion to MP4 is not provided.
 
-## Video thumbnails <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+## Video thumbnails<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 If you provide a video as a source, imgproxy takes its specific frame to create a thumbnail. Doing this imgproxy downloads only the amount of data required to reach the needed frame.
 

docs/watermark.md

@@ -43,7 +43,7 @@ Where arguments are:
 * `x_offset`, `y_offset` - (optional) specify watermark offset by X and Y axes. Not applicable to `re` position;
 * `scale` - (optional) floating point number that defines watermark size relative to the resulting image size. When set to `0` or omitted, watermark size won't be changed.
 
-## Custom watermarks <img class="pro-badge" src="assets/pro.svg" alt="pro" />
+## Custom watermarks<img class='pro-badge' src='assets/pro.svg' alt='pro' />
 
 You can use a custom watermark specifying its URL with `watermark_url` processing option: