Skip to content

Commit

Permalink
Migrate docs to MDX 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@timolins
timolins committed Jul 8, 2022
1 parent 8b716de commit f776144
Show file tree
Hide file tree
Showing 14 changed files with 100 additions and 122 deletions.
2 changes: 1 addition & 1 deletion site/components/docs-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const TableHeader: React.FC<{
</span>
);

export default function DocsLayout({ children, meta }) {
export default function DocsLayout({ meta, children }) {
return (
<div className="bg-toast-50 bg-opacity-50 min-h-screen flex flex-col">
<NextSeo
Expand Down
1 change: 1 addition & 0 deletions site/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const withMDX = require('@next/mdx')({
extension: /.mdx?$/,
options: {
rehypePlugins: [remarkSlugs],
providerImportSource: '@mdx-js/react',
},
});
const withPlugins = require('next-compose-plugins');
Expand Down
6 changes: 3 additions & 3 deletions site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"@mdx-js/react": "^2.1.2",
"@next/mdx": "^12.2.1",
"@svgr/webpack": "^6.2.1",
"@tailwindcss/typography": "^0.5.2",
"@types/prismjs": "^1.26.0",
"clsx": "^1.1.1",
"next": "^12.2.1",
Expand All @@ -20,15 +19,16 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "link:../",
"rehype-slug": "^5.0.1",
"tailwindcss": "^3.1.4"
"rehype-slug": "^5.0.1"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.3",
"@types/node": "^18.0.0",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"autoprefixer": "^10.4.7",
"next-compose-plugins": "^2.2.1",
"tailwindcss": "^3.1.5",
"typescript": "^4.7.4"
}
}
19 changes: 9 additions & 10 deletions site/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,21 @@ const components = {
<a {...props} />
</Link>
),
inlineCode: (props) => (
<code
className="bg-toast-300 py-1 my-0.5 px-1 rounded bg-opacity-40"
{...props}
/>
),
code: (props) => (
<Code className={props.className} snippet={props.children} />
),
code: (props) =>
props.className ? (
<Code className={props.className} snippet={props.children} />
) : (
<code
className="bg-toast-300 py-1 my-0.5 px-1 rounded bg-opacity-40"
{...props}
/>
),
};

function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta />
{process.browser && (
<script async data-no-cookie data-api="/_hive" src="/bee.js" />
)}
Expand Down
2 changes: 1 addition & 1 deletion site/pages/docs/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: 'Documentation',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# Getting Started

Expand Down
2 changes: 1 addition & 1 deletion site/pages/docs/styling.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: 'Styling',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# Styling

Expand Down
2 changes: 1 addition & 1 deletion site/pages/docs/toast-bar.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: '<ToastBar/> API',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# `<ToastBar />` API

Expand Down
2 changes: 1 addition & 1 deletion site/pages/docs/toast.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,4 +224,4 @@ toast(
);
```

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
2 changes: 1 addition & 1 deletion site/pages/docs/toaster.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: '<Toaster/> API',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# `<Toaster />` API

Expand Down
4 changes: 2 additions & 2 deletions site/pages/docs/use-toaster-store.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: 'useToasterStore() API',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# `useToasterStore()` API

Expand All @@ -14,7 +14,7 @@ This hook gives you access to the internal toaster state. This is the right choi
In comparison to [`useToaster()`](/docs/use-toaster) it does not handle pausing or provide handlers for creating your own notification system.

```jsx
import { useToasterStore } from "react-hot-toast";
import { useToasterStore } from 'react-hot-toast';

const { toasts, pausedAt } = useToasterStore();
```
2 changes: 1 addition & 1 deletion site/pages/docs/use-toaster.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: 'useToaster() API',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# `useToaster()` API

Expand Down
47 changes: 14 additions & 33 deletions site/pages/docs/version-2.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const meta = {
title: 'react-hot-toast 2.0 changes',
};

export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

# What's new in react-hot-toast 2.0

Expand All @@ -15,27 +15,16 @@ This release is all about **flexibility**. It allows you to create the notificat
<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> <a
href="#better-accessibility"
className="font-semibold"
>
Reduced-motion support
</a> <span className="">- Automatically adapts to system preference</span>
<span style={{ margin: '10px' }}>👀</span>
<a href="#better-accessibility" className="font-semibold">Reduced-motion support</a> <span className="">- Automatically adapts to system preference</span>
<br />

<span style={{ margin: '10px' }}>🔀</span> <a
href="#per-toast-positioning"
className="font-semibold"
>
Individually position toasts{' '}
</a> <span className=""></span>
<span style={{ margin: '10px' }}>🔀</span>
<a href="#per-toast-positioning" className="font-semibold">Individually position toasts</a> <span className=""> </span>
<br />
<span style={{ margin: '10px' }}>🧈</span> <a
href="#smoother-exit-animation"
className="font-semibold"
>
Smoother exit animations
</a> <span className=""></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> <a href="#custom-renderer-api" className="font-semibold">Custom Renderer API</a> <span className="">- Supply your own render function</span>
Expand Down Expand Up @@ -67,21 +56,16 @@ toast.custom((t) => (

<div className="w-full relative">
<button
className="bg-toast-800 text-toast-100 whitespace-nowrap py-1 px-3 shadow-md rounded-lg absolute mt-[-4.5rem] -ml-2 transform -translate-x-full left-full"
onClick={() => {
onClick={() =>
toast.custom((t) => (
<div
className={`bg-white px-6 py-4 shadow-md rounded-full ${
t.visible ? 'animate-enter' : 'animate-leave'
}`}
>
Hello from TailwindCSS! 👋
</div>
));
}}
>
Run Example
</button>
>Hello from TailwindCSS! 👋</div>
))
}
className="bg-toast-800 text-toast-100 whitespace-nowrap py-1 px-3 shadow-md rounded-lg absolute mt-[-4.5rem] -ml-2 transform -translate-x-full left-full">Run Example</button>
</div>

In the example above, we pass in a **function that returns JSX**. This allows us to access the current toast state and toggle between the enter and exit animation.
Expand Down Expand Up @@ -113,10 +97,7 @@ toast.success('Always at the bottom', {
toast.success('Always at the bottom', {
position: 'bottom-center',
});
}}
>
Run Example
</button>
}}>Run Example</button>
</div>

## Relative positioning
Expand Down
Loading

0 comments on commit f776144

Please sign in to comment.