- change name from otel middleware to client library

- add link for explaining a trace
- add expressive code

www/astro.config.mjs

@@ -26,10 +26,10 @@ export default defineConfig({
         },
         {
           label: "Components",
-          items: [
-            { label: "Otel middleware", slug: "components/otel-middleware" },
-            { label: "Studio", slug: "components/studio" },
-          ],
+          items:[
+            {label: "Client library", slug: "components/client-library"},
+            {label: "Studio", slug: "components/studio"}        
+          ]
         },
         {
           label: "Features",

www/src/content/docs/components/client-library.mdx

@@ -0,0 +1,81 @@
+---
+title: Client library
+description: description of client library
+---
+
+The [client library](https://github.com/fiberplane/fpx/tree/main/packages/client-library-otel) leverages [OpenTelemetry](https://opentelemetry.io/) to instrument applications and send [traces](https://opentelemetry.io/docs/concepts/signals/traces/) to Fiberplane Studio. It requires the use of [Hono](https://hono.dev/) web application framework.
+
+## Installation 
+To install the client library for your Hono application, run the following command in your project directory:
+```
+npm i @fiberplane/hono-otel@beta 
+``` 
+
+## Usage within the Hono application
+Below is an example of how to use the client library within a Hono application:
+```js {2,8}
+import { Hono } from "hono";
+import { instrument } from "@fiberplane/hono-otel";
+
+const app = new Hono();
+
+app.get("/", (c) => c.text("Hello, Hono!"));
+
+export default instrument(app);
+```
+
+### Advanced usage: Custom spans
+The `measure` function from the client library allows you to create custom spans for any function within your application, enabling more granular tracing.
+
+```js {6}
+import { instrument, measure } from "@fiberplane/hono-otel";
+
+const app = new Hono();
+
+// Create a loop function that will get recorded as a span inside the trace for a incoming given request
+const loop = measure("loop", (n: number) => {
+  for (let i = 0; i < n; i++) {
+    console.log(`Loop iteration: ${i}`);
+  }
+});
+
+app.get("/", (c) => {
+  loop(100);
+  return c.text("Hello, Hono!");
+});
+
+export default instrument(app);
+```
+
+## Configuration
+By default, the client library does not send traces. To define an endpoint, you need to set the `FPX_ENDPOINT` environment variable.
+
+When starting Fiberplane Studio via the command line with `npx @fiberplane/studio`, the `FPX_ENDPOINT` is automatically set to the Fiberplane Studio's default port 8788: `http://localhost:8788/v1/traces`. Additionally, the Fiberplane Studio CLI setup enables Node.js compatibility mode for Cloudflare Workers.
+
+If you are not using Fiberplane Studio and use Cloudflare workers, ensure that Node.js compatibility mode is enabled in the `wrangler.toml` file:
+```
+compatibility_flags = [ "nodejs_compat" ]
+``` 
+### Customizing the `instrument` function behavior
+The client library allows you to override the default behavior of the `instrument` function. By default, the function creates traces for all fetched requests in the application and sends logging data to a locally running FPX Studio. You can disable these features by setting the corresponding monitoring variables to `false`. 
+
+```js {9-14}
+import { Hono } from "hono";
+import { instrument } from "@fiberplane/hono-otel";
+
+const app = new Hono();
+
+app.get("/", (c) => c.text("Hello, Hono!"));
+
+export default instrument(app, {
+  monitor: {
+    // Don't create traces for fetch requests
+    fetch: false,
+    // Don't proxy `console.*` functions to send logging data to a local FPX server
+    logging: false,
+  },
+});
+```
+
+
+Find the code on [Github](https://github.com/fiberplane/fpx/tree/main/packages/client-library-otel)