Content Guide (Zero-JS Workflow)
This site is designed so that you never need to edit JavaScript or HTML to update standard content. All content is managed through simple YAML/JSON data files and Google Drive.
1. Study Materials
Adding a Google Drive Folder
When a professor creates a new Drive folder for study materials:
- Set folder permissions → “Anyone with the link can view”
- Copy the Folder ID from the URL:
https://drive.google.com/drive/folders/1aBcDeFgHiJkLmNoPqRsT └──────────────────────┘ This is the Folder ID - Edit
_data/site_config.yml→ add the ID underFOLDER_IDS:FOLDER_IDS: pyq: sem_3: dbms: '1rKihco_dxwB9gB9xKAW96U8WaS9s8SX9' new_subject: 'PASTE_FOLDER_ID_HERE' # ← add here - Register in StudyData.js → open
assets/js/components/StudyData.jsand add the subject under the correct semester block:semester3: { 'New Subject': { modules: [{ name: 'PYQ Papers', files: [`https://drive.google.com/drive/folders/${CONFIG.FOLDER_IDS.pyq.sem_3.new_subject}`] }] }, // ...existing subjects }
Adding a YouTube Playlist
- Copy the Playlist ID from the URL:
https://www.youtube.com/playlist?list=PLxyz123abc └──────────┘ Playlist ID - Edit
_data/site_config.yml→ add underPLAYLIST_IDS:PLAYLIST_IDS: new_subject: 'PLxyz123abc' - Register in StudyData.js → add a module with
playlistId:'New Subject': { modules: [{ name: 'Video Lectures', playlistId: CONFIG.PLAYLIST_IDS.new_subject }] }
2. Faculty Profiles
Faculty data lives in _data/faculty.json.
Adding a Faculty Member
- Open
_data/faculty.json - Add a new entry at the end of the array:
{ "name": "Dr. Example Name", "designation": "Lecturer", "qualification": "M.Tech", "email": "example@gmail.com", "shortName": "EXM" } - Add their photo → save a 1:1 aspect ratio headshot to:
assets/images/faculty_imgs/exm.jpeg- Filename must match
shortNamein lowercase - Supported formats:
.jpeg,.jpg,.png
- Filename must match
Removing a Faculty Member
Delete their entry from the JSON array and optionally remove their photo.
3. Events
Events are Jekyll collection items stored as Markdown files in _events/.
Adding an Event
Create a new file: _events/YYYY-event-name.md
---
title: "Workshop on AI"
date: 2025-03-15
description: "One-day workshop on practical AI applications"
image: /assets/images/events/ai-workshop.jpg
---
Event details go here in standard Markdown.
The event will automatically appear on the events page.
4. Newsletters
Newsletters are served directly from Google Drive. No code changes needed.
- Upload the newsletter PDF to the Drive folder with ID:
14OT-O9JooQKzKxxL2bhLUUZkdB3MOSf8 - The newsletter page automatically fetches and lists all PDFs from this folder
To change the newsletter folder, update _data/site_config.yml:
FOLDER_IDS:
newsletters: 'NEW_FOLDER_ID'
5. Academic Calendar
Similar to newsletters — upload PDFs to the correct Drive folder.
The folder structure should be:
Root Folder (16a58BgCLN8h0SnGxjnYFGDdkfWqcuS49)
├── 2024-2025/
│ ├── Calendar_Odd_Sem.pdf
│ └── Calendar_Even_Sem.pdf
└── 2025-2026/
└── Calendar.pdf
Note: The academic calendar root folder ID is currently hardcoded in
academic-calendar.jsrather than pulled fromsite_config.yml. If you need to change the root folder, you must editassets/js/pages/academic-calendar.jsline 9.
6. Student Achievements
Achievement data lives in _data/toppers_list.json. Edit this file to add/remove student records.
7. API Key Management
The Google API key is stored in _data/site_config.yml:
API_KEY: "AIzaSy..."
If the key expires or is compromised:
- Go to Google Cloud Console → APIs & Services → Credentials
- Create a new API key
- Apply HTTP referrer restriction:
*itgpg.github.io/* - Enable these APIs for the key:
- Google Drive API
- YouTube Data API v3
- Paste the new key into
_data/site_config.yml
⚠️ Security note: The API key is visible in client-side code. The HTTP referrer restriction prevents unauthorized use from other domains.
8. Gallery
The gallery fetches images from a Google Drive folder organized into subfolders (one per event/album).
Drive folder structure:
Gallery Root Folder
├── Annual Day 2025/
│ ├── photo1.jpg
│ └── photo2.jpg
├── Sports Week/
│ └── photo1.jpg
└── ...
Configure the gallery folder ID in _data/site_config.yml:
FOLDER_IDS:
gallery: 'YOUR_GALLERY_FOLDER_ID'
Troubleshooting
| Problem | Cause | Fix |
|---|---|---|
| Study materials not loading | Wrong/missing folder ID | Check site_config.yml → FOLDER_IDS |
| “No videos found” | Invalid playlist ID or private playlist | Verify playlist is public and ID is correct |
| Faculty photo not showing | Filename doesn’t match shortName |
Rename photo to shortname.jpeg (lowercase) |
| API errors (403/quota) | API key expired or quota exceeded | Generate new key (see §7) or wait 24h for quota reset |
| Changes not appearing | Browser cache | Hard-refresh (Ctrl+Shift+R) or clear sessionStorage |
| Newsletter not listing | Folder permissions | Ensure Drive folder is set to “Anyone with the link” |