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
@@ -29,15 +33,30 @@ jobs:
       - name: Setup Deno
         uses: denoland/setup-deno@v2
         with:
-          deno-version: lts
+          deno-version: 2.5.7
           cache: true
 
+      - name: Require telemetry configuration for deployment
+        if: github.event_name != 'pull_request'
+        run: |
+          if [ -z "$EXCEPTIONLESS_SITE_API_KEY" ]; then
+            echo "EXCEPTIONLESS_SITE_API_KEY repository variable is required for website deployment." >&2
+            exit 1
+          fi
+
       - name: Check
         run: deno task check
 
       - name: Verify
         run: deno task verify
 
+      - name: Verify configured telemetry bootstrap
+        if: github.event_name == 'pull_request'
+        env:
+          EXCEPTIONLESS_SITE_API_KEY: 00000000000000000000000000000000
+          EXCEPTIONLESS_SITE_SERVER_URL: https://collector.example.invalid
+        run: deno task build && deno task verify:telemetry
+
       - name: Check unused assets
         run: deno run --allow-read scripts/find-unused.ts
 

.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

@@ -35,6 +35,7 @@
 <link rel="stylesheet" href="/assets/css/responsive.css">
 <link rel="stylesheet" href="/assets/css/fonts.css">
 <link rel="stylesheet" href="/assets/css/font-awesome.css">
+<link rel="stylesheet" href="/assets/css/prism.css">
 {{ for style of extraStyles || [] }}
 <link rel="stylesheet" href="{{ style }}">
 {{ /for }}
@@ -74,7 +75,39 @@
   </div>
 </header>
 
-    {{ content }}
+    <main id="page-content">
+      {{ content }}
+    </main>
+
+    <dialog id="site-search-modal" class="modal site-search-dialog" aria-label="Search Exceptionless" data-search-ignore>
+        <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"
+              role="combobox"
+              placeholder="Search docs, clients, self-hosting..."
+              autocomplete="off"
+              spellcheck="false"
+              aria-label="Search Exceptionless"
+              aria-autocomplete="list"
+              aria-controls="site-search-results"
+              aria-expanded="false"
+            >
+            <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" role="listbox" aria-label="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>
+    </dialog>
 
     <div id="footer-wrapper">
   <footer id="content-info" class="container" role="contentinfo">
@@ -132,18 +165,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

@@ -1,42 +1,29 @@
 ---
 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>
+      <button
+        class="docs-search-trigger"
+        type="button"
+        data-site-search-open
+        aria-label="Search documentation"
+        aria-keyshortcuts="Meta+K Control+K /"
+      >
+        <i class="icon-search" aria-hidden="true"></i>
+        <span>Search docs...</span>
+        <kbd aria-hidden="true">/</kbd>
+      </button>
       {{ 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/_includes/layouts/post.vto

@@ -1,7 +1,5 @@
 ---
 layout: layouts/base.vto
-extraStyles:
-  - /assets/css/prism.css
 ---
 <div class="page-header margin-top">
   <h1 id="news">News</h1>

docs/deno.json

@@ -1,14 +1,17 @@
 {
   "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",
-    "verify": "deno task build && deno run --allow-read scripts/verify-links.ts",
+    "check": "deno check _config.ts public/assets/js/site.js public/assets/js/site-search.js scripts/browser/exceptionless-client.ts scripts/site-collections.ts scripts/postbuild.ts scripts/serve.ts scripts/site-search.test.js scripts/verify-links.ts scripts/verify-telemetry.ts scripts/find-unused.ts",
+    "test": "deno test scripts/site-search.test.js",
+    "verify": "deno task build && deno task test && deno task verify:telemetry && deno run --allow-read scripts/verify-links.ts",
+    "verify:telemetry": "deno run --allow-read --allow-env=EXCEPTIONLESS_SITE_API_KEY scripts/verify-telemetry.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",