Skip to content

Add GitHub keymap sync tab with OAuth, diff viewer, and PR creation#64

Draft
Copilot wants to merge 4 commits into
mainfrom
copilot/add-github-integration-tab
Draft

Add GitHub keymap sync tab with OAuth, diff viewer, and PR creation#64
Copilot wants to merge 4 commits into
mainfrom
copilot/add-github-integration-tab

Conversation

Copilot AI commented Feb 20, 2026

Copy link
Copy Markdown
Contributor

Adds a new "GitHub" tab that lets users sync their current keyboard configuration to a zmk-config repository via a GitHub pull request. In demo mode, the feature is fully functional with fake data so users can explore the workflow without a real keyboard or GitHub account.

Architecture

Cloudflare Worker OAuth (src/worker.ts)

Handles the server-side OAuth token exchange, keeping GITHUB_CLIENT_SECRET off the client. Uses a state cookie for CSRF protection, then delivers the token to the opener window via postMessage (origin-restricted) before self-closing.

  • GET /api/auth/github/login → redirect to GitHub OAuth
  • GET /api/auth/github/callback → exchange code, postMessage token, close popup
  • All other routes fall through to static assets

Works locally via wrangler dev with a .dev.vars file.

GitHub API client (src/lib/github.ts)

Thin fetch wrappers for: user info, repo listing, tree traversal (finds .keymap files), file read, branch creation, file commit (PUT), and PR creation.

Keymap file generator (src/lib/keymapFileGenerator.ts)

  • bindingToZmk() — converts a BehaviorBinding to ZMK syntax (&kp A, &trans, &mo 1, &lt 2 A, &mt LCTRL A, etc.)
  • patchKeymapFile() — replaces each bindings = < ... >; block in the .keymap source with bindings from the keyboard's current state (matched by layer index)
  • generateDiff() — LCS-based line-by-line diff returning typed DiffLine[]

Hook (src/hooks/useGitHub.ts)

Manages OAuth popup flow, repo/file selection, diff generation, and PR commit. Demo mode is detected from deviceName containing "Demo" and injects fake repos + a sample .keymap file.

Page (src/pages/GitHubPage.tsx)

Sequential UI: demo banner → auth → repo selector → file selector → diff viewer (green/red line-by-line with line numbers) → "Create Pull Request" button.

Local Setup

Create .dev.vars:

GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_client_secret

Register a GitHub OAuth App with callback http://localhost:8787/api/auth/github/callback.


🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Copilot AI and others added 3 commits February 20, 2026 14:10
- Add Cloudflare Worker for GitHub OAuth flow with CSRF state validation
- Add GitHub API client library (src/lib/github.ts)
- Add ZMK keymap file patching and diff generation utilities
- Add useGitHub React hook for GitHub state management
- Add GitHubPage with repo/file selector and diff viewer
- Add GitHub tab to app navigation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: cormoran <7994064+cormoran@users.noreply.github.com>
…tary Layer, etc. correctly

Co-authored-by: cormoran <7994064+cormoran@users.noreply.github.com>
Copilot AI changed the title [WIP] Add feature to load zmk-config repository and update .keymap Add GitHub keymap sync tab with OAuth, diff viewer, and PR creation Feb 20, 2026
Copilot AI requested a review from cormoran February 20, 2026 14:23
@github-actions

Copy link
Copy Markdown

🚀 Cloudflare Workers Preview

Preview URL: https://60c9d58a-dya-studio.cormoran707.workers.dev

Deployed from commit dfc7ecf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants