| 1 | import heroImg from "./assets/hero.png"; |
| 2 | import typescriptLogo from "./assets/typescript.svg"; |
| 3 | import viteLogo from "./assets/vite.svg"; |
| 4 | import { setupCounter } from "./counter.ts"; |
| 5 | // oxlint-disable-next-line import/no-unassigned-import |
| 6 | import "./style.css"; |
| 7 | |
| 8 | document.querySelector<HTMLDivElement>("#app")!.innerHTML = ` |
| 9 | <section id="center"> |
| 10 | <div class="hero"> |
| 11 | <img src="${heroImg}" class="base" width="170" height="179"> |
| 12 | <img src="${typescriptLogo}" class="framework" alt="TypeScript logo"/> |
| 13 | <img src=${viteLogo} class="vite" alt="Vite logo" /> |
| 14 | </div> |
| 15 | <div> |
| 16 | <h1>Get started</h1> |
| 17 | <p>Edit <code>src/main.ts</code> and save to test <code>HMR</code></p> |
| 18 | </div> |
| 19 | <button id="counter" type="button" class="counter"></button> |
| 20 | </section> |
| 21 | |
| 22 | <div class="ticks"></div> |
| 23 | |
| 24 | <section id="next-steps"> |
| 25 | <div id="docs"> |
| 26 | <svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#documentation-icon"></use></svg> |
| 27 | <h2>Documentation</h2> |
| 28 | <p>Your questions, answered</p> |
| 29 | <ul> |
| 30 | <li> |
| 31 | <a href="https://vite.dev/" target="_blank"> |
| 32 | <img class="logo" src=${viteLogo} alt="" /> |
| 33 | Explore Vite |
| 34 | </a> |
| 35 | </li> |
| 36 | <li> |
| 37 | <a href="https://www.typescriptlang.org" target="_blank"> |
| 38 | <img class="button-icon" src="${typescriptLogo}" alt=""> |
| 39 | Learn more |
| 40 | </a> |
| 41 | </li> |
| 42 | </ul> |
| 43 | </div> |
| 44 | <div id="social"> |
| 45 | <svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#social-icon"></use></svg> |
| 46 | <h2>Connect with us</h2> |
| 47 | <p>Join the Vite community</p> |
| 48 | <ul> |
| 49 | <li><a href="https://github.com/vitejs/vite" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#github-icon"></use></svg>GitHub</a></li> |
| 50 | <li><a href="https://chat.vite.dev/" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#discord-icon"></use></svg>Discord</a></li> |
| 51 | <li><a href="https://x.com/vite_js" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#x-icon"></use></svg>X.com</a></li> |
| 52 | <li><a href="https://bsky.app/profile/vite.dev" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#bluesky-icon"></use></svg>Bluesky</a></li> |
| 53 | </ul> |
| 54 | </div> |
| 55 | </section> |
| 56 | |
| 57 | <div class="ticks"></div> |
| 58 | <section id="spacer"></section> |
| 59 | `; |
| 60 | |
| 61 | setupCounter(document.querySelector<HTMLButtonElement>("#counter")!); |