From d1828441f70359009a80d18a846b0fc176f9409d Mon Sep 17 00:00:00 2001 From: Timo Lins Date: Mon, 31 May 2021 15:35:08 +0200 Subject: [PATCH] Add rehype-slug for same page linking --- site/next.config.js | 9 +++++-- site/package-lock.json | 50 +++++++++++++++++++++++++++++++---- site/package.json | 1 + site/pages/docs/toast.mdx | 10 +++---- site/pages/docs/version-2.mdx | 35 ++++++++++++++---------- 5 files changed, 79 insertions(+), 26 deletions(-) diff --git a/site/next.config.js b/site/next.config.js index f3c606f..65fd246 100644 --- a/site/next.config.js +++ b/site/next.config.js @@ -1,6 +1,11 @@ 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'); @@ -8,7 +13,7 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { return Object.assign({}, nextConfig, { webpack(config, options) { config.module.rules.push({ - test: /\.svg$/, + test: /.svg$/, use: ['@svgr/webpack'], }); diff --git a/site/package-lock.json b/site/package-lock.json index 84275fc..b1519da 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -3272,6 +3272,11 @@ } } }, + "emoji-regex": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz", + "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4=" + }, "emojis-list": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", @@ -3928,6 +3933,14 @@ "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=", "optional": true }, + "github-slugger": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz", + "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==", + "requires": { + "emoji-regex": ">=6.0.0 <=6.1.1" + } + }, "glob": { "version": "7.1.6", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", @@ -3991,6 +4004,11 @@ "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" }, + "goober": { + "version": "2.0.37", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.37.tgz", + "integrity": "sha512-wgj5C7IJX2+MyHZ4TgOA+hLL1mCDW+jGorQ5KCMLF1ofE9gQkfbo1s8txIrzIsAX65XRTm0qaipolId2KMYUkw==" + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -4127,6 +4145,16 @@ "web-namespaces": "^1.0.0" } }, + "hast-util-has-property": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.4.tgz", + "integrity": "sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg==" + }, + "hast-util-heading-rank": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-1.0.1.tgz", + "integrity": "sha512-P6Hq7RCky9syMevlrN90QWpqWDXCxwIVOfQR2rK6P4GpY4bqjKEuCzoWSRORZ7vz+VgRpLnXimh+mkwvVFjbyQ==" + }, "hast-util-parse-selector": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", @@ -4161,6 +4189,11 @@ "zwitch": "^1.0.0" } }, + "hast-util-to-string": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz", + "integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==" + }, "hastscript": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", @@ -10106,11 +10139,6 @@ "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" }, - "goober": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.18.tgz", - "integrity": "sha512-XaYq9GqRkWHS0DFPQZQLhrKGWWbiz+ydiEbMRN8eGJZ7enDjmWnRv3RWn5RwdukjnHUA6b/AQcf4QWjellKOCw==" - }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -15073,6 +15101,18 @@ } } }, + "rehype-slug": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-4.0.1.tgz", + "integrity": "sha512-KIlJALf9WfHFF21icwTd2yI2IP+RQRweaxH9ChVGQwRYy36+hiomG4ZSe0yQRyCt+D/vE39LbAcOI/h4O4GPhA==", + "requires": { + "github-slugger": "^1.1.1", + "hast-util-has-property": "^1.0.0", + "hast-util-heading-rank": "^1.0.0", + "hast-util-to-string": "^1.0.0", + "unist-util-visit": "^2.0.0" + } + }, "remark-footnotes": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz", diff --git a/site/package.json b/site/package.json index 31e31a4..d482826 100644 --- a/site/package.json +++ b/site/package.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": { diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx index 4b59d1b..e460e7d 100644 --- a/site/pages/docs/toast.mdx +++ b/site/pages/docs/toast.mdx @@ -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,7 +153,7 @@ 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`. @@ -161,11 +161,11 @@ 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 diff --git a/site/pages/docs/version-2.mdx b/site/pages/docs/version-2.mdx index 1fd41d1..f511a28 100644 --- a/site/pages/docs/version-2.mdx +++ b/site/pages/docs/version-2.mdx @@ -11,30 +11,37 @@ export default ({ children, meta }) => {children}; 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: -
-✨ toast.custom() - Dispatch components as toast +
+✨ toast.custom() - Dispatch components as toast
-👀 +👀 Reduced-motion support - - - Automatically adapts to system preference - + - Automatically adapts to system preference
-🔀 +🔀 Individually position toasts{' '} - +
- - 🧈 - Smoother exit animations +🧈 + Smoother exit animations +
-⚙️ Custom Renderer API - Supply your own render function +⚙️ Custom Renderer API - Supply your own render function
-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 [``](/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 [``](/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.