Unified Terminal Component System

Overview

All terminals on the site now use a consistent structure and styling through the unified terminal component system.

Usage

1. Standard Card Terminal (default)

For regular pages with simple command/response display:

<!-- Unified Terminal Structure - Dynamic Type -->
<div class="terminal-component" data-terminal-type="card">
    <!-- Terminal Header -->
    <div class="card-header terminal-header">
        <div class="card-header-title terminal-header-title">
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="ml-3">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            
                <!-- Standard Typing Terminal Content -->
                <div class="terminal-typing-sequence">
                    <!-- Command Line -->
                    <div class="terminal-command-line">
                        <div class="terminal-prompt">
                            <span class="prompt-timestamp">[13:27]</span>
                            <span class="prompt-arrow"> ~ % </span>
                            <span class="prompt-command typing-text" data-typing-text="cat"></span>
                        </div>
                    </div>
                    
                    <!-- Response -->
                    <div class="terminal-response">Welcome to The Honest Ape!</div>
                    
                    
                </div>
            
        </div>
    </div>
</div>

This will use:

Page's initial_command and initial_response from frontmatter
Page's additional_commands for interactive elements
Consistent terminal styling with proper padding

2. Interactive Terminal

For pages that need command input:

<!-- Unified Terminal Structure - Dynamic Type -->
<div class="terminal-component" data-terminal-type="interactive">
    <!-- Terminal Header -->
    <div class="card-header terminal-header">
        <div class="card-header-title terminal-header-title">
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="ml-3">my-project.sh</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            
                <!-- Interactive Terminal Content - Shows initial typing PLUS input -->
                <div class="terminal-typing-sequence">
                    <!-- Command Line (same as typing terminal) -->
                    <div class="terminal-command-line">
                        <div class="terminal-prompt">
                            <span class="prompt-timestamp">[13:27]</span>
                            <span class="prompt-arrow"> ~ % </span>
                            <span class="prompt-command typing-text" data-typing-text="cat"></span>
                        </div>
                    </div>
                    
                    <!-- Response (same as typing terminal) -->
                    <div class="terminal-response">Welcome to The Honest Ape!</div>
                    
                    
                    
                    <!-- Interactive input will be added by JavaScript AFTER the typing animation -->
                </div>
            
        </div>
    </div>
</div>

3. Typing Animation Terminal

For special effects like the homepage:

<!-- Unified Terminal Structure - Dynamic Type -->
<div class="terminal-component" data-terminal-type="typing">
    <!-- Terminal Header -->
    <div class="card-header terminal-header">
        <div class="card-header-title terminal-header-title">
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="ml-3">get-in-touch.sh</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            
                <!-- Standard Typing Terminal Content -->
                <div class="terminal-typing-sequence">
                    <!-- Command Line -->
                    <div class="terminal-command-line">
                        <div class="terminal-prompt">
                            <span class="prompt-timestamp">[13:27]</span>
                            <span class="prompt-arrow"> ~ % </span>
                            <span class="prompt-command typing-text" data-typing-text="cat"></span>
                        </div>
                    </div>
                    
                    <!-- Response -->
                    <div class="terminal-response">Welcome to The Honest Ape!</div>
                    
                    
                </div>
            
        </div>
    </div>
</div>

4. Headless Terminal

For terminals without the header (just content):

<!-- Unified Terminal Structure - Dynamic Type -->
<div class="terminal-component" data-terminal-type="headless">
    <!-- Terminal Header -->
    <div class="card-header terminal-header">
        <div class="card-header-title terminal-header-title">
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="ml-3">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            
                <!-- Standard Typing Terminal Content -->
                <div class="terminal-typing-sequence">
                    <!-- Command Line -->
                    <div class="terminal-command-line">
                        <div class="terminal-prompt">
                            <span class="prompt-timestamp">[13:27]</span>
                            <span class="prompt-arrow"> ~ % </span>
                            <span class="prompt-command typing-text" data-typing-text="cat"></span>
                        </div>
                    </div>
                    
                    <!-- Response -->
                    <div class="terminal-response">Welcome to The Honest Ape!</div>
                    
                    
                </div>
            
        </div>
    </div>
</div>

Parameters

type: "card" (default), "interactive", "typing", "headless"
header: Terminal window title (default: "terminal")
initial_command: Override page's initial command
initial_response: Override page's initial response
commands: Override page's additional_commands
typing: Boolean for typing animation (default: false)

CSS Classes

All terminals now use these consistent classes:

.terminal-component - Main container
.terminal-content - Content area (auto-padding: 2.5rem)
.terminal-command-line - Command lines
.terminal-prompt - Prompt elements
.terminal-response - Response content

Page Frontmatter Support

---
title: "My Project"
initial_command: "project-info"
initial_response: "Loading project details..."
additional_commands:
  - command: "client"
    response: "The Honest Ape"
  - command: "tech"
    response: "Jekyll, GSAP, Swiper"
---

JavaScript Integration

The unified system automatically:

Initializes all terminal components
Ensures proper visibility
Handles interactive input
Manages typing animations
Works with page transitions

Migration

Old approach:

<!-- Complex custom terminal structure -->
<div class="terminal-content is-flex p-4">
  <!-- Manual command/response setup -->
</div>

New approach:

<!-- Simple unified component -->










<!-- Unified Terminal Structure - Dynamic Type -->
<div class="terminal-component" data-terminal-type="card">
    <!-- Terminal Header -->
    <div class="card-header terminal-header">
        <div class="card-header-title terminal-header-title">
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="mr-2 terminal-dot">●</span>
            <span class="ml-3">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            
                <!-- Standard Typing Terminal Content -->
                <div class="terminal-typing-sequence">
                    <!-- Command Line -->
                    <div class="terminal-command-line">
                        <div class="terminal-prompt">
                            <span class="prompt-timestamp">[13:27]</span>
                            <span class="prompt-arrow"> ~ % </span>
                            <span class="prompt-command typing-text" data-typing-text="cat"></span>
                        </div>
                    </div>
                    
                    <!-- Response -->
                    <div class="terminal-response">Welcome to The Honest Ape!</div>
                    
                    
                </div>
            
        </div>
    </div>
</div>

Benefits

✅ Consistent styling across all terminals
✅ Automatic padding and spacing
✅ Unified JavaScript handling
✅ Page transition support
✅ Simple implementation
✅ Flexible configuration