v4.1 release - log locations + plugins

docs/app/components/ui/Lamp.tsx

@@ -95,7 +95,7 @@ export const LampContainer = ({
         <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 "></div>
       </div>
 
-      <div className="relative z-50 flex -translate-y-40 flex-col items-center px-5">
+      <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5 md:-translate-y-60 lg:-translate-y-60">
         {children}
       </div>
     </div>

docs/app/routes/_index.tsx

@@ -1,6 +1,5 @@
 import type { MetaFunction } from '@remix-run/node'
-import { Link } from '@remix-run/react'
-import { ClientOnly } from 'remix-utils/client-only'
+import { Link } from '@remix-run/react' 
 import { FeaturesSection } from '~/components/FeaturesSection'
 import { Button } from '~/components/ui/Button'
 import { LampContainer } from '~/components/ui/Lamp'

docs/posts/4.1.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.1.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.1.0/configuration/index.md

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

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