Add rehype-slug for same page linking

Author: timolins

site/next.config.js

@@ -1,14 +1,19 @@
 const withTM = require('next-transpile-modules')(['react-hot-toast']);
+const remarkSlugs = require('rehype-slug');
+
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: /.mdx?$/,
+  options: {
+    rehypePlugins: [remarkSlugs],
+  },
 });
 const withPlugins = require('next-compose-plugins');
 
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
       config.module.rules.push({
-        test: /\.svg$/,
+        test: /.svg$/,
         use: ['@svgr/webpack'],
       });
 

site/package-lock.json

@@ -20,6 +20,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-toast": "file:../",
+    "rehype-slug": "^4.0.1",
     "tailwindcss": "^2.1.2"
   },
   "devDependencies": {

site/package.json

@@ -46,7 +46,7 @@ toast('Hello World', {
 toast('Hello World');
 ```
 
-The most basic variant. It does not have an icon by default, but you can provide one via the options.
+The most basic variant. It does not have an icon by default, but you can provide one via the options. If you don't want any default styles, use `toast.custom()` instead.
 
 ### Success
 
@@ -78,7 +78,7 @@ Creates a custom notification with JSX without default styles.
 toast.loading('Waiting...');
 ```
 
-This will create a loading notification. Most likely, you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
+This will create a loading notification. Most likely, you want to update it afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
 
 ### Promise
 
@@ -153,19 +153,19 @@ You can dismiss all toasts at once, by leaving out the `toastId`.
 #### Dismiss all toasts at one
 
 ```js
-toast.dismiss()
+toast.dismiss();
 ```
 
 To remove toasts instantly without any animations, use `toast.remove`.
 
 #### Remove toasts instanstly
 
 ```js
-toast.remove(toastId)
+toast.remove(toastId);
 
 // or
 
-toast.remove()
+toast.remove();
 ```
 
 ### Update an existing toast

site/pages/docs/toast.mdx

@@ -11,30 +11,37 @@ export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
 
 This release is all about **flexibility**. It allows you to create the notification system of your dreams, even simpler. Before we dig deeper into the new APIs, check out what's included in this release:
 
-<div className="text-lg">
-<span style={{ margin: '10px' }}>✨</span> <span className="font-semibold">toast.custom()</span> <span className="text-toast-700">- Dispatch components as toast</span>
+<div className="">
+<span style={{ margin: '10px' }}>✨</span> <a href="#introducing-toastcustom" className="font-semibold">toast.custom()</a> <span className="">- Dispatch components as toast</span>
 <br />
 
-<span style={{ margin: '10px' }}>👀</span> <span className="font-semibold">
+<span style={{ margin: '10px' }}>👀</span> <a
+  href="#better-accessibility"
+  className="font-semibold"
+>
   Reduced-motion support
-</span> <span className="text-toast-700">
-  - Automatically adapts to system preference
-</span>
+</a> <span className="">- Automatically adapts to system preference</span>
 <br />
 
-<span style={{ margin: '10px' }}>🔀</span> <span className="font-semibold">
+<span style={{ margin: '10px' }}>🔀</span> <a
+  href="#per-toast-positioning"
+  className="font-semibold"
+>
   Individually position toasts{' '}
-</span> <span className="text-toast-700"></span>
+</a> <span className=""></span>
 <br />
-<span style={{ margin: '10px' }}>
-  🧈
-</span> <span className="font-semibold">Smoother exit animations</span> <span className="text-toast-700"></span>
+<span style={{ margin: '10px' }}>🧈</span> <a
+  href="#smoother-exit-animation"
+  className="font-semibold"
+>
+  Smoother exit animations
+</a> <span className=""></span>
 <br />
 
-<span style={{ margin: '10px' }}>⚙️</span> <span className="font-semibold">Custom Renderer API</span> <span className="text-toast-700">- Supply your own render function</span>
+<span style={{ margin: '10px' }}>⚙️</span> <a href="#custom-renderer-api" className="font-semibold">Custom Renderer API</a> <span className="">- Supply your own render function</span>
 </div>
 
-As well as a many other improvements and fixes.
+As well as a many [other improvements and fixes](#changelog).
 
 ## Introducing `toast.custom()`
 
@@ -136,7 +143,7 @@ The offset is now controlled by the Toaster and can be changed by overwriting th
 
 ## Custom Renderer API
 
-You can now use the [`<Toaster/>`](/docs/toaster) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
+You can now use the [`<Toaster/>`](/docs/toaster#using-a-custom-render-function) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
 
 This is a great alternative if you are using [`useToaster()`](/docs/use-toaster) to render create custom notfications.