The one where I add shortcuts to the docs

docs/posts/4.2.0/_index.mdx

@@ -0,0 +1,44 @@
+---
+title: Quick Start
+hidden: true
+toc: false
+---
+
+import Info from './info.tsx'
+
+This documentation covers everything you need to know to get started with `remix-development-tools`.
+
+## Prerequisites
+
+- Remix version **2.8** or higher.
+- Your project needs to run on **ESM**. If you are using CommonJS, you will need to convert your project to ESM.
+- Remix has to run on **Vite**.
+
+## Why ESM and Vite?
+
+If you don't already know, Remix has become a Vite plugin. This means that Remix is now using Vite for bundling
+and development instead of their own custom solution. Due to this `remix-development-tools` is also built on top of 
+Vite and uses it extensively.
+
+In order to use the full feature-set of **Vite** the project has to run on ESM. This is because Vite exposes a websocket
+that **remix-development-tools** uses to communicate with the server. This websocket is **only** available in ESM projects 
+because it's exposed by `import.meta` which is only available in ESM.
+
+To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
+
+<Info>
+ If you are using CommonJS non-Vite Remix app, you will need to convert your project to ESM. This is not as hard as it sounds.
+  You can find a guide on how to do this [here](https://remix.run/docs/en/main/future/vite#migrating) and [here](https://alemtuzlak.hashnode.dev/migrating-a-v1-cjs-remix-project-to-remix-vite-esm)
+</Info>
+
+## Why use `remix-development-tools`?
+
+`remix-development-tools` is a set of tools that help you to develop your Remix application. 
+
+They help you, but are not limited to, to do the following things:
+- **Loader data display** - You can see the data that is being loaded by your loaders.
+- **Route display** - You can see the routes that are being used by your application in list/tree format.
+- **Error tracking** - You can see invalid HTML rendered on your page and where it's coming from.
+- **Hydration mismatch tracking** - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
+- **Server logs** - You can see the logs of your server in the browser.
+- **Route boundaries** - You can see the route boundaries by hovering over elements.

docs/posts/4.2.0/configuration/client.mdx

@@ -0,0 +1,162 @@
+---
+title: Remix Development Tools Client Configuration
+description: Configuration options for the Remix Development Tools client
+---
+
+import Info from "./info.tsx";
+import Warn from "./warn.tsx";
+
+<Info>
+All of the following options can be set in the dev tools panel **"Settings page"** and they override the default ones. Your preferences are
+stored in localStorage and if they do not exist there the default ones are used.
+</Info>
+
+Before we explain all the possible options here is the client configuration Typescript type:
+
+```ts
+type RdtClientConfig = {
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle-left" | "middle-right";
+    defaultOpen: boolean;
+    expansionLevel: number;
+    height: number;
+    minHeight: number;
+    maxHeight: number;
+    hideUntilHover: boolean;
+    panelLocation: "top" | "bottom";
+    requireUrlFlag: boolean;
+    urlFlag: string;
+    routeBoundaryGradient: "sea" | "hyper" | "gotham" | "gray" | "watermelon" | "ice" | "silver";
+}
+```
+
+Let's go through each option and see what it does.
+
+## Position
+
+This option is used to set the position of the Remix Development Tools trigger (the button that opens the panel). The possible values are:
+- `top-left` - the trigger will be positioned at the top left corner of the screen
+- `top-right` - the trigger will be positioned at the top right corner of the screen
+- `bottom-left` - the trigger will be positioned at the bottom left corner of the screen
+- `bottom-right` - the trigger will be positioned at the bottom right corner of the screen
+- `middle-left` - the trigger will be positioned at the middle left of the screen
+- `middle-right` - the trigger will be positioned at the middle right of the screen
+
+## Default Open
+
+This option is used to set the initial state of the panel. If set to `true` the panel will be open by default, if set to `false` 
+the panel will be closed by default.
+
+## Expansion Level
+
+This option is used to set the initial expansion level of the returned JSON data in the **Active Page** tab. By default it is set to
+0 and if you open up the **Active Page** and look at the returned loader data it will look like this:
+
+```ts
+"data": { ... } +
+```
+
+If you set the expansion level to 1 the returned loader data will look like this:
+
+```ts
+"data": {
+    "property": "value"
+}
+```
+
+## Height
+
+This option is used to set the initial height of the panel. The default value is 400px.
+
+## Min Height
+
+This option is used to set the minimum height of the panel. The default value is 200px.
+
+## Max Height
+
+This option is used to set the maximum height of the panel. The default value is 800px.
+
+## Hide Until Hover
+
+This option is used to set whether the trigger should be hidden until you hover over it. The default value is `false`.
+
+## Panel Location
+
+This option is used to set the location of the panel. The possible values are:
+- `top` - the panel will be positioned at the top of the screen
+- `bottom` - the panel will be positioned at the bottom of the screen
+
+## Require URL Flag
+
+This option is used to set whether the panel should be opened only if the URL contains a specific flag. The default value is `false`.
+
+<Warn title="Be careful!">
+If you set this option to `true` and you forget to set the URL flag, the panel will hide and you will not be able to see it
+until you enter the url flag.
+
+The default one is `rdt=true` and if you set this option to `true` you will have to add `?rdt=true` to the URL in order to see the panel.
+</Warn>
+
+## URL Flag
+
+This option is used to set the URL flag that is required to open the panel. The default value is `rdt`.
+
+You can set it to whatever you wish and if you set the **Require URL Flag** option to `true` you will have to add `?yourFlag=true` to the URL in order to see the panel.
+
+## Route Boundary Gradient
+
+This option is used to set the color of the route boundary gradient. The possible values are:
+- `sea`
+- `hyper`
+- `gotham`
+- `gray`
+- `watermelon`
+- `ice`
+- `silver`
+
+<Info>
+This changes the color of the route boundary gradient in the **Active Page** tab. When you hover over any route in the panel it will show you it's boundaries.
+</Info>
+
+The default value is `ice`.
+
+## Creating a custom configuration
+
+To create a custom configuration you can use the following code snippet:
+  
+  ```ts
+  import { defineRdtConfig } from "remix-development-tools";
+
+  const customConfig = defineRdtConfig({
+    client: {
+      position: "top-right",
+      defaultOpen: true,
+      expansionLevel: 1,
+      height: 500,
+      minHeight: 300,
+      maxHeight: 1000,
+      hideUntilHover: true,
+      panelLocation: "bottom",
+      requireUrlFlag: true,
+      urlFlag: "customFlag",
+      routeBoundaryGradient: "gotham",
+    }
+  });
+
+  export default customConfig;
+  ```
+
+Then you can use this configuration in your `vite.config.js` file like this:
+
+```ts
+import customConfig from "./rdt.config";
+import { remixDevTools } from "remix-development-tools";
+
+export default defineConfig({
+  plugins: [remixDevTools(customConfig)],
+});
+```
+
+<Info title="Try it out!">
+  Try opening up the dev tools panel deployed on this site and playing around with the settings in the settings tab!
+</Info>
+

docs/posts/4.2.0/configuration/index.md

@@ -0,0 +1,4 @@
+---
+title: Configuration
+order: 3
+---

docs/posts/4.2.0/configuration/server.mdx

@@ -0,0 +1,61 @@
+---
+title: Remix Development Tools Server Configuration
+description: Configuration options for the Remix Development Tools server
+---
+
+import Info from "./info.tsx";
+import Warn from "./warn.tsx";
+
+As with the client configuration, we will first see the full configuration type:
+
+```ts
+interface RemixServerConfig {
+  silent?: boolean;
+  logs?: {
+    cookies?: boolean;
+    defer?: boolean;
+    actions?: boolean;
+    loaders?: boolean;
+    cache?: boolean;
+    siteClear?: boolean;
+  };
+}
+```
+
+## `silent`
+
+When `true`, the server will not log anything to the console. This is useful for production environments.
+
+## `logs`
+
+This object allows you to configure the server logs. Each key is a log type and the value is a boolean indicating whether to log that type.
+All are `true` by default so you don't have to provide anything, if you want to be granular you can, otherwise you can use the `silent` option to turn off 
+all logs.
+
+### `cookies`
+
+When `true`, the server will log all cookies sent by the server in the "Set-Cookie" header.
+
+### `defer`
+
+When `true`, the server will log all deferred actions. 
+The following gets logged:
+- The defer location
+- The keys that were deferred
+- The time it took for each key to resolve
+
+### `actions`
+
+When `true`, the server will log all actions that are hit with a request.
+
+### `loaders`
+
+When `true`, the server will log all loaders that are hit with a request.
+
+### `cache`
+
+When `true`, the server will log all loaders/actions that return a `Cache Control` header.
+
+### `siteClear`
+
+When `true`, the server will log when the site cache is cleared, or anything else with the `Clear-Site-Data` header.

docs/posts/4.2.0/features/active-page-tab.mdx

@@ -0,0 +1,118 @@
+---
+title: "Active Page Tab" 
+description: "Detailed overview of all features on the active page tab."
+---
+
+import Info from "./info.tsx";
+
+The Active Page tab is the first tab that appears when you open up the dev tools panel. It contains an overview of all active loaders
+on the current page and detailed information about each loader.
+
+## Route boundaries
+
+The first feature we will go over is the route boundaries. This feature shows you the current route boundaries on the actual page. 
+This is useful for debugging and testing purposes. It finds the `<Outlet />` component in the route and highlights it with a 
+gradient background that can be set in the settings.
+
+<Info>
+  This feature is only available in the development mode because it used react dev tools to find the `<Outlet />` component.
+
+  If you want to try it open up the dev tools right now nad hover over `/docs/main` in the panel.
+
+  You can also change the gradient background color in the settings.
+</Info>
+
+## Loader list 
+
+The loader list is a list of all active loaders on the current page. It shows the url segment of the loader,
+the loader type and the loader file.
+
+<Info>
+  The loader type is determined by the routing convention.
+  - `purple` - represents the root.tsx file
+  - `blue` - represents a pathless layout file
+  - `green` - represents a normal route file, whether index or not
+</Info>
+
+### Open in VS code
+
+Each segment has an **open in VS code** button that opens the loader file in VS code. 
+This is useful for quick navigation to the loader file.
+
+<Info title="Caveat!">
+This only works if you have the `code` command installed in your terminal. If you don't have it installed you can
+ install it by following the instructions [here](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).
+</Info>
+
+### Loader data
+
+Each segment has a loader data **JSON** object that contains all the information returned by the loader of that segment.
+
+If you open the dev tools on this page  and look at the `/docs/main` segment you will see the **loader data object** which contains
+`metadata`, `tag`, `serverData`, `deferredServerData` and `key` properties.
+
+This part will contain everything returned from the server and it will be **hot swapped** if the data changes.
+
+<Info>
+  When keys are deferred on the server, the data will hot swap when the key is resolved on the client.
+
+</Info>
+
+### Route params
+
+The route params section contains all the route params for the current segment. 
+
+This will contain all the **wildcard** params currently available on this route.
+
+If you open up the dev tools, you will be able to see that `tag` and `slug` are both in 
+the route params.
+
+### Server info
+
+The server info section contains all the server information for the current segment, including:
+- `loaderTriggerCount` - the number of times the loader has been triggered (updates in real-time)
+- `actionTriggerCount` - the number of times the action has been triggered (updates in real-time)
+- `lowestExecutionTime` - the lowest execution time of the loader (updates in real-time)
+- `highestExecutionTime` - the highest execution time of the loader (updates in real-time)
+- `averageExecutionTime` - the average execution time of the loader (updates in real-time)
+- `lastLoaderInfo` - the last loader info object (updates in real-time), includes execution time, request headers and response headers.
+- `lastActionInfo` - the last action info object (updates in real-time), includes execution time, request headers and response headers.
+- `loaderCalls` - an array of loaderInfo objects ordered from most recent to least recent (updates in real-time)
+- `actionCalls` - an array of actionInfo objects ordered from most recent to least recent (updates in real-time)
+
+### handles
+
+The handles section contains all the handles for the current segment.
+
+This will contain all the **handles** currently available on this route.
+
+Remix allows you to export a custom **handle** export which can be anything, it will be shown here if it is exported.
+
+## Revalidation
+
+There is a **Revalidate** button that allows you to revalidate all the loaders on the page.
+
+
+## Timeline 
+
+The timeline section on the right contains useful information on navigation and submission events in your application.
+
+Every time there is a navigation or submission event, a new entry will be added to the timeline on the top.
+
+It is limited to 50 entries and will remove the oldest entry when the limit is reached.
+
+The timeline will contain the following information for each event:
+- `type` - the type of event (navigation or submission, fetcher or normal)
+- `method` - the method of the event (GET, POST, PUT, DELETE)
+- `url` - the url of the event
+- `data sent` - the data sent in the event
+- `response` - the response of the event
+
+<Info>
+This only happens for events that change the state of the app, if there is a client-side navigation to a 
+new location that has no loaders nothing will happen because the state has remained idle.
+</Info>
+
+### Clearing the timeline
+
+You can clear the timeline by clicking the **clear** button at the top right of the timeline.