links

Author: Jawnnypoo

.github/workflows/deploy.yml

@@ -0,0 +1,67 @@
+name: Deploy React App to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Site
+        run: npm run build
+        env:
+          CI: false
+          PUBLIC_URL: /
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./build
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    # Only deploy on pushes to main branch (not on PRs)
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package-lock.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package.json

@@ -17,6 +17,30 @@
   height: 200px;
 }
 
+.page-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+}
+
+.page-container h1 {
+  margin-bottom: 1rem;
+}
+
+.page-container a {
+  margin-top: 2rem;
+  color: inherit;
+  opacity: 0.7;
+}
+
+.page-container a:hover {
+  opacity: 1;
+}
+
 .footer {
   display: flex;
   justify-content: center;

src/App.css

@@ -1,17 +1,24 @@
-import logo from './assets/logo.png'
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
+import Home from './pages/Home'
+import Privacy from './pages/Privacy'
+import Terms from './pages/Terms'
 import './App.css'
 
 function App() {
   return (
-    <div className="app-container">
-      <main className="main-content">
-        <img src={logo} className="logo" alt="Logo" />
-      </main>
-      <footer className="footer">
-        <a href="/privacy">Privacy Policy</a>
-        <a href="/terms">Terms</a>
-      </footer>
-    </div>
+    <BrowserRouter>
+      <div className="app-container">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/privacy" element={<Privacy />} />
+          <Route path="/terms" element={<Terms />} />
+        </Routes>
+        <footer className="footer">
+          <Link to="/privacy">Privacy Policy</Link>
+          <Link to="/terms">Terms</Link>
+        </footer>
+      </div>
+    </BrowserRouter>
   )
 }
 

src/App.tsx

@@ -0,0 +1,11 @@
+import logo from '../assets/logo.png'
+
+function Home() {
+  return (
+    <main className="main-content">
+      <img src={logo} className="logo" alt="Logo" />
+    </main>
+  )
+}
+
+export default Home

src/pages/Home.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom'
+
+function Privacy() {
+  return (
+    <div className="page-container">
+      <h1>Privacy Policy</h1>
+      <p>Privacy policy content coming soon.</p>
+      <Link to="/">← Back to Home</Link>
+    </div>
+  )
+}
+
+export default Privacy

src/pages/Privacy.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom'
+
+function Terms() {
+  return (
+    <div className="page-container">
+      <h1>Terms of Service</h1>
+      <p>Terms of service content coming soon.</p>
+      <Link to="/">← Back to Home</Link>
+    </div>
+  )
+}
+
+export default Terms