Skip to content

Commit e0c95ff

Browse files
authored
Merge pull request #131 from codeitcodes/dev
Dev
2 parents c6176b8 + 817fed0 commit e0c95ff

File tree

16 files changed

+586
-125
lines changed

16 files changed

+586
-125
lines changed

README.md

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818

1919
<ul>
2020

21-
<li><b>Live view.</b> Run HTML, JS, CSS and Python projects with the click of a button.</li>
21+
<li><b>Live view.</b> Run JavaScript, HTML and CSS projects with a tap.</li>
2222

23-
<li><b>Share.</b> Share unique links to repos, live views, branches and files.</li>
23+
<li><b>Share.</b> Share links to repos, live views, branches and files.</li>
2424

2525
<li><b>Private.</b> Codeit dosen't collect data. Your code stays on your device.</li>
2626

@@ -33,16 +33,12 @@
3333
</ul>
3434
<h2>Technical</h2>
3535

36-
<li>Supports 275 lanugages.</li>
36+
<li>Supports <a href="https://dev.codeit.codes/homepage/lang">290++ lanugages.</a></li>
3737

3838
<li>Uses blazing-fast Web APIs.</li>
3939

4040
<li>Framework-free.</li>
4141

42-
<h2>Security</h2>
43-
44-
Your code stays on your device. Anyone can verify the open-source code deploys to the Codeit site by <a href="https://github.com/codeitcodes/codeit/deployments">scrolling the Github deploy log.</a></li>
45-
4642
<hr>
4743

4844
<h4>Special Thanks</h4>

filebrowser.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -985,7 +985,9 @@ async function loadFileInHTML(fileEl, fileSha) {
985985

986986
// select the new file in HTML
987987
fileEl.classList.add('selected');
988-
fileEl.scrollIntoViewIfNeeded();
988+
onNextFrame(() => {
989+
fileEl.scrollIntoViewIfNeeded();
990+
});
989991

990992
// show all files in HTML
991993
let files = fileWrapper.querySelectorAll('.item[style="display: none;"]');
@@ -1365,7 +1367,8 @@ async function renderBranchMenuHTML(renderAll) {
13651367

13661368
// if clicked on show more button,
13671369
// render all branches
1368-
if (renderAll) {
1370+
if (renderAll
1371+
|| (branchResp.length === 2)) {
13691372

13701373
// run on all branches
13711374
branchResp.forEach(branch => {
@@ -1383,7 +1386,7 @@ async function renderBranchMenuHTML(renderAll) {
13831386

13841387

13851388
// render show more button
1386-
if (!renderAll && branchResp.length > 1) {
1389+
if (!renderAll && branchResp.length > 2) {
13871390

13881391
out += '<div class="icon see-more">' + moreIcon + '<a>see more</a></div>';
13891392

@@ -1555,7 +1558,7 @@ function scrolledSidebarTitle() {
15551558

15561559
}
15571560

1558-
if ((sidebarLogo.offsetWidth + sidebarLogo.scrollLeft)
1561+
if (Math.round(sidebarLogo.offsetWidth + sidebarLogo.scrollLeft)
15591562
>= sidebarLogo.scrollWidth) {
15601563

15611564
sidebarLogo.classList.add('scrolled-end');

full.css

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,7 @@ body.loaded:not(.mobile) .live-view {
386386
top: 0;
387387
left: 0;
388388
height: 2px;
389-
width: 120px;
389+
width: 100vw;
390390
border-radius: 6px;
391391
pointer-events: none;
392392
background: var(--rosemary-lighter);
@@ -400,9 +400,15 @@ body.loaded:not(.mobile) .live-view {
400400

401401
@keyframes live-loader {
402402
from {
403+
width: 0;
403404
transform: translateX(calc(-100% - env(safe-area-inset-left, 0px)));
404405
}
406+
50% {
407+
width: 100vw;
408+
transform: none;
409+
}
405410
to {
411+
width: 100vw;
406412
transform: translateX(100vw);
407413
}
408414
}
@@ -645,15 +651,27 @@ body.expanded .sidebar-toggle svg .left {
645651

646652
.live-toggle .arrow path {
647653
opacity: 0;
654+
transform-origin: center;
648655
transition: .4s var(--cubic-function);
649656
}
650657

658+
.live-toggle .arrow .left {
659+
transform: scale(1.4);
660+
}
661+
662+
.live-toggle .arrow .right {
663+
transform: scale(0.4);
664+
transform-origin: center;
665+
}
666+
651667
.live-view.visible ~ .live-toggle .arrow .right {
652668
opacity: 1;
669+
transform: none;
653670
}
654671

655672
.live-view:not(.visible) ~ .live-toggle .arrow .left {
656673
opacity: 1;
674+
transform: none;
657675
}
658676

659677
.live-toggle:not(.file-open) svg.download {
@@ -742,7 +760,7 @@ body.notransition .sidebar {
742760
top: 0;
743761
left: 0;
744762
height: 2px;
745-
width: 120px;
763+
width: var(--sidebar-width);
746764
margin-bottom: -2px;
747765
border-radius: 6px;
748766
pointer-events: none;
@@ -760,9 +778,15 @@ body.notransition .sidebar {
760778

761779
@keyframes loader {
762780
from {
781+
width: 0;
763782
transform: translateX(calc(-100% - env(safe-area-inset-left, 0px)));
764783
}
784+
50% {
785+
width: var(--sidebar-width);
786+
transform: none;
787+
}
765788
to {
789+
width: var(--sidebar-width);
766790
transform: translateX(var(--sidebar-width));
767791
}
768792
}

full.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
</svg>
107107
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="arrow">
108108
<path d="M0 0h24v24H0z" fill="none"></path>
109-
<path d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z" fill="currentColor" class="right"></path>
109+
<path d="M8.7 15.9L4.8 12l3.9-3.9c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0 .39-.39.39-1.01 0-1.4zm6.6 0l3.9-3.9-3.9-3.9c-.39-.39-.39-1.01 0-1.4.39-.39 1.01-.39 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6c-.39.39-1.01.39-1.4 0-.39-.39-.39-1.01 0-1.4z" fill="currentColor" class="right"></path>
110110
<path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z" fill="currentColor" class="left"></path>
111111
</svg>
112112
</div>

git/gitapi.js

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,39 @@ let git = {
6565

6666
if (branch) branch = '?ref='+ branch;
6767
else branch = '';
68-
68+
6969
query += '/repos/' + user + '/' + repoName +
7070
'/contents/' + contents
7171
+ '/' + fileName +
7272
branch;
73-
73+
7474
// get the query
7575
const resp = await axios.get(query, gitToken);
76-
76+
7777
return resp;
7878

7979
},
80+
81+
// get public file content
82+
'getPublicFile': async (treeLoc, fileName) => {
83+
84+
// map tree location
85+
let query = 'https://raw.githubusercontent.com';
86+
const [user, repo, contents] = treeLoc;
87+
88+
// get repository branch
89+
let [repoName, branch] = repo.split(':');
90+
91+
query += '/' + user + '/' + repoName +
92+
'/' + branch +
93+
'/' + contents + '/' + fileName;
94+
95+
// get the query
96+
const resp = await axios.get(query, '', true);
97+
98+
return resp;
99+
100+
},
80101

81102
// get items in tree
82103
'getItems': async (treeLoc) => {

git/gitauth.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
*/
44

55
// git login
6-
const clientId = '7ede3eed3185e59c042d';
76

87
window.onload = async () => {
98

@@ -65,7 +64,7 @@ window.onload = async () => {
6564

6665
loginButton.addEventListener('click', () => {
6766

68-
window.open('https://github.com/login/oauth/authorize?client_id='+ clientId +'&scope=repo,user,write:org', 'Login with Github', 'height=575,width=575');
67+
window.open('https://github.com/login/oauth/authorize?client_id=7ede3eed3185e59c042d&scope=repo,user,write:org', 'Login with Github', 'height=575,width=575');
6968

7069
})
7170

@@ -113,7 +112,7 @@ async function getGithubToken(gitCode) {
113112
// post through CORS proxy to git with clientId, clientSecret and code
114113
const resp = await axios.post('https://scepter-cors2.herokuapp.com/' +
115114
'https://github.com/login/oauth/access_token?' +
116-
'client_id=' + clientId +
115+
'client_id=7ede3eed3185e59c042d' +
117116
'&client_secret=c1934d5aab1c957800ea8e84ce6a24dda6d68f45' +
118117
'&code=' + gitCode);
119118

homepage/lang.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Codeit - Supported languages</title>
6+
<meta name="theme-color" content="#1a1c24">
7+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,shrink-to-fit=no">
8+
<link rel="shortcut icon" href="/icons/app-favicon.png">
9+
<style>
10+
11+
@font-face {
12+
font-family: 'Inter';
13+
font-style: normal;
14+
font-weight: 100 900;
15+
font-display: swap;
16+
src: url('/fonts/Inter/Inter.var.woff2') format('woff2');
17+
font-named-instance: 'Regular';
18+
}
19+
20+
21+
html {
22+
height: 100%;
23+
background: #1a1c24;
24+
color: #d4d5d7;
25+
font-family: 'Inter', system-ui, sans-serif;
26+
text-align: center;
27+
}
28+
29+
body {
30+
display: flex;
31+
flex-flow: column;
32+
margin: 0;
33+
max-width: 500px;
34+
margin: auto;
35+
padding: 0 20px;
36+
}
37+
38+
.logo {
39+
width: 70px;
40+
border-radius: 22.5%;
41+
border: 1px solid rgba(255,255,255,.1);
42+
margin: 0 auto;
43+
margin-bottom: 24px;
44+
margin-top: 50px;
45+
}
46+
47+
.title {
48+
font-size: 19px;
49+
margin-bottom: 24px;
50+
margin-top: 0;
51+
position: relative;
52+
text-align: center;
53+
}
54+
55+
.button {
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
border-radius: 15px;
60+
box-sizing: border-box;
61+
min-height: 40px;
62+
white-space: nowrap;
63+
font-size: 16px;
64+
padding: 7px 84px;
65+
height: 50px;
66+
width: 233px;
67+
font-weight: 500;
68+
background: hsl(223deg 88% 52%);
69+
color: #fff;
70+
margin: 0 auto;
71+
transition: .1s var(--ease-function);
72+
transition-property: background, color;
73+
}
74+
75+
.button:hover {
76+
background: hsl(223deg 85% 54%);
77+
transition: none;
78+
}
79+
80+
.button:active {
81+
color: rgba(255,255,255,0.25);
82+
background: hsla(223deg 88% 52% / 50%) !important;
83+
transition: none;
84+
}
85+
86+
a {
87+
text-decoration: none;
88+
color: hsl(223deg 86% 73%);
89+
}
90+
91+
a:hover {
92+
text-decoration: underline;
93+
}
94+
95+
96+
body {
97+
--ease-function: cubic-bezier(0.32, 0.08, 0.24, 1);
98+
}
99+
100+
html, body {
101+
text-rendering: optimizeLegibility;
102+
font-feature-settings: "kern";
103+
-webkit-font-feature-settings: "kern";
104+
touch-action: manipulation;
105+
overscroll-behavior: none;
106+
-webkit-touch-callout: none;
107+
-webkit-font-smoothing: antialiased;
108+
-webkit-tap-highlight-color: transparent;
109+
-webkit-text-size-adjust: 100%;
110+
-webkit-overflow-scrolling: touch;
111+
-webkit-text-size-adjust: none;
112+
}
113+
114+
</style>
115+
116+
<meta name="description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
117+
118+
<meta property="og:title" content="Codeit | Mobile code editor connected to Git">
119+
<meta property="og:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
120+
<meta property="og:url" content="https://codeit.codes">
121+
<meta property="og:image" content="https://codeit.codes/images/banner-og.png">
122+
<meta property="og:type" content="application">
123+
<meta property="og:site_name" content="Codeit Code Editor">
124+
125+
<meta property="twitter:title" content="Codeit | Mobile code editor connected to Git">
126+
<meta property="twitter:account_id" content="1484271514543345665">
127+
<meta name="twitter:card" content="summary_large_image">
128+
<meta property="twitter:domain" content="codeit.codes">
129+
<meta property="twitter:url" content="https://codeit.codes">
130+
<meta name="twitter:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
131+
<meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
132+
133+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
134+
<meta name="referrer" content="origin-when-cross-origin">
135+
<script defer="" data-domain="codeit.codes" src="https://plausible.io/js/plausible.js"></script>
136+
137+
</head>
138+
139+
<body ontouchstart="">
140+
<img class="logo" src="/icons/iphone-app-180.png" width="80" draggable="false" alt="Codeit">
141+
<p class="title">Supported languages</p>
142+
<div class="languages" style="display: inline-block;line-height: 1.5;text-align: left;width: max-content;margin: auto;">Just a sec...</div>
143+
<p style="margin-top: 50px;margin-bottom: 50px;">
144+
<a href="/" style="color: inherit;">- ❤️ Codeit team</a>
145+
</p>
146+
147+
<script src="https://prismjs.com/components.js"></script>
148+
<script>
149+
150+
let out = '';
151+
152+
Object.keys(components.languages).forEach(lang => {
153+
154+
out += '<li>' + lang + '</li>';
155+
156+
});
157+
158+
document.querySelector('.languages').innerHTML = out;
159+
160+
</script>
161+
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)