[WIP] Implement documentation-first approach for code overview

[Copilot]

Implementation Plan: Documentation-First Code Viewer

• Understand the repository structure and existing notes page
• Create new /practicals route with documentation-style layout
• Implement folder/file navigation structure
• Add GitHub API integration to fetch file contents
• Create clean documentation-style UI components
• Add code display with syntax highlighting
• Implement copy code functionality
• Add download file functionality
• Style with "Academic Reader" design (clean, readable)
• Test the complete flow and take screenshots
• Update navigation to include practicals link

Original prompt

create and documentation-first approach. Instead of a complex file explorer, this design mimics a technical manual or a "Wiki" style layout, optimized for reading code and quickly downloading files from the repository.

1. The "Documentation" Layout Strategy
   The page should prioritize readability and vertical flow.

Navigation Header: A simple, fixed top bar showing the repository name and a "View on GitHub" link.

The Master List: A central column (or a narrow left sidebar) that lists the main practical folders: Data Structure II, Database Management System-II, Advance Python Programming, and Computational Geometry.

The Document View: A large, clean area where the selected file's content is displayed. Unlike a terminal, this should look like a white-paper or a GitHub Gist.

Action Bar: A small area above the code content containing the file name, a "Copy Code" button, and a prominent "Download File" button.

2. Style Option: The "Academic Reader"
   Since the goal is a simple documentation page, use a style that feels like a clean textbook or official technical documentation (like MDN or Stripe Docs).

Typography: Use a high-quality sans-serif font (like Inter or System-UI) for the interface and a crisp monospaced font (like Roboto Mono) for the code.

Colors: A crisp white background, light gray borders (#e1e4e8), and deep blue or black for text. Folder names should be bold to stand out.

The Code Block: Give the code area a slight off-white background (#f6f8fa) and rounded corners. Ensure it has a horizontal scrollbar for long lines of code.

3. Logic & Functionality (The Plan)
   Since this must be inlined in one file, the JavaScript should handle the "routing" and the "fetching."

Mapping the Repository: The script needs a list of the folders and files. Since you want to refer to the specific repository provided, you will use the GitHub API to target the practicals repo.

The Display Logic:

When a folder is clicked, it expands to show the files within (e.g., clicking Data Structure II reveals Set_A_Q1.c).

When a file is clicked, the script fetches the "Raw" version of that file using the GitHub API.

The fetched text is then injected into a

 element for the user to read.

The Download Feature:
The "Download" button should use the download attribute logic.
When a file is selected, the script updates the button's href to point to the GitHub "raw" URL for that specific file. This allows the browser to trigger a direct download instead of just opening it.

Implementation Steps

Skeleton: Create a standard HTML container with a nav for the folders and a main for the content.

Styling: Write CSS that makes the nav scrollable independently of the main content area. Use max-width on the code container so it doesn't span too wide on large monitors.
Data Fetching: Use the fetch() API to talk to the GitHub contents endpoint. You will need to handle the nested structure of your folders.
UI Updates: Write a function that clears the current text in the view and replaces it with a loading spinner while the file is being fetched, then renders the code and updates the download link once the data arrives.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
portfolio	Ready	Preview, Comment	Jan 17, 2026 6:46am

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.