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 - Always Typing -->
<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">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            <div class="terminal-typing-sequence">
                <!-- Command Line -->
                <div class="terminal-command-line">
                    <div class="terminal-prompt">
                        <span class="prompt-timestamp">[12:23]</span>
                        <span class="prompt-arrow"> ~ % </span>
                        <span class="prompt-command typing-text" data-typing-text="cat">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 - Always Typing -->
<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">my-project.sh</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            <div class="terminal-typing-sequence">
                <!-- Command Line -->
                <div class="terminal-command-line">
                    <div class="terminal-prompt">
                        <span class="prompt-timestamp">[12:23]</span>
                        <span class="prompt-arrow"> ~ % </span>
                        <span class="prompt-command typing-text" data-typing-text="cat">cat</span>
                    </div>
                </div>
                
                <!-- Response -->
                <div class="terminal-response">Welcome to The Honest Ape!</div>
                
                
            </div>
        </div>
    </div>
</div> 

3. Typing Animation Terminal

For special effects like the homepage:

<!-- Unified Terminal Structure - Always Typing -->
<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">
            <div class="terminal-typing-sequence">
                <!-- Command Line -->
                <div class="terminal-command-line">
                    <div class="terminal-prompt">
                        <span class="prompt-timestamp">[12:23]</span>
                        <span class="prompt-arrow"> ~ % </span>
                        <span class="prompt-command typing-text" data-typing-text="cat">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 - Always Typing -->
<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">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            <div class="terminal-typing-sequence">
                <!-- Command Line -->
                <div class="terminal-command-line">
                    <div class="terminal-prompt">
                        <span class="prompt-timestamp">[12:23]</span>
                        <span class="prompt-arrow"> ~ % </span>
                        <span class="prompt-command typing-text" data-typing-text="cat">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 - Always Typing -->
<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">Unified Terminal Component System</span>
        </div>
    </div>
    
    <!-- Terminal Content -->
    <div class="card-content terminal-background">
        <div class="terminal-content">
            <div class="terminal-typing-sequence">
                <!-- Command Line -->
                <div class="terminal-command-line">
                    <div class="terminal-prompt">
                        <span class="prompt-timestamp">[12:23]</span>
                        <span class="prompt-arrow"> ~ % </span>
                        <span class="prompt-command typing-text" data-typing-text="cat">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