Docs: Add Vite documentation (#843)

* Add Vite docs

* Add startup command to Stackblitz template

docs/guides/vite.mdx

@@ -0,0 +1,32 @@
+---
+title: Vite
+description: How to use Jotai with Vite
+nav: 3.9
+---
+
+You can use the plugins from the `jotai/babel` bundle to enhance your developer experience when using Vite and Jotai.
+
+In your `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import jotaiDebugLabel from 'jotai/babel/plugin-debug-label';
+import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
+  ],
+  // ... The rest of your configuration
+});
+```
+
+There's a template below to try it yourself.
+
+## Examples
+
+### Vite Template
+
+<Stackblitz id="vitejs-vite-xhhxve" file="vite.config.ts" />

website/gatsby-ssr.js

@@ -11,12 +11,14 @@ import {
   H4,
   H5,
   InlineCode,
+  Stackblitz,
 } from './src/components'
 
 const components = {
   code: Code,
   inlineCode: InlineCode,
   CodeSandbox,
+  Stackblitz,
   h2: H2,
   h3: H3,
   h4: H4,

website/src/components/index.js

@@ -17,3 +17,4 @@ export * from './mdx'
 export * from './menu'
 export * from './sidebar'
 export * from './wrapper'
+export * from './stackblitz'

website/src/components/stackblitz.js

@@ -0,0 +1,19 @@
+import LazyLoad from 'react-lazyload'
+
+export const Stackblitz = ({ id, file }) => {
+  return (
+    <div className="mb-8 overflow-hidden shadow-lg rounded-md sm:rounded-lg border-b border-gray-200">
+      <LazyLoad height={400} once>
+        <iframe
+          title={id}
+          className="w-full h-[400px]"
+          src={`https://stackblitz.com/edit/${id}?embed=1${
+            file ? `&file=${file}` : ''
+          }&terminal=dev`}
+          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+        />
+      </LazyLoad>
+    </div>
+  )
+}