fix(toolbar): update example readmes, add htaccess to fix wp-env issues

Author: ahuseyn

.gitignore

@@ -34,6 +34,5 @@ __MACOSX
 examples/**/package-lock.json
 examples/**/__MACOSX
 examples/**/mu-plugin.php
-examples/**/.htaccess
 examples/**/.wp-env.json
 ``

examples/next/toolbar-demo/.htaccess

@@ -0,0 +1,11 @@
+# BEGIN WordPress
+<IfModule mod_rewrite.c>
+RewriteEngine On
+RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+RewriteBase /
+RewriteRule ^index\.php$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.php [L]
+</IfModule>
+# END WordPress

packages/toolbar/examples/next/.gitignore

@@ -1,5 +1,5 @@
 {
-  "phpVersion": "8.3",
+  "phpVersion": "8.4",
   "plugins": [
     "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
     "../plugins/hwp-cors-local",
@@ -17,10 +17,9 @@
     "HEADLESS_FRONTEND_URL": "http://localhost:3000"
   },
   "mappings": {
-    "db": "./wp-env/db",
-    ".htaccess": "./.htaccess"
+    ".htaccess": "./wp-env/setup/.htaccess"
   },
   "lifecycleScripts": {
-    "afterStart": "wp-env run cli -- wp theme activate twentytwentyfour && wp-env run cli -- wp rewrite structure '/%postname%/' --hard"
+    "afterStart": "wp-env run cli -- wp theme activate twentytwentyfour && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
   }
-}
+}

packages/toolbar/examples/next/.wp-env.json

@@ -4,25 +4,25 @@ In this example we show how to integrate the Headless WordPress Toolbar into a N
 
 ## Table of Contents
 
-
-
 ## Getting Started
 
 > [!IMPORTANT]
 > Docker Desktop needs to be installed to run WordPress locally.
 
 1. Create a `.env.local` file in the `examples/next/toolbar-demo` directory with the following content:
-   ```env
+
+```env
    NEXT_PUBLIC_WP_URL=http://localhost:8888
-   ```
+```
+
 2. Run `npm run example:setup` to install dependencies and configure the local WP server.
 3. Run `npm run example:start` to start the WP server and Next.js development server.
 
-
->[!NOTE]
+> [!NOTE]
 > Port 8888 is the default port for wp-env.
 
 The example will be available at:
+
 - **Frontend**: http://localhost:3000
 - **WordPress**: http://localhost:8888
 - **WordPress Admin**: http://localhost:8888/wp-admin (`admin` / `password`)
@@ -36,37 +36,33 @@ The example will be available at:
 ### 1. React Hooks Integration
 
 ```tsx
-import { toolbar } from '@/lib/toolbar';
-import { useToolbar } from '@wpengine/hwp-toolbar/react';
+import { toolbar } from "@/lib/toolbar";
+import { useToolbar } from "@wpengine/hwp-toolbar/react";
 
 function MyComponent() {
   const { state, nodes } = useToolbar(toolbar);
 
-  return (
-    <div>
-      {/* Toolbar UI */}
-    </div>
-  );
+  return <div>{/* Toolbar UI */}</div>;
 }
 ```
 
 ### 2. WordPress Context Integration
 
 ```tsx
-import { fetchWordPressUser } from '@/lib/wordpress';
+import { fetchWordPressUser } from "@/lib/wordpress";
 
 // Fetch user and set WordPress context
 const user = await fetchWordPressUser();
 toolbar.setWordPressContext({
   user: {
     id: user.id,
     name: user.name,
-    email: user.email
+    email: user.email,
   },
   site: {
-    url: 'http://localhost:8888',
-    adminUrl: 'http://localhost:8888/wp-admin'
-  }
+    url: "http://localhost:8888",
+    adminUrl: "http://localhost:8888/wp-admin",
+  },
 });
 ```
 
@@ -77,27 +73,27 @@ const { state, nodes } = useToolbar(toolbar);
 
 // Subscribe to state changes
 useEffect(() => {
-  console.log('Toolbar state:', state);
+  console.log("Toolbar state:", state);
 }, [state]);
 ```
 
 ### 4. Custom Node Registration
 
 ```tsx
-toolbar.register('home', 'Home', () => {
-  router.push('/');
+toolbar.register("home", "Home", () => {
+  router.push("/");
 });
 ```
 
 ## Features
 
-- ✅ React hooks (`useToolbar`, `useToolbarState`, `useToolbarNodes`)
-- ✅ Next.js App Router (App Directory)
-- ✅ TypeScript support
-- ✅ Framework-agnostic state management
-- ✅ WordPress context integration
-- ✅ Real WordPress data integration
-- ✅ WPGraphQL support
+- React hooks (`useToolbar`, `useToolbarState`, `useToolbarNodes`)
+- Next.js App Router (App Directory)
+- TypeScript support
+- Framework-agnostic state management
+- WordPress context integration
+- Real WordPress data integration
+- WPGraphQL support
 
 ## Project Structure
 
@@ -153,20 +149,18 @@ npm run wp:destroy
 ## WordPress Setup
 
 The wp-env configuration includes:
+
 - WordPress with WPGraphQL plugin
 - Admin credentials: `admin` / `password`
 - GraphQL endpoint: `http://localhost:8888/?graphql`
 - REST API endpoint: `http://localhost:8888/?rest_route=/wp/v2/...`
 - Pretty permalinks enabled
 - CORS headers enabled for localhost:3000
 
-## Environment Configuration
-
-The example uses standard ports (3000 for frontend, 8888 for WordPress) to match other hwptoolkit examples.
-
 ## TypeScript Support
 
 The example includes full TypeScript support with proper types for:
+
 - Toolbar state and nodes
 - WordPress API responses
 - React hook return types

packages/toolbar/examples/next/README.md

@@ -16,6 +16,9 @@
     "WP_HOME": "http://localhost:8888",
     "HEADLESS_FRONTEND_URL": "http://localhost:3000"
   },
+  "mappings": {
+    ".htaccess": "./wp-env/setup/.htaccess"
+  },
   "lifecycleScripts": {
     "afterStart": "wp-env run cli -- wp theme activate twentytwentyfour && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
   }

packages/toolbar/examples/vanilla/.gitignore

@@ -7,19 +7,20 @@ In this example we show how to integrate the Headless WordPress Toolbar into a v
 > [!IMPORTANT]
 > Docker Desktop needs to be installed to run WordPress locally.
 
+1. Create a `.env.local` file in the `example-app` directory with the following content:
 
-1. Create a `.env.local` file in the `examples/next/toolbar-demo` directory with the following content:
-     ```env
+```env
 VITE_FRONTEND_PORT=3000
 VITE_WP_URL=http://localhost:8888
 VITE_WP_PORT=8888
 VITE_WP_TEST_PORT=8889
-   ```
+```
 
 2. Run `npm run example:setup` to install dependencies and configure the local WP server.
 3. Run `npm run example:start` `to start the WP server and Vite development server.
 
 The example will be available at:
+
 - **Frontend**: http://localhost:3000
 - **WordPress**: http://localhost:8888
 - **WordPress Admin**: http://localhost:8888/wp-admin (`admin` / `password`)
@@ -33,16 +34,16 @@ The example will be available at:
 ### 1. Basic Toolbar Integration
 
 ```javascript
-import { Toolbar, VanillaRenderer } from '@wpengine/hwp-toolbar';
-import '@wpengine/hwp-toolbar/styles';
+import { Toolbar, VanillaRenderer } from "@wpengine/hwp-toolbar";
+import "@wpengine/hwp-toolbar/styles";
 
 const toolbar = new Toolbar({
   onPreviewChange: (enabled) => {
-    console.log('Preview mode:', enabled);
-  }
+    console.log("Preview mode:", enabled);
+  },
 });
 
-const renderer = new VanillaRenderer(toolbar, 'toolbar');
+const renderer = new VanillaRenderer(toolbar, "toolbar");
 ```
 
 ### 2. WordPress Integration
@@ -51,28 +52,28 @@ The example fetches real data from WordPress:
 
 ```javascript
 // Fetch WordPress user via REST API
-const response = await fetch('http://localhost:8000/?rest_route=/wp/v2/users/1');
+const response = await fetch("http://localhost:8000/?rest_route=/wp/v2/users/1");
 const user = await response.json();
 
 toolbar.setWordPressContext({
   user: {
     id: user.id,
     name: user.name,
-    email: user.email
+    email: user.email,
   },
   site: {
-    url: 'http://localhost:8000',
-    adminUrl: 'http://localhost:8000/wp-admin'
-  }
+    url: "http://localhost:8000",
+    adminUrl: "http://localhost:8000/wp-admin",
+  },
 });
 ```
 
 ### 3. GraphQL Posts
 
 ```javascript
-const response = await fetch('http://localhost:8000/?graphql', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
+const response = await fetch("http://localhost:8000/?graphql", {
+  method: "POST",
+  headers: { "Content-Type": "application/json" },
   body: JSON.stringify({
     query: `
       query GetPosts {
@@ -85,38 +86,37 @@ const response = await fetch('http://localhost:8000/?graphql', {
           }
         }
       }
-    `
-  })
+    `,
+  }),
 });
 ```
 
 ### 4. Custom Node Registration
 
 ```javascript
-toolbar.register('home', 'Home', () => {
-  window.location.href = '/';
+toolbar.register("home", "Home", () => {
+  window.location.href = "/";
 });
 ```
 
 ### 5. State Management
 
 ```javascript
 toolbar.subscribe((nodes, state) => {
-  console.log('Toolbar state updated:', state);
+  console.log("Toolbar state updated:", state);
 });
 ```
 
 ## Features
 
-- ✅ Vanilla JavaScript (no framework)
-- ✅ Vite for fast development  
-- ✅ TypeScript support (types available)
-- ✅ WordPress toolbar integration
-- ✅ State management example
-- ✅ Custom node registration
-- ✅ Dark/light mode support
-- ✅ Real WordPress data integration
-- ✅ WPGraphQL support
+- Vanilla JavaScript (no framework)
+- Vite for fast development
+- WordPress toolbar integration
+- State management example
+- Custom node registration
+- Dark/light mode support
+- Real WordPress data integration
+- WPGraphQL support
 
 ## Project Structure
 
@@ -159,32 +159,20 @@ npm run wp:destroy
 ## WordPress Setup
 
 The wp-env configuration includes:
+
 - WordPress with WPGraphQL plugin
 - Admin credentials: `admin` / `password`
 - GraphQL endpoint: `http://localhost:8000/?graphql`
 - REST API endpoint: `http://localhost:8000/?rest_route=/wp/v2/...`
 - Pretty permalinks enabled
 - CORS headers enabled for localhost:3000
 
-## Environment Configuration
-
-The example uses standard ports (3000 for frontend, 8000 for WordPress) to match other hwptoolkit examples. 
-
-To customize ports, create a `.env` file in the `example-app/` directory:
-
-```
-VITE_FRONTEND_PORT=3000
-VITE_WP_URL=http://localhost:8888
-VITE_WP_PORT=8888
-VITE_WP_TEST_PORT=8889
-```
-
 ## Styling
 
 The example imports the base toolbar styles and adds custom demo styling:
 
 ```javascript
-import '@wpengine/hwp-toolbar/styles';
+import "@wpengine/hwp-toolbar/styles";
 ```
 
 Custom styles can override CSS variables: