mirror of
https://github.com/stackblitz/bolt.new
synced 2025-06-26 18:17:50 +00:00
feat: push to github
added the ability to push projects to github from the workbench
This commit is contained in:
Dustin Loring
GitHub
commit
d7c4248ada
100
app/components/workbench/GitHubPushModal.tsx
Normal file
100
app/components/workbench/GitHubPushModal.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { githubStore } from '~/lib/stores/github';
|
||||
|
||||
interface GitHubPushModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function GitHubPushModal({ isOpen, onClose }: GitHubPushModalProps) {
|
||||
const [token, setToken] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [repoName, setRepoName] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await githubStore.pushToGitHub(token, username, repoName);
|
||||
toast.success('Successfully pushed to GitHub!');
|
||||
onClose();
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to push to GitHub');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-bolt-elements-background-depth-2 rounded-lg p-6 w-[400px] max-w-[90vw]">
|
||||
<h2 className="text-xl font-semibold mb-4">Push to GitHub</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
GitHub Token
|
||||
<input
|
||||
type="password"
|
||||
value={token}
|
||||
onChange={(e) => setToken(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor px-3 py-2"
|
||||
placeholder="ghp_xxxxxxxxxxxx"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
GitHub Username
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor px-3 py-2"
|
||||
placeholder="your-username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Repository Name
|
||||
<input
|
||||
type="text"
|
||||
value={repoName}
|
||||
onChange={(e) => setRepoName(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor px-3 py-2"
|
||||
placeholder="my-project"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm rounded-md bg-bolt-elements-background-depth-1 hover:bg-bolt-elements-background-depth-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="px-4 py-2 text-sm rounded-md bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'Pushing...' : 'Push to GitHub'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,9 +3,10 @@ import { saveAs } from 'file-saver';
|
||||
import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
|
||||
import JSZip from 'jszip';
|
||||
import { computed } from 'nanostores';
|
||||
import { memo, useCallback, useEffect } from 'react';
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { EditorPanel } from './EditorPanel';
|
||||
import { GitHubPushModal } from './GitHubPushModal';
|
||||
import { Preview } from './Preview';
|
||||
import {
|
||||
type OnChangeCallback as OnEditorChange,
|
||||
@ -64,6 +65,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
|
||||
const unsavedFiles = useStore(workbenchStore.unsavedFiles);
|
||||
const files = useStore(workbenchStore.files);
|
||||
const selectedView = useStore(workbenchStore.currentView);
|
||||
const [showGitHubModal, setShowGitHubModal] = useState(false);
|
||||
|
||||
const downloadZip = async () => {
|
||||
const zip = new JSZip();
|
||||
@ -159,6 +161,13 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
|
||||
<div className="i-ph:download-bold" />
|
||||
Download
|
||||
</PanelHeaderButton>
|
||||
<PanelHeaderButton
|
||||
className="mr-1 text-sm"
|
||||
onClick={() => setShowGitHubModal(true)}
|
||||
>
|
||||
<div className="i-ph:github-logo-bold" />
|
||||
Push to GitHub
|
||||
</PanelHeaderButton>
|
||||
<PanelHeaderButton
|
||||
className="mr-1 text-sm"
|
||||
onClick={() => {
|
||||
@ -207,6 +216,10 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GitHubPushModal
|
||||
isOpen={showGitHubModal}
|
||||
onClose={() => setShowGitHubModal(false)}
|
||||
/>
|
||||
</motion.div>
|
||||
)
|
||||
);
|
||||
|
||||
72
app/lib/stores/github.ts
Normal file
72
app/lib/stores/github.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { atom, type WritableAtom } from 'nanostores';
|
||||
import { workbenchStore } from './workbench';
|
||||
|
||||
export interface GitHubConfig {
|
||||
token?: string;
|
||||
username?: string;
|
||||
repoName?: string;
|
||||
}
|
||||
|
||||
class GitHubStore {
|
||||
config: WritableAtom<GitHubConfig> = atom({});
|
||||
|
||||
async pushToGitHub(token: string, username: string, repoName: string): Promise<void> {
|
||||
try {
|
||||
// First, create the repository if it doesn't exist
|
||||
const createRepoResponse = await fetch(`https://api.github.com/user/repos`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `token ${token}`,
|
||||
'Accept': 'application/vnd.github.v3+json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: repoName,
|
||||
private: false,
|
||||
auto_init: false,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!createRepoResponse.ok && createRepoResponse.status !== 422) { // 422 means repo already exists
|
||||
throw new Error(`Failed to create repository: ${createRepoResponse.statusText}`);
|
||||
}
|
||||
|
||||
// Get all files from workbench
|
||||
const files = workbenchStore.files.get();
|
||||
|
||||
// Create a commit with all files
|
||||
for (const [filePath, dirent] of Object.entries(files)) {
|
||||
if (dirent?.type === 'file' && !dirent.isBinary) {
|
||||
const relativePath = filePath.replace(/^\/home\/project\//, '');
|
||||
|
||||
// Create/update file in repository
|
||||
const response = await fetch(`https://api.github.com/repos/${username}/${repoName}/contents/${relativePath}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `token ${token}`,
|
||||
'Accept': 'application/vnd.github.v3+json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: `Add/Update ${relativePath}`,
|
||||
content: btoa(dirent.content), // Base64 encode content
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to push file ${relativePath}: ${response.statusText}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update config store
|
||||
this.config.set({ token, username, repoName });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error pushing to GitHub:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const githubStore = new GitHubStore();
|
||||
Loading…
Reference in New Issue
Block a user