docs: modify extension of files with react components to .mdx (#158)

Author: EscapedGibbon

docs/basics/basics.md renamed to docs/basics/basics.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-masks.md renamed to docs/basics/working-with-masks.mdx

@@ -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/basics/working-with-rois.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/comparison/addition.md

@@ -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/features.md renamed to docs/features/features.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/blur.md renamed to docs/features/filters/blur.mdx

@@ -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/derivative.md renamed to docs/features/filters/derivative.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/filters.md

@@ -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>