Clean up toolbar demo

Author: josephfusco

examples/vanilla/toolbar-demo/example-app/index.html

@@ -11,54 +11,27 @@ <h1>Headless WordPress Toolbar Demo</h1>
     <p>A framework-agnostic toolbar for headless WordPress sites</p>
 
     <section class="controls">
-      <h2>User Context</h2>
+      <h2>Demo Controls</h2>
       <button onclick="login()">Login</button>
       <button onclick="logout()">Logout</button>
-    </section>
-
-    <section class="controls">
-      <h2>Post Context</h2>
       <button onclick="fetchPosts()">Fetch Posts</button>
-      <button onclick="addPost()">Add Mock Post</button>
-      <button onclick="addPage()">Add Mock Page</button>
-      <button onclick="clearPost()">Clear Post</button>
       <div id="wordpress-posts"></div>
     </section>
 
-    <section class="controls">
-      <h2>Toolbar Management</h2>
-      <button onclick="addNode()">Add Custom Node</button>
-      <button onclick="clearAll()">Clear All</button>
-    </section>
-
     <section class="state">
-      <h2>Current State:</h2>
+      <h2>Current State</h2>
       <pre id="state"></pre>
     </section>
 
     <section class="info">
-      <h2>Try This:</h2>
+      <h2>Try This</h2>
       <ol>
-        <li>Click "Login" to fetch real WP user</li>
-        <li>Click "Fetch Posts" to load real posts</li>
-        <li>Click a post to add it to toolbar</li>
-        <li>See WordPress controls appear in toolbar</li>
-        <li>Click "Preview" to toggle preview mode</li>
-        <li>Click "Edit post" to open in WordPress (opens new tab)</li>
+        <li>Click "Login" to authenticate with WordPress</li>
+        <li>Click "Fetch Posts" to load posts from WordPress</li>
+        <li>Click a post to view toolbar controls</li>
+        <li>Use the toolbar at the bottom to preview or edit</li>
       </ol>
     </section>
-
-    <section class="features">
-      <h2>Features:</h2>
-      <ul>
-        <li>✅ Framework-agnostic (works with any JS framework)</li>
-        <li>✅ No 401 errors on page load (performance optimized)</li>
-        <li>✅ Full TypeScript support</li>
-        <li>✅ Dark/light mode automatic</li>
-        <li>✅ Fully themeable with CSS variables</li>
-        <li>✅ Responsive design</li>
-      </ul>
-    </section>
   </main>
 
   <!-- Toolbar will be rendered here -->

examples/vanilla/toolbar-demo/example-app/src/main.js

@@ -4,32 +4,52 @@ import './style.css';
 
 const WP_URL = 'http://localhost:8888';
 
-// Create toolbar instance
+// ============================================================================
+// Initialize Toolbar
+// ============================================================================
+
 const toolbar = new Toolbar({
   onPreviewChange: (enabled) => {
     console.log('Preview mode:', enabled);
     alert(`Preview mode: ${enabled ? 'ON' : 'OFF'}\n\nIn production, this would trigger Next.js/framework preview mode`);
   }
 });
 
-// Create renderer
+// Render toolbar to DOM
 const renderer = new VanillaRenderer(toolbar, 'toolbar');
 
-// Subscribe to state changes for display
+// ============================================================================
+// Register Custom Nodes
+// ============================================================================
+
+// Simple home button
+toolbar.register('home', 'Home', () => {
+  console.log('Navigate to home');
+  window.location.href = '/';
+});
+
+// ============================================================================
+// State Management
+// ============================================================================
+
+// Subscribe to state changes for debugging display
 toolbar.subscribe((nodes, state) => {
   document.getElementById('state').textContent = JSON.stringify(state, null, 2);
 });
 
-// Fetch real WordPress user
+// ============================================================================
+// Demo Actions
+// ============================================================================
+
 window.login = async () => {
   try {
-    // For demo: just set mock authenticated user
-    // In production, you'd authenticate first via WordPress login
     const response = await fetch(`${WP_URL}/?rest_route=/wp/v2/users/1`);
 
     if (response.ok) {
       const user = await response.json();
-      toolbar.setState({
+
+      // Use setWordPressContext for WordPress-specific state
+      toolbar.setWordPressContext({
         user: {
           id: user.id,
           name: user.name,
@@ -40,6 +60,7 @@ window.login = async () => {
           url: WP_URL
         }
       });
+
       console.log('User logged in:', user.name);
     } else {
       console.error('WordPress not available');
@@ -52,13 +73,16 @@ window.login = async () => {
 };
 
 window.logout = () => {
-  toolbar.setState({
+  // Clear WordPress context
+  toolbar.setWordPressContext({
     user: null,
     post: null,
-    site: null,
-    preview: false
+    site: null
   });
-  toolbar.clear();
+
+  // Reset preview mode
+  toolbar.setState({ preview: false });
+
   console.log('User logged out');
 };
 
@@ -109,7 +133,8 @@ window.fetchPosts = async () => {
 };
 
 function loadPost(post) {
-  toolbar.setState({
+  // Use setWordPressContext for WordPress post data
+  toolbar.setWordPressContext({
     post: {
       id: post.databaseId,
       title: post.title,
@@ -121,69 +146,6 @@ function loadPost(post) {
   console.log('Post loaded:', post.title);
 }
 
-// Mock data functions (for when WordPress isn't running)
-window.addPost = () => {
-  toolbar.setState({
-    post: {
-      id: 123,
-      title: 'Hello World',
-      type: 'post',
-      status: 'draft',
-      slug: 'hello-world'
-    }
-  });
-  console.log('Mock post added');
-};
-
-window.addPage = () => {
-  toolbar.setState({
-    post: {
-      id: 456,
-      title: 'About Us',
-      type: 'page',
-      status: 'publish',
-      slug: 'about'
-    }
-  });
-  console.log('Mock page added');
-};
-
-window.clearPost = () => {
-  toolbar.setState({ post: null, preview: false });
-  console.log('Post context cleared');
-};
-
-let customNodeCount = 0;
-window.addNode = () => {
-  customNodeCount++;
-  toolbar.register(
-    `custom-${customNodeCount}`,
-    `Custom ${customNodeCount}`,
-    () => {
-      console.log(`Custom node ${customNodeCount} clicked`);
-      alert(`Custom Action ${customNodeCount}`);
-    }
-  );
-  console.log(`Added custom node ${customNodeCount}`);
-};
-
-window.clearAll = () => {
-  toolbar.clear();
-  toolbar.setState({
-    user: null,
-    post: null,
-    site: null,
-    preview: false
-  });
-  console.log('Toolbar cleared');
-};
-
-// Initialize with home button
-toolbar.register('home', 'Home', () => {
-  console.log('Navigate to home');
-  window.location.href = '/';
-});
-
 // Console greeting
 console.log('%cHeadless WordPress Toolbar', 'font-size: 18px; font-weight: bold; color: #0073aa;');
 console.log('WordPress at:', WP_URL);

examples/vanilla/toolbar-demo/example-app/src/style.css

@@ -1,5 +1,3 @@
-/* Minimal Utilitarian Demo Styles */
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -10,84 +8,81 @@ body {
   font-family: system-ui, -apple-system, sans-serif;
   line-height: 1.5;
   color: #333;
-  background: #fafafa;
+  background: #f9f9f9;
   padding-bottom: 60px;
 }
 
 .container {
-  max-width: 900px;
+  max-width: 800px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 16px;
 }
 
 h1 {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   margin-bottom: 0.25rem;
   font-weight: 600;
+  color: #222;
 }
 
 h2 {
-  font-size: 0.875rem;
-  margin: 1.5rem 0 0.5rem;
+  font-size: 0.75rem;
+  margin: 1rem 0 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: #666;
+  color: #888;
   font-weight: 500;
 }
 
 p {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   color: #666;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .controls,
 .state,
-.info,
-.features {
-  margin-bottom: 1.5rem;
-  padding: 1rem;
+.info {
+  margin-bottom: 1rem;
+  padding: 0.75rem;
   background: white;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
 }
 
 .controls button {
-  padding: 6px 12px;
-  margin: 4px 4px 4px 0;
-  border: 1px solid #ccc;
+  padding: 4px 10px;
+  margin: 3px 3px 3px 0;
+  border: 1px solid #d0d0d0;
   background: white;
-  color: #333;
+  color: #555;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 12px;
+  border-radius: 2px;
 }
 
 .controls button:hover {
-  background: #f5f5f5;
+  background: #fafafa;
+  border-color: #999;
 }
 
 .state pre {
-  background: #f5f5f5;
-  color: #333;
-  padding: 0.75rem;
-  font-size: 0.8125rem;
+  background: #fafafa;
+  color: #444;
+  padding: 0.5rem;
+  font-size: 0.75rem;
   font-family: monospace;
   overflow-x: auto;
-  border: 1px solid #e0e0e0;
+  border: 1px solid #eee;
+  border-radius: 2px;
 }
 
-.info ol,
-.features ul {
+.info ol {
   margin-left: 1.25rem;
-  font-size: 0.875rem;
-}
-
-.info li,
-.features li {
-  margin: 0.375rem 0;
-  color: #555;
+  font-size: 0.8125rem;
 }
 
-.features ul {
-  list-style: none;
-  margin-left: 0;
+.info li {
+  margin: 0.25rem 0;
+  color: #666;
 }