feat: implement deployment workflow and Docker setup for GitHub Pages

Author: Miodec

.github/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build
+        run: bun run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

Dockerfile

@@ -0,0 +1,18 @@
+# Multi-stage build for production
+FROM oven/bun:1-alpine as builder
+
+WORKDIR /app
+COPY package.json bun.lockb ./
+RUN bun install --frozen-lockfile
+
+COPY . .
+RUN bun run build
+
+# Production stage
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

deploy.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Simple deployment script
+# Upload the dist folder to your server
+
+# Example using scp:
+# scp -r dist/* [email protected]:/var/www/html/
+
+# Example using rsync:
+# rsync -av --delete dist/ [email protected]:/var/www/html/
+
+# For nginx, make sure your server config serves static files:
+# server {
+#     listen 80;
+#     server_name your-domain.com;
+#     root /var/www/html;
+#     index index.html;
+#     
+#     location / {
+#         try_files $uri $uri/ /index.html;
+#     }
+# }

nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Handle client-side routing
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "no-referrer-when-downgrade" always;
+}

src/components/EventTable.tsx

@@ -87,7 +87,7 @@ export function EventTable({ events, filters, showDelays }: EventTableProps) {
                       key={`${event.id}-${column.key}`}
                       className="px-3 py-2 text-text font-mono text-xs whitespace-nowrap"
                     >
-                      {column.key === "eventType" ? (
+                      {column.key === "eventType" && "eventType" in event ? (
                         <div className="flex items-center space-x-2">
                           <div
                             className="w-2 h-2 rounded-full flex-shrink-0"
@@ -98,10 +98,10 @@ export function EventTable({ events, filters, showDelays }: EventTableProps) {
                                 ],
                             }}
                           />
-                          <span>{getCellValue(event, column)}</span>
+                          <span>{getCellValue(event as EventData, column)}</span>
                         </div>
                       ) : (
-                        getCellValue(event, column)
+                        "eventType" in event ? getCellValue(event as EventData, column) : "-"
                       )}
                     </td>
                   ))}

src/components/Timeline.tsx

@@ -12,7 +12,7 @@ interface TimelineBar {
   duration: number;
   color: string;
   level: number; // Row level for overlapping bars
-  type: "keypress" | "input";
+  type: "keypress" | "input" | "composition";
 }
 
 export function Timeline({ events }: TimelineProps) {

src/hooks/useKeyboardEvents.ts

@@ -197,11 +197,11 @@ export function useKeyboardEvents() {
   const importEvents = useCallback((importedEvents: EventData[]) => {
     setEvents(importedEvents);
     // Reset event ID to the highest ID in imported events + 1
-    const maxId = importedEvents.reduce((max, event) => Math.max(max, event.eventId), 0);
+    const maxId = importedEvents.reduce((max, event) => Math.max(max, event.id), 0);
     eventIdRef.current = maxId + 1;
-    // Reset timestamps - they'll be relative to the imported events
+    // Reset timestamps - use the first event's timestamp as the new start time
     const firstEvent = importedEvents[0];
-    startTimeRef.current = firstEvent ? firstEvent.timestamp - firstEvent.relativeTime : 0;
+    startTimeRef.current = firstEvent ? firstEvent.timestamp : 0;
     keydownTimestamps.current = {};
   }, []);