Interactive Terminal Guide

Overview

The interactive terminal system allows visitors to interact with your site through a command-line interface. It provides search functionality, navigation, and information commands.

Enabling Interactive Terminal

To enable the interactive terminal on any page, add this to your page's front matter:

---
# Enable interactive terminal
interactive_terminal: true
---

Available Commands

Core Commands

  • help - Show all available commands
  • search <query> - Search your content (integrates with SearchManager)
  • find <query> - Alias for search
  • ls - List main site sections
  • cd <section> - Navigate to sections (design, writing, development, about)
  • about - Show site information
  • contact - Show contact details
  • clear - Clear terminal output

Interactive Features

  • Command History: Use ↑/↓ arrow keys to navigate previous commands
  • Tab Completion: Press Tab to auto-complete commands
  • Real-time Search: Search integrates with your actual content
  • Navigation: Commands actually navigate to real sections

Usage Examples

Basic Page Setup

---
layout: post
title: My Page
# Enable interactive terminal
interactive_terminal: true
---

Terminal vs Standard Mode

The hero terminal will automatically switch between:

  • Interactive Mode: When interactive_terminal: true is set
  • Standard Typing Mode: Default behavior with animated typing

Current Implementation

Pages with Interactive Terminal

  • Homepage (/) - Main interactive terminal
  • About Page (/about/) - Interactive terminal enabled

Pages with Standard Terminal

  • All other pages use the standard typing terminal by default

Technical Details

Files Modified

  • _includes/hero.html - Added conditional logic for interactive vs standard terminal
  • assets/js/terminal.js - Enhanced with interactive command processing
  • assets/js/search.js - Integrated search functionality
  • assets/css/components/terminal.css - Styling for interactive elements

Integration

  • Works seamlessly with Swup page transitions
  • Integrates with existing SearchManager
  • Maintains all existing terminal functionality
  • Mobile responsive and accessible

Adding New Commands

To add custom commands, you can extend the terminal system in assets/js/terminal.js:

// Add custom command
window.TerminalModule.addCommand('mycommand', 'Description of command', (args) => {
  return '<p>Custom command response</p>';
});

Best Practices

  1. Use Sparingly: Only enable interactive terminals on key pages (homepage, about, etc.)
  2. Keep Commands Simple: Focus on search, navigation, and information
  3. Real Data: Commands should provide real, useful information
  4. Mobile Friendly: Test on mobile devices for usability

Future Enhancements

Potential improvements:

  • Integration with actual Jekyll search data
  • More sophisticated search filters
  • Command aliases and shortcuts
  • Custom commands per page type