diff options
Diffstat (limited to 'packages/bun-landing/page.tsx')
| -rw-r--r-- | packages/bun-landing/page.tsx | 123 |
1 files changed, 70 insertions, 53 deletions
diff --git a/packages/bun-landing/page.tsx b/packages/bun-landing/page.tsx index 7599ed6db..d3f4cd867 100644 --- a/packages/bun-landing/page.tsx +++ b/packages/bun-landing/page.tsx @@ -177,25 +177,23 @@ const InstallBox = ({ desktop = false }) => ( className={ "InstallBox " + (desktop ? "InstallBox--desktop" : "InstallBox--mobile") } - id="install" > - <div id="install-label"> - <div className="unselectable" id="install-label-heading"> + <div className="InstallBox-label"> + <div className="InstallBox-label-heading"> Install Bun CLI v0.1.0 (beta) </div> - <div className="unselectable" id="install-label-subtitle"> + <div className="InstallBox-label-subtitle"> macOS x64 & Silicon, Linux x64, Windows Subsystem for Linux </div> </div> - <div id="code-box"> - <div id="curl">curl https://bun.sh/install | bash</div> - <button className="unselectable" id="code-box-copy" aria-label="Copy installation script"> + <div className="InstallBox-code-box"> + <div className="InstallBox-curl">curl https://bun.sh/install | bash</div> + <button className="InstallBox-copy" aria-label="Copy installation script"> copy </button> </div> <a - className="unselectable" - id="view-source-link" + className="InstallBox-view-source-link" target="_blank" href="https://bun.sh/install" > @@ -211,7 +209,7 @@ const Group = ({ children, ...props }) => ( ); export default ({ inlineCSS }) => ( - <html> + <html lang="en"> <head> <meta charSet="UTF-8" /> @@ -254,24 +252,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 +291,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 +747,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 +763,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(); @@ -775,10 +791,11 @@ export default { }); }); -document.querySelector("#code-box-copy").addEventListener("click", async e => { - var el = document.querySelector("#code-box"); - await navigator.clipboard.writeText("curl https://bun.sh/install | bash"); -}); +for (const el of document.querySelectorAll(".InstallBox-copy")) { + el.addEventListener("click", async e => { + await navigator.clipboard.writeText("curl https://bun.sh/install | bash"); + }); +} `, }} /> |