docs: benchmark dashboard exploration tool

site/.gitignore

@@ -2,4 +2,5 @@
 resources/
 node_modules/
 package-lock.json
-.hugo_build.lock
+.hugo_build.lock
+dist/

site/assets/scss/_styles_project.scss

@@ -1,3 +1,8 @@
+// Import Bootstrap variables and mixins
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+
 // Custom theme colors and variables
 $primary: #9333EA;
 $secondary: #4F46E5;

site/content/en/tools/benchmark-report-explorer/index.md

@@ -0,0 +1,48 @@
+---
+title: "Performance Benchmark Report Explorer"
+description: "Envoy Gateway Performance Benchmark Report Explorer Tool"
+type: "tools"
+includeBenchmark: true
+---
+
+<style>
+  .bt-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .bt-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    margin-bottom: 2.5rem;
+    background: linear-gradient(135deg, #9333EA 0%, #4F46E5 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 1.4;
+    letter-spacing: -0.02em;
+  }
+
+  .bt-description {
+    font-size: 1.25rem;
+    color: #666;
+    margin-bottom: 2rem;
+    line-height: 1.6;
+  }
+</style>
+
+<div class="bt-container">
+  <h1 class="bt-title">Performance Benchmark Report Explorer</h1>
+  <p class="bt-description">
+    Explore benchmark results from Envoy Gateway Releleases. The test code is open source and available for you to run and contribute to.
+  </p>
+  <p class="bt-description">Curious to learn more? Join the conversation in <code>#gateway-users</code> channel in <a href="https://communityinviter.com/apps/envoyproxy/envoy">Envoy Slack</a></p>
+
+  {{< benchmark-dashboard
+    version="latest"
+    showHeader="false"
+    class="mt-4"
+  >}}
+</div>

site/layouts/partials/navbar.html

@@ -1,5 +1,5 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark flex-column flex-md-row td-navbar">
+<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light td-navbar">
   <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
     {{ $logoRegular := resources.Get "icons/logo.svg" }}
     {{ $logoWhite := resources.Get "icons/logo-white.svg" }}

site/layouts/shortcodes/benchmark-dashboard.html

@@ -0,0 +1,36 @@
+<!-- layouts/shortcodes/benchmark-dashboard.html -->
+{{- $apiBase := .Get "apiBase" | default site.Params.benchmark.apiBase -}}
+{{- $version := .Get "version" | default "latest" -}}
+{{- $theme := .Get "theme" | default "light" -}}
+{{- $showHeader := .Get "showHeader" | default "false" -}}
+{{- $showVersionSelector := .Get "showVersionSelector" | default "true" -}}
+{{- $showSummaryCards := .Get "showSummaryCards" | default "true" -}}
+{{- $tabs := .Get "tabs" | default "overview,latency,resources" -}}
+{{- $containerClass := .Get "class" | default "my-8" -}}
+
+<!-- Always load CSS to make it available for Shadow DOM -->
+<link rel="stylesheet" href="{{ "/css/benchmark-dashboard.css" | relURL }}">
+
+<div
+  data-react-component="benchmark-dashboard"
+  data-api-base="{{ $apiBase }}"
+  data-version="{{ $version }}"
+  data-theme="{{ $theme }}"
+  data-show-header="{{ $showHeader }}"
+  data-show-version-selector="{{ $showVersionSelector }}"
+  data-show-summary-cards="{{ $showSummaryCards }}"
+  data-tabs="{{ $tabs }}"
+  data-container-class="{{ $containerClass }}"
+  class="benchmark-dashboard-container {{ $containerClass }}"
+>
+  <!-- Loading placeholder -->
+  <div class="flex items-center justify-center py-12">
+    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mr-3"></div>
+    <span class="text-gray-600">Loading Benchmark Dashboard...</span>
+  </div>
+</div>
+
+<!-- Only load JS if not on a standalone page (which loads shadow DOM version via body-end.html) -->
+{{ if not .Page.Params.includeBenchmark }}
+<script type="module" src="{{ "/js/benchmark-dashboard.js" | relURL }}"></script>
+{{ end }}

site/layouts/tools/single.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+  {{/* SEO meta tags */}}
+  <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
+  <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
+
+  {{/* Open Graph meta tags */}}
+  <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
+  <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
+  <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
+  <meta property="og:url" content="{{ .Permalink }}">
+
+  {{/* Bootstrap CSS from CDN for reliable styling */}}
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+  {{/* Custom project styles */}}
+  {{ $projectStyles := resources.Get "scss/_styles_project.scss" | css.Sass }}
+  <link rel="stylesheet" href="{{ $projectStyles.RelPermalink }}">
+
+
+</head>
+<body class="td-{{ .Kind }}">
+  <!-- Include site navbar -->
+  {{ partial "navbar.html" . }}
+
+  <div class="tool-container">
+    <main role="main" class="tool-content">
+      {{ block "main" . }}
+        {{ .Content }}
+      {{ end }}
+    </main>
+  </div>
+
+  <!-- Include site footer -->
+  {{ partial "footer.html" . }}
+
+  {{/* Bootstrap JS from CDN */}}
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+
+  <!-- Include any additional JavaScript needed for the Tools -->
+  {{ if .Params.includeBenchmark }}
+    <script type="module" src="{{ "/js/benchmark-dashboard.js" | relURL }}"></script>
+  {{ end }}
+</body>
+</html>