google__adk-docs/overrides/main.html

<!--
 Copyright 2026 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

{% extends "base.html" %}

{% block extrahead %}
  <!-- HTML Meta Tags -->
  <title>Agent Development Kit (ADK)</title>
  <meta name="description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">

  <!-- Facebook Meta Tags -->
  <meta property="og:url" content="https://adk.dev">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Agent Development Kit (ADK)">
  <meta property="og:description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
  <meta property="og:image" content="https://adk.dev/assets/adk-social-card.png">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="adk.dev">
  <meta property="twitter:url" content="https://adk.dev">
  <meta name="twitter:title" content="Agent Development Kit (ADK)">
  <meta name="twitter:description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
  <meta name="twitter:image" content="https://adk.dev/assets/adk-social-card.png">

  <!-- Pagefind search UI. hooks/pagefind.py builds the index and guards both
       filenames, so a third asset added here needs adding there too. -->
  <link rel="stylesheet" href="{{ 'pagefind/pagefind-component-ui.css' | url }}">
  <script type="module" src="{{ 'pagefind/pagefind-component-ui.js' | url }}"></script>
  <!-- `| url` covers only the assets above. document.currentScript is null in a
       module script, so the bundle always fetches its index from the origin
       root: correct at a root domain, wrong under a subpath. -->

  <!-- Raise termSimilarity so "LlmAgent" beats pages that merely say "agent"
       often. Set on pagefindOptions, which is read lazily; configureInstance()
       is ignored once the components create the instance on connect. -->
  <script type="module">
    window.PagefindComponents
      .getInstanceManager()
      .getInstance("default")
      .pagefindOptions.ranking = { termSimilarity: 2.0 };
  </script>

  <!-- Mirror Material's data-md-color-scheme onto data-pf-theme, the only
       thing that switches Pagefind's dark palette. -->
  <script>
    (function () {
      var sync = function () {
        var root = document.documentElement;
        if (document.body.getAttribute("data-md-color-scheme") === "slate") {
          root.setAttribute("data-pf-theme", "dark");
        } else {
          root.removeAttribute("data-pf-theme");
        }
      };
      document.addEventListener("DOMContentLoaded", function () {
        sync();
        new MutationObserver(sync).observe(document.body, {
          attributes: true,
          attributeFilter: ["data-md-color-scheme"],
        });
      });
    })();
  </script>

  <!-- Upstream bug: reset-on-close clears the results but never the input, so
       the next keystroke appends to the old query. Writing through the native
       setter keeps the component in step. Delete this once Pagefind fixes it. -->
  <script>
    (function () {
      document.addEventListener("DOMContentLoaded", function () {
        var modal = document.querySelector("pagefind-modal");
        // Bind once: the modal outlives instant navigation.
        if (!modal || modal.dataset.adkPfClearOnClose) return;
        modal.dataset.adkPfClearOnClose = "1";
        modal.addEventListener(
          "close",
          function () {
            var input =
              modal.querySelector("input") ||
              (modal.shadowRoot && modal.shadowRoot.querySelector("input"));
            if (!input || !input.value) return;
            Object.getOwnPropertyDescriptor(
              HTMLInputElement.prototype,
              "value",
            ).set.call(input, "");
            input.dispatchEvent(
              new Event("input", { bubbles: true, composed: true }),
            );
          },
          true, // `close` does not bubble, but capture still reaches it.
        );
      });
    })();
  </script>

  <!-- Result links are light DOM, so navigation.instant swaps the page without
       unloading the header and the modal stays open. document$ emits after every
       swap; close() no-ops when the modal is already closed. -->
  <script>
    (function () {
      document.addEventListener("DOMContentLoaded", function () {
        if (!window.document$ || window.__adkPagefindCloseOnNav) return;
        window.__adkPagefindCloseOnNav = true;
        window.document$.subscribe(function () {
          var modal = document.querySelector("pagefind-modal");
          if (modal && typeof modal.close === "function") modal.close();
        });
      });
    })();
  </script>

  <!-- Restore the `/` and `s` shortcuts lost with Material's search plugin;
       Pagefind's trigger parses one binding only, already spent on mod+k.
       Ignore them with a modifier held, while typing, or while already open. -->
  <script>
    (function () {
      if (window.__adkPagefindSearchKeys) return;
      window.__adkPagefindSearchKeys = true;
      document.addEventListener("keydown", function (event) {
        if (event.key !== "/" && event.key !== "s") return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        var target = event.target;
        if (target instanceof Element) {
          if (target.isContentEditable) return;
          if (target.closest("input, textarea, select")) return;
        }
        var modal = document.querySelector("pagefind-modal");
        if (!modal || typeof modal.open !== "function") return;
        var dialog = modal.querySelector("dialog");
        if (dialog && dialog.open) return;
        event.preventDefault();
        modal.open();
      });
    })();
  </script>
{% endblock %}

<!-- top of page announcement banner here: -->
<!--
<span class="announce-item">
  <strong>Headline!</strong> descriptive text
  <a href="get-started/" target="_blank" rel="noopener">
    Link text
  </a>
</span>
-->
{% block announce %}
<span class="announce-item">
  <strong>Released!</strong>
  <a href="/2.0/">
    ADK TypeScript 2.0 GA
  </a>
  is now available with graph workflows support! <a href="/graphs/#typescript">Get started</a>
</span>
{% endblock %}