docs: modify extension of files with react components to .mdx

docs/basics/working-with-images.md

@@ -8,14 +8,19 @@ In the context of digital technology and computing, images are represented as a
 
 - Currently ImageJS supports images with these characteristics:
 
-|                                  | TIFF             | JPEG    | PNG              | BMP      |
-| -------------------------------- | ---------------- | ------- | ---------------- | -------- |
-| **Bits per channel**             | 8 or 16 bits     | 8 bits  | 8 or 16 bits     | 1 bit    |
-| **Alpha channel**                | yes              | no      | yes              | no       |
-| **Lossy compression**            | can be either    | yes     | no               | no       |
-| **Color Model**                  | RGB or grayscale | RGB     | RGB or grayscale | N/A      |
-| **Can be loaded in this format** | ✅          | ✅ | ✅          | ❌ |
-| **Can be saved in this format**  | ❌         | ✅ | ✅          | ✅  |
+|                                  | TIFF                        | JPEG     | PNG[^1]                     | BMP                         |
+| -------------------------------- | --------------------------- | -------- | --------------------------- | --------------------------- |
+| **Can be loaded in this format** | ✅                     | ✅  | ✅                     | ✅                     |
+| **Can be saved in this format**  | ❌                    | ✅  | ✅                     | ✅                     |
+| **Bits per channel**             | 1, 8 or 16 bits             | 8 bits   | 1, 2, 4, 8 or 16 bits       | 1 or 8 bits                 |
+| **Alpha channel**                | ✅                     | ❌ | ✅                     | ✅                     |
+| **Palette images**               | ✅                     | ❌ | ✅                     | ❌                    |
+| **Lossy compression**            | can be either               | ✅  | ❌                    | ❌                    |
+| **Color Model**                  | Binary[^2],RGB or grayscale | RGB      | Binary[^2],RGB or grayscale | Binary[^2],RGB or grayscale |
+
+[^1]: ImageJS can also **decode** [APNG images](https://en.wikipedia.org/wiki/APNG).
+
+[^2]: While binary images can be decoded, for technical reasons image is decoded as a grayscale image.
 
 ### Image coordinates
 

docs/basics/working-with-masks.md → docs/basics/working-with-masks.mdx

@@ -1,5 +1,5 @@
-import ThresholdMaskDemo from './demos/thresholdMask.demo.tsx'
-import CannyMaskDemo from './demos/cannyEdgeMask.demo.tsx'
+import ThresholdMaskDemo from './demos/thresholdMask.demo.tsx';
+import CannyMaskDemo from './demos/cannyEdgeMask.demo.tsx';
 
 # Working with Masks
 
@@ -23,7 +23,7 @@ const mask = new Mask(500, 500); // Creates a simple mask filled with 0s of size
 
 ### Use `threshold()` method
 
-Another approach is to obtain a mask by using [`threshold` method](../features/operations/threshold.md 'internal link on threshold') on an image.
+Another approach is to obtain a mask by using [`threshold` method](../features/operations/threshold.mdx 'internal link on threshold') on an image.
 
 ```ts
 const mask = image.threshold(); // returns a mask
@@ -39,7 +39,7 @@ In most cases, thresholding is your go-to method to get a mask from an image.
 
 ### Use `cannyEdgeDetector()` method
 
-There is also a third way to get a mask. It is to use [`cannyEdgeDetector` method](../features/morphology/canny-edge-detector.md 'internal link on canny edge detector').
+There is also a third way to get a mask. It is to use [`cannyEdgeDetector` method](../features/morphology/canny-edge-detector.mdx 'internal link on canny edge detector').
 
 ```ts
 const mask = image.cannyEdgeDetector(); // returns a mask

docs/basics/working-with-rois.md

@@ -4,7 +4,7 @@ _A region of interest (ROI) represents an area of contiguous pixels within the d
 
 There are currently two ways ROIs can be generated in ImageJS:
 
-- From [masks](./working-with-masks.md 'internal link on working with mask') by identifying contiguous black or white pixels within it.
+- From [masks](./working-with-masks.mdx 'internal link on working with mask') by identifying contiguous black or white pixels within it.
 <!-- TODO: add links to the relevant sections once they exist -->
 - By identifying starting points of interest (for example by finding and filtering local extrema) and running the [watershed algorithm](../features/operations/watershed.md 'internal link on watershed') on them.
 - By identifying starting points of interest (for example by finding and filtering local extrema) and running the [watershed algorithm](../features/operations/watershed.md 'internal link on watershed') on them.

docs/features/comparison/addition.md

@@ -8,7 +8,7 @@ _Add two images together._
 
 [🖼️ Image options and parameters of `add` method](https://api.image-js.org/classes/index.Image.html#add)
 
-`add` method, opposed to [subtraction](./subtraction.md 'internal link on subtract'), takes another Image and makes an addition between each respective pixel value.
+`add` method, opposed to [subtraction](./subtraction 'internal link on subtract'), takes another Image and makes an addition between each respective pixel value.
 It works like this:
 
 ```ts

docs/features/filters/blur.md → docs/features/filters/blur.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 30
 ---
 
-import BlurDemo from './demos/blur.demo.tsx'
+import BlurDemo from './demos/blur.demo.tsx';
 
 # Blur
 
@@ -15,7 +15,7 @@ Blur, also known as average blur or box blur, is a simple image processing techn
 <BlurDemo />
 
 Box blur is particularly effective in reducing [salt-and-pepper](https://en.wikipedia.org/wiki/Salt-and-pepper_noise 'wikipedia link on salt and pepper noise') noise (random black and white pixels) and minor imperfections in an image. However, it also leads to loss of finer details, so the choice of [kernel](../../glossary.md#kernel 'glossary link on kernel') size is important.
-More advanced blurring techniques, such as [Gaussian blur](./gaussian-blur.md 'internal link to gaussian blur') or [bilateral filter](https://en.wikipedia.org/wiki/Bilateral_filter 'wikipedia link on bilateral filters'), are often used for better results in various applications.
+More advanced blurring techniques, such as [Gaussian blur](./gaussian-blur 'internal link to gaussian blur') or [bilateral filter](https://en.wikipedia.org/wiki/Bilateral_filter 'wikipedia link on bilateral filters'), are often used for better results in various applications.
 
 ### Kinds of images compatible with algorithm
 

docs/features/filters/derivative.md → docs/features/filters/derivative.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 70
 ---
 
-import DerivativeDemo from './demos//derivative.demo.tsx'
+import DerivativeDemo from './demos//derivative.demo.tsx';
 
 # Derivative
 

docs/features/filters/filters.md

@@ -8,14 +8,14 @@ sidebar_position: 0
 
 ### Methods
 
-| Can be applied on                                                              | Images  | Masks    |
-| ------------------------------------------------------------------------------ | ------- | -------- |
-| [Invert(`invert`)](./invert.md 'internal link on invert')                      | ✅ | ✅  |
-| [Grayscale(`grey`)](./grayscale.md 'internal link on grayscale')               | ✅ | ❌ |
-| [Gradient(`gradient`)](./gradient.md 'internal link on gradient')              | ✅ | ❌ |
-| [Derivative(`derivative`)](./derivative.md 'internal link on derivative')      | ✅ | ❌ |
-| [Median(`median`)](./median.md 'internal link on median')                      | ✅ | ❌ |
-| [Pixelate(`pixelate`)](./pixelate.md 'internal link on pixelate')              | ✅ | ❌ |
-| [Blur(`blur`)](./blur.md 'internal link on blur')                              | ✅ | ❌ |
-| [Gaussian(`gaussianBlur`)](./gaussian-blur.md 'internal link on gaussianBlur') | ✅ | ❌ |
-| [Level(`level`)](./level.md 'internal link on level')                          | ✅ | ❌ |
+| Can be applied on                                                               | Images  | Masks    |
+| ------------------------------------------------------------------------------- | ------- | -------- |
+| [Invert(`invert`)](./invert.mdx 'internal link on invert')                      | ✅ | ✅  |
+| [Grayscale(`grey`)](./grayscale.mdx 'internal link on grayscale')               | ✅ | ❌ |
+| [Gradient(`gradient`)](./gradient.mdx 'internal link on gradient')              | ✅ | ❌ |
+| [Derivative(`derivative`)](./derivative.mdx 'internal link on derivative')      | ✅ | ❌ |
+| [Median(`median`)](./median.mdx 'internal link on median')                      | ✅ | ❌ |
+| [Pixelate(`pixelate`)](./pixelate.mdx 'internal link on pixelate')              | ✅ | ❌ |
+| [Blur(`blur`)](./blur.mdx 'internal link on blur')                              | ✅ | ❌ |
+| [Gaussian(`gaussianBlur`)](./gaussian-blur.mdx 'internal link on gaussianBlur') | ✅ | ❌ |
+| [Level(`level`)](./level.mdx 'internal link on level')                          | ✅ | ❌ |

docs/features/filters/gaussian-blur.md → docs/features/filters/gaussian-blur.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 40
 ---
 
-import GaussianBlurDemo from './demos/gaussianBlur.demo.tsx'
+import GaussianBlurDemo from './demos/gaussianBlur.demo.tsx';
 
 # Gaussian Blur
 
@@ -61,7 +61,7 @@ The size of the Gaussian kernel and the standard deviation parameter (which cont
 
 Here's how Gaussian blur is implemented in ImageJS:
 
-_Kernel Definition_: The core concept of Gaussian blur involves [convolving](../../glossary.md#convolution 'glossary link on convolution') the image with a Gaussian [kernel](../../glossary.md#kernel 'glossary link on kernel'), also known as a Gaussian filter or mask. This kernel's values are arranged in a way that creates a symmetric, bell-shaped pattern around the center of the kernel to approximate Gaussian function.
+_Kernel Definition_: The core concept of Gaussian blur involves [convolving](../../glossary#convolution 'glossary link on convolution') the image with a Gaussian [kernel](../../glossary.md#kernel 'glossary link on kernel'), also known as a Gaussian filter or mask. This kernel's values are arranged in a way that creates a symmetric, bell-shaped pattern around the center of the kernel to approximate Gaussian function.
 
 _Convolution Operation_: The Gaussian kernel is applied to the image using a convolution operation. This involves placing the kernel's center over each pixel in the image and performing element-wise multiplication of the kernel's values with the corresponding pixel values in the neighborhood. The results of these multiplications are summed up to compute the new value for the central pixel.
 

docs/features/filters/gradient.md → docs/features/filters/gradient.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 60
 ---
 
-import GradientDemo from './demos/gradient.demo.tsx'
+import GradientDemo from './demos/gradient.demo.tsx';
 
 # Gradient
 
@@ -49,7 +49,7 @@ Keep in mind that gradient filters can be sensitive to noise and might result in
 
 Here's how gradient filter is implemented in ImageJS:
 
-_Grayscale Conversion_: Before applying a gradient filter, the color image is converted into [grayscale](./grayscale.md 'internal link on grayscale filter'). This simplifies the processing by reducing the image to a single channel representing pixel intensities.
+_Grayscale Conversion_: Before applying a gradient filter, the color image is converted into [grayscale](./grayscale.mdx 'internal link on grayscale filter'). This simplifies the processing by reducing the image to a single channel representing pixel intensities.
 
 _Kernel Operators_: Gradient filter consists of small convolution [kernels](../../glossary.md#kernel 'glossary link on kernel'). Normally, one for detecting horizontal changes and another for vertical changes, however user might indicate only one kernel to check only one of directions. These kernels are usually 3x3 matrices of numerical weights.
 
@@ -60,7 +60,7 @@ _Gradient Magnitude and Direction_: For each pixel, the gradient magnitude is ca
 _Edge Detection_: The gradient magnitude values are used to identify regions of rapid intensity change, which correspond to edges in the image. Higher gradient magnitude values indicate stronger edges.
 
 :::tip
-_Thresholding_: To further refine the edges detected, a [thresholding](../operations/threshold.md 'internal link on threshold filter') step is often applied. Pixels with gradient magnitudes below a certain threshold are considered as non-edges, while those above the threshold are considered edges. This helps in reducing noise and emphasizing significant edges.
+_Thresholding_: To further refine the edges detected, a [thresholding](../operations/threshold.mdx 'internal link on threshold filter') step is often applied. Pixels with gradient magnitudes below a certain threshold are considered as non-edges, while those above the threshold are considered edges. This helps in reducing noise and emphasizing significant edges.
 :::
 
 </details>

docs/features/filters/grayscale.md → docs/features/filters/grayscale.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 20
 ---
 
-import GrayDemo from './demos/grayscale.demo.tsx'
+import GrayDemo from './demos/grayscale.demo.tsx';
 
 # Grayscale
 

docs/features/filters/invert.md → docs/features/filters/invert.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 10
 ---
 
-import InvertDemo from './demos/invert.demo.tsx'
+import InvertDemo from './demos/invert.demo.tsx';
 
 # Invert
 

docs/features/filters/level.md → docs/features/filters/level.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 80
 ---
 
-import LevelDemo from './demos/level.demo.tsx'
+import LevelDemo from './demos/level.demo.tsx';
 
 # Level
 

docs/features/filters/median.md → docs/features/filters/median.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 50
 ---
 
-import MedianDemo from './demos/median.demo.tsx'
+import MedianDemo from './demos/median.demo.tsx';
 
 # Median
 

docs/features/filters/pixelate.md → docs/features/filters/pixelate.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 90
 ---
 
-import PixelateDemo from './demos/pixelate.demo.tsx'
+import PixelateDemo from './demos/pixelate.demo.tsx';
 
 # Pixelate
 

docs/features/geometry/flip.md → docs/features/geometry/flip.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 30
 ---
 
-import FlipDemo from './demos/flip.demo.tsx'
+import FlipDemo from './demos/flip.demo.tsx';
 
 # Flip
 

docs/features/geometry/geometry.md

@@ -10,9 +10,9 @@ Geometric operations in image processing involve transforming the spatial coordi
 
 | Can be applied on                                                                                                           | Images  | Masks    |
 | --------------------------------------------------------------------------------------------------------------------------- | ------- | -------- |
-| [Flip(`flip`)](./flip.md 'internal link on flip')                                                                           | ✅ | ❌ |
-| [Resize(`resize`)](./resize.md 'internal link on resize')                                                                   | ✅ | ❌ |
-| [Rotate(`rotate`)](./rotate.md 'internal link on rotate')                                                                   | ✅ | ❌ |
-| [Transform(`transform`)](./transform.md 'internal link on transform')                                                       | ✅ | ❌ |
-| [Transform and rotate(`transformRotate`)](./transform-and-rotate 'internal link on transformRotate')                        | ✅ | ❌ |
+| [Flip(`flip`)](./flip.mdx 'internal link on flip')                                                                          | ✅ | ❌ |
+| [Resize(`resize`)](./resize.mdx 'internal link on resize')                                                                  | ✅ | ❌ |
+| [Rotate(`rotate`)](./rotate.mdx 'internal link on rotate')                                                                  | ✅ | ❌ |
+| [Transform(`transform`)](./transform.mdx 'internal link on transform')                                                      | ✅ | ❌ |
+| [Transform and rotate(`transformRotate`)](./transform-and-rotate.mdx 'internal link on transformRotate')                    | ✅ | ❌ |
 | [Get perspective warp matrix(`getPerspectiveWarp`)](./get-perspective-warp-matrix.md 'internal link on getPerspectiveWarp') | -       | -        |

docs/features/geometry/resize.md → docs/features/geometry/resize.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 10
 ---
 
-import ResizeDemo from './demos/resize.demo.tsx'
+import ResizeDemo from './demos/resize.demo.tsx';
 
 # Resize
 

docs/features/geometry/rotate.md → docs/features/geometry/rotate.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 20
 ---
 
-import RotateDemo from './demos/rotate.demo.tsx'
+import RotateDemo from './demos/rotate.demo.tsx';
 
 # Rotate
 

docs/features/geometry/transform-and-rotate.md → docs/features/geometry/transform-and-rotate.mdx

@@ -2,15 +2,15 @@
 sidebar_position: 50
 ---
 
-import TransRotateDemo from './demos/transformRotate.demo.tsx'
+import TransRotateDemo from './demos/transformRotate.demo.tsx';
 
 # Transform and Rotate
 
 _Rotates an image by any angle._
 
 [🖼️ Image options and parameters of `transformRotate` method](https://api.image-js.org/classes/index.Image.html#transformRotate)
 
-`transformRotate` method rotates image anti-clockwise at any angle that user sets. It applies the same principle as [transform](./transform.md 'internal link on transform demo') method, but user only needs to pass a rotation angle as a parameter instead of the whole matrix.
+`transformRotate` method rotates image anti-clockwise at any angle that user sets. It applies the same principle as [transform](./transform.mdx 'internal link on transform demo') method, but user only needs to pass a rotation angle as a parameter instead of the whole matrix.
 
 <TransRotateDemo />
 

docs/features/geometry/transform.md → docs/features/geometry/transform.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 40
 ---
 
-import TransformDemo from './demos/transform.demo.tsx'
+import TransformDemo from './demos/transform.demo.tsx';
 
 # Transform
 

docs/features/morphology/bottom-hat.md → docs/features/morphology/bottom-hat.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 60
 ---
 
-import BottomHatDemo from './demos/bottomHat.mask.demo.tsx'
+import BottomHatDemo from './demos/bottomHat.mask.demo.tsx';
 
 # Bottom Hat
 
@@ -11,7 +11,7 @@ _Enhances the fine details or small objects within an image by subtracting an op
 [🖼️ Image options and parameters of `bottomHat` method](https://api.image-js.org/classes/index.Image.html#bottomHat)  
 [🎭 Mask options and parameters of `bottomHat` method](https://api.image-js.org/classes/index.Mask.html#bottomHat)
 
-Similarly to [top hat](./top-hat.md 'internal link to top hat'), [bottom hat](https://en.wikipedia.org/wiki/Top-hat_transform 'wikipedia link to top hat') operation computes the difference between two images. However, if top hat was using [opening method](./opening.md 'internal link on open method'), bottom hat is using [closing method](./closing.md 'internal link on close method').
+Similarly to [top hat](./top-hat 'internal link to top hat'), [bottom hat](https://en.wikipedia.org/wiki/Top-hat_transform 'wikipedia link to top hat') operation computes the difference between two images. However, if top hat was using [opening method](./opening 'internal link on open method'), bottom hat is using [closing method](./closing 'internal link on close method').
 The purpose of bottom hat(or, as it is also called, _black-hat_) is to enhance and extract **darker** regions of the image.
 
 <BottomHatDemo />

docs/features/morphology/canny-edge-detector.md → docs/features/morphology/canny-edge-detector.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 80
 ---
 
-import CannyEdgeDemo from './demos/cannyEdgeDetector.demo.tsx'
+import CannyEdgeDemo from './demos/cannyEdgeDetector.demo.tsx';
 
 # Canny Edge Detector
 

docs/features/morphology/closing.md → docs/features/morphology/closing.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 40
 ---
 
-import CloseDemo from './demos/close.mask.demo.tsx'
+import CloseDemo from './demos/close.mask.demo.tsx';
 
 # Closing
 
@@ -11,7 +11,7 @@ _Combines a dilation filter followed by an erosion filter._
 [🖼️ Image options and parameters of `close` method](https://api.image-js.org/classes/index.Image.html#close)  
 [🎭 Mask options and parameters of `close` method](https://api.image-js.org/classes/index.Mask.html#close)
 
-Opposed to [opening](./opening.md 'internal link to open method'), [closing process](<https://en.wikipedia.org/wiki/Closing_(morphology)> 'wikipedia link on closing') first [erodes](./erosion.md 'internal link to erode method') an image and only then [dilates](./dilation.md 'internal link to dilate method') it.
+Opposed to [opening](./opening.mdx 'internal link to open method'), [closing process](<https://en.wikipedia.org/wiki/Closing_(morphology)> 'wikipedia link on closing') first [erodes](./erosion 'internal link to erode method') an image and only then [dilates](./dilation 'internal link to dilate method') it.
 It is a useful process for filling small holes in the image, while preserving the shape and size of large holes and objects.
 
 <CloseDemo />

docs/features/morphology/dilation.md → docs/features/morphology/dilation.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 20
 ---
 
-import DilateDemo from './demos/dilate.mask.demo.tsx'
+import DilateDemo from './demos/dilate.mask.demo.tsx';
 
 # Dilation