Fix example project styles and READMEs

examples/logger/.env-example

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_BETTER_STACK_INGESTING_URL=""
-NEXT_PUBLIC_BETTER_STACK_SOURCE_TOKEN=""
+NEXT_PUBLIC_BETTER_STACK_SOURCE_TOKEN=""
+NEXT_PUBLIC_BETTER_STACK_LOG_LEVEL="info"

examples/logger/README.md

@@ -1,34 +1,44 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Better Stack Next.js Logger Example
 
-## Getting Started
+This example demonstrates how to integrate Better Stack logging into a Next.js application.
 
-First, run the development server:
+## Setup
+
+### Environment Variables
+
+Copy `.env-example` to `.env` and fill in your Better Stack credentials:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+cp .env-example .env
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Then edit `.env`:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+# Your Better Stack source token
+NEXT_PUBLIC_BETTER_STACK_SOURCE_TOKEN="your_source_token_here"
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+# Your Better Stack ingesting URL
+NEXT_PUBLIC_BETTER_STACK_INGESTING_URL="https://your-cluster.betterstackdata.com"
 
-## Learn More
+# Log level (optional - debug/info/warn/error/off)
+NEXT_PUBLIC_BETTER_STACK_LOG_LEVEL="info"
+```
 
-To learn more about Next.js, take a look at the following resources:
+You can create your source in Better Stack -> Telemetry -> [Sources](https://telemetry.betterstack.com/team/0/sources).
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Run the Example
+
+```bash
+npm install
+npm run dev
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Open [http://localhost:3000](http://localhost:3000) to see the demo.
 
-## Deploy on Vercel
+Click the buttons to generate logs and see them appear in your Better Stack dashboard in real-time.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Need Help?
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Check the [Better Stack Next.js documentation](https://betterstack.com/docs/logs/javascript/nextjs/)
+- Visit the [Better Stack dashboard](https://telemetry.betterstack.com/team/0/tail) to view your logs

examples/logger/app/globals.css

@@ -39,6 +39,22 @@
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
   --card-border-rgb: 131, 134, 135;
+
+  /* Example theme tokens (used by app/page.module.css) */
+  --bs-bg: #f6f7fb;
+  --bs-bg-2: #ffffff;
+  --bs-text: #0b1220;
+  --bs-muted: #5b6577;
+  --bs-surface: #ffffffcc;
+  --bs-border: #e6eaf2;
+  --bs-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
+  --bs-link: #2563eb;
+  --bs-primary: #2563eb;
+  --bs-primary-hover: #1d4ed8;
+  --bs-danger: #dc2626;
+  --bs-danger-hover: #b91c1c;
+  --bs-success: #059669;
+  --bs-success-hover: #047857;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -71,6 +87,22 @@
     --callout-border-rgb: 108, 108, 108;
     --card-rgb: 100, 100, 100;
     --card-border-rgb: 200, 200, 200;
+
+    /* Example theme tokens (dark) */
+    --bs-bg: #070b14;
+    --bs-bg-2: #0b1220;
+    --bs-text: #e5e7eb;
+    --bs-muted: #a4adbd;
+    --bs-surface: rgba(17, 24, 39, 0.72);
+    --bs-border: rgba(148, 163, 184, 0.18);
+    --bs-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+    --bs-link: #60a5fa;
+    --bs-primary: #3b82f6;
+    --bs-primary-hover: #2563eb;
+    --bs-danger: #f87171;
+    --bs-danger-hover: #ef4444;
+    --bs-success: #34d399;
+    --bs-success-hover: #10b981;
   }
 }
 
@@ -84,22 +116,33 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  min-height: 100vh;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background:
+    radial-gradient(
+      1200px 500px at 30% -10%,
+      rgba(37, 99, 235, 0.22),
+      transparent 55%
+    ),
+    radial-gradient(
+      900px 450px at 80% 0%,
+      rgba(16, 185, 129, 0.14),
+      transparent 60%
+    ),
+    linear-gradient(180deg, var(--bs-bg), var(--bs-bg-2));
+  background-attachment: fixed;
 }
 
 a {
-  color: inherit;
+  color: var(--bs-link);
   text-decoration: none;
 }
+a:hover {
+  text-decoration: underline;
+}
 
 @media (prefers-color-scheme: dark) {
   html {