Breakpoint feature added (#147)

* Breakpoint feature added

* docs update

* update

docs/posts/4.6.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.6.0/configuration/client.mdx

@@ -0,0 +1,195 @@
+---
+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";
+    liveUrls: { name: string, url: string }[];
+    liveUrlsPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    defaultOpen: boolean;
+    expansionLevel: number;
+    height: number;
+    minHeight: number;
+    maxHeight: number;
+    hideUntilHover: boolean;
+    panelLocation: "top" | "bottom";
+    requireUrlFlag: boolean;
+    urlFlag: string;
+    breakpoints: {name: string, min: number, max: number }[],
+    routeBoundaryGradient: "sea" | "hyper" | "gotham" | "gray" | "watermelon" | "ice" | "silver";
+    showBreakpointIndicator: boolean;
+}
+```
+
+Let's go through each option and see what it does.
+
+## Live URLs
+
+This option is used to set the live urls that will be displayed in the bottom left corner of the screen. The default value is an empty array.
+It allows you to specify multiple live urls that you can use to open the current page in a new tab.
+
+## Live URLs position
+
+This option is used to set the position of the live urls that will be displayed in the bottom left corner of the screen. The possible values are:
+- `top-left` - the live urls will be positioned at the top left corner of the screen
+- `top-right` - the live urls will be positioned at the top right corner of the screen
+- `bottom-left` - the live urls will be positioned at the bottom left corner of the screen
+- `bottom-right` - the live urls will be positioned at the bottom right corner of the screen
+
+## 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`.
+
+## Breakpoints
+
+This option allows you to define custom breakpoints that show in the bottom left corner of the panel to help you determine the current screen breakpoint you have defined.
+By default the breakpoints are set to tailwind breakpoints but you can change them to whatever you want.
+
+Eg:
+```ts
+    breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
+```
+
+## Show breakpoint indicator
+
+This option allows you to show/hide the current breakpoint in the bottom left corner of the panel.
+
+## 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",
+      breakpoints: [{name: "lg", min: 0, max: 768}, {name: "xl", min: 768, max: 1024}, {name: "2xl", min: 1024, max: Infinity}],
+      showBreakpointIndicator: false
+    }
+  });
+
+  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.6.0/configuration/editor.mdx

@@ -0,0 +1,80 @@
+---
+title: Remix Development Tools Editor Configuration
+description: Configuration options for the Remix Development Tools to interface with your editor
+---
+
+Everyone uses their own editors, so it's important to be able to configure the editor that Remix Development Tools will open your files in.
+
+```ts
+type EditorConfig = {
+  name: string;
+  open(path: string, lineNumber: string | undefined): void;
+}
+```
+
+## `name`
+
+The name of the editor that will be displayed on the Open in Editor button.
+
+## `open`
+
+This function will be called when the user clicks the Open in Editor button. It will receive the path to the file and the line number to open the file at.
+This function will both handle the case where you shift + right click an element on the page AND the open in X button in the UI, they return different values
+so be sure to cover both of them.
+
+```ts
+import { exec } from "node:child_process";
+import { normalizePath } from "vite";
+
+function open(path: string, lineNumber: string | undefined) { 
+  exec(`code -g "${normalizePath(path)}${lineNumber ? `:${lineNumber}` : ""}"`);
+}
+```
+
+## Editors
+
+Below are some examples of configurations for popular editors.
+
+### VS Code
+
+To use VS Code as your editor, you don't need to do anything, it's the default editor.
+
+### WebStorm
+
+To use WebStorm as your editor, you can use the following configuration:
+
+```ts
+import { exec } from "node:child_process";
+import { cwd } from "node:process";
+
+const editor = {
+  name: "WebStorm",
+  open(path, lineNumber) { 
+    exec(
+      `webstorm "${process.cwd()}/${path}" --line ${lineNumber ? `--line ${lineNumber}` : ""}`.replace(
+        /\$/g,
+        "\\$",
+      ),
+    );
+  },
+};
+```
+
+### GoLand
+
+To use WebStorm as your editor, you can use the following configuration:
+
+```ts
+import { exec } from "node:child_process";
+import { cwd } from "node:process";
+
+const editor = {
+  name: "WebStorm",
+  open(path, lineNumber) {
+    if (!path) return;
+    exec(
+      `goland "${process.cwd()}/${path}" ${lineNumber ? `--line ${lineNumber}` : ""}` 
+    );
+  },
+};
+```

docs/posts/4.6.0/configuration/index.md

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

docs/posts/4.6.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.