From e5564e61abbdd30ecc75329c8653ba9f8076a480 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 14 Feb 2026 11:24:35 -0800 Subject: [PATCH 1/7] Add docs compatibility for latest mkdocs --- docs/src/assets/css/admonition.css | 156 ++++---- docs/src/assets/css/banner.css | 14 +- docs/src/assets/css/button.css | 41 +- docs/src/assets/css/code.css | 102 ++--- docs/src/assets/css/footer.css | 26 +- docs/src/assets/css/home.css | 434 ++++++++++------------ docs/src/assets/css/main.css | 80 ++-- docs/src/assets/css/navbar.css | 296 +++++++-------- docs/src/assets/css/sidebar.css | 179 +++++---- docs/src/assets/css/table-of-contents.css | 103 ++--- 10 files changed, 705 insertions(+), 726 deletions(-) diff --git a/docs/src/assets/css/admonition.css b/docs/src/assets/css/admonition.css index 8b3f06e..24b33a3 100644 --- a/docs/src/assets/css/admonition.css +++ b/docs/src/assets/css/admonition.css @@ -1,160 +1,160 @@ [data-md-color-scheme="slate"] { - --admonition-border-color: transparent; - --admonition-expanded-border-color: rgba(255, 255, 255, 0.1); - --note-bg-color: rgba(43, 110, 98, 0.2); - --terminal-bg-color: #0c0c0c; - --terminal-title-bg-color: #000; - --deep-dive-bg-color: rgba(43, 52, 145, 0.2); - --you-will-learn-bg-color: #353a45; - --pitfall-bg-color: rgba(182, 87, 0, 0.2); + --admonition-border-color: transparent; + --admonition-expanded-border-color: rgba(255, 255, 255, 0.1); + --note-bg-color: rgba(43, 110, 98, 0.2); + --terminal-bg-color: #0c0c0c; + --terminal-title-bg-color: #000; + --deep-dive-bg-color: rgba(43, 52, 145, 0.2); + --you-will-learn-bg-color: #353a45; + --pitfall-bg-color: rgba(182, 87, 0, 0.2); } [data-md-color-scheme="default"] { - --admonition-border-color: rgba(0, 0, 0, 0.08); - --admonition-expanded-border-color: var(--admonition-border-color); - --note-bg-color: rgb(244, 251, 249); - --terminal-bg-color: rgb(64, 71, 86); - --terminal-title-bg-color: rgb(35, 39, 47); - --deep-dive-bg-color: rgb(243, 244, 253); - --you-will-learn-bg-color: rgb(246, 247, 249); - --pitfall-bg-color: rgb(254, 245, 231); + --admonition-border-color: rgba(0, 0, 0, 0.08); + --admonition-expanded-border-color: var(--admonition-border-color); + --note-bg-color: rgb(244, 251, 249); + --terminal-bg-color: rgb(64, 71, 86); + --terminal-title-bg-color: rgb(35, 39, 47); + --deep-dive-bg-color: rgb(243, 244, 253); + --you-will-learn-bg-color: rgb(246, 247, 249); + --pitfall-bg-color: rgb(254, 245, 231); } .md-typeset details, .md-typeset .admonition { - border-color: var(--admonition-border-color) !important; - box-shadow: none; + border-color: var(--admonition-border-color) !important; + box-shadow: none; } .md-typeset :is(.admonition, details) { - margin: 0.55em 0; + margin: 0.55em 0; } .md-typeset .admonition { - font-size: 0.7rem; + font-size: 0.7rem; } .md-typeset .admonition:focus-within, .md-typeset details:focus-within { - box-shadow: none !important; + box-shadow: none !important; } .md-typeset details[open] { - border-color: var(--admonition-expanded-border-color) !important; + border-color: var(--admonition-expanded-border-color) !important; } -/* -Admonition: "summary" +/* +Admonition: "summary" React Name: "You will learn" */ .md-typeset .admonition.summary { - background: var(--you-will-learn-bg-color); - padding: 0.8rem 1.4rem; - border-radius: 0.8rem; + background: var(--you-will-learn-bg-color); + padding: 0.8rem 1.4rem; + border-radius: 0.8rem; } .md-typeset .summary .admonition-title { - font-size: 1rem; - background: transparent; - padding-left: 0.6rem; - padding-bottom: 0; + font-size: 1rem; + background: transparent; + padding-left: 0.6rem; + padding-bottom: 0; } .md-typeset .summary .admonition-title:before { - display: none; + display: none; } .md-typeset .admonition.summary { - border-color: #ffffff17 !important; + border-color: #ffffff17 !important; } -/* -Admonition: "abstract" +/* +Admonition: "abstract" React Name: "Note" */ .md-typeset .admonition.abstract { - background: var(--note-bg-color); - padding: 0.8rem 1.4rem; - border-radius: 0.8rem; + background: var(--note-bg-color); + padding: 0.8rem 1.4rem; + border-radius: 0.8rem; } .md-typeset .abstract .admonition-title { - font-size: 1rem; - background: transparent; - padding-bottom: 0; - color: rgb(68, 172, 153); + font-size: 1rem; + background: transparent; + padding-bottom: 0; + color: rgb(68, 172, 153); } .md-typeset .abstract .admonition-title:before { - font-size: 1.1rem; - background: rgb(68, 172, 153); + font-size: 1.1rem; + background: rgb(68, 172, 153); } -/* -Admonition: "warning" +/* +Admonition: "warning" React Name: "Pitfall" */ .md-typeset .admonition.warning { - background: var(--pitfall-bg-color); - padding: 0.8rem 1.4rem; - border-radius: 0.8rem; + background: var(--pitfall-bg-color); + padding: 0.8rem 1.4rem; + border-radius: 0.8rem; } .md-typeset .warning .admonition-title { - font-size: 1rem; - background: transparent; - padding-bottom: 0; - color: rgb(219, 125, 39); + font-size: 1rem; + background: transparent; + padding-bottom: 0; + color: rgb(219, 125, 39); } .md-typeset .warning .admonition-title:before { - font-size: 1.1rem; - background: rgb(219, 125, 39); + font-size: 1.1rem; + background: rgb(219, 125, 39); } -/* -Admonition: "info" +/* +Admonition: "info" React Name: "Deep Dive" */ .md-typeset .admonition.info { - background: var(--deep-dive-bg-color); - padding: 0.8rem 1.4rem; - border-radius: 0.8rem; + background: var(--deep-dive-bg-color); + padding: 0.8rem 1.4rem; + border-radius: 0.8rem; } .md-typeset .info .admonition-title { - font-size: 1rem; - background: transparent; - padding-bottom: 0; - color: rgb(136, 145, 236); + font-size: 1rem; + background: transparent; + padding-bottom: 0; + color: rgb(136, 145, 236); } .md-typeset .info .admonition-title:before { - font-size: 1.1rem; - background: rgb(136, 145, 236); + font-size: 1.1rem; + background: rgb(136, 145, 236); } -/* -Admonition: "example" +/* +Admonition: "example" React Name: "Terminal" */ .md-typeset .admonition.example { - background: var(--terminal-bg-color); - border-radius: 0.4rem; - overflow: hidden; - border: none; + background: var(--terminal-bg-color); + border-radius: 0.4rem; + overflow: hidden; + border: none; } .md-typeset .example .admonition-title { - background: var(--terminal-title-bg-color); - color: rgb(246, 247, 249); + background: var(--terminal-title-bg-color); + color: rgb(246, 247, 249); } .md-typeset .example .admonition-title:before { - background: rgb(246, 247, 249); + background: rgb(246, 247, 249); } .md-typeset .admonition.example code { - background: transparent; - color: #fff; - box-shadow: none; + background: transparent; + color: #fff; + box-shadow: none; } diff --git a/docs/src/assets/css/banner.css b/docs/src/assets/css/banner.css index 3739a73..b6d5a90 100644 --- a/docs/src/assets/css/banner.css +++ b/docs/src/assets/css/banner.css @@ -1,15 +1,15 @@ body[data-md-color-scheme="slate"] { - --md-banner-bg-color: rgb(55, 81, 78); - --md-banner-font-color: #fff; + --md-banner-bg-color: rgb(55, 81, 78); + --md-banner-font-color: #fff; } body[data-md-color-scheme="default"] { - --md-banner-bg-color: #ff9; - --md-banner-font-color: #000; + --md-banner-bg-color: #ff9; + --md-banner-font-color: #000; } .md-banner--warning { - background-color: var(--md-banner-bg-color); - color: var(--md-banner-font-color); - text-align: center; + background-color: var(--md-banner-bg-color); + color: var(--md-banner-font-color); + text-align: center; } diff --git a/docs/src/assets/css/button.css b/docs/src/assets/css/button.css index 8f71391..2563f6b 100644 --- a/docs/src/assets/css/button.css +++ b/docs/src/assets/css/button.css @@ -1,41 +1,44 @@ [data-md-color-scheme="slate"] { - --md-button-font-color: #fff; - --md-button-border-color: #404756; + --md-button-font-color: #fff; + --md-button-border-color: #404756; } [data-md-color-scheme="default"] { - --md-button-font-color: #000; - --md-button-border-color: #8d8d8d; + --md-button-font-color: #000; + --md-button-border-color: #8d8d8d; } .md-typeset .md-button { - border-width: 1px; - border-color: var(--md-button-border-color); - border-radius: 9999px; - color: var(--md-button-font-color); - transition: color 125ms, background 125ms, border-color 125ms, - transform 125ms; + border-width: 1px; + border-color: var(--md-button-border-color); + border-radius: 9999px; + color: var(--md-button-font-color); + transition: + color 125ms, + background 125ms, + border-color 125ms, + transform 125ms; } .md-typeset .md-button:focus, .md-typeset .md-button:hover { - border-color: var(--md-button-border-color); - color: var(--md-button-font-color); - background: rgba(78, 87, 105, 0.05); + border-color: var(--md-button-border-color); + color: var(--md-button-font-color); + background: rgba(78, 87, 105, 0.05); } .md-typeset .md-button.md-button--primary { - color: #fff; - border-color: transparent; - background: var(--reactpy-color-dark); + color: #fff; + border-color: transparent; + background: var(--reactpy-color-dark); } .md-typeset .md-button.md-button--primary:focus, .md-typeset .md-button.md-button--primary:hover { - border-color: transparent; - background: var(--reactpy-color-darker); + border-color: transparent; + background: var(--reactpy-color-darker); } .md-typeset .md-button:focus { - transform: scale(0.98); + transform: scale(0.98); } diff --git a/docs/src/assets/css/code.css b/docs/src/assets/css/code.css index c546549..706344e 100644 --- a/docs/src/assets/css/code.css +++ b/docs/src/assets/css/code.css @@ -1,82 +1,79 @@ :root { - --code-max-height: 17.25rem; - --md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px, - rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px, - rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px, - rgba(0, 0, 0, 0.08) 0px 12px 30px 0px; + --code-max-height: 17.25rem; + --md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px, rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px, rgba(0, 0, 0, 0.08) 0px 12px 30px 0px; } [data-md-color-scheme="slate"] { - --md-code-hl-color: #ffffcf1c; - --md-code-bg-color: #16181d; - --md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43); - --code-tab-color: rgb(52, 58, 70); - --md-code-hl-name-color: #aadafc; - --md-code-hl-string-color: hsl(21 49% 63% / 1); - --md-code-hl-keyword-color: hsl(289.67deg 35% 60%); - --md-code-hl-constant-color: hsl(213.91deg 68% 61%); - --md-code-hl-number-color: #bfd9ab; - --func-and-decorator-color: #dcdcae; - --module-import-color: #60c4ac; + --md-code-hl-color: #ffffcf1c; + --md-code-bg-color: #16181d; + --md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43); + --code-tab-color: rgb(52, 58, 70); + --md-code-hl-name-color: #aadafc; + --md-code-hl-string-color: hsl(21 49% 63% / 1); + --md-code-hl-keyword-color: hsl(289.67deg 35% 60%); + --md-code-hl-constant-color: hsl(213.91deg 68% 61%); + --md-code-hl-number-color: #bfd9ab; + --func-and-decorator-color: #dcdcae; + --module-import-color: #60c4ac; } [data-md-color-scheme="default"] { - --md-code-hl-color: #ffffcf1c; - --md-code-bg-color: rgba(208, 211, 220, 0.4); - --md-code-fg-color: rgb(64, 71, 86); - --code-tab-color: #fff; - --func-and-decorator-color: var(--md-code-hl-function-color); - --module-import-color: #e153e5; + --md-code-hl-color: #ffffcf1c; + --md-code-bg-color: rgba(208, 211, 220, 0.4); + --md-code-fg-color: rgb(64, 71, 86); + --code-tab-color: #fff; + --func-and-decorator-color: var(--md-code-hl-function-color); + --module-import-color: #e153e5; } [data-md-color-scheme="default"] .md-typeset .highlight > pre > code, [data-md-color-scheme="default"] .md-typeset .highlight > table.highlighttable { - --md-code-bg-color: #fff; + --md-code-bg-color: #fff; } /* All code blocks */ .md-typeset pre > code { - max-height: var(--code-max-height); + max-height: var(--code-max-height); } /* Code blocks with no line number */ .md-typeset .highlight > pre > code { - border-radius: 16px; - max-height: var(--code-max-height); - box-shadow: var(--md-code-backdrop); + border-radius: 16px; + max-height: var(--code-max-height); + box-shadow: var(--md-code-backdrop); } /* Code blocks with line numbers */ .md-typeset .highlighttable .linenos { - max-height: var(--code-max-height); - overflow: hidden; + max-height: var(--code-max-height); + overflow: hidden; } .md-typeset .highlighttable { - box-shadow: var(--md-code-backdrop); - border-radius: 8px; - overflow: hidden; + box-shadow: var(--md-code-backdrop); + border-radius: 8px; + overflow: hidden; } /* Tabbed code blocks */ .md-typeset .tabbed-set { - box-shadow: var(--md-code-backdrop); - border-radius: 8px; - overflow: hidden; - border: 1px solid var(--md-default-fg-color--lightest); + box-shadow: var(--md-code-backdrop); + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--md-default-fg-color--lightest); } .md-typeset .tabbed-set .tabbed-block { - overflow: hidden; + overflow: hidden; } .js .md-typeset .tabbed-set .tabbed-labels { - background: var(--code-tab-color); - margin: 0; - padding-left: 0.8rem; + background: var(--code-tab-color); + margin: 0; + padding-left: 0.8rem; } .md-typeset .tabbed-set .tabbed-labels > label { - font-weight: 400; - font-size: 0.7rem; - padding-top: 0.55em; - padding-bottom: 0.35em; + font-weight: 400; + font-size: 0.7rem; + padding-top: 0.55em; + padding-bottom: 0.35em; } .md-typeset .tabbed-set .highlighttable { - border-radius: 0; + border-radius: 0; } /* Code hightlighting colors */ @@ -86,26 +83,31 @@ .highlight .ne, .highlight .nn, .highlight .nv { - color: var(--module-import-color); + color: var(--module-import-color); } /* Function def name and decorator */ .highlight .nd, .highlight .nf { - color: var(--func-and-decorator-color); + color: var(--func-and-decorator-color); } /* None type */ .highlight .kc { - color: var(--md-code-hl-constant-color); + color: var(--md-code-hl-constant-color); } /* Keywords such as def and return */ .highlight .k { - color: var(--md-code-hl-constant-color); + color: var(--md-code-hl-constant-color); } /* HTML tags */ .highlight .nt { - color: var(--md-code-hl-constant-color); + color: var(--md-code-hl-constant-color); +} + +/* Copy text button */ +.md-code__nav { + background: transparent; } diff --git a/docs/src/assets/css/footer.css b/docs/src/assets/css/footer.css index b340828..2f9e268 100644 --- a/docs/src/assets/css/footer.css +++ b/docs/src/assets/css/footer.css @@ -1,33 +1,33 @@ [data-md-color-scheme="slate"] { - --md-footer-bg-color: var(--md-default-bg-color); - --md-footer-bg-color--dark: var(--md-default-bg-color); - --md-footer-border-color: var(--md-header-border-color); + --md-footer-bg-color: var(--md-default-bg-color); + --md-footer-bg-color--dark: var(--md-default-bg-color); + --md-footer-border-color: var(--md-header-border-color); } [data-md-color-scheme="default"] { - --md-footer-fg-color: var(--md-typeset-color); - --md-footer-fg-color--light: var(--md-typeset-color); - --md-footer-bg-color: var(--md-default-bg-color); - --md-footer-bg-color--dark: var(--md-default-bg-color); - --md-footer-border-color: var(--md-header-border-color); + --md-footer-fg-color: var(--md-typeset-color); + --md-footer-fg-color--light: var(--md-typeset-color); + --md-footer-bg-color: var(--md-default-bg-color); + --md-footer-bg-color--dark: var(--md-default-bg-color); + --md-footer-border-color: var(--md-header-border-color); } .md-footer { - border-top: 1px solid var(--md-footer-border-color); + border-top: 1px solid var(--md-footer-border-color); } .md-copyright { - width: 100%; + width: 100%; } .md-copyright__highlight { - width: 100%; + width: 100%; } .legal-footer-right { - float: right; + float: right; } .md-copyright__highlight div { - display: inline; + display: inline; } diff --git a/docs/src/assets/css/home.css b/docs/src/assets/css/home.css index c72e709..b13eec8 100644 --- a/docs/src/assets/css/home.css +++ b/docs/src/assets/css/home.css @@ -1,335 +1,297 @@ img.home-logo { - height: 120px; + height: 120px; } .home .row { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 6rem 0.8rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 6rem 0.8rem; } .home .row:not(.first, .stripe) { - background: var(--row-bg-color); + background: var(--row-bg-color); } .home .row.stripe { - background: var(--row-stripe-bg-color); - border: 0 solid var(--stripe-border-color); - border-top-width: 1px; - border-bottom-width: 1px; + background: var(--row-stripe-bg-color); + border: 0 solid var(--stripe-border-color); + border-top-width: 1px; + border-bottom-width: 1px; } .home .row.first { - text-align: center; + text-align: center; } .home .row h1 { - max-width: 28rem; - line-height: 1.15; - font-weight: 500; - margin-bottom: 0.55rem; - margin-top: -1rem; + max-width: 28rem; + line-height: 1.15; + font-weight: 500; + margin-bottom: 0.55rem; + margin-top: -1rem; } .home .row.first h1 { - margin-top: 0.55rem; - margin-bottom: -0.75rem; + margin-top: 0.55rem; + margin-bottom: -0.75rem; } .home .row > p { - max-width: 35rem; - line-height: 1.5; - font-weight: 400; + max-width: 35rem; + line-height: 1.5; + font-weight: 400; } .home .row.first > p { - font-size: 32px; - font-weight: 500; + font-size: 32px; + font-weight: 500; } /* Code blocks */ .home .row .tabbed-set { - background: var(--home-tabbed-set-bg-color); - margin: 0; + background: var(--home-tabbed-set-bg-color); + margin: 0; } .home .row .tabbed-content { - padding: 20px 18px; - overflow-x: auto; + padding: 20px 18px; + overflow-x: auto; } .home .row .tabbed-content img { - user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; - max-width: 580px; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; + max-width: 580px; } .home .row .tabbed-content { - -webkit-filter: var(--code-block-filter); - filter: var(--code-block-filter); + -webkit-filter: var(--code-block-filter); + filter: var(--code-block-filter); } /* Code examples */ .home .example-container { - background: radial-gradient( - circle at 0% 100%, - rgb(41 84 147 / 11%) 0%, - rgb(22 89 189 / 4%) 70%, - rgb(48 99 175 / 0%) 80% - ), - radial-gradient( - circle at 100% 100%, - rgb(24 87 45 / 55%) 0%, - rgb(29 61 12 / 4%) 70%, - rgb(94 116 93 / 0%) 80% - ), - radial-gradient( - circle at 100% 0%, - rgba(54, 66, 84, 0.55) 0%, - rgb(102 111 125 / 4%) 70%, - rgba(54, 66, 84, 0) 80% - ), - radial-gradient( - circle at 0% 0%, - rgba(91, 114, 135, 0.55) 0%, - rgb(45 111 171 / 4%) 70%, - rgb(5 82 153 / 0%) 80% - ), - rgb(0, 0, 0) center center/cover no-repeat fixed; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - align-items: center; - border-radius: 16px; - margin: 30px 0; - max-width: 100%; - grid-column-gap: 20px; - padding-left: 20px; - padding-right: 20px; + background: + radial-gradient(circle at 0% 100%, rgb(41 84 147 / 11%) 0%, rgb(22 89 189 / 4%) 70%, rgb(48 99 175 / 0%) 80%), + radial-gradient(circle at 100% 100%, rgb(24 87 45 / 55%) 0%, rgb(29 61 12 / 4%) 70%, rgb(94 116 93 / 0%) 80%), + radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgb(102 111 125 / 4%) 70%, rgba(54, 66, 84, 0) 80%), + radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgb(45 111 171 / 4%) 70%, rgb(5 82 153 / 0%) 80%), + rgb(0, 0, 0) center center/cover no-repeat fixed; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: center; + border-radius: 16px; + margin: 30px 0; + max-width: 100%; + grid-column-gap: 20px; + padding-left: 20px; + padding-right: 20px; } .home .demo .white-bg { - background: #fff; - border-radius: 16px; - display: flex; - flex-direction: column; - max-width: 590px; - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; - row-gap: 1rem; - padding: 1rem; + background: #fff; + border-radius: 16px; + display: flex; + flex-direction: column; + max-width: 590px; + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + row-gap: 1rem; + padding: 1rem; } .home .demo .vid-row { - display: flex; - flex-direction: row; - -moz-column-gap: 12px; - column-gap: 12px; + display: flex; + flex-direction: row; + -moz-column-gap: 12px; + column-gap: 12px; } .home .demo { - color: #000; + color: #000; } .home .demo .vid-thumbnail { - background: radial-gradient( - circle at 0% 100%, - rgb(41 84 147 / 55%) 0%, - rgb(22 89 189 / 4%) 70%, - rgb(48 99 175 / 0%) 80% - ), - radial-gradient( - circle at 100% 100%, - rgb(24 63 87 / 55%) 0%, - rgb(29 61 12 / 4%) 70%, - rgb(94 116 93 / 0%) 80% - ), - radial-gradient( - circle at 100% 0%, - rgba(54, 66, 84, 0.55) 0%, - rgb(102 111 125 / 4%) 70%, - rgba(54, 66, 84, 0) 80% - ), - radial-gradient( - circle at 0% 0%, - rgba(91, 114, 135, 0.55) 0%, - rgb(45 111 171 / 4%) 70%, - rgb(5 82 153 / 0%) 80% - ), - rgb(0, 0, 0) center center/cover no-repeat fixed; - width: 9rem; - aspect-ratio: 16 / 9; - border-radius: 8px; - display: flex; - justify-content: center; - align-items: center; + background: + radial-gradient(circle at 0% 100%, rgb(41 84 147 / 55%) 0%, rgb(22 89 189 / 4%) 70%, rgb(48 99 175 / 0%) 80%), + radial-gradient(circle at 100% 100%, rgb(24 63 87 / 55%) 0%, rgb(29 61 12 / 4%) 70%, rgb(94 116 93 / 0%) 80%), + radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgb(102 111 125 / 4%) 70%, rgba(54, 66, 84, 0) 80%), + radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgb(45 111 171 / 4%) 70%, rgb(5 82 153 / 0%) 80%), + rgb(0, 0, 0) center center/cover no-repeat fixed; + width: 9rem; + aspect-ratio: 16 / 9; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; } .home .demo .vid-text { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + width: 100%; } .home .demo h2 { - font-size: 18px; - line-height: 1.375; - margin: 0; - text-align: left; - font-weight: 700; + font-size: 18px; + line-height: 1.375; + margin: 0; + text-align: left; + font-weight: 700; } .home .demo h3 { - font-size: 16px; - line-height: 1.25; - margin: 0; + font-size: 16px; + line-height: 1.25; + margin: 0; } .home .demo p { - font-size: 14px; - line-height: 1.375; - margin: 0; + font-size: 14px; + line-height: 1.375; + margin: 0; } .home .demo .browser-nav-url { - background: rgba(153, 161, 179, 0.2); - border-radius: 9999px; - font-size: 14px; - color: grey; - display: flex; - align-items: center; - justify-content: center; - -moz-column-gap: 5px; - column-gap: 5px; + background: rgba(153, 161, 179, 0.2); + border-radius: 9999px; + font-size: 14px; + color: grey; + display: flex; + align-items: center; + justify-content: center; + -moz-column-gap: 5px; + column-gap: 5px; } .home .demo .browser-navbar { - margin: -1rem; - margin-bottom: 0; - padding: 0.75rem 1rem; - border-bottom: 1px solid darkgrey; + margin: -1rem; + margin-bottom: 0; + padding: 0.75rem 1rem; + border-bottom: 1px solid darkgrey; } .home .demo .browser-viewport { - background: #fff; - border-radius: 16px; - display: flex; - flex-direction: column; - row-gap: 1rem; - height: 400px; - overflow-y: scroll; - margin: -1rem; - padding: 1rem; + background: #fff; + border-radius: 16px; + display: flex; + flex-direction: column; + row-gap: 1rem; + height: 400px; + overflow-y: scroll; + margin: -1rem; + padding: 1rem; } .home .demo .browser-viewport .search-header > h1 { - color: #000; - text-align: left; - font-size: 24px; - margin: 0; + color: #000; + text-align: left; + font-size: 24px; + margin: 0; } .home .demo .browser-viewport .search-header > p { - text-align: left; - font-size: 16px; - margin: 10px 0; + text-align: left; + font-size: 16px; + margin: 10px 0; } .home .demo .search-bar input { - width: 100%; - background: rgba(153, 161, 179, 0.2); - border-radius: 9999px; - padding-left: 40px; - padding-right: 40px; - height: 40px; - color: #000; + width: 100%; + background: rgba(153, 161, 179, 0.2); + border-radius: 9999px; + padding-left: 40px; + padding-right: 40px; + height: 40px; + color: #000; } .home .demo .search-bar svg { - height: 40px; - position: absolute; - transform: translateX(75%); + height: 40px; + position: absolute; + transform: translateX(75%); } .home .demo .search-bar { - position: relative; + position: relative; } /* Desktop Styling */ @media screen and (min-width: 60em) { - .home .row { - text-align: center; - } - .home .row > p { - font-size: 21px; - } - .home .row > h1 { - font-size: 52px; - } - .home .row .pop-left { - margin-left: -20px; - margin-right: 0; - margin-top: -20px; - margin-bottom: -20px; - } - .home .row .pop-right { - margin-left: 0px; - margin-right: 0px; - margin-top: -20px; - margin-bottom: -20px; - } + .home .row { + text-align: center; + } + .home .row > p { + font-size: 21px; + } + .home .row > h1 { + font-size: 52px; + } + .home .row .pop-left { + margin-left: -20px; + margin-right: 0; + margin-top: -20px; + margin-bottom: -20px; + } + .home .row .pop-right { + margin-left: 0px; + margin-right: 0px; + margin-top: -20px; + margin-bottom: -20px; + } } /* Mobile Styling */ @media screen and (max-width: 60em) { - .home .row { - padding: 4rem 0.8rem; - } - .home .row > h1, - .home .row > p { - padding-left: 1rem; - padding-right: 1rem; - } - .home .row.first { - padding-top: 2rem; - } - .home-btns { - width: 100%; - display: grid; - grid-gap: 0.5rem; - gap: 0.5rem; - } - .home .example-container { - display: flex; - flex-direction: column; - row-gap: 20px; - width: 100%; - justify-content: center; - border-radius: 0; - padding: 1rem 0; - } - .home .row { - padding-left: 0; - padding-right: 0; - } - .home .tabbed-set { - width: 100%; - border-radius: 0; - } - .home .demo { - width: 100%; - display: flex; - justify-content: center; - } - .home .demo > .white-bg { - width: 80%; - max-width: 80%; - } + .home .row { + padding: 4rem 0.8rem; + } + .home .row > h1, + .home .row > p { + padding-left: 1rem; + padding-right: 1rem; + } + .home .row.first { + padding-top: 2rem; + } + .home-btns { + width: 100%; + display: grid; + grid-gap: 0.5rem; + gap: 0.5rem; + } + .home .example-container { + display: flex; + flex-direction: column; + row-gap: 20px; + width: 100%; + justify-content: center; + border-radius: 0; + padding: 1rem 0; + } + .home .row { + padding-left: 0; + padding-right: 0; + } + .home .tabbed-set { + width: 100%; + border-radius: 0; + } + .home .demo { + width: 100%; + display: flex; + justify-content: center; + } + .home .demo > .white-bg { + width: 80%; + max-width: 80%; + } } diff --git a/docs/src/assets/css/main.css b/docs/src/assets/css/main.css index 6eefdf2..6ca94b1 100644 --- a/docs/src/assets/css/main.css +++ b/docs/src/assets/css/main.css @@ -1,85 +1,85 @@ /* Variable overrides */ :root { - --reactpy-color: #58b962; - --reactpy-color-dark: #42914a; - --reactpy-color-darker: #34743b; - --reactpy-color-opacity-10: rgba(88, 185, 98, 0.1); + --reactpy-color: #58b962; + --reactpy-color-dark: #42914a; + --reactpy-color-darker: #34743b; + --reactpy-color-opacity-10: rgba(88, 185, 98, 0.1); } [data-md-color-accent="red"] { - --md-primary-fg-color--light: var(--reactpy-color); - --md-primary-fg-color--dark: var(--reactpy-color-dark); + --md-primary-fg-color--light: var(--reactpy-color); + --md-primary-fg-color--dark: var(--reactpy-color-dark); } [data-md-color-scheme="slate"] { - --md-default-bg-color: rgb(35, 39, 47); - --md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54); - --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26); - --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07); - --md-primary-fg-color: var(--md-default-bg-color); - --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1); - --md-default-fg-color--light: #fff; - --md-typeset-a-color: var(--reactpy-color); - --md-accent-fg-color: var(--reactpy-color-dark); + --md-default-bg-color: rgb(35, 39, 47); + --md-default-bg-color--light: hsla(var(--md-hue), 15%, 16%, 0.54); + --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 16%, 0.26); + --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 16%, 0.07); + --md-primary-fg-color: var(--md-default-bg-color); + --md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1); + --md-default-fg-color--light: #fff; + --md-typeset-a-color: var(--reactpy-color); + --md-accent-fg-color: var(--reactpy-color-dark); } [data-md-color-scheme="default"] { - --md-primary-fg-color: var(--md-default-bg-color); - --md-default-fg-color--light: #000; - --md-default-fg-color--lighter: #0000007e; - --md-default-fg-color--lightest: #00000029; - --md-typeset-color: rgb(35, 39, 47); - --md-typeset-a-color: var(--reactpy-color); - --md-accent-fg-color: var(--reactpy-color-dark); + --md-primary-fg-color: var(--md-default-bg-color); + --md-default-fg-color--light: #000; + --md-default-fg-color--lighter: #0000007e; + --md-default-fg-color--lightest: #00000029; + --md-typeset-color: rgb(35, 39, 47); + --md-typeset-a-color: var(--reactpy-color); + --md-accent-fg-color: var(--reactpy-color-dark); } /* Font changes */ .md-typeset { - font-weight: 300; + font-weight: 300; } .md-typeset h1 { - font-weight: 600; - margin: 0; - font-size: 2.5em; + font-weight: 600; + margin: 0; + font-size: 2.5em; } .md-typeset h2 { - font-weight: 500; + font-weight: 500; } .md-typeset h3 { - font-weight: 400; + font-weight: 400; } /* Intro section styling */ p.intro { - font-size: 0.9rem; - font-weight: 500; + font-size: 0.9rem; + font-weight: 500; } /* Hide "Overview" jump selector */ h2#overview { - visibility: hidden; - height: 0; - margin: 0; - padding: 0; + visibility: hidden; + height: 0; + margin: 0; + padding: 0; } /* Reduce size of the outdated banner */ .md-banner__inner { - margin: 0.45rem auto; + margin: 0.45rem auto; } /* Desktop Styles */ @media screen and (min-width: 60em) { - /* Remove max width on desktop */ - .md-grid { - max-width: none; - } + /* Remove max width on desktop */ + .md-grid { + max-width: none; + } } /* Max size of page content */ .md-content { - max-width: 56rem; + max-width: 56rem; } diff --git a/docs/src/assets/css/navbar.css b/docs/src/assets/css/navbar.css index 33e8b14..8d47684 100644 --- a/docs/src/assets/css/navbar.css +++ b/docs/src/assets/css/navbar.css @@ -1,185 +1,185 @@ [data-md-color-scheme="slate"] { - --md-header-border-color: rgb(255 255 255 / 5%); - --md-version-bg-color: #ffffff0d; + --md-header-border-color: rgb(255 255 255 / 5%); + --md-version-bg-color: #ffffff0d; } [data-md-color-scheme="default"] { - --md-header-border-color: rgb(0 0 0 / 7%); - --md-version-bg-color: #ae58ee2e; + --md-header-border-color: rgb(0 0 0 / 7%); + --md-version-bg-color: #ae58ee2e; } .md-header { - border: 0 solid transparent; - border-bottom-width: 1px; + border: 0 solid transparent; + border-bottom-width: 1px; } .md-header--shadow { - box-shadow: none; - border-color: var(--md-header-border-color); - transition: border-color 0.35s cubic-bezier(0.1, 0.7, 0.1, 1); + box-shadow: none; + border-color: var(--md-header-border-color); + transition: border-color 0.35s cubic-bezier(0.1, 0.7, 0.1, 1); } /* Version selector */ .md-header__topic .md-ellipsis, .md-header__title [data-md-component="header-topic"] { - display: none; + display: none; } [dir="ltr"] .md-version__current { - margin: 0; + margin: 0; } .md-version__list { - margin: 0; - left: 0; - right: 0; - top: 2.5rem; + margin: 0; + left: 0; + right: 0; + top: 2.5rem; } .md-version { - background: var(--md-version-bg-color); - border-radius: 999px; - padding: 0 0.8rem; - margin: 0.3rem 0; - height: 1.8rem; - display: flex; - font-size: 0.7rem; + background: var(--md-version-bg-color); + border-radius: 999px; + padding: 0 0.8rem; + margin: 0.3rem 0; + height: 1.8rem; + display: flex; + font-size: 0.7rem; } /* Mobile Styling */ @media screen and (max-width: 60em) { - label.md-header__button.md-icon[for="__drawer"] { - order: 1; - } - .md-header__button.md-logo { - display: initial; - order: 2; - margin-right: auto; - } - .md-header__title { - order: 3; - } - .md-header__button[for="__search"] { - order: 4; - } - .md-header__option[data-md-component="palette"] { - order: 5; - } - .md-header__source { - display: initial; - order: 6; - } - .md-header__source .md-source__repository { - display: none; - } + label.md-header__button.md-icon[for="__drawer"] { + order: 1; + } + .md-header__button.md-logo { + display: initial; + order: 2; + margin-right: auto; + } + .md-header__title { + order: 3; + } + .md-header__button[for="__search"] { + order: 4; + } + .md-header__option[data-md-component="palette"] { + order: 5; + } + .md-header__source { + display: initial; + order: 6; + } + .md-header__source .md-source__repository { + display: none; + } } /* Desktop Styling */ @media screen and (min-width: 60em) { - /* Nav container */ - nav.md-header__inner { - display: contents; - } - header.md-header { - display: flex; - align-items: center; - } - - /* Logo */ - .md-header__button.md-logo { - order: 1; - padding-right: 0.4rem; - padding-top: 0; - padding-bottom: 0; - } - .md-header__button.md-logo img { - height: 2rem; - } - - /* Version selector */ - [dir="ltr"] .md-header__title { - order: 2; - margin: 0; - margin-right: 0.8rem; - margin-left: 0.2rem; - flex-grow: 0; - } - .md-header__topic { - position: relative; - } - .md-header__title--active .md-header__topic { - transform: none; - opacity: 1; - pointer-events: auto; - z-index: 4; - } - - /* Search */ - .md-search { - order: 3; - width: 100%; - margin-right: 0.6rem; - } - .md-search__inner { - width: 100%; - float: unset !important; - } - .md-search__form { - border-radius: 9999px; - } - [data-md-toggle="search"]:checked ~ .md-header .md-header__option { - max-width: unset; - opacity: unset; - transition: unset; - } - - /* Tabs */ - .md-tabs { - order: 4; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - z-index: -1; - overflow: visible; - border: none !important; - } - li.md-tabs__item.md-tabs__item--active { - background: var(--reactpy-color-opacity-10); - border-radius: 9999px; - color: var(--md-typeset-a-color); - } - .md-tabs__link { - margin: 0; - } - .md-tabs__item { - height: 1.8rem; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - - /* Dark/Light Selector */ - .md-header__option[data-md-component="palette"] { - order: 5; - } - - /* GitHub info */ - .md-header__source { - order: 6; - margin-left: 0 !important; - } + /* Nav container */ + nav.md-header__inner { + display: contents; + } + header.md-header { + display: flex; + align-items: center; + } + + /* Logo */ + .md-header__button.md-logo { + order: 1; + padding-right: 0.4rem; + padding-top: 0; + padding-bottom: 0; + } + .md-header__button.md-logo img { + height: 2rem; + } + + /* Version selector */ + [dir="ltr"] .md-header__title { + order: 2; + margin: 0; + margin-right: 0.8rem; + margin-left: 0.2rem; + flex-grow: 0; + } + .md-header__topic { + position: relative; + } + .md-header__title--active .md-header__topic { + transform: none; + opacity: 1; + pointer-events: auto; + z-index: 4; + } + + /* Search */ + .md-search { + order: 3; + width: 100%; + margin-right: 0.6rem; + } + .md-search__inner { + width: 100%; + float: unset !important; + } + .md-search__form { + border-radius: 9999px; + } + [data-md-toggle="search"]:checked ~ .md-header .md-header__option { + max-width: unset; + opacity: unset; + transition: unset; + } + + /* Tabs */ + .md-tabs { + order: 4; + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + z-index: -1; + overflow: visible; + border: none !important; + } + li.md-tabs__item.md-tabs__item--active { + background: var(--reactpy-color-opacity-10); + border-radius: 9999px; + color: var(--md-typeset-a-color); + } + .md-tabs__link { + margin: 0; + } + .md-tabs__item { + height: 1.8rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + /* Dark/Light Selector */ + .md-header__option[data-md-component="palette"] { + order: 5; + } + + /* GitHub info */ + .md-header__source { + order: 6; + margin-left: 0 !important; + } } /* Ultrawide Desktop Styles */ @media screen and (min-width: 1919px) { - .md-search { - order: 2; - width: 100%; - max-width: 34.4rem; - margin: 0 auto; - } + .md-search { + order: 2; + width: 100%; + max-width: 34.4rem; + margin: 0 auto; + } } diff --git a/docs/src/assets/css/sidebar.css b/docs/src/assets/css/sidebar.css index b6507d9..094ac43 100644 --- a/docs/src/assets/css/sidebar.css +++ b/docs/src/assets/css/sidebar.css @@ -1,104 +1,103 @@ :root { - --sizebar-font-size: 0.62rem; + --sizebar-font-size: 0.62rem; + --sizebar-font-size-2: 0.56rem; } .md-nav__link { - word-break: break-word; + word-break: break-word; +} + +/* Center the docs content */ +.md-content { + justify-self: center; + width: 100%; + margin: 0 auto; } /* Desktop Styling */ @media screen and (min-width: 76.1875em) { - /* Move the sidebar and TOC to the edge of the page */ - .md-main__inner.md-grid { - margin-left: 0; - margin-right: 0; - max-width: unset; - display: grid; - grid-template-columns: auto 1fr auto; - } - - .md-content { - justify-self: center; - width: 100%; - } - /* Made the sidebar buttons look React-like */ - .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { - text-transform: uppercase; - } - - .md-nav__title[for="__toc"] { - text-transform: uppercase; - margin: 0.5rem; - } - - .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { - color: rgb(133, 142, 159); - margin: 0.5rem; - } - - .md-nav__item .md-nav__link { - position: relative; - } - - .md-nav__link:is(:focus, :hover):not(.md-nav__link--active) { - color: unset; - } - - .md-nav__item - .md-nav__link:is(:focus, :hover):not(.md-nav__link--active):before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.2; - z-index: -1; - background: grey; - } - - .md-nav__item .md-nav__link--active:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - background: var(--reactpy-color-opacity-10); - } - - .md-nav__link { - padding: 0.5rem 0.5rem 0.5rem 1rem; - margin: 0; - border-radius: 0 10px 10px 0; - font-weight: 500; - overflow: hidden; - font-size: var(--sizebar-font-size); - } + /* Move the sidebar and TOC to the edge of the page */ + .md-main__inner.md-grid { + margin-left: 0; + margin-right: 0; + max-width: unset; + display: grid; + grid-template-columns: auto 1fr auto; + } + [dir="ltr"] .md-nav--primary > .md-nav__list { + padding-left: 0; + } - .md-sidebar__scrollwrap { - margin: 0; - } + /* Btn section (title) */ + .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { + text-transform: uppercase; + color: rgb(133, 142, 159); + background: transparent; + box-shadow: none; + } - [dir="ltr"] - .md-nav--lifted - .md-nav[data-md-level="1"] - > .md-nav__list - > .md-nav__item { - padding: 0; - } + /* Btn hover styling */ + .md-nav__item .md-nav__link { + position: relative; + } + .md-nav__link:is(:focus, :hover):not(.md-nav__link--active) { + color: unset; + } + .md-nav__item .md-nav__link:is(:focus, :hover):not(.md-nav__link--active):before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.2; + z-index: -1; + background: grey; + } - .md-nav__item--nested .md-nav__item .md-nav__item { - padding: 0; - } + /* Btn currently selected */ + .md-nav__item .md-nav__link--active:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background: var(--reactpy-color-opacity-10); + } - .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link { - font-weight: 300; - } + /* Btn shape & font */ + .md-nav__link { + padding: 0.5rem 0.5rem 0.5rem 1rem; + margin: 0; + border-radius: 0 10px 10px 0; + font-weight: 500; + overflow: hidden; + font-size: var(--sizebar-font-size); + } + .md-sidebar__scrollwrap { + margin: 0; + } + .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link { + font-weight: 300; + font-size: var(--sizebar-font-size-2); + } + [dir="ltr"] .md-nav--primary .md-nav__list { + padding: 0; + } + [dir="ltr"] .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) { + margin-left: 0; + } + .md-nav { + margin: 0; + } + .md-nav__toggle ~ .md-nav { + grid-template-rows: minmax(0rem, 0fr); + } - .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link { - font-weight: 400; - padding-left: 1.25rem; - } + /* Collapse icon */ + .md-nav__icon:hover { + background: transparent; + } } diff --git a/docs/src/assets/css/table-of-contents.css b/docs/src/assets/css/table-of-contents.css index 6c94f06..b524a19 100644 --- a/docs/src/assets/css/table-of-contents.css +++ b/docs/src/assets/css/table-of-contents.css @@ -1,48 +1,61 @@ /* Table of Contents styling */ @media screen and (min-width: 60em) { - [data-md-component="sidebar"] .md-nav__title[for="__toc"] { - text-transform: uppercase; - margin: 0.5rem; - margin-left: 0; - font-size: var(--sizebar-font-size); - } - - [data-md-component="toc"] .md-nav__item .md-nav__link--active { - position: relative; - } - - [data-md-component="toc"] .md-nav__item .md-nav__link--active:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.15; - z-index: -1; - background: var(--md-typeset-a-color); - } - - [data-md-component="toc"] .md-nav__link { - padding: 0.5rem 0.5rem; - margin: 0; - border-radius: 10px 0 0 10px; - font-weight: 400; - } - - [data-md-component="toc"] - .md-nav__item - .md-nav__list - .md-nav__item - .md-nav__link { - padding-left: 1.25rem; - } - - [dir="ltr"] .md-sidebar__inner { - padding: 0; - } - - .md-nav__item { - padding: 0; - } + .md-nav__title[for="__toc"] { + text-transform: uppercase; + color: rgb(133, 142, 159); + } + [data-md-component="sidebar"] .md-nav__title[for="__toc"] { + text-transform: uppercase; + margin: 0.5rem; + margin-left: 0; + font-size: var(--sizebar-font-size); + } + + [data-md-component="toc"] .md-nav__item .md-nav__link--active { + position: relative; + } + + [data-md-component="toc"] .md-nav__item .md-nav__link--active:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.15; + z-index: -1; + background: var(--md-typeset-a-color); + } + + [data-md-component="toc"] .md-nav__link { + padding: 0.5rem 0.5rem; + padding-right: 0; + margin: 0; + border-radius: 10px 0 0 10px; + font-weight: 400; + } + + [dir="ltr"] .md-nav--secondary .md-nav__item > .md-nav__link { + margin-right: 0; + padding-right: 0.4rem; + } + + [data-md-component="toc"] .md-nav__item .md-nav__list .md-nav__item .md-nav__link { + padding-left: 1.25rem; + } + + [dir="ltr"] .md-sidebar__inner { + padding: 0; + } + + .md-nav__item { + padding: 0; + } +} + +/* Hide the toc as soon as the left sidebar is collapsed into the hamburger menu */ +@media screen and (max-width: 76.1875em) { + .md-sidebar--secondary:not([hidden]) { + display: none; + } } From e27f92454d780c6747f46163b4480a8524319778 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 14 Feb 2026 11:25:02 -0800 Subject: [PATCH 2/7] Fix minor issues in contributing docs --- docs/src/about/contributing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/about/contributing.md b/docs/src/about/contributing.md index fc4a234..fa1816d 100644 --- a/docs/src/about/contributing.md +++ b/docs/src/about/contributing.md @@ -3,7 +3,7 @@ If you plan to make code changes to this repository, you will need to install the following dependencies first: - [Git](https://git-scm.com/downloads) -- [Python 3.9+](https://www.python.org/downloads/) +- [Python 3.11+](https://www.python.org/downloads/) - [Hatch](https://hatch.pypa.io/latest/) - [Bun](https://bun.sh/) @@ -41,6 +41,7 @@ By utilizing `hatch`, the following commands are available to manage the develop | `hatch fmt --check` | Run all linters and formatters, but do not save fixes to the disk | | `hatch fmt --linter` | Run only linters | | `hatch fmt --formatter` | Run only formatters | +| `hatch run javascript:build` | Manually re-build the JavaScript bundle | | `hatch run javascript:check` | Run the JavaScript linter/formatter | | `hatch run javascript:fix` | Run the JavaScript linter/formatter and write fixes to disk | | `hatch run python:type_check` | Run the Python type checker | From 9b2239fdfe40f02fbf56751f9d931abca0a775c9 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 14 Feb 2026 11:25:13 -0800 Subject: [PATCH 3/7] fix CI badge in readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 24ad465..ee494ba 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # ReactPy Router

- - + + From 034e9d3f69a89411bd528d170da67cb04edeb3c1 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 14 Feb 2026 11:25:22 -0800 Subject: [PATCH 4/7] bump version string --- src/reactpy_router/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reactpy_router/__init__.py b/src/reactpy_router/__init__.py index add1e5d..5736183 100644 --- a/src/reactpy_router/__init__.py +++ b/src/reactpy_router/__init__.py @@ -1,4 +1,4 @@ -__version__ = "2.0.0" +__version__ = "3.0.0b1" from reactpy_router.components import link, navigate, route From 7041e852295ff768000fb75fd3706240d5ebfaa5 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 17 Feb 2026 23:18:31 -0800 Subject: [PATCH 5/7] Replace `History` initial effect - Is now mandatory for the ReactPy executor to provide the initial URL --- src/js/bun.lockb | Bin 108297 -> 108297 bytes src/js/package.json | 2 +- src/js/src/components.ts | 10 ++-------- src/js/src/types.ts | 2 +- src/reactpy_router/routers.py | 27 +++++++++++++-------------- 5 files changed, 17 insertions(+), 24 deletions(-) diff --git a/src/js/bun.lockb b/src/js/bun.lockb index a59a97a31dc2eab5bd7442b252bcad14b1f078c7..74fb641014023ca55c7db9d8ef8a7f2498400b31 100644 GIT binary patch delta 144 zcmV;B0B`?^&IXCj29Pcwu}-oO zlSmpkvp5ljSU|ap2%JWWB=-fo8Q`QuqY-YQGLRn14|I>slIl4nH>6?q53U5kZEsnA y30sk1g1Pef%2?`~o4CShf=P=5^o_IqY5uMQF)lE-{ulv}KLar?Ft?Fd0eDW#H9y<{ delta 144 zcmV;B0B`?^&IXCj29PcwN9Z%yKu;Lqqh5A@mTh}VOq{OOr!K>8HRbOq_!b^4u}-oO zlXw?6vp5ljSU{wVm_|B$H#9Il#Nt*H5{kSlR-(H{b5g@jBQUV8&82_30XQnr{i^9i yRuy^UEyhx^gk*c;tIC>LfXuhmPiC|IY5uMQFfKE<{ulv}KLao>Gq;gg0eDV`I6;*F diff --git a/src/js/package.json b/src/js/package.json index 53f9f21..080a1fc 100644 --- a/src/js/package.json +++ b/src/js/package.json @@ -9,6 +9,6 @@ "prettier": "^3.3.3" }, "dependencies": { - "@reactpy/client": "^1.0.3" + "@reactpy/client": "^1.1.0" } } diff --git a/src/js/src/components.ts b/src/js/src/components.ts index 1aaff62..0e7582b 100644 --- a/src/js/src/components.ts +++ b/src/js/src/components.ts @@ -22,11 +22,11 @@ export function bind(node: HTMLElement | Element | Node) { /** * History component that captures browser "history go back" actions and notifies the server. */ -export function History({ onHistoryChangeCallback }: HistoryProps): null { +export function History({ onHistoryPreviousCallback }: HistoryProps): null { // Tell the server about history "popstate" events React.useEffect(() => { const listener = () => { - onHistoryChangeCallback(createLocationObject()); + onHistoryPreviousCallback(createLocationObject()); }; // Register the event listener @@ -35,12 +35,6 @@ export function History({ onHistoryChangeCallback }: HistoryProps): null { // Delete the event listener when the component is unmounted return () => window.removeEventListener("popstate", listener); }); - - // Tell the server about the URL during the initial page load - React.useEffect(() => { - onHistoryChangeCallback(createLocationObject()); - return () => {}; - }, []); return null; } diff --git a/src/js/src/types.ts b/src/js/src/types.ts index 8b05409..13eb275 100644 --- a/src/js/src/types.ts +++ b/src/js/src/types.ts @@ -4,7 +4,7 @@ export interface ReactPyLocation { } export interface HistoryProps { - onHistoryChangeCallback: (location: ReactPyLocation) => void; + onHistoryPreviousCallback: (location: ReactPyLocation) => void; } export interface LinkProps { diff --git a/src/reactpy_router/routers.py b/src/reactpy_router/routers.py index 8b3032b..6477170 100644 --- a/src/reactpy_router/routers.py +++ b/src/reactpy_router/routers.py @@ -59,33 +59,32 @@ def router( User notice: This component typically should never be used. Instead, use `create_router` if creating a custom routing engine.""" - old_connection = use_connection() - location, set_location = use_state(cast("Location | None", None)) + initial = use_connection() + location, set_location = use_state(initial.location) resolvers = use_memo( lambda: tuple(map(resolver, _iter_routes(routes))), dependencies=(resolver, hash(routes)), ) - route_element = None - match = use_memo(lambda: _match_route(resolvers, location or old_connection.location)) + match = use_memo(lambda: _match_route(resolvers, location or initial.location)) if match: - # Skip rendering until ReactPy-Router knows what URL the page is on. - if location: - route_element = _route_state_context( - match.element, - value=RouteState(set_location, match.params), + if not location or not location.path: + raise RuntimeError( + "ReactPy-Router was unable to determine the current URL location.\n" + "Are you sure you are running this within the a ConnectionContext?" ) - def on_history_change(event: dict[str, Any]) -> None: - """Callback function used within the JavaScript `History` component.""" + def on_history_previous(event: dict[str, Any]) -> None: + """Callback function used within the JavaScript `History` component that signifies + a history "go back" action.""" new_location = Location(**event) if location != new_location: set_location(new_location) return ConnectionContext( - History({"onHistoryChangeCallback": on_history_change}), # type: ignore[return-value] - route_element, - value=Connection(old_connection.scope, location or old_connection.location, old_connection.carrier), + History({"onHistoryPreviousCallback": on_history_previous}), # type: ignore[return-value] + _route_state_context(match.element, value=RouteState(set_location, match.params)), + value=Connection(initial.scope, location or initial.location, initial.carrier), ) return None From 3201fe4e379bb579497e8c06831924473639841f Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 17 Feb 2026 23:18:45 -0800 Subject: [PATCH 6/7] remove obsolete logic --- src/reactpy_router/components.py | 3 --- src/reactpy_router/hooks.py | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/reactpy_router/components.py b/src/reactpy_router/components.py index d16af57..2e2cbc7 100644 --- a/src/reactpy_router/components.py +++ b/src/reactpy_router/components.py @@ -49,9 +49,6 @@ def _link(attributes: dict[str, Any], *children: Any) -> VdomDict: set_location = _use_route_state().set_location if "className" in attributes: class_name = " ".join([attributes.pop("className"), class_name]) - if "class_name" in attributes: # pragma: no cover - # TODO: This can be removed when ReactPy stops supporting underscores in attribute names - class_name = " ".join([attributes.pop("class_name"), class_name]) if "href" in attributes and "to" not in attributes: attributes["to"] = attributes.pop("href") if "to" not in attributes: # pragma: no cover diff --git a/src/reactpy_router/hooks.py b/src/reactpy_router/hooks.py index 0431d11..725a8a9 100644 --- a/src/reactpy_router/hooks.py +++ b/src/reactpy_router/hooks.py @@ -38,7 +38,6 @@ def use_params() -> dict[str, Any]: A dictionary of the current URL's parameters. """ - # TODO: Check if this returns all parent params return _use_route_state().params @@ -64,6 +63,7 @@ def use_search_params( # TODO: In order to match `react-router`, this will need to return a tuple of the search params \ # and a function to update them. This is currently not possible without reactpy core having a \ # communication layer. + # https://github.com/reactive-python/reactpy/issues/975 return parse_qs( query_string, keep_blank_values=keep_blank_values, From 68ffeb7343231711c8a4544e060dd679ac944402 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 17 Feb 2026 23:22:49 -0800 Subject: [PATCH 7/7] hatch fmt --- pyproject.toml | 3 ++- src/reactpy_router/routers.py | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index c476f8e..ad03b2b 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -162,7 +162,8 @@ lint.extend-ignore = [ "PLR2004", # Magic value used in comparison "SIM115", # Use context handler for opening files "SLF001", # Private member accessed - "DOC201", # 'Returns:' section in docstring is missing + "DOC201", # 'Returns' section in docstring is missing + "DOC501", # `Error` section in docstring is missing ] lint.preview = true diff --git a/src/reactpy_router/routers.py b/src/reactpy_router/routers.py index 6477170..4868178 100644 --- a/src/reactpy_router/routers.py +++ b/src/reactpy_router/routers.py @@ -69,10 +69,11 @@ def router( if match: if not location or not location.path: - raise RuntimeError( + msg = ( "ReactPy-Router was unable to determine the current URL location.\n" "Are you sure you are running this within the a ConnectionContext?" ) + raise RuntimeError(msg) def on_history_previous(event: dict[str, Any]) -> None: """Callback function used within the JavaScript `History` component that signifies