fix katex and fractions

Author: patrycjakalinska

packages/audiodocs/docs/guides/noise-generation.mdx

@@ -43,7 +43,7 @@ import WhiteNoiseSrc from '!!raw-loader!@site/src/examples/NoiseGeneration/White
 
 Pink noise, also known as 1/f noise (where "f" stands for frequency), is a type of signal or sound that has equal energy per octave. This means that the power spectral density (PSD) decreases inversely with frequency. In simpler terms, pink noise has more energy at lower frequencies and less energy at higher frequencies, which makes it sound softer and more balanced to the human ear than white noise.
 
-To generate pink noise, we will use the effects of a $\dfrac{-3dB}{3}$ filter using the [Paul Kellet's refined method](https://www.musicdsp.org/en/latest/Filters/76-pink-noise-filter.html)
+To generate pink noise, we will use the effects of a $\dfrac{-3dB}{octave}$ filter using the [Paul Kellet's refined method](https://www.musicdsp.org/en/latest/Filters/76-pink-noise-filter.html)
 
 ```tsx
 const createPinkNoise = () => {
@@ -87,6 +87,8 @@ import PinkNoiseSrc from '!!raw-loader!@site/src/examples/NoiseGeneration/PinkNo
 
 The last noise type I would like to describe is brownian noise (also known as Brown or red noise). Brownian noise is named after the Brownian motion phenomenon, where particles inside a fluid move randomly due to collisions with other particles. It relates to its sonic counterpart in that Brownian noise is characterized by a significant presence of low frequencies, with energy decreasing as the frequency increases. Brownian noise is believed to sound like waterfall.
 
+Brownian noise, similarly to pink one, decreases in power by $\dfrac{12dB}{octave}$ and sounds similar to waterfall. The implementation is taken from article by Zach Denton, [How to Generate Noise with the Web Audio API](https://noisehack.com/generate-noise-web-audio-api/):
+
 
 ```tsx
   const createBrownianNoise = () => {

packages/audiodocs/docusaurus.config.js

@@ -3,8 +3,8 @@
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
-const math = require('remark-math');
-const katex = require('rehype-katex');
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const webpack = require('webpack');
@@ -44,8 +44,8 @@ const config = {
           breadcrumbs: false,
           sidebarCollapsible: false,
           sidebarPath: require.resolve('./sidebars.js'),
-          remarkPlugins: [math],
-          rehypePlugins: [katex],
+          remarkPlugins: [remarkMath],
+          rehypePlugins: [rehypeKatex],
           editUrl:
             'https://github.com/software-mansion/react-native-audio-api/edit/main/packages/audiodocs/docs',
         },
@@ -63,10 +63,10 @@ const config = {
 
   stylesheets: [
     {
-      href: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.css',
+      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
       type: 'text/css',
       integrity:
-        'sha384-o3WH+1yEhq+grOgz1BVYTZPyTlMXrDxnjN1By9/ba94JqJhva6wFm2Hb+URQX53v',
+        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
       crossorigin: 'anonymous',
     },
   ],

packages/audiodocs/package.json

@@ -29,8 +29,8 @@
     "@emotion/styled": "^11.14.0",
     "@mdx-js/react": "^3.0.0",
     "@mui/material": "^7.1.0",
-    "@swmansion/t-rex-ui": "1.0.0",
     "@shopify/react-native-skia": "1.10.2",
+    "@swmansion/t-rex-ui": "1.0.0",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",
@@ -48,8 +48,8 @@
     "react-native-gesture-handler": "^2.16.0",
     "react-native-reanimated": "^3.8.1",
     "react-native-web": "^0.18.12",
-    "rehype-katex": "5",
-    "remark-math": "3",
+    "rehype-katex": "7",
+    "remark-math": "6",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
     "usehooks-ts": "^2.9.1"