# GitHub Pages! ## Week 5 ---- ### TS Event ```typescript!= type TypeWithEvent = { onChange: ( event: React.ChangeEvent<HTMLInputElement>) => void; }; ``` ---- ### TS Date ```javascript= // In JavaScript function dateDelta(d0, d1) { return d1 - d0; } ``` ```typescript= // In TypeScript function dateDelta(d0: Date, d1: Date) { return d1.getTime() - d0.getTime(); } ``` --- ## 部署到 GitHub Pages ---- ### 安裝 gh-pages ``` pnpm add gh-pages npm i gh-pages yarn add gh-pages ``` ---- ### 修改建置指令 ```json= // package.json { "scripts": { "build": "tsc && vite build --base=./", "predeploy": "npm run build", "deploy": "gh-pages -d dist" } } ``` + `--base=./` 超重要！ + [Reference](https://stackoverflow.com/a/70148453/4893895) ---- ### 部署！ + 先將專案推上 GitHub + 輸入 `npm run deploy` + Settings > Pages > Branch 選擇 `gh-pages` [Demo](https://penut85420.github.io/ReactJS-Timer/)  --- ## 其他 ---- ### 印出美麗的 JSON ```javascript= prettyJSON(data: any): string { return JSON.stringify(data, null, 2); } ``` ---- ### 產生亂數 + [Math.random](https://tinyurl.com/3hda5ddc) + [crypto.getRandomValues](https://tinyurl.com/2dw59m6s) ---- ### Postman + 戳 API 的好工具 + [官方網站](https://www.postman.com/) + [也有網頁版](https://web.postman.co/) ---- ### 找個圖示 + [FlatIcon](https://www.flaticon.com/)