Skip to content

Commit a32263e

Browse files
Ashjha75Ashjha75
committed
Implement code changes to enhance functionality and improve performance
1 parent b78f746 commit a32263e

File tree

5 files changed

+246
-25
lines changed

5 files changed

+246
-25
lines changed

‎index.html‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>CodeToContext - Codebase to Prompt Converter</title>
7+
8+
<!-- Favicon -->
9+
<link rel="icon" type="image/x-icon" href="logo.ico">
10+
<link rel="shortcut icon" type="image/x-icon" href="logo.ico">
11+
<link rel="apple-touch-icon" href="logo.png">
12+
713
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
814
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
915
<link rel="stylesheet" href="style.css">
@@ -17,15 +23,16 @@
1723
<span class="material-symbols-outlined">menu</span>
1824
</button>
1925
<div class="header-title">
20-
<span class="material-symbols-outlined">code</span>
26+
<img src="logo.png" alt="CodeToContext Logo" class="app-logo">
2127
<span>CodeToContext</span>
2228
</div>
2329
</div>
24-
<div class="header-right">
25-
<a href="https://github.com" target="_blank" class="btn-icon" title="GitHub">
26-
<span class="material-symbols-outlined">code</span>
27-
</a>
28-
</div>
30+
<div class="header-right">
31+
<a href="https://github.com/Ashjha75/CocdeToContext" target="_blank" class="btn-icon" title="GitHub">
32+
<i class="fa-brands fa-github"></i>
33+
</a>
34+
</div>
35+
2936
</header>
3037

3138
<!-- MAIN CONTAINER -->

‎index.js‎

Lines changed: 191 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,125 @@
1515
exts: new Set(['exe', 'dll', 'so', 'class', 'pyc', 'png', 'jpg', 'jpeg', 'gif', 'svg', 'mp4', 'mp3', 'wav', 'zip', 'tar', 'gz', 'rar'])
1616
};
1717

18+
// VS Code Material Icon Theme - Professional file icons
1819
const ICONS = {
19-
js: { i: 'javascript', c: '#f1e05a' }, jsx: { i: 'javascript', c: '#f1e05a' },
20-
ts: { i: 'code', c: '#3178c6' }, tsx: { i: 'code', c: '#3178c6' },
21-
py: { i: 'code', c: '#3776ab' }, html: { i: 'html', c: '#e34c26' },
22-
css: { i: 'css', c: '#563d7c' }, json: { i: 'data_object', c: '#cb171e' },
23-
md: { i: 'article', c: '#fff' }
20+
// JavaScript
21+
js: { icon: 'javascript.svg', color: '#f1e05a' },
22+
jsx: { icon: 'react.svg', color: '#61dafb' },
23+
mjs: { icon: 'javascript.svg', color: '#f1e05a' },
24+
25+
// TypeScript
26+
ts: { icon: 'typescript.svg', color: '#3178c6' },
27+
tsx: { icon: 'react_ts.svg', color: '#3178c6' },
28+
29+
// Python
30+
py: { icon: 'python.svg', color: '#3776ab' },
31+
pyc: { icon: 'python-misc.svg', color: '#3776ab' },
32+
33+
// Web
34+
html: { icon: 'html.svg', color: '#e34c26' },
35+
htm: { icon: 'html.svg', color: '#e34c26' },
36+
css: { icon: 'css.svg', color: '#563d7c' },
37+
scss: { icon: 'sass.svg', color: '#c6538c' },
38+
sass: { icon: 'sass.svg', color: '#c6538c' },
39+
less: { icon: 'less.svg', color: '#1d365d' },
40+
41+
// Data
42+
json: { icon: 'json.svg', color: '#cbcb41' },
43+
xml: { icon: 'xml.svg', color: '#ff6600' },
44+
yaml: { icon: 'yaml.svg', color: '#cb171e' },
45+
yml: { icon: 'yaml.svg', color: '#cb171e' },
46+
toml: { icon: 'toml.svg', color: '#9c4221' },
47+
48+
// Documentation
49+
md: { icon: 'markdown.svg', color: '#083fa1' },
50+
mdx: { icon: 'mdx.svg', color: '#fcb32c' },
51+
txt: { icon: 'document.svg', color: '#a0a0a0' },
52+
53+
// Config
54+
gitignore: { icon: 'git.svg', color: '#f34f29' },
55+
env: { icon: 'tune.svg', color: '#e7c547' },
56+
config: { icon: 'settings.svg', color: '#6d8086' },
57+
58+
// Java
59+
java: { icon: 'java.svg', color: '#b07219' },
60+
class: { icon: 'javaclass.svg', color: '#b07219' },
61+
jar: { icon: 'jar.svg', color: '#b07219' },
62+
63+
// C/C++
64+
c: { icon: 'c.svg', color: '#555555' },
65+
cpp: { icon: 'cpp.svg', color: '#f34b7d' },
66+
h: { icon: 'h.svg', color: '#555555' },
67+
hpp: { icon: 'hpp.svg', color: '#f34b7d' },
68+
69+
// PHP
70+
php: { icon: 'php.svg', color: '#4f5d95' },
71+
72+
// Ruby
73+
rb: { icon: 'ruby.svg', color: '#701516' },
74+
75+
// Go
76+
go: { icon: 'go.svg', color: '#00add8' },
77+
78+
// Rust
79+
rs: { icon: 'rust.svg', color: '#dea584' },
80+
81+
// Shell
82+
sh: { icon: 'shell.svg', color: '#89e051' },
83+
bash: { icon: 'shell.svg', color: '#89e051' },
84+
zsh: { icon: 'shell.svg', color: '#89e051' },
85+
86+
// Docker
87+
dockerfile: { icon: 'docker.svg', color: '#0db7ed' },
88+
89+
// Images
90+
png: { icon: 'image.svg', color: '#a074c4' },
91+
jpg: { icon: 'image.svg', color: '#a074c4' },
92+
jpeg: { icon: 'image.svg', color: '#a074c4' },
93+
gif: { icon: 'image.svg', color: '#a074c4' },
94+
svg: { icon: 'svg.svg', color: '#ffb13b' },
95+
ico: { icon: 'image.svg', color: '#a074c4' },
96+
webp: { icon: 'image.svg', color: '#a074c4' },
97+
98+
// Vue/Angular/React
99+
vue: { icon: 'vue.svg', color: '#42b883' },
100+
101+
// Others
102+
sql: { icon: 'database.svg', color: '#e38c00' },
103+
pdf: { icon: 'pdf.svg', color: '#f40f02' },
104+
zip: { icon: 'zip.svg', color: '#f9dc5c' },
105+
106+
// Default
107+
default: { icon: 'document.svg', color: '#a0a0a0' }
24108
};
25109

110+
// Special folder types
111+
const FOLDER_ICONS = {
112+
'node_modules': { icon: 'folder-node.svg', color: '#8cc84b' },
113+
'src': { icon: 'folder-src.svg', color: '#f0eee6' },
114+
'dist': { icon: 'folder-dist.svg', color: '#f0eee6' },
115+
'build': { icon: 'folder-build.svg', color: '#f0eee6' },
116+
'public': { icon: 'folder-public.svg', color: '#f0eee6' },
117+
'assets': { icon: 'folder-images.svg', color: '#f0eee6' },
118+
'images': { icon: 'folder-images.svg', color: '#f0eee6' },
119+
'img': { icon: 'folder-images.svg', color: '#f0eee6' },
120+
'components': { icon: 'folder-component.svg', color: '#f0eee6' },
121+
'pages': { icon: 'folder-views.svg', color: '#f0eee6' },
122+
'views': { icon: 'folder-views.svg', color: '#f0eee6' },
123+
'tests': { icon: 'folder-test.svg', color: '#f0eee6' },
124+
'test': { icon: 'folder-test.svg', color: '#f0eee6' },
125+
'__tests__': { icon: 'folder-test.svg', color: '#f0eee6' },
126+
'utils': { icon: 'folder-helper.svg', color: '#f0eee6' },
127+
'helpers': { icon: 'folder-helper.svg', color: '#f0eee6' },
128+
'lib': { icon: 'folder-lib.svg', color: '#f0eee6' },
129+
'config': { icon: 'folder-config.svg', color: '#f0eee6' },
130+
'.git': { icon: 'folder-git.svg', color: '#f34f29' },
131+
'.vscode': { icon: 'folder-vscode.svg', color: '#007acc' },
132+
'default': { icon: 'folder.svg', color: '#dcb67a' }
133+
};
134+
135+
const ICON_BASE_URL = 'https://raw.githack.com/PKief/vscode-material-icon-theme/main/icons/';
136+
26137
const MAX_RENDER = 1000; // Max items to render at once
27138
const BATCH = 50; // Files to process per batch
28139

@@ -80,7 +191,80 @@
80191

81192
const ign = p => { const pts = p.split('/'); if (pts.some(x => IGNORED.folders.has(x))) return true; const e = pts[pts.length - 1].split('.').pop().toLowerCase(); return IGNORED.exts.has(e); };
82193

83-
const ico = (n, f) => { if (f) return { i: 'folder', c: '#e3dacc', cls: 'folder-icon' }; const e = n.split('.').pop().toLowerCase(); const ic = ICONS[e] || { i: 'description', c: '#888' }; return { ...ic, cls: `${e}-icon` }; };
194+
// Get icon for file or folder
195+
const ico = (name, isFolder) => {
196+
if (isFolder) {
197+
// Check for special folder names
198+
const folderName = name.toLowerCase();
199+
const folderIcon = FOLDER_ICONS[folderName] || FOLDER_ICONS['default'];
200+
return {
201+
type: 'svg',
202+
url: ICON_BASE_URL + folderIcon.icon,
203+
color: folderIcon.color,
204+
cls: 'folder-icon'
205+
};
206+
}
207+
208+
// File icon
209+
const fileName = name.toLowerCase();
210+
211+
// Check for special filenames (like .gitignore, dockerfile, etc.)
212+
if (fileName === '.gitignore' || fileName === '.gitattributes') {
213+
return {
214+
type: 'svg',
215+
url: ICON_BASE_URL + 'git.svg',
216+
color: '#f34f29',
217+
cls: 'git-icon'
218+
};
219+
}
220+
221+
if (fileName === 'dockerfile' || fileName.startsWith('dockerfile.')) {
222+
return {
223+
type: 'svg',
224+
url: ICON_BASE_URL + 'docker.svg',
225+
color: '#0db7ed',
226+
cls: 'docker-icon'
227+
};
228+
}
229+
230+
if (fileName.startsWith('.env')) {
231+
return {
232+
type: 'svg',
233+
url: ICON_BASE_URL + 'tune.svg',
234+
color: '#e7c547',
235+
cls: 'env-icon'
236+
};
237+
}
238+
239+
if (fileName === 'package.json') {
240+
return {
241+
type: 'svg',
242+
url: ICON_BASE_URL + 'nodejs.svg',
243+
color: '#8cc84b',
244+
cls: 'nodejs-icon'
245+
};
246+
}
247+
248+
if (fileName === 'readme.md' || fileName === 'readme') {
249+
return {
250+
type: 'svg',
251+
url: ICON_BASE_URL + 'readme.svg',
252+
color: '#4caf50',
253+
cls: 'readme-icon'
254+
};
255+
}
256+
257+
// Get by extension
258+
const ext = name.split('.').pop().toLowerCase();
259+
const iconData = ICONS[ext] || ICONS['default'];
260+
261+
return {
262+
type: 'svg',
263+
url: ICON_BASE_URL + iconData.icon,
264+
color: iconData.color,
265+
cls: `${ext}-icon`
266+
};
267+
};
84268

85269
const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
86270

@@ -237,7 +421,7 @@
237421
<span class="material-symbols-outlined">chevron_right</span>
238422
</button>
239423
<div class="file-icon ${ic.cls}">
240-
<span class="material-symbols-outlined" style="color:${ic.c}">${ic.i}</span>
424+
<img src="${ic.url}" alt="${nd.n}" class="vscode-icon" onerror="this.style.display='none'" />
241425
</div>
242426
<label class="file-label">
243427
<input type="checkbox" class="file-checkbox" data-path="${nd.full}" ${nd.ig ? 'disabled' : 'checked'}>

‎logo.ico‎

212 KB
Binary file not shown.

‎logo.png‎

700 KB
Loading

‎style.css‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,20 @@ html, body {
8080
color: var(--color-primary);
8181
}
8282

83+
/* Logo styling */
84+
.app-logo {
85+
width: 28px;
86+
height: 28px;
87+
object-fit: contain;
88+
border-radius: 4px;
89+
transition: var(--transition);
90+
}
91+
92+
.app-logo:hover {
93+
transform: scale(1.05);
94+
filter: brightness(1.1);
95+
}
96+
8397
.header-title .material-symbols-outlined {
8498
color: var(--color-accent);
8599
font-size: 20px;
@@ -376,28 +390,44 @@ html, body {
376390
}
377391

378392
.file-icon {
379-
width: 18px;
380-
height: 18px;
393+
width: 20px;
394+
height: 20px;
381395
display: flex;
382396
align-items: center;
383397
justify-content: center;
384398
flex-shrink: 0;
399+
margin-right: 2px;
385400
}
386401

402+
/* VS Code style SVG icons */
403+
.file-icon .vscode-icon {
404+
width: 18px;
405+
height: 18px;
406+
object-fit: contain;
407+
display: block;
408+
}
409+
410+
/* Folder icon slightly larger */
411+
.folder-icon .vscode-icon {
412+
width: 19px;
413+
height: 19px;
414+
opacity: 0.9;
415+
}
416+
417+
/* Smooth icon loading */
418+
.vscode-icon {
419+
transition: opacity 0.2s ease;
420+
}
421+
422+
.vscode-icon:hover {
423+
opacity: 1;
424+
}
425+
426+
/* Fallback for Material Icons (if needed) */
387427
.file-icon .material-symbols-outlined {
388428
font-size: 16px;
389429
}
390430

391-
/* File type colors */
392-
.folder-icon .material-symbols-outlined { color: #e3dacc; }
393-
.js-icon .material-symbols-outlined { color: #f1e05a; }
394-
.ts-icon .material-symbols-outlined { color: #3178c6; }
395-
.py-icon .material-symbols-outlined { color: #3776ab; }
396-
.html-icon .material-symbols-outlined { color: #e34c26; }
397-
.css-icon .material-symbols-outlined { color: #563d7c; }
398-
.json-icon .material-symbols-outlined { color: #cb171e; }
399-
.md-icon .material-symbols-outlined { color: #ffffff; }
400-
401431
.file-label {
402432
display: flex;
403433
align-items: center;

0 commit comments

Comments
 (0)