Move JS to separate file

Author: kimberleyamackenzie

assets/css/marketing.css

@@ -919,6 +919,10 @@ body .btn-secondary-home-action:focus{
   background:linear-gradient(90deg, #be5188 0%, #805ac3 100%)
 }
 
+.section- pulumi-copilot{
+  display:none
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;

assets/js/bundle.js

@@ -405,76 +405,4 @@ <h2 class="text-3xl md:text-4xl lg:text-6xl font-semibold">What cloud infrastruc
     </div>
 </div>
 
-
-<script>
-    let isNeoMode = false;
-
-    function toggleNeoMode() {
-        const neoInterface = document.getElementById('neo-interface');
-        const neoToggle = document.getElementById('neo-mode-toggle');
-        const neoContent = neoInterface.querySelector('div');
-        const mainContent = document.getElementById('main-content');
-
-        isNeoMode = !isNeoMode;
-
-        if (isNeoMode) {
-            // Add neo-active class to body to trigger all styling
-            document.body.classList.add('neo-active');
-            // Focus the input when opening neo mode
-            setTimeout(() => {
-                const input = document.getElementById('neo-input');
-                if (input) {
-                    input.focus();
-                    console.log('Neo input focused'); // Debug log
-
-                    // Double-check focus worked, retry if needed
-                    setTimeout(() => {
-                        if (document.activeElement !== input) {
-                            input.focus();
-                            console.log('Neo input re-focused'); // Debug log
-                        }
-                    }, 100);
-                }
-            }, 600); // Wait for full animation duration (0.4s + 0.1s delay + buffer)
-        } else {
-            // Remove neo-active class to restore normal state
-            document.body.classList.remove('neo-active');
-            // Clear the input when closing neo mode
-            const input = document.getElementById('neo-input');
-            if (input) {
-                input.value = '';
-            }
-        }
-    }
-
-    function submitNeoQuery() {
-        const input = document.getElementById('neo-input');
-        const query = input.value.trim();
-
-        if (query) {
-            // Encode the query for URL safety
-            const encodedQuery = encodeURIComponent(query);
-            // Redirect to Pulumi Neo app with the query
-            window.location.href = `https://app.pulumi.com/neo?prompt=${encodedQuery}`;
-        }
-    }
-
-    function populateNeoInput(prompt) {
-        const input = document.getElementById('neo-input');
-        input.value = prompt;
-        input.focus();
-    }
-
-    // Allow Enter key to submit
-    document.addEventListener('DOMContentLoaded', function () {
-        const neoInput = document.getElementById('neo-input');
-        if (neoInput) {
-            neoInput.addEventListener('keypress', function (e) {
-                if (e.key === 'Enter') {
-                    submitNeoQuery();
-                }
-            });
-        }
-    });
-</script>
 {{ end }}

layouts/index.html

@@ -24,6 +24,7 @@ import "./redirects";
 import "./algolia/autocomplete";
 import "./terraform-compare";
 import "./external-links";
+import "./neo-mode";
 
 // Register all Stencil components.
 defineCustomElements();

theme/src/ts/main.ts

@@ -0,0 +1,69 @@
+$(function () {
+    let isNeoMode = false;
+
+    // Make functions available globally for onclick handlers
+    (window as any).toggleNeoMode = toggleNeoMode;
+    (window as any).submitNeoQuery = submitNeoQuery;
+    (window as any).populateNeoInput = populateNeoInput;
+
+    function toggleNeoMode() {
+        isNeoMode = !isNeoMode;
+
+        if (isNeoMode) {
+            // Add neo-active class to body to trigger all styling
+            document.body.classList.add('neo-active');
+            // Focus the input when opening neo mode
+            setTimeout(() => {
+                const input = document.getElementById('neo-input') as HTMLInputElement;
+                if (input) {
+                    input.focus();
+
+                    // Double-check focus worked, retry if needed
+                    setTimeout(() => {
+                        if (document.activeElement !== input) {
+                            input.focus();
+                        }
+                    }, 100);
+                }
+            }, 600); // Wait for full animation duration (0.4s + 0.1s delay + buffer)
+        } else {
+            // Remove neo-active class to restore normal state
+            document.body.classList.remove('neo-active');
+            // Clear the input when closing neo mode
+            const input = document.getElementById('neo-input') as HTMLInputElement;
+            if (input) {
+                input.value = '';
+            }
+        }
+    }
+
+    function submitNeoQuery() {
+        const input = document.getElementById('neo-input') as HTMLInputElement;
+        const query = input?.value.trim();
+
+        if (query) {
+            // Encode the query for URL safety
+            const encodedQuery = encodeURIComponent(query);
+            // Redirect to Pulumi Neo app with the query
+            window.location.href = `https://app.pulumi.com/neo?prompt=${encodedQuery}`;
+        }
+    }
+
+    function populateNeoInput(prompt: string) {
+        const input = document.getElementById('neo-input') as HTMLInputElement;
+        if (input) {
+            input.value = prompt;
+            input.focus();
+        }
+    }
+
+    // Allow Enter key to submit
+    const neoInput = document.getElementById('neo-input') as HTMLInputElement;
+    if (neoInput) {
+        neoInput.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                submitNeoQuery();
+            }
+        });
+    }
+});