docs: restyle documentation to match AWS Developer Guide

docs/features/event-handler/appsync-graphql.md

@@ -1,7 +1,6 @@
 ---
 title: AppSync GraphQL
 description: Event Handler for AppSync GraphQL APIs
-status: new
 ---
 
 Event Handler for AWS AppSync GraphQL APIs simplifies routing and processing of events in AWS Lambda functions. It allows you to define resolvers for GraphQL types and fields, making it easier to handle GraphQL requests without the need for complex VTL or JavaScript templates.

docs/features/event-handler/http.md

@@ -1,7 +1,6 @@
 ---
 title: HTTP API
 description: Event handler for building HTTP APIs in AWS Lambda
-status: new
 ---
 
 Event handler for Amazon API Gateway REST and HTTP APIs, Application Loader Balancer (ALB), and Lambda Function URLs<!--, and VPC Lattice -->.

docs/features/metadata.md

@@ -1,7 +1,6 @@
 ---
 title: Metadata
 description: Utility to fetch data from the AWS Lambda Metadata endpoint
-status: new
 ---
 
 <!-- markdownlint-disable MD043 -->

docs/index.md

@@ -7,36 +7,9 @@ description: Powertools for AWS Lambda (TypeScript)
 
 Powertools for AWS Lambda (TypeScript) is a developer toolkit to implement Serverless best practices and increase developer velocity.
 
-You can use Powertools for AWS Lambda in both TypeScript and JavaScript code bases.
+You can use Powertools for AWS Lambda also in [Python](https://docs.aws.amazon.com/powertools/python/latest/){target="_blank" }, [Java](https://docs.aws.amazon.com/powertools/java/){target="_blank"}, and [.NET](https://docs.aws.amazon.com/powertools/dotnet/){target="_blank"}.
 
 <!-- markdownlint-disable MD050 -->
-<div class="grid cards" markdown>
-
-- :material-battery-charging:{ .lg .middle } __Features__
-
-    ---
-
-    Adopt one, a few, or all industry practices. **Progressively**.
-
-    [:octicons-arrow-right-24: All features](./features/index.md)
-
-- :heart:{ .lg .middle } __Support this project__
-
-    ---
-
-    Become a public reference customer, share your work, contribute, use Lambda Layers, etc.
-
-    [:octicons-arrow-right-24: Support](#support-powertools-for-aws)
-
-- :material-file-code:{ .lg .middle } __Available languages__
-
-    ---
-
-    Powertools for AWS Lambda is also available in other languages
-
-    :octicons-arrow-right-24: [Python](https://docs.aws.amazon.com/powertools/python/latest/){target="_blank" }, [Java](https://docs.aws.amazon.com/powertools/java/){target="_blank"}, and [.NET](https://docs.aws.amazon.com/powertools/dotnet/){target="_blank"}
-
-</div>
 
 ## Features
 

docs/javascript/aws-header.js

@@ -0,0 +1,189 @@
+(() => {
+  if (window.__awsHeaderMenusBound) {
+    return;
+  }
+
+  window.__awsHeaderMenusBound = true;
+
+  const menuSelector = ".aws-header__menu";
+  const summarySelector = ".aws-header__menu-summary";
+
+  const closeMenus = (except) => {
+    document.querySelectorAll(`${menuSelector}[open]`).forEach((menu) => {
+      if (menu !== except) {
+        menu.removeAttribute("open");
+      }
+    });
+  };
+
+  document.addEventListener("click", (event) => {
+    const summary = event.target.closest(summarySelector);
+
+    if (summary) {
+      const menu = summary.closest(menuSelector);
+      if (menu && !menu.open) {
+        closeMenus(menu);
+      }
+      return;
+    }
+
+    if (!event.target.closest(menuSelector)) {
+      closeMenus();
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") {
+      return;
+    }
+
+    const openMenu = document.querySelector(`${menuSelector}[open]`);
+    if (!openMenu) {
+      return;
+    }
+
+    const summary = openMenu.querySelector(summarySelector);
+    closeMenus();
+    if (summary) {
+      summary.focus();
+    }
+  });
+})();
+
+(() => {
+  if (window.__awsNavCollapseBound) {
+    return;
+  }
+
+  window.__awsNavCollapseBound = true;
+
+  const collapsedClass = "aws-nav-collapsed";
+  const collapseButtonClass = "aws-nav-collapse";
+  const reopenButtonClass = "aws-nav-reopen";
+  const storageKey = "aws-nav-collapsed";
+
+  const chevronSvg = (direction) => `
+    <svg aria-hidden="true" focusable="false" viewBox="0 0 16 16">
+      <path d="M${direction === "left" ? "10.5 3 5.5 8l5 5" : "5.5 3l5 5-5 5"}" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </svg>
+  `;
+
+  const menuSvg = () => `
+    <svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
+      <path d="M4 6h12M4 10h12M4 14h12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
+    </svg>
+  `;
+
+  const setReopenPosition = () => {
+    const mainInner = document.querySelector(".md-main__inner");
+    if (!mainInner) {
+      return;
+    }
+
+    const rect = mainInner.getBoundingClientRect();
+    document.documentElement.style.setProperty(
+      "--aws-nav-reopen-left",
+      `${Math.max(rect.left + 12, 12)}px`
+    );
+    document.documentElement.style.setProperty(
+      "--aws-nav-reopen-top",
+      `${Math.max(rect.top + window.scrollY, 0)}px`
+    );
+  };
+
+  const queueReopenPosition = () => {
+    window.requestAnimationFrame(setReopenPosition);
+  };
+
+  const restoreState = () => {
+    let isCollapsed = false;
+
+    try {
+      isCollapsed = localStorage.getItem(storageKey) === "true";
+    } catch (_) {
+      isCollapsed = false;
+    }
+
+    document.documentElement.classList.toggle(collapsedClass, isCollapsed);
+  };
+
+  const setCollapsed = (isCollapsed) => {
+    document.documentElement.classList.toggle(collapsedClass, isCollapsed);
+    queueReopenPosition();
+
+    try {
+      localStorage.setItem(storageKey, String(isCollapsed));
+    } catch (_) {
+      // Ignore storage failures in private browsing or locked-down contexts.
+    }
+  };
+
+  const createButton = ({ className, label, direction, icon }) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = className;
+    button.setAttribute("aria-label", label);
+    button.innerHTML = icon === "menu" ? menuSvg() : chevronSvg(direction);
+    return button;
+  };
+
+  const ensureButtons = () => {
+    const sidebar = document.querySelector(".md-sidebar--primary");
+    const collapseButtonHost =
+      sidebar?.querySelector(".md-sidebar__scrollwrap") ?? sidebar;
+
+    if (collapseButtonHost && !sidebar.querySelector(`.${collapseButtonClass}`)) {
+      collapseButtonHost.append(
+        createButton({
+          className: collapseButtonClass,
+          label: "Collapse navigation",
+          direction: "left",
+        })
+      );
+    }
+
+    if (!document.querySelector(`.${reopenButtonClass}`)) {
+      document.body.append(
+        createButton({
+          className: reopenButtonClass,
+          label: "Open navigation",
+          icon: "menu",
+        })
+      );
+    }
+  };
+
+  restoreState();
+
+  document.addEventListener("click", (event) => {
+    const collapseButton = event.target.closest(`.${collapseButtonClass}`);
+    const reopenButton = event.target.closest(`.${reopenButtonClass}`);
+
+    if (collapseButton) {
+      setCollapsed(true);
+      return;
+    }
+
+    if (reopenButton) {
+      setCollapsed(false);
+    }
+  });
+
+  const init = () => {
+    restoreState();
+    ensureButtons();
+    queueReopenPosition();
+  };
+
+  window.addEventListener("resize", queueReopenPosition);
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init, { once: true });
+  } else {
+    init();
+  }
+
+  if (window.document$ && typeof window.document$.subscribe === "function") {
+    window.document$.subscribe(init);
+  }
+})();

docs/javascript/extra.js

@@ -11,6 +11,12 @@ function enableClipboardElements() {
   });
 }
 
+document.addEventListener('click', (event) => {
+  document.querySelectorAll('.aws-prefs[open]').forEach((details) => {
+    if (!details.contains(event.target)) details.removeAttribute('open');
+  });
+});
+
 const attachListeners = () => {
   enableSearchOnBlurElement();
   enableClipboardElements();

docs/overrides/main.html

@@ -10,4 +10,8 @@
 {% block extrahead %}
     <meta name="guide-name" content="Powertools for AWS Lambda (TypeScript)">
     <meta name="service-name" content="Powertools for AWS Lambda">
-{% endblock %}
+{% endblock %}
+
+{% block content %}
+{{ super() }}
+{% endblock %}

docs/overrides/partials/footer.html

@@ -0,0 +1,78 @@
+{#-
+  This file was automatically generated - do not edit
+-#}
+{% set external_icon -%}<span class="aws-footer__external-icon" aria-hidden="true"><svg viewBox="0 0 16 16" focusable="false"><path d="M6.5 3.5h-3v9h9v-3" /><path d="M8.5 3.5h4v4" /><path d="M12.5 3.5l-6 6" /></svg></span>{%- endset %}
+<footer class="md-footer aws-footer">
+  {% if page.previous_page or page.next_page %}
+    {% if page.meta and page.meta.hide %}
+      {% set hidden = "hidden" if "footer" in page.meta.hide %}
+    {% endif %}
+    <nav class="aws-footer__pager md-grid" aria-label="{{ lang.t('footer') }}" {{ hidden }}>
+      {% if page.next_page %}
+        <p class="aws-footer__pager-line">
+          <strong>Next topic:</strong>
+          <a href="{{ page.next_page.url | url }}">{{ page.next_page.title }}</a>
+        </p>
+      {% endif %}
+      {% if page.previous_page %}
+        <p class="aws-footer__pager-line">
+          <strong>Previous topic:</strong>
+          <a href="{{ page.previous_page.url | url }}">{{ page.previous_page.title }}</a>
+        </p>
+      {% endif %}
+    </nav>
+  {% endif %}
+
+  <section class="aws-footer__panel" aria-label="AWS documentation footer">
+    <div class="aws-footer__panel-inner md-grid">
+      <nav class="aws-footer__columns" aria-label="AWS documentation resources">
+        <section class="aws-footer__column" aria-labelledby="aws-footer-get-started">
+          <h2 class="aws-footer__heading" id="aws-footer-get-started">Get Started</h2>
+          <ul class="aws-footer__list">
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://aws.amazon.com/getting-started/hands-on/" target="_blank" rel="noopener noreferrer">AWS Hands-On Tutorials{{ external_icon }}</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://aws.amazon.com/solutions/" target="_blank" rel="noopener noreferrer">AWS Solutions Library{{ external_icon }}</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://aws.amazon.com/getting-started/decision-guides/" target="_blank" rel="noopener noreferrer">AWS Decision Guides{{ external_icon }}</a></li>
+          </ul>
+        </section>
+
+        <section class="aws-footer__column" aria-labelledby="aws-footer-service-guides">
+          <h2 class="aws-footer__heading" id="aws-footer-service-guides">Service Guides</h2>
+          <ul class="aws-footer__list">
+            <li><a class="aws-footer__link" href="https://docs.aws.amazon.com/decision-guides/latest/generative-ai-on-aws-how-to-choose/guide.html">Choosing a generative AI service</a></li>
+            <li><a class="aws-footer__link" href="https://docs.aws.amazon.com/">AWS service guides</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://github.com/aws/aws-cli" target="_blank" rel="noopener noreferrer">AWS CLI Tutorials on GitHub{{ external_icon }}</a></li>
+          </ul>
+        </section>
+
+        <section class="aws-footer__column" aria-labelledby="aws-footer-developer-tools">
+          <h2 class="aws-footer__heading" id="aws-footer-developer-tools">Developer Tools</h2>
+          <ul class="aws-footer__list">
+            <li><a class="aws-footer__link" href="https://docs.aws.amazon.com/code-library/">AWS Code Example Library</a></li>
+            <li><a class="aws-footer__link" href="https://docs.aws.amazon.com/cli/">AWS CLI</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://builder.aws.com/" target="_blank" rel="noopener noreferrer">AWS Builder Center{{ external_icon }}</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://aws.amazon.com/blogs/developer/" target="_blank" rel="noopener noreferrer">AWS Developer Tools Blog{{ external_icon }}</a></li>
+          </ul>
+        </section>
+
+        <section class="aws-footer__column" aria-labelledby="aws-footer-helpful-links">
+          <h2 class="aws-footer__heading" id="aws-footer-helpful-links">Helpful Links</h2>
+          <ul class="aws-footer__list">
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://github.com/awslabs/mcp" target="_blank" rel="noopener noreferrer">Download the AWS Docs MCP Server{{ external_icon }}</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://console.aws.amazon.com/" target="_blank" rel="noopener noreferrer">Sign into the AWS Console{{ external_icon }}</a></li>
+            <li><a class="aws-footer__link aws-footer__link--external" href="https://repost.aws/" target="_blank" rel="noopener noreferrer">AWS re:Post{{ external_icon }}</a></li>
+          </ul>
+        </section>
+      </nav>
+
+      <div class="aws-footer__legal md-typeset">
+        <div class="md-copyright">
+          {% if config.copyright %}
+            <div class="md-copyright__highlight">
+              {{ config.copyright | replace('<span class="copyright">', '<a href="#">Cookie preferences</a> | <span class="copyright">') | replace('© 2025,', '© 2026,') }}
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </section>
+</footer>