Add generated modal search and docs error reporting support

.codex/environments/environment.toml

@@ -46,7 +46,7 @@ npm ci --prefix src/Exceptionless.Web/ClientApp --prefer-offline --no-audit
 echo "Installing legacy Angular frontend dependencies..."
 npm ci --prefix src/Exceptionless.Web/ClientApp.angular --prefer-offline --no-audit
 
-echo "Setup complete. Use the Run Aspire action to start the app."
+echo "Setup complete. Use the Run Aspire action to start the app, or Run Lume Docs to test the static site."
 '''
 
 [cleanup]
@@ -62,6 +62,8 @@ echo "Removing repo-local temp/test output only..."
 rm -rf .cache/tmp
 rm -rf .aspire
 rm -rf TestResults
+rm -rf docs/_site
+rm -rf docs/_cache
 
 find . -type d \( -name TestResults -o -name .vite -o -name .svelte-kit \) -exec rm -rf {} +
 
@@ -80,14 +82,38 @@ cd "${CODEX_WORKTREE_PATH:?CODEX_WORKTREE_PATH is required}"
 export AppMode=Development
 export DOTNET_ENVIRONMENT=Development
 export ASPNETCORE_ENVIRONMENT=Development
+export ASPIRE_HOME="$CODEX_WORKTREE_PATH/.aspire"
 
 if command -v aspire >/dev/null 2>&1; then
+  mkdir -p "$ASPIRE_HOME"
   aspire run --nologo --non-interactive
 else
   dotnet run --project src/Exceptionless.AppHost/Exceptionless.AppHost.csproj
 fi
 '''
 
+[[actions]]
+name = "Run Lume Docs"
+icon = "run"
+command = '''
+set -e
+
+cd "${CODEX_WORKTREE_PATH:?CODEX_WORKTREE_PATH is required}/docs"
+
+export PORT="${PORT:-7141}"
+
+if ! command -v deno >/dev/null 2>&1; then
+  echo "deno is not installed or not on PATH. The Lume docs site requires Deno." >&2
+  exit 1
+fi
+
+echo "deno:"
+deno --version
+
+echo "Starting Lume docs at http://127.0.0.1:$PORT/"
+deno task serve
+'''
+
 [[actions]]
 name = "Stop Aspire Containers, keep data"
 icon = "tool"

.github/workflows/website.yml

@@ -21,6 +21,10 @@ jobs:
     defaults:
       run:
         working-directory: docs
+    env:
+      EXCEPTIONLESS_SITE_API_KEY: ${{ vars.EXCEPTIONLESS_SITE_API_KEY }}
+      EXCEPTIONLESS_SITE_SERVER_URL: ${{ vars.EXCEPTIONLESS_SITE_SERVER_URL }}
+      EXCEPTIONLESS_SITE_VERSION: ${{ github.sha }}
 
     steps:
       - name: Checkout

.gitignore

@@ -81,6 +81,7 @@ k8s/ex-*-snapshots.yaml
 tmpclaude*
 dogfood-output/
 debug-storybook.log
+.aspire/
 docs/_cache/
 
 .devcontainer/devcontainer-lock.json

docs/_config.ts

@@ -63,9 +63,31 @@ site.hooks.markdownIt((markdownIt: any) => {
 site.data("docsNavHtml", docsNavHtml)
 site.data("siteDataJson", siteDataJson)
 site.data("copyrightYear", new Date().getFullYear())
+site.data("exceptionlessClientScriptSrc", exceptionlessClientScriptSrc())
 
 export default site
 
+function exceptionlessClientScriptSrc(): string {
+  const apiKey = (Deno.env.get("EXCEPTIONLESS_SITE_API_KEY") ?? "").trim()
+  if (!apiKey) {
+    return ""
+  }
+
+  const params = new URLSearchParams({ apiKey })
+  const serverUrl = (Deno.env.get("EXCEPTIONLESS_SITE_SERVER_URL") ?? "").trim()
+
+  if (serverUrl) {
+    params.set("serverUrl", serverUrl)
+  }
+
+  const version = (Deno.env.get("EXCEPTIONLESS_SITE_VERSION") ?? "").trim()
+  if (version) {
+    params.set("version", version)
+  }
+
+  return `/assets/js/exceptionless-client.js?${params}`
+}
+
 function uniqueHeadingSlug(value: string, env: Record<string, unknown>): string {
   const counts = getHeadingSlugCounts(env)
   const baseSlug = slugifyHeading(value) || "section"

docs/_includes/layouts/base.vto

@@ -63,6 +63,15 @@
           <li class="menu-pricing"><a href="/pricing/">Pricing</a></li>
           <li class="menu-news"><a href="/news/">News</a></li>
           <li class="menu-help"><a href="/docs/">Docs</a></li>
+          <li class="menu-search">
+            <a
+              href="#site-search-modal"
+              data-site-search-open
+              aria-label="Search Exceptionless"
+              aria-keyshortcuts="Meta+K Control+K /"
+              title="Search Exceptionless (Command+K, Ctrl+K, or /)"
+            >Search</a>
+          </li>
           <li class="menu-log-in"><a href="{{ site.appUrl }}">Log In</a></li>
           <li class="menu-sign-up"><a href="{{ site.signupUrl }}">Sign Up</a></li>
         </ul>
@@ -74,7 +83,35 @@
   </div>
 </header>
 
-    {{ content }}
+    <main id="page-content">
+      {{ content }}
+    </main>
+
+    <div id="site-search-modal" class="site-search-modal" role="dialog" aria-modal="true" aria-labelledby="site-search-title" hidden data-search-ignore>
+      <div class="modal-backdrop in" data-site-search-close></div>
+      <div class="modal site-search-dialog" role="document">
+        <div class="modal-header">
+          <button class="close" type="button" data-site-search-close aria-label="Close search">&times;</button>
+          <h3 id="site-search-title">Search Exceptionless</h3>
+        </div>
+        <div class="modal-body site-search-body">
+          <form id="site-search-form" class="site-search-form" role="search">
+          <div class="site-search-input-row">
+            <i class="icon-search" aria-hidden="true"></i>
+            <input id="site-search-input" type="search" placeholder="Search docs, clients, self-hosting..." autocomplete="off" spellcheck="false" aria-labelledby="site-search-title">
+            <button id="site-search-clear" class="site-search-clear" type="button" aria-label="Clear search" hidden>&times;</button>
+          </div>
+          </form>
+          <p id="site-search-status" class="site-search-status" role="status" aria-live="polite">Start typing to search.</p>
+          <ol id="site-search-results" class="site-search-results"></ol>
+        </div>
+        <div class="modal-footer site-search-footer" aria-hidden="true">
+          <span>Up/Down to move</span>
+          <span>Enter to open</span>
+          <span>Esc to close</span>
+        </div>
+      </div>
+    </div>
 
     <div id="footer-wrapper">
   <footer id="content-info" class="container" role="contentinfo">
@@ -132,18 +169,15 @@
     <p class="copyright">&copy; {{ copyrightYear }} Exceptionless</p>
   </div>
 </div>
+    {{ if exceptionlessClientScriptSrc }}
+    <script type="module" src="{{ exceptionlessClientScriptSrc }}"></script>
+    {{ /if }}
+    <script type="module" src="/assets/js/site.js"></script>
     {{ for script of extraScripts || [] }}
     <script defer src="{{ script }}"></script>
     {{ /for }}
-    <script>
-      document.querySelectorAll("[data-toggle='collapse'][data-target]").forEach(function (toggle) {
-        toggle.addEventListener("click", function (event) {
-          event.preventDefault();
-          document.querySelectorAll(toggle.getAttribute("data-target")).forEach(function (target) {
-            target.classList.toggle("in");
-          });
-        });
-      });
-    </script>
+    {{ for script of extraModuleScripts || [] }}
+    <script type="module" src="{{ script }}"></script>
+    {{ /for }}
   </body>
 </html>

docs/_includes/layouts/docs.vto

@@ -3,40 +3,22 @@ layout: layouts/base.vto
 extraStyles:
   - /assets/css/prism.css
 ---
-<div class="page-header margin-top">
+<div class="page-header margin-top" data-search-ignore>
   <h1 id="documentation">Documentation</h1>
 </div>
 
 <div id="wrap" class="container" role="document">
-  <div id="responsive-menu"><button class="btn btn-primary" onclick="handleMenu()">Table of Contents</button></div>
+  <div id="responsive-menu" data-search-ignore><button class="btn btn-primary" type="button" data-docs-toc-toggle>Table of Contents</button></div>
   <div id="content" class="row-fluid">
-    <div class="toc well span3 visible-toc">
-      <div class="input-append">
-        <input class="span9" id="search-input" type="text" placeholder="Search docs...">
-        <button class="btn" type="button" onclick="handleSearch()">Go!</button>
-      </div>
+    <div class="toc well span3 visible-toc" data-search-ignore>
+      <form class="input-append" data-site-search-form role="search">
+        <input class="span9" name="q" type="search" placeholder="Search docs..." autocomplete="off" data-site-search-query>
+        <button class="btn" type="submit">Go!</button>
+      </form>
       {{ docsNavHtml(search, url) }}
     </div>
     <div class="well span9 docs">
       {{ content }}
     </div>
   </div>
 </div>
-
-<script>
-  function handleMenu() {
-    var toc = document.querySelector(".toc");
-    if (!toc) return;
-    toc.classList.toggle("visible-toc");
-    toc.classList.toggle("hidden-toc");
-  }
-
-  function handleSearch() {
-    var input = document.getElementById("search-input");
-    var filter = input ? input.value.toLowerCase() : "";
-    document.querySelectorAll(".toc-list li").forEach(function (item) {
-      var text = item.textContent.toLowerCase();
-      item.style.display = !filter || text.indexOf(filter) >= 0 ? "" : "none";
-    });
-  }
-</script>

docs/deno.json

@@ -1,14 +1,15 @@
 {
   "tasks": {
     "lume": "deno run -P=lume lume/cli.ts",
-    "build": "deno task lume && deno task postbuild",
-    "serve": "deno task build && deno run --allow-read=_site --allow-net=localhost,127.0.0.1 scripts/serve.ts",
+    "build": "deno task lume && deno task postbuild && deno bundle --platform=browser --minify --config=deno.json scripts/browser/exceptionless-client.ts -o _site/assets/js/exceptionless-client.js",
+    "serve": "deno task build && deno run --allow-read=_site --allow-net=localhost,127.0.0.1 --allow-env=PORT scripts/serve.ts",
     "postbuild": "deno run --allow-read --allow-write scripts/postbuild.ts",
-    "check": "deno check _config.ts scripts/site-collections.ts scripts/postbuild.ts scripts/serve.ts scripts/verify-links.ts scripts/find-unused.ts",
+    "check": "deno check _config.ts scripts/browser/exceptionless-client.ts scripts/site-collections.ts scripts/postbuild.ts scripts/serve.ts scripts/verify-links.ts scripts/find-unused.ts",
     "verify": "deno task build && deno run --allow-read scripts/verify-links.ts",
     "unused": "deno task build && deno run --allow-read scripts/find-unused.ts"
   },
   "imports": {
+    "@exceptionless/browser": "npm:@exceptionless/browser@3.2.1",
     "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3.2.6/"
   },
   "nodeModulesDir": "auto",