diff options
| author |  Tropical <42101043+Tropix126@users.noreply.github.com>
| 2022-07-07 04:59:58 +0000 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-07 04:59:58 +0000 |
| commit | c8d51cc05a26f2e4df8a0bf35d069daf97f075ce (patch) | |
| tree | 65f60c5740562c82d12584d69f5b5001c9d14528 /packages/bun-landing/page.tsx | |
| parent | c99a9a6cb72da8cc0e27e65a5e0ae1c8637a1352 (diff) | |
| download | bun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.tar.gz bun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.tar.zst bun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.zip | |
Improve link contrast, refactor tabbar
Diffstat (limited to 'packages/bun-landing/page.tsx')
| -rw-r--r-- | packages/bun-landing/page.tsx | 98 |
1 files changed, 58 insertions, 40 deletions
diff --git a/packages/bun-landing/page.tsx b/packages/bun-landing/page.tsx index 9f160de35..6de5dd71b 100644 --- a/packages/bun-landing/page.tsx +++ b/packages/bun-landing/page.tsx @@ -211,7 +211,7 @@ const Group = ({ children, ...props }) => ( ); export default ({ inlineCSS }) => ( - <html> + <html lang="en"> <head> <meta charSet="UTF-8" /> @@ -254,24 +254,26 @@ export default ({ inlineCSS }) => ( </a> <nav className="Navigation"> - <li> - <a className="NavText" href={DOCS}> - Docs - </a> - </li> - <li> - <a className="NavText" href="https://bun.sh/discord"> - Discord - </a> - </li> - <li> - <a - className="NavText" - href="https://github.com/Jarred-Sumner/bun" - > - GitHub - </a> - </li> + <ul> + <li> + <a className="NavText" href={DOCS}> + Docs + </a> + </li> + <li> + <a className="NavText" href="https://bun.sh/discord"> + Discord + </a> + </li> + <li> + <a + className="NavText" + href="https://github.com/Jarred-Sumner/bun" + > + GitHub + </a> + </li> + </ul> </nav> </header> </div> @@ -291,23 +293,39 @@ export default ({ inlineCSS }) => ( </div> <div className="Graphs Graphs--active-react"> - <ul className="Tabs" role="tablist"> - <li className="Tab"> - <button data-tab="react" id="tab-react" aria-controls="react-tab-content" className="TabButton" role="tab" aria-selected tabIndex={0}> - Bun.serve - </button> - </li> - <li className="Tab"> - <button data-tab="sqlite" id="tab-sqlite" aria-controls="sqlite-tab-content" className="TabButton" role="tab" tabIndex={-1}> - bun:sqlite - </button> - </li> - <li className="Tab"> - <button data-tab="ffi" id="tab-ffi" aria-controls="ffi-tab-content" className="TabButton" role="tab" tabIndex={-1}> - bun:ffi - </button> - </li> - </ul> + <div className="Tabs" role="tablist"> + <button + data-tab="react" + id="tab-react" + aria-controls="react-tab-content" + className="Tab" + role="tab" + aria-selected + tabIndex={0} + > + Bun.serve + </button> + <button + data-tab="sqlite" + id="tab-sqlite" + aria-controls="sqlite-tab-content" + className="Tab" + role="tab" + tabIndex={-1} + > + bun:sqlite + </button> + <button + data-tab="ffi" + id="tab-ffi" + aria-controls="ffi-tab-content" + className="Tab" + role="tab" + tabIndex={-1} + > + bun:ffi + </button> + </div> <div id="active-tab" className="ActiveTab"> <div role="tabpanel" tabIndex={0} id="react-tab-content" aria-labelledby="tab-react" className="BarGraph BarGraph--react BarGraph--horizontal BarGraph--dark"> <h2 className="BarGraph-heading"> @@ -731,10 +749,10 @@ export default { <script dangerouslySetInnerHTML={{ __html: ` -[...document.querySelectorAll(".TabButton")].map(el => { +[...document.querySelectorAll(".Tab")].map(el => { el.addEventListener("click", function(e) { var tab = e.srcElement.getAttribute("data-tab"); - [...document.querySelectorAll(".TabButton")].map(el => { + [...document.querySelectorAll(".Tab")].map(el => { var active = el.getAttribute("data-tab") === tab; el.setAttribute("tabindex", active ? 0 : -1); el.setAttribute("aria-selected", active); @@ -747,8 +765,8 @@ export default { }); el.addEventListener("keydown", e => { - var tabs = [...document.querySelectorAll(".TabButton")]; - var activeTabEl = document.querySelector(".TabButton[aria-selected='true']"); + var tabs = [...document.querySelectorAll(".Tab")]; + var activeTabEl = document.querySelector(".Tab[aria-selected='true']"); var activeTabIndex = tabs.indexOf(activeTabEl); if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); |