Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds path mapping functionality to enable direct navigation from file items to their corresponding GitHub locations. Users can now click on any file item in the modal to open the file in a new tab on GitHub.
Key changes:
- Added comprehensive path mapping configuration for nested files across multiple languages
- Transformed file items from static divs to clickable anchor elements with GitHub URLs
- Enhanced styling with hover effects and cursor pointer for better UX
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| 'typescript': 'TS' | ||
| }; | ||
| // File path mapping for nested files | ||
| const filePathMapping = { |
There was a problem hiding this comment.
This large hardcoded mapping object (lines 897-951) makes the code difficult to maintain. Consider extracting this configuration to a separate JSON file or implementing a more dynamic approach to discover file paths.
| 'style.css': 'fun project/style.css' | ||
| }, | ||
| 'Java': { | ||
| 'Fruites.java': 'arrayList/Fruites.java', |
There was a problem hiding this comment.
Corrected spelling of 'Fruites' to 'Fruits'.
| 'Fruites.java': 'arrayList/Fruites.java', | |
| 'Fruits.java': 'arrayList/Fruits.java', |
| fileGrid.innerHTML = ''; | ||
|
|
||
| const folders = language.items ? language.items.filter(item => | ||
| !item.includes('.') && !['full pyramid', 'inverted full pyramid', 'inverted half pyramid', 'pascals triangle', 'traingle'].includes(item) |
There was a problem hiding this comment.
Corrected spelling of 'traingle' to 'triangle'.
| !item.includes('.') && !['full pyramid', 'inverted full pyramid', 'inverted half pyramid', 'pascals triangle', 'traingle'].includes(item) | |
| !item.includes('.') && !['full pyramid', 'inverted full pyramid', 'inverted half pyramid', 'pascals triangle', 'triangle'].includes(item) |
| async function checkFileExists(url) { | ||
| try { | ||
| const response = await fetch(url, { method: 'HEAD' }); | ||
| return response.ok; | ||
| } catch { | ||
| return false; | ||
| } | ||
| } |
There was a problem hiding this comment.
The checkFileExists function is defined but never used in the provided code. If it's intended for future use, consider adding a TODO comment explaining its purpose.
| for (const folder of folders) { | ||
| if (file.name.toLowerCase().includes('tree') && folder.toLowerCase().includes('tree')) { | ||
| filePath = `${folder}/${file.name}`; | ||
| break; | ||
| } else if (file.name.toLowerCase().includes('os') && folder.toLowerCase().includes('os')) { | ||
| filePath = `${folder}/${file.name}`; | ||
| break; | ||
| } |
There was a problem hiding this comment.
The hardcoded string matching logic for 'tree' and 'os' files should be extracted to a configuration object for better maintainability and extensibility.
| for (const folder of folders) { | |
| if (file.name.toLowerCase().includes('tree') && folder.toLowerCase().includes('tree')) { | |
| filePath = `${folder}/${file.name}`; | |
| break; | |
| } else if (file.name.toLowerCase().includes('os') && folder.toLowerCase().includes('os')) { | |
| filePath = `${folder}/${file.name}`; | |
| break; | |
| } | |
| // Configuration object for keyword-folder matching | |
| const keywordFolderMapping = { | |
| 'tree': 'tree', | |
| 'os': 'os' | |
| // Add more keywords as needed | |
| }; | |
| for (const [keyword, folderKeyword] of Object.entries(keywordFolderMapping)) { | |
| for (const folder of folders) { | |
| if (file.name.toLowerCase().includes(keyword) && folder.toLowerCase().includes(folderKeyword)) { | |
| filePath = `${folder}/${file.name}`; | |
| break; | |
| } | |
| } | |
| if (filePath !== file.name) break; // If filePath was updated, exit outer loop |
Fixes #352
Now users can click on any file item and be taken directly to the correct GitHub file in the new page