Skip to content

Commit

Permalink
feat(terminal): add onboarding walkthrough and fix critical bugs
Browse files Browse the repository at this point in the history
- Added an onboarding feature to guide new users through terminal navigation and command usage.
- Fixed path issues in the `download` command, ensuring files are correctly located and downloaded.
- Resolved `handleCommand` scope error to prevent runtime issues.
- Improved tab completion for smoother and more intuitive command input.
- Enhanced user experience with a polished onboarding flow and robust command functionality.

This commit introduces a major usability improvement while addressing critical bugs.
  • Loading branch information
Sreyeesh committed Jan 7, 2025
1 parent 7f0f5f2 commit 8a6b2df
Showing 1 changed file with 32 additions and 9 deletions.
41 changes: 32 additions & 9 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@ document.addEventListener("DOMContentLoaded", () => {
home: {
"README.md": "Welcome to your home directory!",
resume: {
"master-resume.md": "https://raw.githubusercontent.com/Sreyeesh/ResumeForge/main/resumes/master-resume.md",
"devops-engineer-resume.md": "https://raw.githubusercontent.com/Sreyeesh/ResumeForge/refs/heads/main/resumes/Sreyeesh_Garimella_DevOps_Engineer.md",
"master-resume.pdf": "resume/master-resume.pdf",
"Sreyeesh_Garimella_DevOps_Engineer.pdf": "resume/Sreyeesh_Garimella_DevOps_Engineer.pdf",
"master-resume.md": "./assets/resumes/master-resume.md",
"devops-engineer-resume.md": "./assets/resumes/Sreyeesh_Garimella_DevOps_Engineer.md",
"master-resume.pdf": "./assets/resumes/master-resume.pdf",
"Sreyeesh_Garimella_DevOps_Engineer.pdf": "./assets/resumes/Sreyeesh_Garimella_DevOps_Engineer.pdf",
},
},
};

let currentDirectory = directories.home;
const commands = {
help: showHelp,
onboarding: startOnboarding,
ls: listFiles,
cat: displayFile,
download: downloadFile,
Expand All @@ -39,14 +40,14 @@ document.addEventListener("DOMContentLoaded", () => {
// Global keyboard shortcut listeners
document.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.key === "l") {
event.preventDefault(); // Prevent default browser behavior
clearTerminal(); // Ctrl + L to clear terminal
event.preventDefault();
clearTerminal();
}
});

function initializeTerminal() {
terminal.innerHTML = "";
writeOutput("Welcome to my Terminal Portfolio!\nType 'help' for a list of commands.");
writeOutput("Welcome to my Terminal Portfolio!\nType 'help' to get started or 'onboarding' for a guided walkthrough.");
renderPrompt();
}

Expand All @@ -62,7 +63,7 @@ document.addEventListener("DOMContentLoaded", () => {
inputElement.classList.add("command-input");
inputElement.autofocus = true;

inputElement.addEventListener("keydown", handleCommand);
inputElement.addEventListener("keydown", (event) => handleCommand(event));
inputElement.addEventListener("keydown", handleTabCompletion);
inputElement.addEventListener("keydown", handleHistoryNavigation);

Expand All @@ -82,6 +83,27 @@ document.addEventListener("DOMContentLoaded", () => {
terminal.scrollTop = terminal.scrollHeight;
}

async function startOnboarding() {
const steps = [
"Welcome to the onboarding walkthrough!",
"1. Type 'ls' to list the files and directories available.",
"2. Navigate to a directory using 'cd <directory_name>'. For example, try 'cd resume'.",
"3. View a file's content using 'cat <file_name>'. For example, 'cat README.md'.",
"4. Download a file with 'download <file_name>'. For example, 'download master-resume.pdf'.",
"That's it! You're ready to explore the portfolio. Type 'help' anytime for a list of commands.",
];

for (const step of steps) {
await delay(1500);
writeOutput(step);
}
renderPrompt();
}

function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

function listFiles() {
const entries = Object.keys(currentDirectory);
writeOutput(entries.length ? entries.join("\n") : "No files or directories.");
Expand Down Expand Up @@ -172,13 +194,14 @@ document.addEventListener("DOMContentLoaded", () => {
const helpOutput = `
Commands:
help Show this help message.
onboarding Start the onboarding walkthrough.
ls List files and directories.
cat <filename> Display the content of a file.
download <filename> Download a file.
pwd Print the current directory path.
cd <dirname> Change the current directory.
clear Clear the terminal screen.
Shortcuts:
Ctrl + L Clear the terminal screen.
Tab Auto-complete commands or file names.
Expand Down

0 comments on commit 8a6b2df

Please sign in to comment.