Skip to content

Commit 10519f9

Browse files
dphilladphilla
authored
Merge pull request #1 from Seth-Ozaki/dev
CSS overhaul / Xterm.js integration
2 parents 3f7879a + 6adfdac commit 10519f9

File tree

12 files changed

+709
-185
lines changed

12 files changed

+709
-185
lines changed

‎boxer.dev/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎boxer.dev/img/boxer-bg-dark-mobile.png‎

278 KB
Loading

‎boxer.dev/img/boxer-bg-dark.png‎

290 KB
Loading

‎boxer.dev/img/boxer-bg-light-mobile.png‎

372 KB
Loading

‎boxer.dev/img/boxer-bg-light.png‎

368 KB
Loading

‎boxer.dev/img/boxer.png‎

137 KB
Loading

‎boxer.dev/img/github-dark.png‎

18.1 KB
Loading

‎boxer.dev/img/github-light.png‎

99 KB
Loading

‎boxer.dev/main.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const modePreference = window.matchMedia("(prefers-color-scheme: dark");
3+
if (modePreference.matches) {
4+
document.getElementById('view-mode').checked = true;
5+
viewMode();
6+
}
7+
});
8+
9+
document.getElementById('fetchFiles').onclick = async function () {
10+
const repoUrl = document.getElementById('repoUrl').value;
11+
gitHubFiles(repoUrl);
12+
};
13+
14+
document.getElementById('repoUrl').addEventListener('keydown', async function (e) {
15+
if (e.key === 'Enter') {
16+
const repoUrl = document.getElementById('repoUrl').value;
17+
gitHubFiles(repoUrl);
18+
}
19+
});
20+
21+
document.getElementById('view-mode').addEventListener("click", () => {
22+
viewMode();
23+
});
24+
25+
let terminal;
26+
27+
document.getElementById('deployButton').onclick = function () {
28+
document.getElementById('dashboard').style.display = "none";
29+
terminal = new Terminal();
30+
terminal.open(document.getElementById('terminal'));
31+
};
32+
33+
document.getElementById('returnButton').onclick = function () {
34+
document.getElementById('dashboard').style.display = "block";
35+
terminal.dispose();
36+
};
37+
38+
const gitHubFiles = async (repoUrl) => {
39+
const fileListElement = document.getElementById('fileList');
40+
fileListElement.innerHTML = '';
41+
42+
const match = repoUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/);
43+
console.log(match);
44+
if (!match) {
45+
alert('Invalid GitHub URL');
46+
return;
47+
}
48+
49+
const [_, owner, repo] = match;
50+
const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents`;
51+
52+
try {
53+
const response = await fetch(apiUrl);
54+
if (!response.ok) {
55+
throw new Error(`Error fetching repository contents: ${response.statusText}`);
56+
}
57+
58+
const files = await response.json();
59+
files.forEach(file => {
60+
const listItem = document.createElement('li');
61+
const link = document.createElement('a');
62+
link.href = `https://github.com/${owner}/${repo}/blob/main/${file.path}`; // need to change the link to also get the branch name (if main doesnt exist it will send to a 404 not found)
63+
link.target = '_blank'; // Open link in a new tab
64+
link.textContent = file.path;
65+
listItem.appendChild(link);
66+
fileListElement.appendChild(listItem);
67+
});
68+
} catch (error) {
69+
alert('Failed to fetch repository contents: ' + error.message);
70+
}
71+
};
72+
73+
const dockerfileLang = (language) => {
74+
switch (true) {
75+
case (language === 'python'):
76+
document.getElementById('dockerText').value = "# From Dockers official Python image: https://hub.docker.com/_/python\n\nFROM python:3\n\nWORKDIR /usr/src/app\n\nCOPY requirements.txt ./\nRUN pip install --no-cache-dir -r requirements.txt\n\nCOPY . .\n\nCMD [ 'python', './your-daemon-or-script.py' ]\n";
77+
break;
78+
case (language === 'ruby'):
79+
document.getElementById('dockerText').value = "# From Dockers official Ruby image: https://hub.docker.com/_/ruby\n\nFROM ruby:3.3\n\n# Throw errors if Gemfile has been modified since Gemfile.lock\nRUN bundle config --global frozen 1\n\nWORKDIR /usr/src/app\n\nCOPY Gemfile Gemfile.lock ./\nRUN bundle install\n\nCOPY . .\n\nCMD [ './your-daemon-or-script.rb' ]\n";
80+
break;
81+
default:
82+
document.getElementById('dockerText').value = "# From Dockers official GCC image: https://hub.docker.com/_/gcc\n\nFROM gcc:4.9\nCOPY . /usr/src/myapp\nWORKDIR /usr/src/myapp\nRUN gcc -o myapp main.c\nCMD ['./myapp']\n";
83+
84+
}
85+
};
86+
87+
const viewMode = () => {
88+
if (document.getElementById('view-mode').checked) {
89+
document.body.classList.remove('light-mode');
90+
document.body.classList.add('dark-mode');
91+
document.getElementById('github-icon').src = "img/github-dark.png";
92+
} else {
93+
document.body.classList.remove('dark-mode');
94+
document.body.classList.add('light-mode');
95+
document.getElementById('github-icon').src = "img/github-light.png";
96+
}
97+
};

‎boxer.dev/python-example.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Boxer-Python</title>
7+
<style>
8+
body {
9+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
background-color: lightblue;
17+
color: #f0f0f0;
18+
}
19+
#fileList {
20+
font-size: 12px; /* Smaller font size */
21+
color: black; /* Black font color */
22+
}
23+
#fileList a {
24+
text-decoration: none;
25+
color: black; /* Black font color for links */
26+
}
27+
#fileList a:hover {
28+
text-decoration: underline; /* Underline on hover */
29+
}
30+
h1 {
31+
color: #007acc;
32+
font-size: 25px;
33+
position: absolute;
34+
top: 25px;
35+
margin-bottom: 5%;
36+
z-index: 1000; /* Ensure it is on top of other content */
37+
}
38+
.container {
39+
display: flex;
40+
flex-wrap: wrap;
41+
width: 100%;
42+
max-width: 1200px;
43+
padding: 20px;
44+
box-sizing: border-box;
45+
}
46+
.image {
47+
flex: 1;
48+
padding: 10px;
49+
display: flex;
50+
height: 60vh;
51+
justify-content: center;
52+
align-items: center;
53+
}
54+
.image img {
55+
max-width: 100%;
56+
height: 20vh;
57+
border-radius: 8px;
58+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
59+
}
60+
.code {
61+
flex: 1;
62+
padding: 10px;
63+
display: flex;
64+
flex-direction: column;
65+
}
66+
.github-input {
67+
flex: 1;
68+
padding: 10px;
69+
display: flex;
70+
flex-direction: column;
71+
}
72+
.code textarea {
73+
width: 100%;
74+
height: 60vh;
75+
border: none;
76+
border-radius: 8px;
77+
padding: 10px;
78+
font-family: 'Fira Code', monospace;
79+
font-size: 16px;
80+
background-color: #2b2b2b;
81+
color: #f0f0f0;
82+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
83+
resize: none;
84+
}
85+
.code textarea:focus {
86+
outline: none;
87+
box-shadow: 0 0 10px #007acc;
88+
}
89+
.button {
90+
margin-top: 20px;
91+
padding: 10px 20px;
92+
background-color: #007acc;
93+
width: 180px;
94+
align-self: center;
95+
color: #f0f0f0;
96+
border: none;
97+
border-radius: 8px;
98+
font-size: 16px;
99+
cursor: pointer;
100+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
101+
}
102+
.github-btn {
103+
position: absolute;
104+
top: 20px;
105+
right: 20px;
106+
z-index: 1000; /* Ensure it is on top of other content */
107+
}
108+
@media (max-width: 600px) {
109+
.container {
110+
flex-direction: column;
111+
padding-top: 300px;
112+
}
113+
h1 {
114+
margin-top: 10%;
115+
margin-left: 3%;
116+
}
117+
.code textarea {
118+
height: 50vh;
119+
}
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
<h1>Boxer - Deploy a Python App Now</h1>
125+
<div class="github-btn">
126+
<iframe src="https://ghbtns.com/github-btn.html?user=dphilla&amp;repo=boxer&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="125" height="30" title="GitHub"></iframe>
127+
</div>
128+
<div class="container">
129+
<div class="code">
130+
<div class="github-input">
131+
<input type="text" id="repoUrl" placeholder="Enter GitHub repo URL">
132+
<button id="fetchFiles">Fetch Files</button>
133+
<ul id="fileList"></ul>
134+
</div>
135+
(Dockerfile)
136+
<textarea>
137+
FROM python:3
138+
WORKDIR /usr/src/app
139+
COPY . .
140+
CMD [ "python", "./script.py" ]
141+
</textarea>
142+
<button id="deployButton" class="button">Deploy!</button>
143+
</div>
144+
145+
<div class="image">
146+
<a href="/" target="_blank">
147+
<img src="https://user-images.githubusercontent.com/20820229/164059786-8d082b44-59d6-431a-adf4-993116c8d492.png" alt="Placeholder Image">
148+
</a>
149+
<!--<img src="https://user-images.githubusercontent.com/20820229/164059786-8d082b44-59d6-431a-adf4-993116c8d492.png" alt="Mia St John" width="300" height="400">-->
150+
</div>
151+
</div>
152+
153+
154+
<script>
155+
document.getElementById('fetchFiles').onclick = async function() {
156+
const repoUrl = document.getElementById('repoUrl').value;
157+
const fileListElement = document.getElementById('fileList');
158+
fileListElement.innerHTML = '';
159+
160+
const match = repoUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/);
161+
if (!match) {
162+
alert('Invalid GitHub URL');
163+
return;
164+
}
165+
166+
const [_, owner, repo] = match;
167+
const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents`;
168+
169+
try {
170+
const response = await fetch(apiUrl);
171+
if (!response.ok) {
172+
throw new Error(`Error fetching repository contents: ${response.statusText}`);
173+
}
174+
175+
const files = await response.json();
176+
files.forEach(file => {
177+
const listItem = document.createElement('li');
178+
const link = document.createElement('a');
179+
link.href = `https://github.com/${owner}/${repo}/blob/main/${file.path}`;
180+
link.target = '_blank'; // Open link in a new tab
181+
link.textContent = file.path;
182+
listItem.appendChild(link);
183+
fileListElement.appendChild(listItem);
184+
});
185+
} catch (error) {
186+
alert('Failed to fetch repository contents: ' + error.message);
187+
}
188+
};
189+
190+
document.getElementById('deployButton').onclick = function() {
191+
window.location.href = 'https://boxer.dev';
192+
};
193+
</script>
194+
</body>
195+
</html>
196+

0 commit comments

Comments
 (0)