diff --git a/docs/features/event-handler/appsync-graphql.md b/docs/features/event-handler/appsync-graphql.md index fc97428b55..e0920f6ea2 100644 --- a/docs/features/event-handler/appsync-graphql.md +++ b/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. diff --git a/docs/features/event-handler/http.md b/docs/features/event-handler/http.md index 3a93b51857..417ed9d511 100644 --- a/docs/features/event-handler/http.md +++ b/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. diff --git a/docs/features/metadata.md b/docs/features/metadata.md index e820bec9b2..5b521b6cd4 100644 --- a/docs/features/metadata.md +++ b/docs/features/metadata.md @@ -1,7 +1,6 @@ --- title: Metadata description: Utility to fetch data from the AWS Lambda Metadata endpoint -status: new --- diff --git a/docs/index.md b/docs/index.md index d3da99e342..800af326b4 100644 --- a/docs/index.md +++ b/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"}. -
- -- :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"} - -
## Features diff --git a/docs/javascript/aws-header.js b/docs/javascript/aws-header.js new file mode 100644 index 0000000000..3990060273 --- /dev/null +++ b/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) => ` + + `; + + const menuSvg = () => ` + + `; + + 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); + } +})(); diff --git a/docs/javascript/extra.js b/docs/javascript/extra.js index f0df000448..485de99ba4 100644 --- a/docs/javascript/extra.js +++ b/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(); diff --git a/docs/media/aws-logo-dark.svg b/docs/media/aws-logo-dark.svg new file mode 100644 index 0000000000..4a79380f34 --- /dev/null +++ b/docs/media/aws-logo-dark.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + diff --git a/docs/overrides/main.html b/docs/overrides/main.html index 64dcbf5499..0fef10f733 100644 --- a/docs/overrides/main.html +++ b/docs/overrides/main.html @@ -10,4 +10,8 @@ {% block extrahead %} -{% endblock %} \ No newline at end of file +{% endblock %} + +{% block content %} +{{ super() }} +{% endblock %} diff --git a/docs/overrides/partials/footer.html b/docs/overrides/partials/footer.html new file mode 100644 index 0000000000..4771f603bd --- /dev/null +++ b/docs/overrides/partials/footer.html @@ -0,0 +1,78 @@ +{#- + This file was automatically generated - do not edit +-#} +{% set external_icon -%}{%- endset %} + diff --git a/docs/overrides/partials/header.html b/docs/overrides/partials/header.html new file mode 100644 index 0000000000..3ce23c3014 --- /dev/null +++ b/docs/overrides/partials/header.html @@ -0,0 +1,191 @@ +{#- + AWS documentation portal-inspired header. + Rebuilt from Material for MkDocs' partials/header.html while preserving + drawer, search, palette, and header component hooks. +-#} +{% set class = "md-header aws-header" %} +{% if "navigation.tabs.sticky" in features %} + {% set class = class ~ " md-header--shadow md-header--lifted" %} +{% elif "navigation.tabs" not in features %} + {% set class = class ~ " md-header--shadow" %} +{% endif %} +
+
+ +
+ +
+ +
+
diff --git a/docs/overrides/partials/search.html b/docs/overrides/partials/search.html new file mode 100644 index 0000000000..607ca947bc --- /dev/null +++ b/docs/overrides/partials/search.html @@ -0,0 +1,43 @@ +{#- + This file is copied from Material for MkDocs' partials/search.html and only + changes the visible placeholder/label copy for the AWS docs header. +-#} + diff --git a/docs/overrides/partials/toc.html b/docs/overrides/partials/toc.html new file mode 100644 index 0000000000..5caa2381af --- /dev/null +++ b/docs/overrides/partials/toc.html @@ -0,0 +1,30 @@ +{#- + This file was automatically generated - do not edit +-#} +{% set title = "On this page" %} + diff --git a/docs/stylesheets/aws-content.css b/docs/stylesheets/aws-content.css new file mode 100644 index 0000000000..0649e449aa --- /dev/null +++ b/docs/stylesheets/aws-content.css @@ -0,0 +1,129 @@ +/* AWS docs restyle: content typography + layout (owned by Minion C) */ + +/* -------------------------------------------------------------------------- + * Main layout: keep the page shell broad, but the prose column readable. + * Material uses 20px root rems, so 45rem is approximately a 900px column. + * ------------------------------------------------------------------------ */ +.md-grid { + max-width: 1440px; +} + +.md-content__inner { + max-width: 45rem; + padding-top: 0; +} + +.md-main__inner { + margin-top: 0.8rem; +} + +/* -------------------------------------------------------------------------- + * Light-scheme content colors from current AWS Developer Guide docs. + * Dark mode inherits the existing Material/Powertools slate palette. + * ------------------------------------------------------------------------ */ +[data-md-color-scheme="default"] .md-typeset { + color: #0f141a; +} + +.md-typeset { + font-family: "Amazon Ember", Helvetica, Arial, sans-serif; +} + +[data-md-color-scheme="default"] .md-typeset h1, +[data-md-color-scheme="default"] .md-typeset h2, +[data-md-color-scheme="default"] .md-typeset h3, +[data-md-color-scheme="default"] .md-typeset h4, +[data-md-color-scheme="default"] .md-typeset h5 { + color: #0f141a; +} + +/* -------------------------------------------------------------------------- + * Typography: current AWS Developer Guide content column. + * The live page promotes the document title into a generated Cloudscape + * display heading (42px/700); the older in-body h1 rule was 36px/300. + * ------------------------------------------------------------------------ */ +.md-typeset h1, +.md-typeset h2, +.md-typeset h3, +.md-typeset h4, +.md-typeset h5 { + font-family: "Amazon Ember", Helvetica, Arial, sans-serif; + letter-spacing: normal; +} + +.md-typeset h1 { + font-size: 2.625em; + font-weight: 700; + line-height: 1; + margin: 0 0 10px; + padding: 0; +} + +.md-typeset h2 { + font-size: 1.625em; + font-weight: 600; + line-height: 1.226em; + margin: 1em 0 0.75em; + padding: 1em 0 0; +} + +.md-typeset h3 { + font-size: 1.375em; + font-weight: 700; + line-height: 1.226em; + margin: 1.25em 0 0.75em; + padding: 0; +} + +.md-typeset h4 { + font-size: 1.25em; + font-weight: 700; + line-height: 1.267em; + margin: 1.2em 0 0.75em; + padding: 0; +} + +.md-typeset h5 { + font-size: 1.125em; + font-weight: 700; + line-height: 1.267em; + margin: 1.2em 0 1em; + padding: 0; +} + +.md-typeset p { + line-height: 1.5; + margin: 1em 0; +} + +/* -------------------------------------------------------------------------- + * Lists: AWS-style top-level spacing with standard markers. + * Keep card grids and nested lists on Material's existing spacing. + * ------------------------------------------------------------------------ */ +.md-typeset > ul { + list-style-type: disc; +} + +.md-typeset > ol { + list-style-type: decimal; +} + +.md-typeset > ul > li + li, +.md-typeset > ol > li + li { + margin-top: 1em; +} + +.md-typeset li::marker { + color: currentColor; +} + +/* -------------------------------------------------------------------------- + * Section dividers. + * ------------------------------------------------------------------------ */ +.md-typeset hr { + border-bottom: 1px solid var(--aws-border-secondary, #ebebf0); +} + +[data-md-color-scheme="default"] .md-typeset hr { + border-bottom-color: #ebebf0; +} diff --git a/docs/stylesheets/aws-footer.css b/docs/stylesheets/aws-footer.css new file mode 100644 index 0000000000..f09068f688 --- /dev/null +++ b/docs/stylesheets/aws-footer.css @@ -0,0 +1,224 @@ +/* AWS docs restyle: footer (owned by Minion B) */ + +.aws-footer.md-footer { + background: #fff; + color: #0f141a; +} + +.aws-footer__pager { + background: #fff; + border-top: 1px solid #ebebf0; + color: #0f141a; + display: block; + padding-bottom: 24px; + padding-top: 24px; +} + +.aws-footer__pager-line { + color: #0f141a; + font-size: 15px; + line-height: 22px; + margin: 0; +} + +.aws-footer__pager-line + .aws-footer__pager-line { + margin-top: 8px; +} + +.aws-footer__pager-line strong { + color: #0f141a; + font-weight: 700; +} + +.aws-footer__pager-line a { + color: #006ce0; + font-weight: 400; + text-decoration: none; +} + +.aws-footer__pager-line a:hover, +.aws-footer__pager-line a:focus-visible { + color: #006ce0; + text-decoration: underline; + text-underline-offset: 0.25em; +} + +.aws-footer__panel { + background: #161d26; + color: rgba(255, 255, 255, 0.85); + font-family: var(--md-text-font), sans-serif; + padding: 48px 0 0; + position: relative; +} + +.aws-footer__panel-inner { + box-sizing: border-box; + margin-left: auto; + margin-right: auto; + max-width: 1440px; + padding-left: 40px; + padding-right: 40px; + position: relative; + width: 100%; +} + +.aws-footer__columns { + box-sizing: border-box; + display: grid; + gap: 32px 40px; + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.aws-footer__column { + margin: 0; +} + +.aws-footer__heading { + color: #fff; + font-family: var(--md-text-font), sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; + margin: 0 0 16px; +} + +.aws-footer__list { + list-style: none; + margin: 0; + padding: 0; +} + +.aws-footer__list li + li { + margin-top: 11px; +} + +.aws-footer__link { + color: rgba(255, 255, 255, 0.85); + font-family: var(--md-text-font), sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.4; + text-decoration: none; +} + +.aws-footer__link:hover, +.aws-footer__link:focus-visible { + color: #fff; + text-decoration: underline; + text-underline-offset: 0.25em; +} + +.aws-footer__external-icon { + color: currentcolor; + display: inline-flex; + height: 12px; + margin-left: 4px; + vertical-align: -1px; + width: 12px; +} + +.aws-footer__external-icon svg { + display: block; + fill: none; + height: 12px; + stroke: currentcolor; + stroke-linecap: square; + stroke-linejoin: miter; + stroke-width: 1.5; + width: 12px; +} + +.aws-footer__legal { + border-top: 1px solid rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.72); + font-family: var(--md-text-font), sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 18px; + margin-top: 40px; + padding-bottom: 24px; + padding-top: 24px; +} + +.aws-footer__legal .md-copyright, +.aws-footer__legal .md-copyright__highlight, +.aws-footer__legal #awsdocs-legal-zone-copyright, +.aws-footer__legal .copyright { + color: rgba(255, 255, 255, 0.72); + font-family: var(--md-text-font), sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 18px; +} + +.aws-footer__legal .md-copyright { + max-width: none; + padding: 0; + width: 100%; +} + +.aws-footer__legal a { + color: rgba(255, 255, 255, 0.72); + font-weight: 400; + margin-left: 10px; + margin-right: 10px; + text-decoration: none; +} + +.aws-footer__legal a:first-child { + margin-left: 0; +} + +.aws-footer__legal a:hover, +.aws-footer__legal a:focus-visible { + color: #fff; + text-decoration: underline; + text-underline-offset: 0.25em; +} + +@media screen and (max-width: 62.5em) { + .aws-footer__columns { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media screen and (max-width: 44.9375em) { + .aws-footer__pager { + padding-bottom: 20px; + padding-top: 20px; + } + + .aws-footer__panel { + padding-top: 40px; + } + + .aws-footer__panel-inner { + padding-left: 24px; + padding-right: 24px; + } + + .aws-footer__columns { + grid-template-columns: 1fr; + } +} + +[data-md-color-scheme="slate"] .aws-footer.md-footer, +[data-md-color-scheme="slate"] .aws-footer__pager { + background: #0f141a; + color: rgba(255, 255, 255, 0.88); +} + +[data-md-color-scheme="slate"] .aws-footer__pager { + border-top-color: #424650; +} + +[data-md-color-scheme="slate"] .aws-footer__pager-line, +[data-md-color-scheme="slate"] .aws-footer__pager-line strong { + color: rgba(255, 255, 255, 0.88); +} + +[data-md-color-scheme="slate"] .aws-footer__pager-line a, +[data-md-color-scheme="slate"] .aws-footer__pager-line a:hover, +[data-md-color-scheme="slate"] .aws-footer__pager-line a:focus-visible { + color: #42b4ff; +} diff --git a/docs/stylesheets/aws-header.css b/docs/stylesheets/aws-header.css new file mode 100644 index 0000000000..996ba51d7f --- /dev/null +++ b/docs/stylesheets/aws-header.css @@ -0,0 +1,563 @@ +/* AWS docs restyle: portal header (owned by Minion A) */ + +:root { + --aws-header-text: #0f141a; + --aws-header-muted: #424650; + --aws-header-border: #dedee3; + --aws-header-link-blue: #006ce0; + --aws-header-utility-bg: #0f141a; + --aws-header-orange: #ff9900; + --aws-header-orange-hover: #ec7211; +} + +[data-md-color-scheme="default"] { + --md-primary-fg-color: #ffffff; + --md-primary-fg-color--light: #ffffff; + --md-primary-fg-color--dark: #f9f9fb; + --md-primary-bg-color: var(--aws-header-text); + --md-primary-bg-color--light: var(--aws-header-muted); +} + +.aws-header.md-header { + background: transparent; + box-shadow: none; + color: var(--aws-header-text); +} + +.aws-header.md-header--shadow, +.aws-header.md-header[data-md-state="shadow"], +.aws-header.md-header--shadow[data-md-state="shadow"] { + box-shadow: none; +} + +.aws-utility-bar { + background: var(--aws-header-utility-bg); + color: #ffffff; + min-height: 36px; +} + +.aws-utility-bar__inner { + align-items: center; + box-sizing: border-box; + display: flex; + gap: 24px; + justify-content: flex-end; + max-width: none; + min-height: 36px; + padding-left: 24px; + padding-right: 24px; + width: 100%; +} + +.aws-utility-bar__preferences { + display: flex; + margin: 0; + position: relative; +} + +.aws-prefs__palette-sentinel { + display: none; +} + +.aws-utility-bar__link { + align-items: center; + background: none; + border: 0; + color: #ffffff; + cursor: pointer; + display: inline-flex; + font-size: 13px; + font-weight: 700; + line-height: 1.3; + margin: 0; + padding: 0; + text-decoration: none; +} + +.aws-prefs { + position: relative; +} + +.aws-prefs__summary { + align-items: center; + gap: 0.25rem; + list-style: none; +} + +.aws-prefs__summary::-webkit-details-marker { + display: none; +} + +.aws-prefs[open] .aws-prefs__summary { + color: #42b4ff; + text-decoration: none; +} + +.aws-prefs__caret { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid currentcolor; + height: 0; + margin-top: 2px; + width: 0; +} + +.aws-prefs[open] .aws-prefs__caret { + border-bottom: 4px solid currentcolor; + border-top: 0; +} + +.aws-prefs__panel { + background: #161d26; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); + color: #ffffff; + min-width: 200px; + padding: 16px; + position: absolute; + right: 0; + top: calc(100% + 10px); + z-index: 10; +} + +.aws-prefs__heading { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + font-size: 16px; + font-weight: 700; + line-height: 1.4; + padding-bottom: 12px; +} + +.aws-prefs__section-label { + color: #ffffff; + font-size: 14px; + line-height: 1.4; + margin-top: 14px; +} + +.aws-prefs__options { + display: grid; + gap: 10px; + margin-top: 10px; +} + +.aws-prefs__option { + align-items: center; + color: #ffffff; + cursor: pointer; + display: inline-flex; + font-size: 14px; + gap: 8px; + line-height: 1.4; +} + +.aws-radio { + border: 2px solid rgba(255, 255, 255, 0.7); + border-radius: 50%; + box-sizing: border-box; + display: inline-flex; + flex: 0 0 auto; + height: 14px; + position: relative; + width: 14px; +} + +.aws-radio::after { + background: #42b4ff; + border-radius: 50%; + content: ""; + height: 6px; + left: 50%; + opacity: 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 6px; +} + +body[data-md-color-media="(prefers-color-scheme: light)"] .aws-prefs__option[for="__palette_1"] .aws-radio, +body[data-md-color-media="(prefers-color-scheme: dark)"] .aws-prefs__option[for="__palette_2"] .aws-radio, +body[data-md-color-media="(prefers-color-scheme)"] .aws-prefs__option[for="__palette_0"] .aws-radio, +#__palette_1:checked ~ .aws-prefs .aws-prefs__option[for="__palette_1"] .aws-radio, +#__palette_2:checked ~ .aws-prefs .aws-prefs__option[for="__palette_2"] .aws-radio, +#__palette_0:checked ~ .aws-prefs .aws-prefs__option[for="__palette_0"] .aws-radio { + border-color: #42b4ff; +} + +body[data-md-color-media="(prefers-color-scheme: light)"] .aws-prefs__option[for="__palette_1"] .aws-radio::after, +body[data-md-color-media="(prefers-color-scheme: dark)"] .aws-prefs__option[for="__palette_2"] .aws-radio::after, +body[data-md-color-media="(prefers-color-scheme)"] .aws-prefs__option[for="__palette_0"] .aws-radio::after, +#__palette_1:checked ~ .aws-prefs .aws-prefs__option[for="__palette_1"] .aws-radio::after, +#__palette_2:checked ~ .aws-prefs .aws-prefs__option[for="__palette_2"] .aws-radio::after, +#__palette_0:checked ~ .aws-prefs .aws-prefs__option[for="__palette_0"] .aws-radio::after { + opacity: 1; +} + +.aws-utility-bar__link:hover, +.aws-utility-bar__link:focus, +.aws-prefs__summary:hover, +.aws-prefs__summary:focus { + color: #ffffff; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} + +.aws-main-header { + background: #ffffff; + border-bottom: 1px solid var(--aws-header-border); + color: var(--aws-header-text); +} + +.aws-main-header__inner.md-header__inner { + align-items: center; + box-sizing: border-box; + display: flex; + gap: 0; + max-width: none; + min-height: 72px; + padding-bottom: 0; + padding-left: 24px; + padding-right: 24px; + padding-top: 0; + width: 100%; +} + +.aws-header__drawer.md-header__button { + color: var(--aws-header-text); + flex: 0 0 auto; + margin: 0; +} + +.aws-header__logo.md-logo { + align-items: center; + display: inline-flex; + flex: 0 0 auto; + height: 72px; + margin: 0; + padding: 0; +} + +.aws-header__logo img, +[data-md-color-scheme="default"] .aws-header__logo img, +[data-md-color-scheme="slate"] .aws-header__logo img { + content: url("../media/aws-logo-dark.svg"); + height: 32px; + width: auto; +} + +.aws-header__nav { + align-items: center; + display: flex; + flex: 0 1 auto; + gap: 0; + margin-left: 60px; + min-width: 0; +} + +.aws-header__menu { + display: block; + flex: 0 0 auto; + position: relative; +} + +.aws-header__nav-link { + background: transparent; + border: 0; + color: var(--aws-header-text); + cursor: pointer; + display: inline-flex; + flex: 0 0 auto; + font-size: 14px; + font-weight: 700; + line-height: 1.4; + list-style: none; + margin: 0; + padding: 26px 20px; + text-decoration: none; +} + +.aws-header__menu-summary::-webkit-details-marker { + display: none; +} + +.aws-header__menu-summary::marker { + content: ""; +} + +.aws-header__nav-link:hover, +.aws-header__nav-link:focus { + color: var(--aws-header-text); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} + +.aws-header__menu[open] > .aws-header__menu-summary { + color: var(--aws-header-link-blue); + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 0.55em; +} + +.aws-header__menu-panel { + background: #ffffff; + border: 1px solid #ebebf0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + color: var(--aws-header-text); + display: grid; + gap: 22px; + left: 20px; + min-width: 380px; + padding: 24px 32px; + position: absolute; + top: calc(100% + 1px); + width: 380px; + z-index: 1000; +} + +.aws-header__menu-section { + display: grid; + gap: 8px; +} + +.aws-header__menu-heading { + color: var(--aws-header-text); + font-size: 16px; + font-weight: 700; + line-height: 1.35; +} + +.aws-header__menu-link { + align-items: baseline; + color: var(--aws-header-text); + display: inline-flex; + font-size: 14px; + font-weight: 400; + gap: 0.3rem; + line-height: 1.45; + text-decoration: none; + width: fit-content; +} + +.aws-header__menu-link:hover, +.aws-header__menu-link:focus { + color: var(--aws-header-link-blue); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} + +.aws-header__menu-link--external::after { + background-color: currentcolor; + content: ""; + display: inline-block; + flex: 0 0 auto; + height: 12px; + margin-left: 2px; + -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4v1.5H4.5v7h7V9H13v4H3V3zm6 0h4v4h-1.5V5.56L7.53 9.53 6.47 8.47l3.97-3.97H9V3z'/%3E%3C/svg%3E") center / contain no-repeat; + mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4v1.5H4.5v7h7V9H13v4H3V3zm6 0h4v4h-1.5V5.56L7.53 9.53 6.47 8.47l3.97-3.97H9V3z'/%3E%3C/svg%3E") center / contain no-repeat; + width: 12px; +} + +.aws-header__actions { + align-items: center; + display: flex; + flex: 0 1 auto; + gap: 16px; + margin-left: auto; + min-width: 0; +} + +.aws-header__search-toggle.md-header__button { + color: var(--aws-header-text); + flex: 0 0 auto; + margin: 0; +} + +.aws-header__console { + align-items: center; + background: var(--aws-header-orange); + border-radius: 9999px; + color: var(--aws-header-text); + display: inline-flex; + flex: 0 0 auto; + font-size: 14px; + font-weight: 700; + justify-content: center; + line-height: 1.2; + padding: 0.45rem 1.25rem; + text-decoration: none; + white-space: nowrap; +} + +.aws-header__console:hover, +.aws-header__console:focus { + background: var(--aws-header-orange-hover); + color: var(--aws-header-text); + text-decoration: none; +} + +.aws-header .md-search__form { + border-radius: 8px; + overflow: hidden; +} + +.aws-header .md-search__input { + border-radius: 8px; + box-shadow: none; +} + +[data-md-color-scheme="default"] .aws-header .md-search__form { + background-color: #ffffff; + border: 1px solid #c6c6cd; + box-shadow: none; +} + +[data-md-color-scheme="default"] .aws-header .md-search__form:hover, +[data-md-color-scheme="default"] .aws-header .md-search__form:focus-within { + border-color: var(--aws-header-link-blue); + box-shadow: 0 0 0 1px var(--aws-header-link-blue); +} + +[data-md-color-scheme="default"] .aws-header .md-search__input { + background-color: #ffffff; + box-shadow: none; + color: var(--aws-header-text); +} + +[data-md-color-scheme="default"] .aws-header .md-search__input::placeholder, +[data-md-color-scheme="default"] .aws-header .md-search__icon, +[data-md-color-scheme="default"] .aws-header .md-search__options, +[data-md-color-scheme="default"] .aws-header .md-search__options .md-icon { + color: var(--aws-header-muted); +} + +[data-md-color-scheme="default"] .aws-header .md-search__input + .md-search__icon:hover, +[data-md-color-scheme="default"] .aws-header .md-search__options .md-icon:hover { + color: var(--aws-header-link-blue); +} + +[data-md-color-scheme="slate"] .aws-utility-bar, +[data-md-color-scheme="slate"] .aws-main-header { + background-color: #161d26; + color: #ffffff; +} + +[data-md-color-scheme="slate"] .aws-main-header { + border-bottom-color: #2a3541; +} + +[data-md-color-scheme="slate"] .aws-header__drawer.md-header__button, +[data-md-color-scheme="slate"] .aws-header__search-toggle.md-header__button, +[data-md-color-scheme="slate"] .aws-header__nav-link { + color: rgba(255, 255, 255, 0.9); +} + +[data-md-color-scheme="slate"] .aws-header__nav-link:hover, +[data-md-color-scheme="slate"] .aws-header__nav-link:focus { + color: #ffffff; +} + +[data-md-color-scheme="slate"] .aws-header__menu[open] > .aws-header__menu-summary { + color: #42b4ff; +} + +[data-md-color-scheme="slate"] .aws-header__menu-panel { + background: #ffffff; + color: var(--aws-header-text); +} + +[data-md-color-scheme="slate"] .aws-header__logo img { + filter: invert(1) grayscale(1) brightness(1.8); +} + +[data-md-color-scheme="slate"] .aws-header .md-search__form { + background-color: #0f141a; + border: 1px solid #424650; + box-shadow: none; +} + +[data-md-color-scheme="slate"] .aws-header .md-search__form:hover, +[data-md-color-scheme="slate"] .aws-header .md-search__form:focus-within { + border-color: #42b4ff; + box-shadow: 0 0 0 1px #42b4ff; +} + +[data-md-color-scheme="slate"] .aws-header .md-search__input { + background-color: #0f141a; + box-shadow: none; + color: #ffffff; +} + +[data-md-color-scheme="slate"] .aws-header .md-search__input::placeholder, +[data-md-color-scheme="slate"] .aws-header .md-search__icon, +[data-md-color-scheme="slate"] .aws-header .md-search__options, +[data-md-color-scheme="slate"] .aws-header .md-search__options .md-icon { + color: rgba(255, 255, 255, 0.72); +} + +@media screen and (min-width: 60em) { + .aws-header__search-toggle { + display: none; + } + + .aws-header .md-search { + flex: 0 0 300px; + margin: 0; + padding: 0; + width: 300px; + } + + .aws-header .md-search__inner { + width: 100%; + } + + .aws-header .md-search__form { + height: 38px; + } + + .aws-header .md-search__input { + font-size: 14px; + height: 100%; + } +} + +@media screen and (min-width: 76.25em) { + .aws-header__drawer { + display: none; + } +} + +@media screen and (max-width: 76.234375em) { + .aws-main-header__inner.md-header__inner { + gap: 16px; + } + + .aws-header__nav { + display: none; + } +} + +@media screen and (max-width: 59.984375em) { + .aws-utility-bar__inner { + gap: 24px; + } + + .aws-main-header__inner.md-header__inner { + min-height: 56px; + } + + .aws-header__logo.md-logo { + height: 56px; + } + + .aws-header__actions { + gap: 0.25rem; + } + + .aws-header__console { + display: none; + } +} diff --git a/docs/stylesheets/aws-nav.css b/docs/stylesheets/aws-nav.css new file mode 100644 index 0000000000..22e6bd161a --- /dev/null +++ b/docs/stylesheets/aws-nav.css @@ -0,0 +1,501 @@ +/* AWS docs restyle: left sidebar + right rail (owned by Minion B) */ + +[data-md-color-scheme="default"] { + --aws-nav-text: #0f141a; + --aws-nav-secondary-text: #424650; + --aws-nav-muted-text: #656871; + --aws-nav-link: #006ce0; + --aws-nav-divider: #ebebf0; +} + +[data-md-color-scheme="slate"] { + --aws-nav-text: #f2f3f3; + --aws-nav-secondary-text: #d5dbdb; + --aws-nav-muted-text: #aab7b8; + --aws-nav-link: #42b4ff; + --aws-nav-divider: #424650; +} + +/* -------------------------------------------------------------------------- + * Left sidebar: AWS Developer Guide style navigation + * ------------------------------------------------------------------------ */ + +.md-sidebar--primary .md-sidebar__scrollwrap, +.md-sidebar--secondary .md-sidebar__scrollwrap { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.md-sidebar { + padding-top: 0; +} + +.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar, +.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar { + display: none; +} + +.aws-nav-collapse, +.aws-nav-reopen { + display: none; +} + +@media screen and (min-width: 76.25em) { + .md-sidebar--primary { + min-height: calc(100vh - var(--md-header-height, 2.4rem)); + position: sticky; + } + + .md-sidebar--primary::after { + background-color: #c6c6cd; + bottom: 0; + content: ""; + pointer-events: none; + position: absolute; + right: 0; + top: 0; + width: 1px; + z-index: 1; + } + + [data-md-color-scheme="slate"] .md-sidebar--primary::after { + background-color: var(--aws-nav-divider); + } + + .md-sidebar--primary .md-sidebar__scrollwrap { + position: relative; + } + + .md-sidebar--primary .md-sidebar__scrollwrap::before { + color: var(--aws-nav-text); + content: "Powertools for AWS Lambda (TypeScript)"; + display: block; + font-size: 16px; + font-weight: 700; + line-height: 1.25; + margin: 0 0.6rem 0 0; + padding: 0.2rem 2.1rem 0.15rem 36px; + } + + .md-sidebar--primary .md-sidebar__inner::before { + border-bottom: 1px solid var(--aws-nav-divider); + color: var(--aws-nav-muted-text); + content: "Developer Guide"; + display: block; + font-size: 12px; + font-weight: 400; + line-height: 1.35; + margin: 0 0.6rem 0.55rem 0; + padding: 0 0 0.75rem 36px; + } + + .md-sidebar--primary .md-nav--primary > .md-nav__title { + display: none; + } + + .aws-nav-collapse { + align-items: center; + background: transparent; + border: 0; + border-radius: 4px; + color: #424650; + cursor: pointer; + display: inline-flex; + height: 28px; + justify-content: center; + padding: 0; + width: 28px; + z-index: 5; + } + + .aws-nav-collapse:hover, + .aws-nav-collapse:focus { + color: #006ce0; + } + + .aws-nav-collapse:focus-visible { + outline: 2px solid #006ce0; + outline-offset: 2px; + } + + .aws-nav-collapse svg { + display: block; + height: 16px; + width: 16px; + } + + .aws-nav-collapse { + position: absolute; + right: 0.2rem; + top: 0.05rem; + } + + .aws-nav-reopen { + align-items: center; + background: #161d26; + border: 0; + border-radius: 50%; + color: #fff; + cursor: pointer; + display: none; + height: 40px; + justify-content: center; + left: var( + --aws-nav-reopen-left, + calc((100vw - min(100vw, 72rem)) / 2 + 0.6rem) + ); + padding: 0; + position: fixed; + top: var(--aws-nav-reopen-top, calc(var(--md-header-height, 2.4rem) + 0.6rem)); + width: 40px; + z-index: 8; + } + + .aws-nav-reopen:hover, + .aws-nav-reopen:focus { + background: #253142; + } + + .aws-nav-reopen:focus-visible { + outline: 3px solid #0972d3; + outline-offset: 3px; + } + + .aws-nav-reopen svg { + display: block; + height: 20px; + width: 20px; + } + + .aws-nav-collapsed .md-sidebar--primary { + display: none; + } + + .aws-nav-collapsed .md-main__inner { + padding-left: 2.4rem; + position: relative; + } + + .aws-nav-collapsed .aws-nav-reopen { + display: inline-flex; + } +} + +.md-sidebar--primary .md-nav--primary, +.md-sidebar--primary .md-nav--primary .md-nav { + --aws-nav-caret-gap: 6px; + --aws-nav-caret-size: 14px; + --aws-nav-indent-step: 16px; + --aws-nav-label-indent: 24px; + --aws-nav-structural-indent: 12px; + font-size: 14px; +} + +.md-sidebar--primary .md-nav--primary .md-nav[data-md-level="1"] { + --aws-nav-label-indent: calc( + 24px + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + ); +} + +.md-sidebar--primary .md-nav--primary .md-nav[data-md-level="2"] { + --aws-nav-label-indent: calc( + 24px + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + ); +} + +.md-sidebar--primary .md-nav--primary .md-nav[data-md-level="3"] { + --aws-nav-label-indent: calc( + 24px + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + + var(--aws-nav-indent-step) - var(--aws-nav-structural-indent) + ); +} + +.md-sidebar--primary .md-nav--primary .md-nav__link { + color: var(--aws-nav-text); + font-size: 14px; + line-height: 1.4; + margin-top: 0; + min-height: 0; + padding-bottom: 0.35rem; + padding-left: var(--aws-nav-label-indent); + padding-top: 0.35rem; + position: relative; + text-decoration: none; + text-transform: none; +} + +.md-sidebar--primary .md-nav--primary .md-nav__item { + margin: 0; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__link, +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__container + > .md-nav__link { + align-items: center; + display: flex; + font-weight: 400; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__container { + align-items: center; + display: flex; + padding-left: var(--aws-nav-label-indent); + position: relative; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__container + > a.md-nav__link { + flex: 1 1 auto; + padding-left: 0; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__container + > label.md-nav__link { + bottom: 0; + flex: 0 0 auto; + left: calc( + var(--aws-nav-label-indent) - var(--aws-nav-caret-size) - + var(--aws-nav-caret-gap) + ); + order: -1; + padding-left: 0; + padding-right: 0; + position: absolute; + top: 0; + width: var(--aws-nav-caret-size); +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__container + > label.md-nav__link + .md-nav__icon { + left: 0; +} + +.md-sidebar--primary .md-nav--primary .md-nav__container { + padding-bottom: 0; + padding-top: 0; +} + +.md-sidebar--primary .md-nav--primary .md-nav__link:hover, +.md-sidebar--primary .md-nav--primary .md-nav__link:focus { + color: var(--aws-nav-link); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} + +.md-sidebar--primary .md-nav--primary .md-nav__link--active, +.md-sidebar--primary .md-nav--primary .md-nav__link--active code { + color: var(--aws-nav-link); + font-weight: 700; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__link:not([for="__toc"]) + .md-nav__icon { + align-self: center; + background-color: transparent; + border-radius: 0; + flex: 0 0 var(--aws-nav-caret-size); + height: var(--aws-nav-caret-size); + left: calc( + var(--aws-nav-label-indent) - var(--aws-nav-caret-size) - + var(--aws-nav-caret-gap) + ); + margin-left: 0; + margin-right: 0; + order: -1; + position: absolute; + width: var(--aws-nav-caret-size); +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__link:not([for="__toc"]) + .md-nav__icon:hover { + background-color: transparent; +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__link:not([for="__toc"]) + .md-nav__icon::after { + background-color: #424650; + border-radius: 0; + display: block; + height: var(--aws-nav-caret-size); + -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); + mask-image: url('data:image/svg+xml;charset=utf-8,'); + -webkit-mask-size: var(--aws-nav-caret-size) var(--aws-nav-caret-size); + mask-size: var(--aws-nav-caret-size) var(--aws-nav-caret-size); + transition: transform 0.25s; + transform-origin: center; + vertical-align: 0; + width: var(--aws-nav-caret-size); +} + +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__toggle:checked + + .md-nav__link + .md-nav__icon::after, +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-nav__toggle:checked + ~ .md-nav__container + > .md-nav__link + .md-nav__icon::after, +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-toggle--indeterminate + + .md-nav__link + .md-nav__icon::after, +.md-sidebar--primary + .md-nav--primary + .md-nav__item--nested + > .md-toggle--indeterminate + ~ .md-nav__container + > .md-nav__link + .md-nav__icon::after { + transform: rotate(90deg); +} + +/* -------------------------------------------------------------------------- + * Right rail: AWS "on this page" table of contents + * ------------------------------------------------------------------------ */ + +.md-sidebar--secondary .md-nav--secondary { + margin-bottom: 0; + font-size: 14px; + line-height: 20px; +} + +@media screen and (min-width: 76.25em) { + .md-sidebar--secondary { + width: 13.3125rem; + } + + .md-sidebar--secondary .md-sidebar__inner, + .md-sidebar--secondary .md-nav--secondary { + width: 100%; + } +} + +.md-sidebar--secondary .md-nav--secondary > .md-nav__title { + background: transparent; + color: var(--aws-nav-text); + font-size: 18px; + font-weight: 700; + line-height: 22px; + margin: 0; + padding: 4px 0; + position: static; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__list { + border-left: 0; + margin: 0; + padding: 0; +} + +.md-sidebar--secondary .md-nav--secondary > .md-nav__list { + /* AWS uses one rail at the left edge of the page-contents list. */ + border-left: 1px solid var(--aws-nav-divider); + margin: 4px 0 0; + padding: 0 0 0.4rem; + position: relative; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__item { + margin: 4px 0; + position: relative; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__link--active::before { + background-color: var(--aws-nav-link); + bottom: -2px; + content: ""; + left: -1px; + position: absolute; + top: -2px; + transition: background-color 0.2s ease; + width: 2px; + z-index: 1; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__link { + border-left: 0; + color: var(--aws-nav-secondary-text); + display: flex; + font-size: 14px; + line-height: 20px; + margin: 0; + margin-top: 0; + min-height: 0; + padding: 0 0 0 14px; + position: relative; + text-decoration: none; + transition: color 0.15s ease; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__link:hover, +.md-sidebar--secondary .md-nav--secondary .md-nav__link:focus { + color: var(--aws-nav-link); + text-decoration: none; +} + +.md-sidebar--secondary .md-nav--secondary .md-nav__link--active, +.md-sidebar--secondary .md-nav--secondary .md-nav__link--active code { + color: var(--aws-nav-link); + font-weight: 700; +} + +.aws-page-feedback { + display: none; +} + +.md-sidebar--secondary .aws-page-feedback { + border-top: 1px solid var(--aws-nav-divider); + display: block; + margin-top: 0.8rem; + padding-top: 0.8rem; +} + +.md-sidebar--secondary .aws-page-feedback__link { + color: var(--aws-nav-link); + font-size: 14px; + line-height: 20px; + text-decoration: none; +} + +.md-sidebar--secondary .aws-page-feedback__link:hover, +.md-sidebar--secondary .aws-page-feedback__link:focus { + color: var(--aws-nav-link); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} diff --git a/docs/stylesheets/aws-restyle.css b/docs/stylesheets/aws-restyle.css new file mode 100644 index 0000000000..ad56fe06b7 --- /dev/null +++ b/docs/stylesheets/aws-restyle.css @@ -0,0 +1,1024 @@ +/* + * AWS Developer Guide restyle for MkDocs Material + * ------------------------------------------------ + * Replicates the look & feel of official AWS docs (docs.aws.amazon.com), + * which are built on the Cloudscape Design System (awsui). + * Color values are Cloudscape design-token fallbacks extracted from the + * production CSS of the AWS Developer Guides. + */ + +/* -------------------------------------------------------------------------- + * Amazon Ember (extracted from AWS docs production CSS) + * ------------------------------------------------------------------------ */ +@font-face { + font-family: "Amazon Ember"; + font-style: normal; + font-weight: 300; + src: url("fonts/amazon-ember-300.woff") format("woff"); +} +@font-face { + font-family: "Amazon Ember"; + font-style: normal; + font-weight: 400; + src: url("fonts/amazon-ember-400.woff") format("woff"); +} +@font-face { + font-family: "Amazon Ember"; + font-style: italic; + font-weight: 400; + src: url("fonts/amazon-ember-400-italic.woff") format("woff"); +} +@font-face { + font-family: "Amazon Ember"; + font-style: normal; + font-weight: 700; + src: url("fonts/amazon-ember-700.woff") format("woff"); +} +@font-face { + font-family: "Amazon Ember"; + font-style: normal; + font-weight: 900; + src: url("fonts/amazon-ember-900.woff") format("woff"); +} + +/* -------------------------------------------------------------------------- + * Fonts + * ------------------------------------------------------------------------ */ +:root { + --md-text-font: "Amazon Ember", Helvetica, Arial, sans-serif; + --md-code-font: Monaco, Menlo, Consolas, "Courier Prime", Courier, + "Courier New", monospace; +} + +/* -------------------------------------------------------------------------- + * Color tokens - light scheme + * ------------------------------------------------------------------------ */ +[data-md-color-scheme="default"] { + /* Header bar: awsdocs dark header */ + --md-primary-fg-color: #161d26; + --md-primary-fg-color--light: #2a3541; + --md-primary-fg-color--dark: #0f141a; + --md-primary-bg-color: #ffffff; + --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); + + /* Accent: Cloudscape link blue */ + --md-accent-fg-color: #006ce0; + --md-accent-fg-color--transparent: rgba(0, 108, 224, 0.1); + + /* Text */ + --md-default-fg-color: #0f141a; /* --color-text-body-default */ + --md-default-fg-color--light: #424650; /* --color-text-body-secondary */ + --md-default-fg-color--lighter: #656871; + --md-default-fg-color--lightest: #ebebf0; + --md-default-bg-color: #ffffff; + + /* Links */ + --md-typeset-a-color: #006ce0; /* --color-text-link-default */ + --aws-link-hover-color: #002b66; /* --color-text-link-hover */ + + /* Code */ + --md-code-fg-color: #16191f; + --md-code-bg-color: #f3f3f7; /* inline code bg */ + --aws-code-block-bg: #f9f9f9; /* block code bg */ + --aws-border-default: #c6c6cd; /* --color-border-divider-default */ + --aws-border-secondary: #ebebf0; + + /* Tables */ + --md-typeset-table-color: #c6c6cd; + --aws-table-header-bg: #f3f3f7; + + /* Admonitions (AWS note / warning / important callouts) */ + --aws-note-bg: rgba(241, 250, 255, 0.8); + --aws-note-border: rgba(0, 115, 187, 0.35); + --aws-note-icon: #006ce0; + --aws-note-code-bg: #e3edf3; + --aws-warning-bg: hsla(10, 75%, 97%, 0.8); + --aws-warning-border: rgba(223, 51, 18, 0.35); + --aws-warning-icon: #db0000; + --aws-warning-code-bg: #ede3e0; + --aws-important-bg: var(--aws-warning-bg); + --aws-important-border: var(--aws-warning-border); + --aws-important-icon: var(--aws-warning-icon); + --aws-important-code-bg: var(--aws-warning-code-bg); + + /* Footer */ + --md-footer-bg-color: #161d26; + --md-footer-bg-color--dark: #0f141a; +} + +/* -------------------------------------------------------------------------- + * Color tokens - dark scheme (Cloudscape dark-mode equivalents) + * ------------------------------------------------------------------------ */ +[data-md-color-scheme="slate"] { + --md-primary-fg-color: #161d26; + --md-primary-fg-color--light: #2a3541; + --md-primary-fg-color--dark: #0f141a; + --md-primary-bg-color: #ffffff; + --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); + + --md-accent-fg-color: #42b4ff; + --md-accent-fg-color--transparent: rgba(66, 180, 255, 0.1); + + --md-default-bg-color: #0f141a; + --md-typeset-a-color: #42b4ff; /* Cloudscape dark link */ + --aws-link-hover-color: #75cfff; + + --md-code-bg-color: #1b232d; + --aws-code-block-bg: #161d26; + --aws-border-default: #424650; + --aws-border-secondary: #2a3541; + + --md-typeset-table-color: #424650; + --aws-table-header-bg: #1b232d; + + --aws-note-bg: #12293b; + --aws-note-border: rgba(0, 161, 201, 0.35); + --aws-note-icon: #00a1c9; + --aws-note-code-bg: #0a2030; + --aws-warning-bg: #270a11; + --aws-warning-border: rgba(209, 50, 18, 0.35); + --aws-warning-icon: #ff5d64; + --aws-warning-code-bg: #180308; + --aws-important-bg: var(--aws-warning-bg); + --aws-important-border: var(--aws-warning-border); + --aws-important-icon: var(--aws-warning-icon); + --aws-important-code-bg: var(--aws-warning-code-bg); + + --md-footer-bg-color: #161d26; + --md-footer-bg-color--dark: #0b0f14; +} + +/* -------------------------------------------------------------------------- + * Header / tabs: fixed dark bar like awsdocs-header + * ------------------------------------------------------------------------ */ +.md-header { + background-color: var(--md-primary-fg-color); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.md-tabs { + background-color: var(--md-primary-fg-color); + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.md-header a:hover, +.md-tabs__link:hover { + color: #42b4ff; +} + +.md-tabs__link--active { + border-bottom: 2px solid #42b4ff; + color: #ffffff; +} + +/* -------------------------------------------------------------------------- + * Typography: current AWS Developer Guide scale + * base 16px, line-height 1.5; h1 is the current generated page title + * size/weight (42px/700), not the legacy in-body 300-weight title. + * ------------------------------------------------------------------------ */ +.md-typeset { + font-size: 0.8rem; /* 16px */ + line-height: 1.5; +} + +.md-typeset h1 { + color: var(--md-default-fg-color); + font-size: 2.625em; + font-weight: 700; + line-height: 1; + margin: 1em 0 0.5em; +} + +.md-typeset h2 { + color: var(--md-default-fg-color); + font-size: 1.625em; + font-weight: 600; + margin: 1em 0 0.75em; +} + +.md-typeset h3 { + color: var(--md-default-fg-color); + font-size: 1.375em; + font-weight: 700; + margin-top: 1.25em; +} + +.md-typeset h4 { + font-size: 1.25em; + font-weight: 700; +} + +.md-typeset h5 { + color: var(--md-default-fg-color); + font-size: 1.125em; + font-weight: 700; + text-transform: none; +} + +/* -------------------------------------------------------------------------- + * Links: no underline by default, underline + darker blue on hover + * ------------------------------------------------------------------------ */ +.md-typeset a { + border-bottom: none; /* remove dashed underline from extra.css */ + text-decoration: none; +} + +.md-typeset a:hover, +.md-typeset a:focus { + color: var(--aws-link-hover-color); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; +} + +/* -------------------------------------------------------------------------- + * Code: inline + blocks + * ------------------------------------------------------------------------ */ +.md-typeset code { + background-color: var(--md-code-bg-color); + border-radius: 2px; + padding: 0 3px; +} + +.md-typeset p > code, +.md-typeset li > code { + font-weight: 400; /* AWS does not bold inline code */ +} + +.md-typeset pre > code { + background-color: var(--aws-code-block-bg); + border-radius: 0; + padding: 16px; +} + +.md-typeset .highlight { + background-color: var(--aws-code-block-bg); + border: 1px solid var(--aws-border-default); + border-radius: 3px; +} + +.md-typeset .highlight pre { + margin: 0; +} + +/* Keep tabbed code groups coherent with bordered blocks */ +.md-typeset .tabbed-block .highlight { + border: none; + border-top: 1px solid var(--aws-border-secondary); + border-radius: 0; +} + +/* -------------------------------------------------------------------------- + * Admonitions: AWS callouts + * Live AWS Developer Guides currently render Warning and Important with the + * same red/error scheme (status-warning icon with error color), so keep the + * semantic mappings separate even though their token values match today: + * - Note (blue): note, info, tip, success, question, abstract, example, quote + * - Warning (red): warning, caution, attention + * - Important (red): danger, failure, bug, error + * Uses the Cloudscape status-info/status-warning SVG strokes from live AWS docs. + * ------------------------------------------------------------------------ */ +:root { + --aws-admonition-icon-note: url("data:image/svg+xml;charset=utf-8,"); + --aws-admonition-icon-warning: url("data:image/svg+xml;charset=utf-8,"); + + --md-admonition-icon--note: var(--aws-admonition-icon-note); + --md-admonition-icon--info: var(--aws-admonition-icon-note); + --md-admonition-icon--tip: var(--aws-admonition-icon-note); + --md-admonition-icon--success: var(--aws-admonition-icon-note); + --md-admonition-icon--question: var(--aws-admonition-icon-note); + --md-admonition-icon--abstract: var(--aws-admonition-icon-note); + --md-admonition-icon--example: var(--aws-admonition-icon-note); + --md-admonition-icon--quote: var(--aws-admonition-icon-note); + --md-admonition-icon--warning: var(--aws-admonition-icon-warning); + --md-admonition-icon--danger: var(--aws-admonition-icon-warning); + --md-admonition-icon--failure: var(--aws-admonition-icon-warning); + --md-admonition-icon--bug: var(--aws-admonition-icon-warning); + --md-admonition-icon--error: var(--aws-admonition-icon-warning); + --md-admonition-icon--caution: var(--aws-admonition-icon-warning); + --md-admonition-icon--attention: var(--aws-admonition-icon-warning); +} + +.md-typeset .admonition, +.md-typeset details { + background-color: var(--aws-note-bg); + border: 2px solid var(--aws-note-border); + border-radius: var(--border-radius-alert-thlkk1, 12px); + box-shadow: none; + color: var(--md-default-fg-color); + font-size: 1em; + line-height: 1.5; + margin: 16px 0; + padding: 15px 20px; +} + +.md-typeset .admonition-title, +.md-typeset summary { + background-color: transparent !important; + color: var(--md-default-fg-color); + font-size: 1em; + font-weight: 700; + line-height: 1.5; + margin: 0; + padding: 0 0 0 27px !important; +} + +.md-typeset summary { + padding-right: 36px !important; +} + +.md-typeset .admonition-title::before, +.md-typeset summary::before { + background-color: var(--aws-note-icon); + height: 16px; + left: 0; + top: 4px; + width: 16px; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 16px 16px; + mask-size: 16px 16px; +} + +.md-typeset .admonition > :not(.admonition-title), +.md-typeset details > :not(summary) { + padding-left: 27px; +} + +.md-typeset .admonition p, +.md-typeset details p { + margin: 5px 0 0 !important; +} + +.md-typeset .admonition code, +.md-typeset details code { + background-color: var(--aws-note-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset .admonition, +[data-md-color-scheme="slate"] .md-typeset details { + border-width: 1px; +} + +/* AWS Warning variants */ +.md-typeset .admonition.warning, +.md-typeset .admonition.caution, +.md-typeset .admonition.attention, +.md-typeset details.warning, +.md-typeset details.caution, +.md-typeset details.attention { + background-color: var(--aws-warning-bg); + border-color: var(--aws-warning-border); +} + +/* AWS Important/error variants */ +.md-typeset .admonition.danger, +.md-typeset .admonition.failure, +.md-typeset .admonition.bug, +.md-typeset .admonition.error, +.md-typeset details.danger, +.md-typeset details.failure, +.md-typeset details.bug, +.md-typeset details.error { + background-color: var(--aws-important-bg); + border-color: var(--aws-important-border); +} + +.md-typeset .admonition.warning code, +.md-typeset .admonition.caution code, +.md-typeset .admonition.attention code, +.md-typeset details.warning code, +.md-typeset details.caution code, +.md-typeset details.attention code { + background-color: var(--aws-warning-code-bg); +} + +.md-typeset .admonition.danger code, +.md-typeset .admonition.failure code, +.md-typeset .admonition.bug code, +.md-typeset .admonition.error code, +.md-typeset details.danger code, +.md-typeset details.failure code, +.md-typeset details.bug code, +.md-typeset details.error code { + background-color: var(--aws-important-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset .admonition code, +[data-md-color-scheme="slate"] .md-typeset details code { + background-color: var(--aws-note-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset .admonition.warning code, +[data-md-color-scheme="slate"] .md-typeset .admonition.caution code, +[data-md-color-scheme="slate"] .md-typeset .admonition.attention code, +[data-md-color-scheme="slate"] .md-typeset details.warning code, +[data-md-color-scheme="slate"] .md-typeset details.caution code, +[data-md-color-scheme="slate"] .md-typeset details.attention code { + background-color: var(--aws-warning-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset .admonition.danger code, +[data-md-color-scheme="slate"] .md-typeset .admonition.failure code, +[data-md-color-scheme="slate"] .md-typeset .admonition.bug code, +[data-md-color-scheme="slate"] .md-typeset .admonition.error code, +[data-md-color-scheme="slate"] .md-typeset details.danger code, +[data-md-color-scheme="slate"] .md-typeset details.failure code, +[data-md-color-scheme="slate"] .md-typeset details.bug code, +[data-md-color-scheme="slate"] .md-typeset details.error code { + background-color: var(--aws-important-code-bg); +} + +.md-typeset .warning > .admonition-title::before, +.md-typeset .caution > .admonition-title::before, +.md-typeset .attention > .admonition-title::before, +.md-typeset details.warning > summary::before, +.md-typeset details.caution > summary::before, +.md-typeset details.attention > summary::before { + background-color: var(--aws-warning-icon); +} + +.md-typeset .danger > .admonition-title::before, +.md-typeset .failure > .admonition-title::before, +.md-typeset .bug > .admonition-title::before, +.md-typeset .error > .admonition-title::before, +.md-typeset details.danger > summary::before, +.md-typeset details.failure > summary::before, +.md-typeset details.bug > summary::before, +.md-typeset details.error > summary::before { + background-color: var(--aws-important-icon); +} + +/* Blue variants: normalize border and icon color for all remaining types */ +.md-typeset .admonition.note, +.md-typeset .admonition.info, +.md-typeset .admonition.tip, +.md-typeset .admonition.success, +.md-typeset .admonition.question, +.md-typeset .admonition.abstract, +.md-typeset .admonition.example, +.md-typeset .admonition.quote, +.md-typeset details.note, +.md-typeset details.info, +.md-typeset details.tip, +.md-typeset details.success, +.md-typeset details.question, +.md-typeset details.abstract, +.md-typeset details.example, +.md-typeset details.quote { + background-color: var(--aws-note-bg); + border-color: var(--aws-note-border); +} + +.md-typeset .note > .admonition-title::before, +.md-typeset .info > .admonition-title::before, +.md-typeset .tip > .admonition-title::before, +.md-typeset .success > .admonition-title::before, +.md-typeset .question > .admonition-title::before, +.md-typeset .abstract > .admonition-title::before, +.md-typeset .example > .admonition-title::before, +.md-typeset .quote > .admonition-title::before, +.md-typeset details.note > summary::before, +.md-typeset details.info > summary::before, +.md-typeset details.tip > summary::before, +.md-typeset details.success > summary::before, +.md-typeset details.question > summary::before, +.md-typeset details.abstract > summary::before, +.md-typeset details.example > summary::before, +.md-typeset details.quote > summary::before { + background-color: var(--aws-note-icon) !important; + height: 16px !important; + left: 0 !important; + top: 4px !important; + width: 16px !important; +} + +.md-typeset .warning > .admonition-title::before, +.md-typeset .danger > .admonition-title::before, +.md-typeset .failure > .admonition-title::before, +.md-typeset .bug > .admonition-title::before, +.md-typeset .error > .admonition-title::before, +.md-typeset .caution > .admonition-title::before, +.md-typeset .attention > .admonition-title::before, +.md-typeset details.warning > summary::before, +.md-typeset details.danger > summary::before, +.md-typeset details.failure > summary::before, +.md-typeset details.bug > summary::before, +.md-typeset details.error > summary::before, +.md-typeset details.caution > summary::before, +.md-typeset details.attention > summary::before { + height: 16px !important; + left: 0 !important; + top: 4px !important; + width: 16px !important; +} + +/* Generic collapsible sections: Cloudscape-style expandable section headers. + * Variant-classed details (note, warning, etc.) are collapsible admonitions and + * get the AWS callout skin in the override block below. + */ +.md-typeset details { + background-color: transparent !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + color: var(--md-default-fg-color); + margin: 16px 0; + padding: 0 !important; +} + +.md-typeset details > summary { + background-color: transparent !important; + color: #0f141a; + cursor: pointer; + display: block; + font-size: 1em; + font-weight: 700; + line-height: 1.5; + margin: 0; + outline: none; + padding: 8px 0 8px 24px !important; + position: relative; +} + +.md-typeset details > summary:hover, +.md-typeset details > summary:focus { + background-color: transparent !important; +} + +.md-typeset details > summary:hover { + color: var(--md-typeset-a-color); +} + +.md-typeset details > summary:focus-visible { + outline: 2px solid var(--md-typeset-a-color); + outline-offset: 2px; +} + +.md-typeset details > summary::-webkit-details-marker { + display: none; +} + +.md-typeset details > summary::marker { + content: ""; +} + +.md-typeset details > summary::before, +.md-typeset details.note > summary::before, +.md-typeset details.info > summary::before, +.md-typeset details.tip > summary::before, +.md-typeset details.success > summary::before, +.md-typeset details.question > summary::before, +.md-typeset details.abstract > summary::before, +.md-typeset details.example > summary::before, +.md-typeset details.quote > summary::before, +.md-typeset details.warning > summary::before, +.md-typeset details.danger > summary::before, +.md-typeset details.failure > summary::before, +.md-typeset details.bug > summary::before, +.md-typeset details.error > summary::before, +.md-typeset details.caution > summary::before, +.md-typeset details.attention > summary::before { + background: none !important; + color: #424650; + content: "▸"; + font-size: 14px !important; + height: auto !important; + left: 0 !important; + line-height: 1; + -webkit-mask: none !important; + mask: none !important; + position: absolute; + top: 12px !important; + transform-origin: 50% 50%; + transition: transform 115ms ease-out; + width: auto !important; +} + +.md-typeset details[open] > summary::before { + transform: rotate(90deg); +} + +.md-typeset details > summary:hover::before { + color: var(--md-typeset-a-color); +} + +/* Hide Material's right-side details chevron. */ +.md-typeset details > summary::after { + content: none !important; + display: none !important; +} + +.md-typeset details > :not(summary) { + padding-left: 24px !important; +} + +.md-typeset details code, +.md-typeset details.warning code, +.md-typeset details.danger code, +.md-typeset details.failure code, +.md-typeset details.bug code, +.md-typeset details.error code, +.md-typeset details.caution code, +.md-typeset details.attention code { + background-color: var(--md-code-bg-color); +} + +[data-md-color-scheme="slate"] .md-typeset details > summary { + color: #f9f9fa; +} + +[data-md-color-scheme="slate"] .md-typeset details > summary::before { + color: #dedee3; +} + +[data-md-color-scheme="slate"] .md-typeset details > summary:hover, +[data-md-color-scheme="slate"] .md-typeset details > summary:hover::before { + color: #75cfff; +} + +/* Collapsible admonitions: keep the AWS callout skin while replacing Material's + * floating chevron with a small right-aligned caret. + */ +.md-typeset details.note, +.md-typeset details.info, +.md-typeset details.tip, +.md-typeset details.success, +.md-typeset details.question, +.md-typeset details.abstract, +.md-typeset details.example, +.md-typeset details.quote, +.md-typeset details.warning, +.md-typeset details.danger, +.md-typeset details.failure, +.md-typeset details.bug, +.md-typeset details.error, +.md-typeset details.caution, +.md-typeset details.attention { + background-color: var(--aws-note-bg) !important; + border: 2px solid var(--aws-note-border) !important; + border-radius: var(--border-radius-alert-thlkk1, 12px) !important; + box-shadow: none !important; + color: var(--md-default-fg-color); + font-size: 1em; + line-height: 1.5; + margin: 16px 0; + padding: 15px 20px !important; +} + +.md-typeset details.warning, +.md-typeset details.caution, +.md-typeset details.attention { + background-color: var(--aws-warning-bg) !important; + border-color: var(--aws-warning-border) !important; +} + +.md-typeset details.danger, +.md-typeset details.failure, +.md-typeset details.bug, +.md-typeset details.error { + background-color: var(--aws-important-bg) !important; + border-color: var(--aws-important-border) !important; +} + +[data-md-color-scheme="slate"] .md-typeset details.note, +[data-md-color-scheme="slate"] .md-typeset details.info, +[data-md-color-scheme="slate"] .md-typeset details.tip, +[data-md-color-scheme="slate"] .md-typeset details.success, +[data-md-color-scheme="slate"] .md-typeset details.question, +[data-md-color-scheme="slate"] .md-typeset details.abstract, +[data-md-color-scheme="slate"] .md-typeset details.example, +[data-md-color-scheme="slate"] .md-typeset details.quote, +[data-md-color-scheme="slate"] .md-typeset details.warning, +[data-md-color-scheme="slate"] .md-typeset details.danger, +[data-md-color-scheme="slate"] .md-typeset details.failure, +[data-md-color-scheme="slate"] .md-typeset details.bug, +[data-md-color-scheme="slate"] .md-typeset details.error, +[data-md-color-scheme="slate"] .md-typeset details.caution, +[data-md-color-scheme="slate"] .md-typeset details.attention { + border-width: 1px !important; +} + +.md-typeset details.note > summary, +.md-typeset details.info > summary, +.md-typeset details.tip > summary, +.md-typeset details.success > summary, +.md-typeset details.question > summary, +.md-typeset details.abstract > summary, +.md-typeset details.example > summary, +.md-typeset details.quote > summary, +.md-typeset details.warning > summary, +.md-typeset details.danger > summary, +.md-typeset details.failure > summary, +.md-typeset details.bug > summary, +.md-typeset details.error > summary, +.md-typeset details.caution > summary, +.md-typeset details.attention > summary { + background-color: transparent !important; + color: var(--md-default-fg-color); + cursor: pointer; + display: block; + font-size: 1em; + font-weight: 700; + line-height: 1.5; + margin: 0; + outline: none; + padding: 0 28px 0 27px !important; + position: relative; +} + +.md-typeset details.note > summary:hover, +.md-typeset details.info > summary:hover, +.md-typeset details.tip > summary:hover, +.md-typeset details.success > summary:hover, +.md-typeset details.question > summary:hover, +.md-typeset details.abstract > summary:hover, +.md-typeset details.example > summary:hover, +.md-typeset details.quote > summary:hover, +.md-typeset details.warning > summary:hover, +.md-typeset details.danger > summary:hover, +.md-typeset details.failure > summary:hover, +.md-typeset details.bug > summary:hover, +.md-typeset details.error > summary:hover, +.md-typeset details.caution > summary:hover, +.md-typeset details.attention > summary:hover { + background-color: transparent !important; + color: var(--md-default-fg-color); +} + +.md-typeset details.note > summary::before, +.md-typeset details.info > summary::before, +.md-typeset details.tip > summary::before, +.md-typeset details.success > summary::before, +.md-typeset details.question > summary::before, +.md-typeset details.abstract > summary::before, +.md-typeset details.example > summary::before, +.md-typeset details.quote > summary::before, +.md-typeset details.warning > summary::before, +.md-typeset details.danger > summary::before, +.md-typeset details.failure > summary::before, +.md-typeset details.bug > summary::before, +.md-typeset details.error > summary::before, +.md-typeset details.caution > summary::before, +.md-typeset details.attention > summary::before { + content: ""; + height: 16px !important; + left: 0 !important; + line-height: 1; + position: absolute; + top: 4px !important; + transform: none; + width: 16px !important; + -webkit-mask-position: center !important; + mask-position: center !important; + -webkit-mask-repeat: no-repeat !important; + mask-repeat: no-repeat !important; + -webkit-mask-size: 16px 16px !important; + mask-size: 16px 16px !important; +} + +.md-typeset details.note > summary::before, +.md-typeset details.info > summary::before, +.md-typeset details.tip > summary::before, +.md-typeset details.success > summary::before, +.md-typeset details.question > summary::before, +.md-typeset details.abstract > summary::before, +.md-typeset details.example > summary::before, +.md-typeset details.quote > summary::before { + background-color: var(--aws-note-icon) !important; + -webkit-mask-image: var(--aws-admonition-icon-note) !important; + mask-image: var(--aws-admonition-icon-note) !important; +} + +.md-typeset details.warning > summary::before, +.md-typeset details.caution > summary::before, +.md-typeset details.attention > summary::before { + background-color: var(--aws-warning-icon) !important; + -webkit-mask-image: var(--aws-admonition-icon-warning) !important; + mask-image: var(--aws-admonition-icon-warning) !important; +} + +.md-typeset details.danger > summary::before, +.md-typeset details.failure > summary::before, +.md-typeset details.bug > summary::before, +.md-typeset details.error > summary::before { + background-color: var(--aws-important-icon) !important; + -webkit-mask-image: var(--aws-admonition-icon-warning) !important; + mask-image: var(--aws-admonition-icon-warning) !important; +} + +.md-typeset details.note > summary::after, +.md-typeset details.info > summary::after, +.md-typeset details.tip > summary::after, +.md-typeset details.success > summary::after, +.md-typeset details.question > summary::after, +.md-typeset details.abstract > summary::after, +.md-typeset details.example > summary::after, +.md-typeset details.quote > summary::after, +.md-typeset details.warning > summary::after, +.md-typeset details.danger > summary::after, +.md-typeset details.failure > summary::after, +.md-typeset details.bug > summary::after, +.md-typeset details.error > summary::after, +.md-typeset details.caution > summary::after, +.md-typeset details.attention > summary::after { + background: none !important; + color: #424650; + content: "▸" !important; + display: block !important; + font-size: 12px; + height: auto; + line-height: 1; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + transform-origin: 50% 50%; + transition: transform 115ms ease-out; + width: auto; +} + +.md-typeset details.note[open] > summary::after, +.md-typeset details.info[open] > summary::after, +.md-typeset details.tip[open] > summary::after, +.md-typeset details.success[open] > summary::after, +.md-typeset details.question[open] > summary::after, +.md-typeset details.abstract[open] > summary::after, +.md-typeset details.example[open] > summary::after, +.md-typeset details.quote[open] > summary::after, +.md-typeset details.warning[open] > summary::after, +.md-typeset details.danger[open] > summary::after, +.md-typeset details.failure[open] > summary::after, +.md-typeset details.bug[open] > summary::after, +.md-typeset details.error[open] > summary::after, +.md-typeset details.caution[open] > summary::after, +.md-typeset details.attention[open] > summary::after { + transform: translateY(-50%) rotate(90deg); +} + +.md-typeset details.note > :not(summary), +.md-typeset details.info > :not(summary), +.md-typeset details.tip > :not(summary), +.md-typeset details.success > :not(summary), +.md-typeset details.question > :not(summary), +.md-typeset details.abstract > :not(summary), +.md-typeset details.example > :not(summary), +.md-typeset details.quote > :not(summary), +.md-typeset details.warning > :not(summary), +.md-typeset details.danger > :not(summary), +.md-typeset details.failure > :not(summary), +.md-typeset details.bug > :not(summary), +.md-typeset details.error > :not(summary), +.md-typeset details.caution > :not(summary), +.md-typeset details.attention > :not(summary) { + padding-left: 27px !important; +} + +.md-typeset details.note code, +.md-typeset details.info code, +.md-typeset details.tip code, +.md-typeset details.success code, +.md-typeset details.question code, +.md-typeset details.abstract code, +.md-typeset details.example code, +.md-typeset details.quote code { + background-color: var(--aws-note-code-bg); +} + +.md-typeset details.warning code, +.md-typeset details.caution code, +.md-typeset details.attention code { + background-color: var(--aws-warning-code-bg); +} + +.md-typeset details.danger code, +.md-typeset details.failure code, +.md-typeset details.bug code, +.md-typeset details.error code { + background-color: var(--aws-important-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset details.note code, +[data-md-color-scheme="slate"] .md-typeset details.info code, +[data-md-color-scheme="slate"] .md-typeset details.tip code, +[data-md-color-scheme="slate"] .md-typeset details.success code, +[data-md-color-scheme="slate"] .md-typeset details.question code, +[data-md-color-scheme="slate"] .md-typeset details.abstract code, +[data-md-color-scheme="slate"] .md-typeset details.example code, +[data-md-color-scheme="slate"] .md-typeset details.quote code { + background-color: var(--aws-note-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset details.warning code, +[data-md-color-scheme="slate"] .md-typeset details.caution code, +[data-md-color-scheme="slate"] .md-typeset details.attention code { + background-color: var(--aws-warning-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset details.danger code, +[data-md-color-scheme="slate"] .md-typeset details.failure code, +[data-md-color-scheme="slate"] .md-typeset details.bug code, +[data-md-color-scheme="slate"] .md-typeset details.error code { + background-color: var(--aws-important-code-bg); +} + +[data-md-color-scheme="slate"] .md-typeset details.note > summary, +[data-md-color-scheme="slate"] .md-typeset details.info > summary, +[data-md-color-scheme="slate"] .md-typeset details.tip > summary, +[data-md-color-scheme="slate"] .md-typeset details.success > summary, +[data-md-color-scheme="slate"] .md-typeset details.question > summary, +[data-md-color-scheme="slate"] .md-typeset details.abstract > summary, +[data-md-color-scheme="slate"] .md-typeset details.example > summary, +[data-md-color-scheme="slate"] .md-typeset details.quote > summary, +[data-md-color-scheme="slate"] .md-typeset details.warning > summary, +[data-md-color-scheme="slate"] .md-typeset details.danger > summary, +[data-md-color-scheme="slate"] .md-typeset details.failure > summary, +[data-md-color-scheme="slate"] .md-typeset details.bug > summary, +[data-md-color-scheme="slate"] .md-typeset details.error > summary, +[data-md-color-scheme="slate"] .md-typeset details.caution > summary, +[data-md-color-scheme="slate"] .md-typeset details.attention > summary { + color: #f9f9fa; +} + +[data-md-color-scheme="slate"] .md-typeset details.note > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.info > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.tip > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.success > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.question > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.abstract > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.example > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.quote > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.warning > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.danger > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.failure > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.bug > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.error > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.caution > summary::after, +[data-md-color-scheme="slate"] .md-typeset details.attention > summary::after { + color: #dedee3; +} + +/* -------------------------------------------------------------------------- + * Tables: gray sticky header, full cell borders, drop shadow container + * ------------------------------------------------------------------------ */ +.md-typeset table:not([class]) { + border: none; + border-top: 1px solid var(--aws-border-default); + border-radius: 0; + box-shadow: + 0 1px 1px rgba(0, 28, 36, 0.3), + 1px 1px 1px rgba(0, 28, 36, 0.15), + -1px 1px 1px rgba(0, 28, 36, 0.15); + font-size: 0.7rem; /* 14px, matches AWS table density */ +} + +.md-typeset table:not([class]) th { + background-color: var(--aws-table-header-bg); + border: 1px solid var(--aws-border-default); + border-top: none; + color: var(--md-default-fg-color); + font-weight: 700; + padding: 1em 20px; + vertical-align: bottom; +} + +.md-typeset table:not([class]) td { + border: 1px solid var(--aws-border-default); + border-top: none; + padding: 8px 20px; + vertical-align: top; +} + +/* -------------------------------------------------------------------------- + * Navigation sidebars: 14px, blue active item + * ------------------------------------------------------------------------ */ +.md-nav { + font-size: 0.7rem; +} + +.md-nav__link--active, +.md-nav__link--active code { + color: var(--md-typeset-a-color); +} + +.md-nav__item .md-nav__link--active { + font-weight: 700; +} + +/* -------------------------------------------------------------------------- + * Breadcrumb-ish / misc chrome + * ------------------------------------------------------------------------ */ +.md-footer-meta { + background-color: var(--md-footer-bg-color--dark); +} + +/* Search input on dark header */ +.md-search__input { + background-color: rgba(255, 255, 255, 0.12); +} + +.md-search__input:hover { + background-color: rgba(255, 255, 255, 0.2); +} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 4901162e1a..9576f546c5 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -12,22 +12,10 @@ font-size: 0.75rem; } -.md-typeset a { - border-bottom: 0.1px dashed black; -} - -.md-typeset table:not([class]) { - font-size: 0.75rem; -} - .md-tabs__link { font-size: 0.8rem; } -.md-tabs__link--active { - border-bottom: 6px solid white; -} - .md-nav__link--active { font-weight: bold; } @@ -37,10 +25,6 @@ font-size: 0.7rem; } -[data-md-color-scheme="slate"] { - --md-typeset-a-color: rgb(28, 152, 152); -} - .copyMe { cursor: pointer; border-bottom: 0.1px dashed black; @@ -49,8 +33,3 @@ .copyMe::after { content: " 📋"; } - -p > code, -li > code { - font-weight: bold; -} diff --git a/docs/stylesheets/fonts/amazon-ember-300.woff b/docs/stylesheets/fonts/amazon-ember-300.woff new file mode 100644 index 0000000000..abb987ddf4 Binary files /dev/null and b/docs/stylesheets/fonts/amazon-ember-300.woff differ diff --git a/docs/stylesheets/fonts/amazon-ember-400-italic.woff b/docs/stylesheets/fonts/amazon-ember-400-italic.woff new file mode 100644 index 0000000000..90c756a104 Binary files /dev/null and b/docs/stylesheets/fonts/amazon-ember-400-italic.woff differ diff --git a/docs/stylesheets/fonts/amazon-ember-400.woff b/docs/stylesheets/fonts/amazon-ember-400.woff new file mode 100644 index 0000000000..91acda47f5 Binary files /dev/null and b/docs/stylesheets/fonts/amazon-ember-400.woff differ diff --git a/docs/stylesheets/fonts/amazon-ember-700.woff b/docs/stylesheets/fonts/amazon-ember-700.woff new file mode 100644 index 0000000000..f06436adf9 Binary files /dev/null and b/docs/stylesheets/fonts/amazon-ember-700.woff differ diff --git a/docs/stylesheets/fonts/amazon-ember-900.woff b/docs/stylesheets/fonts/amazon-ember-900.woff new file mode 100644 index 0000000000..6544aa0ae0 Binary files /dev/null and b/docs/stylesheets/fonts/amazon-ember-900.woff differ diff --git a/mkdocs.yml b/mkdocs.yml index b37c4e969b..10847b8fbb 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -32,78 +32,66 @@ watch: [ ] nav: - - Homepage: - - index.md - - Getting Started: - - Installation: getting-started/installation.md - - Usage patterns: getting-started/usage-patterns.md - - TypeScript settings: getting-started/typescript-settings.md - - Lambda layers: getting-started/lambda-layers.md - - Workshop: https://s12d.com/powertools-for-aws-lambda-workshop" target="_blank - - Features: - - features/index.md - - features/tracer.md - - features/logger.md - - features/metrics.md - - Event Handler: - - features/event-handler/index.md - - features/event-handler/http.md - - features/event-handler/appsync-events.md - - features/event-handler/appsync-graphql.md - - features/event-handler/bedrock-agents.md - - features/parameters.md - - features/idempotency.md - - features/batch.md - - features/jmespath.md - - features/parser.md - - features/validation.md - - features/data-masking.md - - features/kafka.md - - features/metadata.md - - Environment variables: environment-variables.md + - What is Powertools for AWS Lambda (TypeScript): index.md + - Getting Started: + - Installation: getting-started/installation.md + - Usage patterns: getting-started/usage-patterns.md + - TypeScript settings: getting-started/typescript-settings.md + - Lambda layers: getting-started/lambda-layers.md + - features/tracer.md + - features/logger.md + - features/metrics.md + - Event Handler: + - features/event-handler/index.md + - features/event-handler/http.md + - features/event-handler/appsync-events.md + - features/event-handler/appsync-graphql.md + - features/event-handler/bedrock-agents.md + - features/parameters.md + - features/idempotency.md + - features/batch.md + - features/jmespath.md + - features/parser.md + - features/validation.md + - features/data-masking.md + - features/kafka.md + - features/metadata.md + - Environment variables: environment-variables.md + - API reference: api/ + - Changelog: changelog.md + - Versioning policy: versioning.md + - Resources: - Upgrade guide: upgrade.md - Community Content: we_made_this.md - - Roadmap: roadmap.md - - Changelog: changelog.md - - Resources: - - "llms.txt": ./llms.txt - - "llms.txt (full version)": ./llms-full.txt - - API reference: api/ - - Processes: - - Roadmap: roadmap.md - - Versioning policy: versioning.md - - Maintainers: maintainers.md - - Contributing: - - Development environment: contributing/setup.md - - Your first contribution: contributing/getting_started.md - - Conventions: contributing/conventions.md - - Testing: contributing/testing.md + - "llms.txt": ./llms.txt theme: name: material - font: - text: Ubuntu + font: false # Amazon Ember is self-hosted via stylesheets/aws-restyle.css palette: - - scheme: default - primary: deep orange - accent: deep orange + - media: "(prefers-color-scheme)" toggle: - icon: material/lightbulb - name: Switch to dark mode - - scheme: slate - primary: deep orange - accent: deep orange + icon: material/brightness-auto + name: Device + - media: "(prefers-color-scheme: light)" + scheme: default + primary: custom + accent: custom toggle: - icon: material/lightbulb-outline - name: Switch to light mode + icon: material/brightness-7 + name: Light + - media: "(prefers-color-scheme: dark)" + scheme: slate + primary: custom + accent: custom + toggle: + icon: material/brightness-4 + name: Dark features: - - header.autohide - - navigation.sections - navigation.top - navigation.instant - navigation.indexes - navigation.tracking - - navigation.tabs - content.code.annotate - content.code.copy - announce.dismiss @@ -132,7 +120,7 @@ markdown_extensions: - meta - toc: permalink: true - toc_depth: 4 + toc_depth: 2 - attr_list - md_in_html - pymdownx.emoji: @@ -175,6 +163,8 @@ plugins: markdown_description: Powertools for AWS Lambda (TypeScript) is a developer toolkit to implement Serverless best practices and increase developer velocity. It provides a suite of utilities for AWS Lambda Functions that makes tracing with AWS X-Ray, structured logging and creating custom metrics asynchronously easier. full_output: llms-full.txt sections: + What is Powertools for AWS Lambda (TypeScript): + - index.md Getting Started: - getting-started/installation.md - getting-started/usage-patterns.md @@ -184,6 +174,7 @@ plugins: - features/tracer.md - features/logger.md - features/metrics.md + - features/event-handler/index.md - features/event-handler/http.md - features/event-handler/appsync-events.md - features/event-handler/appsync-graphql.md @@ -194,17 +185,29 @@ plugins: - features/jmespath.md - features/parser.md - features/validation.md + - features/data-masking.md - features/kafka.md - features/metadata.md - Environment variables: + Environment variables: - environment-variables.md - Upgrade guide: + Changelog: + - changelog.md + Versioning policy: + - versioning.md + Resources: - upgrade.md + - we_made_this.md extra_css: - stylesheets/extra.css + - stylesheets/aws-restyle.css + - stylesheets/aws-header.css + - stylesheets/aws-nav.css + - stylesheets/aws-content.css + - stylesheets/aws-footer.css extra_javascript: - javascript/extra.js + - javascript/aws-header.js - https://docs.aws.amazon.com/powertools/shared/mermaid.min.js - https://docs.aws.amazon.com/assets/js/awsdocs-boot.js