feat: publish to github pages

Author: kungfux

.github/workflows/publish.yml

@@ -0,0 +1,52 @@
+name: Publish
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22.x
+          cache: "npm"
+
+      - name: Restore
+        run: npm ci
+
+      - name: Test
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -2,7 +2,7 @@
 
 Binary Timer is a simple countdown timer that counts down in binary.
 
-Available online at [https://binarytimer.surge.sh](https://binarytimer.surge.sh)
+Available online at [https://kungfux.github.io/binarytimer/](https://kungfux.github.io/binarytimer/)
 
 ![screenshot](public/screenshot-wide.png)
 

index.html

@@ -5,12 +5,11 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="google-site-verification" content="DuybeW01gi4SeBHy7YyqfLYOfQ82DNm-heBEhjprUVc" />
   <meta name="description"
     content="Binary Timer Countdown - A Unique Way to Track Time in Binary!
     This interactive tool lets you visualize countdowns in binary, making it perfect for tech enthusiasts, programmers, and learners. Whether you're exploring binary concepts, teaching coding fundamentals, or simply fascinated by unique timers, our binary countdown tool combines education and functionality. Learn, teach, and enjoy the simplicity of binary time tracking today!">
   <meta name="author" content="kungfux">
-  <link rel="canonical" href="https://binarytimer.surge.sh/">
+  <link rel="canonical" href="https://kungfux.github.io/binarytimer/">
   <title>Binary Timer</title>
 </head>
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZX3L2JT8RY"></script>

package.json

@@ -3,10 +3,10 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": "https://kungfux.github.io/binarytimer",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "publish": "surge ./dist binarytimer.surge.sh",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/App.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, useLocation } from "react-router-dom";
 
+import routes from "./routes";
 import TimerSetup from "./pages/TimerSetup.page";
 import TimerCountdown from "./pages/TimerCountdown.page";
 import Footer from "./components/Footer.component";
@@ -20,7 +21,7 @@ function App() {
         </div>
         <Routes>
           <Route
-            path="/"
+            path={routes.root.path}
             element={timeParam ? <TimerCountdown /> : <TimerSetup />}
           />
         </Routes>

src/main.tsx

@@ -4,10 +4,11 @@ import { BrowserRouter } from "react-router-dom";
 
 import "./index.css";
 import App from "./App.tsx";
+import routes from "./routes.ts";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename={routes.base}>
       <App />
     </BrowserRouter>
   </StrictMode>

src/pages/TimerCountdown.page.tsx

@@ -2,9 +2,10 @@ import { createRef, useCallback, useMemo } from "react";
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { Button, ButtonType } from "../components/Button.component";
+import routes from "../routes";
 import BitButton from "../components/BitButton.component";
 import BitCounter from "../BitCounter";
+import { Button, ButtonType } from "../components/Button.component";
 import { useMuteContext } from "../hooks/useMuteContext.hook";
 
 function TimerCountdown() {
@@ -44,11 +45,11 @@ function TimerCountdown() {
       .play()
       .then(() => {
         audio.onended = () => {
-          navigate("/");
+          navigate(routes.root.path);
         };
       })
       .catch(() => {
-        navigate("/");
+        navigate(routes.root.path);
       });
   }, [navigate]);
 
@@ -84,7 +85,7 @@ function TimerCountdown() {
       <Button
         type={ButtonType.Primary}
         text="🛑 Stop"
-        onClick={() => navigate("/")}
+        onClick={() => navigate(routes.root.path)}
       />
     ),
     [navigate]
@@ -106,8 +107,18 @@ function TimerCountdown() {
 
   return (
     <>
-      <audio id="bee" src="bee.mp3" preload="auto" muted={isMuted} />
-      <audio id="doo" src="doo.mp3" preload="auto" muted={isMuted} />
+      <audio
+        id="bee"
+        src={`${routes.base}/bee.mp3`}
+        preload="auto"
+        muted={isMuted}
+      />
+      <audio
+        id="doo"
+        src={`${routes.base}/doo.mp3`}
+        preload="auto"
+        muted={isMuted}
+      />
       <div className="flex flex-col items-center justify-center text-center">
         <div className="flex flex-col items-center justify-center text-center">
           <h1 className="text-5xl uppercase mb-8">Please stand by</h1>

src/routes.ts

@@ -0,0 +1,8 @@
+const routes = {
+    base: '/binarytimer/',
+    root: {
+        path: '/',
+    },
+}
+
+export default routes;

vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
+  base: '/binarytimer/',
   plugins: [react(),
     VitePWA({
       registerType: 'autoUpdate',