Skip to content

Commit 5f772ee

Browse files
black-ghost-offblack-ghost-off
committed
update: update design for catalog
1 parent ac4a18a commit 5f772ee

3 files changed

Lines changed: 584 additions & 304 deletions

File tree

‎site/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
<header>
1111
<div class="container">
1212
<h1>🎮 Lilka Apps & Mods</h1>
13+
<p class="subtitle">Games, tools, and modifications for the Lilka DIY console</p>
1314
</div>
15+
<div class="header-border"></div>
1416
</header>
1517

1618
<nav class="tabs">
@@ -29,17 +31,17 @@ <h1>🎮 Lilka Apps & Mods</h1>
2931

3032
<div id="content">
3133
<div class="pagination">
32-
<button id="prevPage" class="btn" disabled>← Previous</button>
34+
<button id="prevPage" class="btn" disabled>←</button>
3335
<div id="pageNumbers" class="page-numbers"></div>
34-
<button id="nextPage" class="btn" disabled>Next →</button>
36+
<button id="nextPage" class="btn" disabled>→</button>
3537
</div>
3638

3739
<div id="items" class="items-grid"></div>
3840

3941
<div class="pagination">
40-
<button id="prevPageBottom" class="btn" disabled>← Previous</button>
42+
<button id="prevPageBottom" class="btn" disabled>←</button>
4143
<div id="pageNumbersBottom" class="page-numbers"></div>
42-
<button id="nextPageBottom" class="btn" disabled>Next →</button>
44+
<button id="nextPageBottom" class="btn" disabled>→</button>
4345
</div>
4446
</div>
4547

‎site/script.js‎

Lines changed: 106 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ class LilkaRepository {
5353
}
5454

5555
// Determine if this is a file or directory
56-
if (exPath && this._examplesFileCache && this._examplesFileCache[exPath]) {
56+
if (exPath && this._examplesFileCache &&
57+
this._examplesFileCache[exPath]) {
5758
const cached = this._examplesFileCache[exPath];
5859
await this.viewExampleFile(exPath, cached.name, cached.download, true);
5960
} else {
@@ -319,7 +320,8 @@ class LilkaRepository {
319320
container.innerHTML = `
320321
<div class="examples-header">
321322
<div class="examples-breadcrumb" id="examples-breadcrumb"></div>
322-
<a href="${REPO_URL}" target="_blank" rel="noopener noreferrer" class="examples-repo-link">
323+
<a href="${
324+
REPO_URL}" target="_blank" rel="noopener noreferrer" class="examples-repo-link">
323325
🐙 View on GitHub
324326
</a>
325327
</div>
@@ -332,12 +334,14 @@ class LilkaRepository {
332334
const bc = document.getElementById('examples-breadcrumb');
333335
if (!bc) return;
334336
const parts = path ? path.split('/') : [];
335-
let html = `<span class="breadcrumb-item breadcrumb-link" data-path="">📦 examples</span>`;
337+
let html =
338+
`<span class="breadcrumb-item breadcrumb-link" data-path="">📦 examples</span>`;
336339
let accumulated = '';
337340
for (const part of parts) {
338341
accumulated += (accumulated ? '/' : '') + part;
339342
html += `<span class="breadcrumb-sep">/</span>`;
340-
html += `<span class="breadcrumb-item breadcrumb-link" data-path="${this.escapeHtml(accumulated)}">${this.escapeHtml(part)}</span>`;
343+
html += `<span class="breadcrumb-item breadcrumb-link" data-path="${
344+
this.escapeHtml(accumulated)}">${this.escapeHtml(part)}</span>`;
341345
}
342346
bc.innerHTML = html;
343347
bc.querySelectorAll('.breadcrumb-link').forEach(link => {
@@ -365,32 +369,37 @@ class LilkaRepository {
365369
this.updateURL('examples', null, null, path);
366370
}
367371

368-
const apiUrl = path
369-
? `https://api.github.com/repos/lilka-dev/examples/contents/${path}`
370-
: 'https://api.github.com/repos/lilka-dev/examples/contents';
372+
const apiUrl = path ?
373+
`https://api.github.com/repos/lilka-dev/examples/contents/${path}` :
374+
'https://api.github.com/repos/lilka-dev/examples/contents';
371375

372376
try {
373377
const response = await fetch(apiUrl);
374378
if (!response.ok) throw new Error('Failed to load directory');
375379
const contents = await response.json();
376380

377-
const dirs = contents.filter(i => i.type === 'dir').sort((a, b) => a.name.localeCompare(b.name));
378-
const files = contents.filter(i => i.type === 'file').sort((a, b) => a.name.localeCompare(b.name));
381+
const dirs = contents.filter(i => i.type === 'dir')
382+
.sort((a, b) => a.name.localeCompare(b.name));
383+
const files = contents.filter(i => i.type === 'file')
384+
.sort((a, b) => a.name.localeCompare(b.name));
379385

380386
let html = '<div class="examples-file-list">';
381387

382388
if (path) {
383-
const parentPath = path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : '';
389+
const parentPath =
390+
path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : '';
384391
html += `
385-
<div class="file-list-item file-list-back" data-action="dir" data-path="${this.escapeHtml(parentPath)}">
392+
<div class="file-list-item file-list-back" data-action="dir" data-path="${
393+
this.escapeHtml(parentPath)}">
386394
<span class="file-icon">⬆️</span>
387395
<span class="file-name">..</span>
388396
</div>`;
389397
}
390398

391399
for (const dir of dirs) {
392400
html += `
393-
<div class="file-list-item file-list-dir" data-action="dir" data-path="${this.escapeHtml(dir.path)}">
401+
<div class="file-list-item file-list-dir" data-action="dir" data-path="${
402+
this.escapeHtml(dir.path)}">
394403
<span class="file-icon">📁</span>
395404
<span class="file-name">${this.escapeHtml(dir.name)}</span>
396405
</div>`;
@@ -400,7 +409,10 @@ class LilkaRepository {
400409
const sizeStr = this.formatFileSize(file.size);
401410
const langIcon = this.getFileIcon(file.name);
402411
html += `
403-
<div class="file-list-item file-list-file" data-action="file" data-path="${this.escapeHtml(file.path)}" data-name="${this.escapeHtml(file.name)}" data-download="${this.escapeHtml(file.download_url || '')}">
412+
<div class="file-list-item file-list-file" data-action="file" data-path="${
413+
this.escapeHtml(file.path)}" data-name="${
414+
this.escapeHtml(file.name)}" data-download="${
415+
this.escapeHtml(file.download_url || '')}">
404416
<span class="file-icon">${langIcon}</span>
405417
<span class="file-name">${this.escapeHtml(file.name)}</span>
406418
<span class="file-size">${sizeStr}</span>
@@ -426,7 +438,8 @@ class LilkaRepository {
426438
download: item.dataset.download
427439
};
428440
this.updateURL('examples', null, null, itemPath);
429-
this.viewExampleFile(itemPath, item.dataset.name, item.dataset.download, true);
441+
this.viewExampleFile(
442+
itemPath, item.dataset.name, item.dataset.download, true);
430443
}
431444
});
432445
});
@@ -435,7 +448,10 @@ class LilkaRepository {
435448
bodyEl.className = 'examples-error';
436449
bodyEl.innerHTML = `
437450
<p>📦 Could not load directory listing.</p>
438-
<a href="${REPO_URL}${path ? '/tree/main/' + path : ''}" target="_blank" rel="noopener noreferrer" class="btn">Open on GitHub →</a>
451+
<a href="${REPO_URL}${
452+
path ?
453+
'/tree/main/' + path :
454+
''}" target="_blank" rel="noopener noreferrer" class="btn">Open on GitHub →</a>
439455
`;
440456
}
441457
}
@@ -454,19 +470,23 @@ class LilkaRepository {
454470
}
455471

456472
const REPO_URL = 'https://github.com/lilka-dev/examples';
457-
const rawUrl = downloadUrl || `https://raw.githubusercontent.com/lilka-dev/examples/main/${path}`;
473+
const rawUrl = downloadUrl ||
474+
`https://raw.githubusercontent.com/lilka-dev/examples/main/${path}`;
458475

459476
try {
460477
const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
461-
const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp', 'ico'];
478+
const imageExts =
479+
['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp', 'ico'];
462480

463481
if (imageExts.includes(ext)) {
464482
viewer.innerHTML = `
465483
<div class="file-viewer-header">
466484
<span class="file-viewer-name">${this.escapeHtml(name)}</span>
467485
<div class="file-viewer-actions">
468-
<a href="${REPO_URL}/blob/main/${path}" target="_blank" rel="noopener noreferrer" class="btn btn-sm">View on GitHub</a>
469-
<a href="${rawUrl}" download="${this.escapeHtml(name)}" class="btn btn-sm">Download</a>
486+
<a href="${REPO_URL}/blob/main/${
487+
path}" target="_blank" rel="noopener noreferrer" class="btn btn-sm">View on GitHub</a>
488+
<a href="${rawUrl}" download="${
489+
this.escapeHtml(name)}" class="btn btn-sm">Download</a>
470490
</div>
471491
</div>
472492
<div class="file-viewer-image">
@@ -488,30 +508,36 @@ class LilkaRepository {
488508
}
489509

490510
const lineCount = text.split('\n').length;
491-
const lineNumbers = Array.from({length: lineCount}, (_, i) => `<span>${i + 1}</span>`).join('\n');
511+
const lineNumbers =
512+
Array.from({length: lineCount}, (_, i) => `<span>${i + 1}</span>`)
513+
.join('\n');
492514

493515
viewer.innerHTML = `
494516
<div class="file-viewer-header">
495517
<span class="file-viewer-name">${this.escapeHtml(name)}</span>
496-
<span class="file-viewer-meta">${lineCount} lines · ${this.formatFileSize(text.length)}</span>
518+
<span class="file-viewer-meta">${lineCount} lines · ${
519+
this.formatFileSize(text.length)}</span>
497520
<div class="file-viewer-actions">
498521
<button class="btn btn-sm" id="copy-code-btn">📋 Copy</button>
499-
<a href="${rawUrl}" download="${this.escapeHtml(name)}" class="btn btn-sm">⬇ Download</a>
500-
<a href="${REPO_URL}/blob/main/${path}" target="_blank" rel="noopener noreferrer" class="btn btn-sm">GitHub</a>
522+
<a href="${rawUrl}" download="${
523+
this.escapeHtml(name)}" class="btn btn-sm">⬇ Download</a>
524+
<a href="${REPO_URL}/blob/main/${
525+
path}" target="_blank" rel="noopener noreferrer" class="btn btn-sm">GitHub</a>
501526
</div>
502527
</div>
503528
<div class="file-viewer-code">
504529
<div class="line-numbers">${lineNumbers}</div>
505530
<pre><code class="hljs">${highlighted}</code></pre>
506531
</div>`;
507532

508-
document.getElementById('copy-code-btn')?.addEventListener('click', () => {
509-
navigator.clipboard.writeText(text).then(() => {
510-
const btn = document.getElementById('copy-code-btn');
511-
btn.textContent = '✅ Copied!';
512-
setTimeout(() => btn.textContent = '📋 Copy', 2000);
513-
});
514-
});
533+
document.getElementById('copy-code-btn')
534+
?.addEventListener('click', () => {
535+
navigator.clipboard.writeText(text).then(() => {
536+
const btn = document.getElementById('copy-code-btn');
537+
btn.textContent = '✅ Copied!';
538+
setTimeout(() => btn.textContent = '📋 Copy', 2000);
539+
});
540+
});
515541

516542
// Sync line numbers scroll with code scroll
517543
const codePreEl = viewer.querySelector('.file-viewer-code pre');
@@ -525,42 +551,75 @@ class LilkaRepository {
525551
viewer.innerHTML = `
526552
<div class="examples-error">
527553
<p>Failed to load file: ${this.escapeHtml(error.message)}</p>
528-
<a href="${REPO_URL}/blob/main/${path}" target="_blank" rel="noopener noreferrer" class="btn">View on GitHub →</a>
554+
<a href="${REPO_URL}/blob/main/${
555+
path}" target="_blank" rel="noopener noreferrer" class="btn">View on GitHub →</a>
529556
</div>`;
530557
}
531558
}
532559

533560
getFileIcon(name) {
534561
const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
535562
const icons = {
536-
'c': '🇨', 'cpp': '⚙️', 'h': '📎', 'hpp': '📎',
537-
'lua': '🌙', 'js': '📜', 'ts': '📘',
538-
'py': '🐍', 'json': '📋', 'yml': '⚙️', 'yaml': '⚙️',
539-
'md': '📝', 'txt': '📄', 'csv': '📊',
540-
'png': '🖼️', 'jpg': '🖼️', 'jpeg': '🖼️', 'gif': '🖼️', 'svg': '🖼️',
541-
'bin': '💾', 'hex': '💾', 'elf': '💾',
542-
'ino': '⚙️', 'sh': '🐚', 'bat': '🐚',
563+
'c': '🇨',
564+
'cpp': '⚙️',
565+
'h': '📎',
566+
'hpp': '📎',
567+
'lua': '🌙',
568+
'js': '📜',
569+
'ts': '📘',
570+
'py': '🐍',
571+
'json': '📋',
572+
'yml': '⚙️',
573+
'yaml': '⚙️',
574+
'md': '📝',
575+
'txt': '📄',
576+
'csv': '📊',
577+
'png': '🖼️',
578+
'jpg': '🖼️',
579+
'jpeg': '🖼️',
580+
'gif': '🖼️',
581+
'svg': '🖼️',
582+
'bin': '💾',
583+
'hex': '💾',
584+
'elf': '💾',
585+
'ino': '⚙️',
586+
'sh': '🐚',
587+
'bat': '🐚',
543588
};
544589
return icons[ext] || '📄';
545590
}
546591

547592
detectLanguage(name) {
548593
const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
549594
const langMap = {
550-
'c': 'c', 'cpp': 'cpp', 'cc': 'cpp', 'cxx': 'cpp',
551-
'h': 'c', 'hpp': 'cpp', 'hxx': 'cpp',
595+
'c': 'c',
596+
'cpp': 'cpp',
597+
'cc': 'cpp',
598+
'cxx': 'cpp',
599+
'h': 'c',
600+
'hpp': 'cpp',
601+
'hxx': 'cpp',
552602
'ino': 'cpp',
553603
'lua': 'lua',
554-
'js': 'javascript', 'mjs': 'javascript', 'jsx': 'javascript',
555-
'ts': 'typescript', 'tsx': 'typescript',
604+
'js': 'javascript',
605+
'mjs': 'javascript',
606+
'jsx': 'javascript',
607+
'ts': 'typescript',
608+
'tsx': 'typescript',
556609
'py': 'python',
557610
'json': 'json',
558-
'yml': 'yaml', 'yaml': 'yaml',
611+
'yml': 'yaml',
612+
'yaml': 'yaml',
559613
'md': 'markdown',
560-
'sh': 'bash', 'bash': 'bash', 'zsh': 'bash',
561-
'bat': 'dos', 'cmd': 'dos',
562-
'html': 'html', 'htm': 'html',
563-
'css': 'css', 'scss': 'scss',
614+
'sh': 'bash',
615+
'bash': 'bash',
616+
'zsh': 'bash',
617+
'bat': 'dos',
618+
'cmd': 'dos',
619+
'html': 'html',
620+
'htm': 'html',
621+
'css': 'css',
622+
'scss': 'scss',
564623
'xml': 'xml',
565624
'sql': 'sql',
566625
'makefile': 'makefile',

0 commit comments

Comments
 (0)