Terminal UI API Update
This commit is contained in:
114
README.md
114
README.md
@@ -405,8 +405,11 @@ Then link to it with `/portfolio#skills` - the page will scroll to that section
|
||||
src/lib/components/
|
||||
├── TerminalTUI.svelte # Main terminal container
|
||||
└── tui/
|
||||
├── types.ts # TypeScript types
|
||||
├── types.ts # TypeScript types (TerminalLine, TerminalAPI, etc.)
|
||||
├── utils.ts # Parsing & styling utilities
|
||||
├── terminal-api.ts # Terminal API factory for reactive control
|
||||
├── terminal-typing.ts # Typing animation engine
|
||||
├── terminal-keyboard.ts# Keyboard navigation handler
|
||||
├── TuiHeader.svelte # Top status bar
|
||||
├── TuiBody.svelte # Scrollable content area
|
||||
├── TuiFooter.svelte # Bottom status bar
|
||||
@@ -419,6 +422,115 @@ src/lib/components/
|
||||
└── TuiTooltip.svelte # Hover tooltip
|
||||
```
|
||||
|
||||
## Terminal API
|
||||
|
||||
The `TerminalTUI` component exposes a reactive API for programmatic control via the `terminal` bindable prop.
|
||||
|
||||
### Setup
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||
import type { TerminalAPI, TerminalLine } from '$lib';
|
||||
|
||||
let terminal = $state<TerminalAPI>();
|
||||
let lines = $state<TerminalLine[]>([
|
||||
{ type: 'output', content: 'Hello world!' }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<TerminalTUI bind:terminal bind:lines title="~/demo" />
|
||||
```
|
||||
|
||||
### API Methods
|
||||
|
||||
#### Writing Lines
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.write(line)` | Append a single line |
|
||||
| `terminal.writeLines(lines)` | Append multiple lines |
|
||||
| `terminal.clear()` | Remove all lines |
|
||||
| `terminal.setLines(lines)` | Replace all lines |
|
||||
|
||||
#### Updating Lines
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.update(index, updates)` | Update line by index with partial changes |
|
||||
| `terminal.updateContent(index, content)` | Update just the content of a line |
|
||||
| `terminal.updateById(id, updates)` | Update line by its `id` property |
|
||||
|
||||
#### Removing Lines
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.remove(index)` | Remove line at index |
|
||||
| `terminal.removeRange(start, count)` | Remove a range of lines |
|
||||
| `terminal.removeById(id)` | Remove line by its `id` property |
|
||||
|
||||
#### Inserting Lines
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.insert(index, line)` | Insert line at a specific index |
|
||||
|
||||
#### Reading State
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.getLine(index)` | Get line at index |
|
||||
| `terminal.getLines()` | Get all lines (copy) |
|
||||
| `terminal.getLineCount()` | Get number of lines |
|
||||
| `terminal.findById(id)` | Find index of line by id |
|
||||
| `terminal.isAnimating()` | Check if typing animation is active |
|
||||
|
||||
#### Navigation & Control
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| `terminal.scrollToBottom()` | Scroll to bottom of terminal |
|
||||
| `terminal.scrollToLine(index)` | Scroll to specific line |
|
||||
| `terminal.skip()` | Skip current typing animation |
|
||||
| `terminal.restart()` | Restart typing animation from beginning |
|
||||
|
||||
### Example: Dynamic Updates
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||
import type { TerminalAPI } from '$lib';
|
||||
|
||||
let terminal = $state<TerminalAPI>();
|
||||
let lines = $state([
|
||||
{ type: 'output', content: 'Initializing...', id: 'status' }
|
||||
]);
|
||||
|
||||
async function runProcess() {
|
||||
// Update existing line
|
||||
terminal?.updateById('status', {
|
||||
type: 'info',
|
||||
content: 'Processing...'
|
||||
});
|
||||
|
||||
await delay(1000);
|
||||
|
||||
// Add progress
|
||||
terminal?.write({
|
||||
type: 'progress',
|
||||
content: '',
|
||||
progress: 50,
|
||||
progressLabel: '50%'
|
||||
});
|
||||
|
||||
await delay(1000);
|
||||
|
||||
// Complete
|
||||
terminal?.updateById('status', {
|
||||
type: 'success',
|
||||
content: 'Complete!'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<TerminalTUI bind:terminal bind:lines />
|
||||
<button onclick={runProcess}>Start</button>
|
||||
```
|
||||
|
||||
## 3D Model Viewer
|
||||
|
||||
The `ModelViewer` component provides an interactive Three.js viewer for `.glb` models.
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { themeColors } from '$lib/stores/theme';
|
||||
import { toggleMode } from '$lib/stores/theme';
|
||||
import { terminalSettings, type SpeedPreset, speedPresets } from '$lib/config';
|
||||
import { calculateTypeSpeed } from '$lib';
|
||||
import TuiHeader from './tui/TuiHeader.svelte';
|
||||
import TuiBody from './tui/TuiBody.svelte';
|
||||
import TuiFooter from './tui/TuiFooter.svelte';
|
||||
import { parseColorText, getPlainText } from './tui/utils';
|
||||
import '$lib/assets/css/terminal-tui.css';
|
||||
|
||||
import type { TerminalLine, ParsedLine, DisplayedLine } from './tui/types';
|
||||
// Import extracted modules
|
||||
import { parseLine, createTerminalAPI } from './tui/terminal-api';
|
||||
import { runTypingAnimation, skipTypingAnimation } from './tui/terminal-typing';
|
||||
import { createKeyboardHandler, handleNavigation, scrollToHash } from './tui/terminal-keyboard';
|
||||
|
||||
import type { TerminalLine, ParsedLine, DisplayedLine, TerminalAPI } from './tui/types';
|
||||
|
||||
interface Props {
|
||||
lines?: TerminalLine[];
|
||||
@@ -21,16 +22,18 @@
|
||||
interactive?: boolean;
|
||||
speed?: SpeedPreset | number;
|
||||
autoscroll?: boolean;
|
||||
terminal?: TerminalAPI;
|
||||
}
|
||||
|
||||
let {
|
||||
lines = [],
|
||||
lines = $bindable([]),
|
||||
title = 'terminal',
|
||||
class: className = '',
|
||||
onComplete,
|
||||
interactive = true,
|
||||
speed = 'normal',
|
||||
autoscroll = true
|
||||
autoscroll = true,
|
||||
terminal = $bindable()
|
||||
}: Props = $props();
|
||||
|
||||
// Calculate speed multiplier from preset or number
|
||||
@@ -43,14 +46,7 @@
|
||||
|
||||
// Pre-parse all lines upfront (segments + plain text)
|
||||
const parsedLines = $derived<ParsedLine[]>(
|
||||
lines.map(line => {
|
||||
const segments = parseColorText(line.content, colorMap);
|
||||
return {
|
||||
line,
|
||||
segments,
|
||||
plainText: getPlainText(segments)
|
||||
};
|
||||
})
|
||||
lines.map(line => parseLine(line, colorMap))
|
||||
);
|
||||
|
||||
let displayedLines = $state<DisplayedLine[]>([]);
|
||||
@@ -58,6 +54,7 @@
|
||||
let isTyping = $state(false);
|
||||
let isComplete = $state(false);
|
||||
let selectedIndex = $state(-1);
|
||||
let skipRequested = $state(false);
|
||||
let terminalElement: HTMLDivElement;
|
||||
let bodyElement = $state<HTMLDivElement>();
|
||||
|
||||
@@ -86,259 +83,112 @@
|
||||
lastColorMapId = colorMapId;
|
||||
});
|
||||
|
||||
// Autoscroll to bottom (respects autoscroll prop)
|
||||
function scrollToBottom() {
|
||||
if (!autoscroll || !bodyElement) return;
|
||||
bodyElement.scrollTo({
|
||||
top: bodyElement.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to hash target (anchor link like #skills)
|
||||
function scrollToHash() {
|
||||
if (!browser || !bodyElement) return;
|
||||
|
||||
const hash = window.location.hash;
|
||||
if (!hash) return;
|
||||
|
||||
const targetId = hash.slice(1); // Remove the #
|
||||
const targetElement = bodyElement.querySelector(`#${CSS.escape(targetId)}`);
|
||||
|
||||
if (targetElement) {
|
||||
// Small delay to ensure layout is complete
|
||||
setTimeout(() => {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Get all interactive button indices
|
||||
let buttonIndices = $derived(
|
||||
const buttonIndices = $derived(
|
||||
displayedLines
|
||||
.map((item, i) => item.parsed.line.type === 'button' ? i : -1)
|
||||
.filter(i => i !== -1)
|
||||
);
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
// ========================================================================
|
||||
// TYPING ANIMATION
|
||||
// ========================================================================
|
||||
|
||||
function typeText() {
|
||||
runTypingAnimation({
|
||||
parsedLines,
|
||||
speedMultiplier,
|
||||
terminalSettings,
|
||||
buttonIndices,
|
||||
interactive,
|
||||
autoscroll,
|
||||
getBodyElement: () => bodyElement,
|
||||
getState: () => ({ displayedLines, currentLineIndex, isTyping, isComplete, skipRequested, selectedIndex }),
|
||||
setState: (updates) => {
|
||||
if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
|
||||
if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
|
||||
if (updates.isTyping !== undefined) isTyping = updates.isTyping;
|
||||
if (updates.isComplete !== undefined) isComplete = updates.isComplete;
|
||||
if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
|
||||
if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
|
||||
},
|
||||
onComplete,
|
||||
scrollToHash: () => scrollToHash(bodyElement)
|
||||
});
|
||||
}
|
||||
|
||||
async function typeText() {
|
||||
if (parsedLines.length === 0) return;
|
||||
|
||||
isTyping = true;
|
||||
|
||||
// Apply speed multiplier to start delay
|
||||
const startDelayMs = speedMultiplier === 0 ? 0 : terminalSettings.startDelay * speedMultiplier;
|
||||
await sleep(startDelayMs);
|
||||
if (skipRequested) return;
|
||||
|
||||
for (let i = 0; i < parsedLines.length; i++) {
|
||||
if (skipRequested) return;
|
||||
|
||||
const parsed = parsedLines[i];
|
||||
const line = parsed.line;
|
||||
const plainLength = parsed.plainText.length;
|
||||
|
||||
displayedLines = [...displayedLines, { parsed, charIndex: 0, complete: false, showImage: false }];
|
||||
currentLineIndex = i;
|
||||
|
||||
if (line.delay && speedMultiplier > 0) {
|
||||
await sleep(line.delay * speedMultiplier);
|
||||
if (skipRequested) return;
|
||||
}
|
||||
|
||||
// Handle different line types
|
||||
if (line.type === 'image') {
|
||||
await sleep(speedMultiplier === 0 ? 0 : 100 * speedMultiplier);
|
||||
if (skipRequested) return;
|
||||
displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: true };
|
||||
scrollToBottom();
|
||||
} else if (line.type === 'blank' || line.type === 'divider') {
|
||||
displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
|
||||
} else if (line.type === 'button') {
|
||||
// Buttons appear instantly
|
||||
displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
|
||||
scrollToBottom();
|
||||
} else if (speedMultiplier === 0) {
|
||||
// Instant mode - no typing animation
|
||||
displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
|
||||
if (i % 5 === 0) scrollToBottom();
|
||||
} else if (line.type === 'header') {
|
||||
const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier * 0.25);
|
||||
for (let j = 0; j <= plainLength; j++) {
|
||||
if (skipRequested) return;
|
||||
displayedLines[i] = {
|
||||
parsed,
|
||||
charIndex: j,
|
||||
complete: j === plainLength,
|
||||
showImage: false
|
||||
};
|
||||
if (j < plainLength) await sleep(typeSpeed);
|
||||
}
|
||||
scrollToBottom();
|
||||
} else {
|
||||
const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier);
|
||||
|
||||
for (let j = 0; j <= plainLength; j++) {
|
||||
if (skipRequested) return;
|
||||
displayedLines[i] = {
|
||||
parsed,
|
||||
charIndex: j,
|
||||
complete: j === plainLength,
|
||||
showImage: false
|
||||
};
|
||||
|
||||
if (j % 10 === 0) scrollToBottom();
|
||||
|
||||
if (j < plainLength) {
|
||||
await sleep(typeSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (skipRequested) return;
|
||||
displayedLines[i].complete = true;
|
||||
|
||||
scrollToBottom();
|
||||
|
||||
if (i < parsedLines.length - 1 && speedMultiplier > 0) {
|
||||
await sleep(terminalSettings.lineDelay * speedMultiplier);
|
||||
}
|
||||
}
|
||||
|
||||
isTyping = false;
|
||||
isComplete = true;
|
||||
|
||||
if (interactive && buttonIndices.length > 0) {
|
||||
selectedIndex = buttonIndices[0];
|
||||
}
|
||||
|
||||
// Scroll to hash anchor if present in URL
|
||||
scrollToHash();
|
||||
|
||||
onComplete?.();
|
||||
}
|
||||
|
||||
// Scroll selected button into view with margin for context
|
||||
function scrollToSelected() {
|
||||
if (bodyElement && selectedIndex >= 0) {
|
||||
const buttons = bodyElement.querySelectorAll('.tui-button');
|
||||
const selectedButton = Array.from(buttons).find((_, i) => {
|
||||
const btnIndices = displayedLines
|
||||
.map((item, idx) => item.parsed.line.type === 'button' ? idx : -1)
|
||||
.filter(idx => idx !== -1);
|
||||
return btnIndices[i] === selectedIndex;
|
||||
}) as HTMLElement | undefined;
|
||||
|
||||
if (selectedButton && bodyElement) {
|
||||
const containerRect = bodyElement.getBoundingClientRect();
|
||||
const buttonRect = selectedButton.getBoundingClientRect();
|
||||
const margin = 80;
|
||||
|
||||
if (buttonRect.top < containerRect.top + margin) {
|
||||
const scrollAmount = buttonRect.top - containerRect.top - margin;
|
||||
bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
else if (buttonRect.bottom > containerRect.bottom - margin) {
|
||||
const scrollAmount = buttonRect.bottom - containerRect.bottom + margin;
|
||||
bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Skip animation and show all content instantly
|
||||
let skipRequested = $state(false);
|
||||
|
||||
function skipAnimation() {
|
||||
if (!isTyping) return;
|
||||
skipRequested = true;
|
||||
|
||||
displayedLines = parsedLines.map(parsed => ({
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: parsed.line.type === 'image'
|
||||
}));
|
||||
|
||||
isTyping = false;
|
||||
isComplete = true;
|
||||
currentLineIndex = parsedLines.length - 1;
|
||||
|
||||
if (interactive && buttonIndices.length > 0) {
|
||||
selectedIndex = buttonIndices[0];
|
||||
}
|
||||
|
||||
scrollToBottom();
|
||||
onComplete?.();
|
||||
skipTypingAnimation(
|
||||
parsedLines,
|
||||
buttonIndices,
|
||||
interactive,
|
||||
() => ({ displayedLines, currentLineIndex, isTyping, isComplete, skipRequested, selectedIndex }),
|
||||
(updates) => {
|
||||
if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
|
||||
if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
|
||||
if (updates.isTyping !== undefined) isTyping = updates.isTyping;
|
||||
if (updates.isComplete !== undefined) isComplete = updates.isComplete;
|
||||
if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
|
||||
if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
|
||||
},
|
||||
() => bodyElement,
|
||||
autoscroll,
|
||||
onComplete
|
||||
);
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (isTyping && (event.key === 'y' || event.key === 'Y')) {
|
||||
event.preventDefault();
|
||||
skipAnimation();
|
||||
return;
|
||||
}
|
||||
// ========================================================================
|
||||
// TERMINAL API
|
||||
// ========================================================================
|
||||
|
||||
if (!interactive || !isComplete || buttonIndices.length === 0) return;
|
||||
terminal = createTerminalAPI({
|
||||
getState: () => ({
|
||||
lines,
|
||||
displayedLines,
|
||||
isTyping,
|
||||
isComplete,
|
||||
currentLineIndex,
|
||||
selectedIndex,
|
||||
skipRequested
|
||||
}),
|
||||
setState: (updates) => {
|
||||
if (updates.lines !== undefined) lines = updates.lines;
|
||||
if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
|
||||
if (updates.isTyping !== undefined) isTyping = updates.isTyping;
|
||||
if (updates.isComplete !== undefined) isComplete = updates.isComplete;
|
||||
if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
|
||||
if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
|
||||
if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
|
||||
},
|
||||
getColorMap: () => colorMap,
|
||||
getBodyElement: () => bodyElement,
|
||||
typeText
|
||||
});
|
||||
|
||||
const currentButtonIdx = buttonIndices.indexOf(selectedIndex);
|
||||
// ========================================================================
|
||||
// KEYBOARD HANDLING
|
||||
// ========================================================================
|
||||
|
||||
if (event.key === 'ArrowDown' || event.key === 'j') {
|
||||
event.preventDefault();
|
||||
const nextIdx = (currentButtonIdx + 1) % buttonIndices.length;
|
||||
selectedIndex = buttonIndices[nextIdx];
|
||||
scrollToSelected();
|
||||
} else if (event.key === 'ArrowUp' || event.key === 'k') {
|
||||
event.preventDefault();
|
||||
const prevIdx = (currentButtonIdx - 1 + buttonIndices.length) % buttonIndices.length;
|
||||
selectedIndex = buttonIndices[prevIdx];
|
||||
scrollToSelected();
|
||||
} else if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
const selectedLine = displayedLines[selectedIndex]?.parsed.line;
|
||||
if (selectedLine?.action) {
|
||||
selectedLine.action();
|
||||
} else if (selectedLine?.href) {
|
||||
const isExternal = selectedLine.external || selectedLine.href.startsWith('http://') || selectedLine.href.startsWith('https://');
|
||||
if (isExternal) {
|
||||
window.open(selectedLine.href, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
window.location.href = selectedLine.href;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleKeydown = createKeyboardHandler({
|
||||
getIsTyping: () => isTyping,
|
||||
getIsComplete: () => isComplete,
|
||||
getInteractive: () => interactive,
|
||||
getButtonIndices: () => buttonIndices,
|
||||
getSelectedIndex: () => selectedIndex,
|
||||
setSelectedIndex: (index) => { selectedIndex = index; },
|
||||
getDisplayedLines: () => displayedLines,
|
||||
getBodyElement: () => bodyElement,
|
||||
skipAnimation,
|
||||
scrollMargin: terminalSettings.scrollMargin
|
||||
});
|
||||
|
||||
function handleButtonClick(index: number) {
|
||||
selectedIndex = index;
|
||||
const line = displayedLines[index]?.parsed.line;
|
||||
if (line?.action) {
|
||||
line.action();
|
||||
} else if (line?.href) {
|
||||
const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
|
||||
if (isExternal) {
|
||||
window.open(line.href, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
window.location.href = line.href;
|
||||
}
|
||||
}
|
||||
handleNavigation(displayedLines[index]?.parsed.line);
|
||||
}
|
||||
|
||||
function handleLinkClick(index: number) {
|
||||
const line = displayedLines[index]?.parsed.line;
|
||||
if (line?.action) {
|
||||
line.action();
|
||||
} else if (line?.href) {
|
||||
const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
|
||||
if (isExternal) {
|
||||
window.open(line.href, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
window.location.href = line.href;
|
||||
}
|
||||
}
|
||||
handleNavigation(displayedLines[index]?.parsed.line);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
245
src/lib/components/tui/terminal-api.ts
Normal file
245
src/lib/components/tui/terminal-api.ts
Normal file
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* Terminal API Factory
|
||||
*
|
||||
* Creates a reactive API for manipulating terminal content programmatically.
|
||||
* Use this with TerminalTUI's bindable `terminal` prop.
|
||||
*/
|
||||
|
||||
import type { TerminalLine, ParsedLine, DisplayedLine, TerminalAPI } from './types';
|
||||
import { parseColorText, getPlainText } from './utils';
|
||||
import type { ThemeColorMap } from './utils';
|
||||
|
||||
export interface TerminalState {
|
||||
lines: TerminalLine[];
|
||||
displayedLines: DisplayedLine[];
|
||||
isTyping: boolean;
|
||||
isComplete: boolean;
|
||||
currentLineIndex: number;
|
||||
selectedIndex: number;
|
||||
skipRequested: boolean;
|
||||
}
|
||||
|
||||
export interface TerminalAPIOptions {
|
||||
getState: () => TerminalState;
|
||||
setState: (updates: Partial<TerminalState>) => void;
|
||||
getColorMap: () => ThemeColorMap;
|
||||
getBodyElement: () => HTMLDivElement | undefined;
|
||||
typeText: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a single terminal line into segments
|
||||
*/
|
||||
export function parseLine(line: TerminalLine, colorMap: ThemeColorMap): ParsedLine {
|
||||
const segments = parseColorText(line.content, colorMap);
|
||||
return {
|
||||
line,
|
||||
segments,
|
||||
plainText: getPlainText(segments)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a terminal API instance
|
||||
*/
|
||||
export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
|
||||
const { getState, setState, getColorMap, getBodyElement, typeText } = options;
|
||||
|
||||
function refreshDisplayedLines() {
|
||||
const state = getState();
|
||||
const colorMap = getColorMap();
|
||||
const displayedLines = state.lines.map((line, i) => {
|
||||
const parsed = parseLine(line, colorMap);
|
||||
return {
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: state.displayedLines[i]?.showImage ?? (line.type === 'image')
|
||||
};
|
||||
});
|
||||
setState({ displayedLines, lines: [...state.lines] });
|
||||
}
|
||||
|
||||
function apiScrollToBottom() {
|
||||
const bodyElement = getBodyElement();
|
||||
if (!bodyElement) return;
|
||||
bodyElement.scrollTo({
|
||||
top: bodyElement.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
function apiScrollToLine(index: number) {
|
||||
const bodyElement = getBodyElement();
|
||||
if (!bodyElement) return;
|
||||
const lineElements = bodyElement.querySelectorAll('.tui-line');
|
||||
const target = lineElements[index] as HTMLElement | undefined;
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clear: () => {
|
||||
setState({
|
||||
lines: [],
|
||||
displayedLines: [],
|
||||
isComplete: true,
|
||||
isTyping: false
|
||||
});
|
||||
},
|
||||
|
||||
write: (line: TerminalLine) => {
|
||||
const state = getState();
|
||||
const colorMap = getColorMap();
|
||||
const parsed = parseLine(line, colorMap);
|
||||
setState({
|
||||
lines: [...state.lines, line],
|
||||
displayedLines: [...state.displayedLines, {
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: line.type === 'image'
|
||||
}]
|
||||
});
|
||||
setTimeout(apiScrollToBottom, 10);
|
||||
},
|
||||
|
||||
writeLines: (newLines: TerminalLine[]) => {
|
||||
const state = getState();
|
||||
const colorMap = getColorMap();
|
||||
const newDisplayed = newLines.map(line => {
|
||||
const parsed = parseLine(line, colorMap);
|
||||
return {
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: line.type === 'image'
|
||||
};
|
||||
});
|
||||
setState({
|
||||
lines: [...state.lines, ...newLines],
|
||||
displayedLines: [...state.displayedLines, ...newDisplayed]
|
||||
});
|
||||
setTimeout(apiScrollToBottom, 10);
|
||||
},
|
||||
|
||||
update: (index: number, updates: Partial<TerminalLine>) => {
|
||||
const state = getState();
|
||||
if (index < 0 || index >= state.lines.length) return;
|
||||
state.lines[index] = { ...state.lines[index], ...updates };
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
updateContent: (index: number, content: string) => {
|
||||
const state = getState();
|
||||
if (index < 0 || index >= state.lines.length) return;
|
||||
state.lines[index] = { ...state.lines[index], content };
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
insert: (index: number, line: TerminalLine) => {
|
||||
const state = getState();
|
||||
const clampedIndex = Math.max(0, Math.min(index, state.lines.length));
|
||||
setState({
|
||||
lines: [...state.lines.slice(0, clampedIndex), line, ...state.lines.slice(clampedIndex)]
|
||||
});
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
remove: (index: number) => {
|
||||
const state = getState();
|
||||
if (index < 0 || index >= state.lines.length) return;
|
||||
setState({
|
||||
lines: [...state.lines.slice(0, index), ...state.lines.slice(index + 1)]
|
||||
});
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
removeRange: (startIndex: number, count: number) => {
|
||||
const state = getState();
|
||||
if (startIndex < 0 || startIndex >= state.lines.length) return;
|
||||
setState({
|
||||
lines: [...state.lines.slice(0, startIndex), ...state.lines.slice(startIndex + count)]
|
||||
});
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
setLines: (newLines: TerminalLine[]) => {
|
||||
setState({ lines: [...newLines] });
|
||||
refreshDisplayedLines();
|
||||
},
|
||||
|
||||
getLineCount: () => getState().lines.length,
|
||||
|
||||
getLine: (index: number) => getState().lines[index],
|
||||
|
||||
getLines: () => [...getState().lines],
|
||||
|
||||
findById: (id: string) => getState().lines.findIndex(line => line.id === id),
|
||||
|
||||
updateById: (id: string, updates: Partial<TerminalLine>) => {
|
||||
const state = getState();
|
||||
const index = state.lines.findIndex(line => line.id === id);
|
||||
if (index !== -1) {
|
||||
state.lines[index] = { ...state.lines[index], ...updates };
|
||||
refreshDisplayedLines();
|
||||
}
|
||||
},
|
||||
|
||||
removeById: (id: string) => {
|
||||
const state = getState();
|
||||
const index = state.lines.findIndex(line => line.id === id);
|
||||
if (index !== -1) {
|
||||
setState({
|
||||
lines: [...state.lines.slice(0, index), ...state.lines.slice(index + 1)]
|
||||
});
|
||||
refreshDisplayedLines();
|
||||
}
|
||||
},
|
||||
|
||||
scrollToBottom: apiScrollToBottom,
|
||||
|
||||
scrollToLine: apiScrollToLine,
|
||||
|
||||
isAnimating: () => getState().isTyping,
|
||||
|
||||
skip: () => {
|
||||
const state = getState();
|
||||
if (!state.isTyping) return;
|
||||
|
||||
const colorMap = getColorMap();
|
||||
const displayedLines = state.lines.map(line => {
|
||||
const parsed = parseLine(line, colorMap);
|
||||
return {
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: line.type === 'image'
|
||||
};
|
||||
});
|
||||
|
||||
setState({
|
||||
skipRequested: true,
|
||||
displayedLines,
|
||||
isTyping: false,
|
||||
isComplete: true,
|
||||
currentLineIndex: state.lines.length - 1
|
||||
});
|
||||
|
||||
apiScrollToBottom();
|
||||
},
|
||||
|
||||
restart: () => {
|
||||
setState({
|
||||
displayedLines: [],
|
||||
currentLineIndex: 0,
|
||||
isTyping: false,
|
||||
isComplete: false,
|
||||
skipRequested: false,
|
||||
selectedIndex: -1
|
||||
});
|
||||
typeText();
|
||||
}
|
||||
};
|
||||
}
|
||||
148
src/lib/components/tui/terminal-keyboard.ts
Normal file
148
src/lib/components/tui/terminal-keyboard.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Terminal Keyboard Handler
|
||||
*
|
||||
* Handles keyboard navigation and interaction for the terminal.
|
||||
*/
|
||||
|
||||
import type { DisplayedLine } from './types';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export interface KeyboardHandlerOptions {
|
||||
getIsTyping: () => boolean;
|
||||
getIsComplete: () => boolean;
|
||||
getInteractive: () => boolean;
|
||||
getButtonIndices: () => number[];
|
||||
getSelectedIndex: () => number;
|
||||
setSelectedIndex: (index: number) => void;
|
||||
getDisplayedLines: () => DisplayedLine[];
|
||||
getBodyElement: () => HTMLDivElement | undefined;
|
||||
skipAnimation: () => void;
|
||||
scrollMargin?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll selected button into view with margin for context
|
||||
*/
|
||||
export function scrollToSelected(
|
||||
bodyElement: HTMLDivElement | undefined,
|
||||
selectedIndex: number,
|
||||
displayedLines: DisplayedLine[],
|
||||
scrollMargin: number = 80
|
||||
): void {
|
||||
if (!bodyElement || selectedIndex < 0) return;
|
||||
|
||||
const buttons = bodyElement.querySelectorAll('.tui-button');
|
||||
const btnIndices = displayedLines
|
||||
.map((item, idx) => item.parsed.line.type === 'button' ? idx : -1)
|
||||
.filter(idx => idx !== -1);
|
||||
|
||||
const selectedButton = Array.from(buttons).find((_, i) => {
|
||||
return btnIndices[i] === selectedIndex;
|
||||
}) as HTMLElement | undefined;
|
||||
|
||||
if (selectedButton && bodyElement) {
|
||||
const containerRect = bodyElement.getBoundingClientRect();
|
||||
const buttonRect = selectedButton.getBoundingClientRect();
|
||||
|
||||
if (buttonRect.top < containerRect.top + scrollMargin) {
|
||||
const scrollAmount = buttonRect.top - containerRect.top - scrollMargin;
|
||||
bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
|
||||
} else if (buttonRect.bottom > containerRect.bottom - scrollMargin) {
|
||||
const scrollAmount = buttonRect.bottom - containerRect.bottom + scrollMargin;
|
||||
bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle button/link click navigation
|
||||
*/
|
||||
export function handleNavigation(line: { action?: () => void; href?: string; external?: boolean } | undefined): void {
|
||||
if (!line) return;
|
||||
|
||||
if (line.action) {
|
||||
line.action();
|
||||
} else if (line.href) {
|
||||
const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
|
||||
if (isExternal) {
|
||||
window.open(line.href, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
window.location.href = line.href;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a keyboard event handler for the terminal
|
||||
*/
|
||||
export function createKeyboardHandler(options: KeyboardHandlerOptions) {
|
||||
const {
|
||||
getIsTyping,
|
||||
getIsComplete,
|
||||
getInteractive,
|
||||
getButtonIndices,
|
||||
getSelectedIndex,
|
||||
setSelectedIndex,
|
||||
getDisplayedLines,
|
||||
getBodyElement,
|
||||
skipAnimation,
|
||||
scrollMargin = 80
|
||||
} = options;
|
||||
|
||||
return function handleKeydown(event: KeyboardEvent): void {
|
||||
// Skip animation on Y key
|
||||
if (getIsTyping() && (event.key === 'y' || event.key === 'Y')) {
|
||||
event.preventDefault();
|
||||
skipAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!getInteractive() || !getIsComplete()) return;
|
||||
|
||||
const buttonIndices = getButtonIndices();
|
||||
if (buttonIndices.length === 0) return;
|
||||
|
||||
const selectedIndex = getSelectedIndex();
|
||||
const currentButtonIdx = buttonIndices.indexOf(selectedIndex);
|
||||
const displayedLines = getDisplayedLines();
|
||||
const bodyElement = getBodyElement();
|
||||
|
||||
if (event.key === 'ArrowDown' || event.key === 'j') {
|
||||
event.preventDefault();
|
||||
const nextIdx = (currentButtonIdx + 1) % buttonIndices.length;
|
||||
const newSelectedIndex = buttonIndices[nextIdx];
|
||||
setSelectedIndex(newSelectedIndex);
|
||||
scrollToSelected(bodyElement, newSelectedIndex, displayedLines, scrollMargin);
|
||||
} else if (event.key === 'ArrowUp' || event.key === 'k') {
|
||||
event.preventDefault();
|
||||
const prevIdx = (currentButtonIdx - 1 + buttonIndices.length) % buttonIndices.length;
|
||||
const newSelectedIndex = buttonIndices[prevIdx];
|
||||
setSelectedIndex(newSelectedIndex);
|
||||
scrollToSelected(bodyElement, newSelectedIndex, displayedLines, scrollMargin);
|
||||
} else if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
const selectedLine = displayedLines[selectedIndex]?.parsed.line;
|
||||
handleNavigation(selectedLine);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to hash target (anchor link like #skills)
|
||||
*/
|
||||
export function scrollToHash(bodyElement: HTMLDivElement | undefined): void {
|
||||
if (!browser || !bodyElement) return;
|
||||
|
||||
const hash = window.location.hash;
|
||||
if (!hash) return;
|
||||
|
||||
const targetId = hash.slice(1); // Remove the #
|
||||
const targetElement = bodyElement.querySelector(`#${CSS.escape(targetId)}`);
|
||||
|
||||
if (targetElement) {
|
||||
// Small delay to ensure layout is complete
|
||||
setTimeout(() => {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
222
src/lib/components/tui/terminal-typing.ts
Normal file
222
src/lib/components/tui/terminal-typing.ts
Normal file
@@ -0,0 +1,222 @@
|
||||
/**
|
||||
* Terminal Typing Animation Engine
|
||||
*
|
||||
* Handles the character-by-character typing animation for terminal lines.
|
||||
*/
|
||||
|
||||
import type { ParsedLine, DisplayedLine } from './types';
|
||||
import type { TerminalSettings } from '$lib/config';
|
||||
import { calculateTypeSpeed } from '$lib';
|
||||
|
||||
export interface TypingState {
|
||||
displayedLines: DisplayedLine[];
|
||||
currentLineIndex: number;
|
||||
isTyping: boolean;
|
||||
isComplete: boolean;
|
||||
skipRequested: boolean;
|
||||
selectedIndex: number;
|
||||
}
|
||||
|
||||
export interface TypingOptions {
|
||||
parsedLines: ParsedLine[];
|
||||
speedMultiplier: number;
|
||||
terminalSettings: TerminalSettings;
|
||||
buttonIndices: number[];
|
||||
interactive: boolean;
|
||||
autoscroll: boolean;
|
||||
getBodyElement: () => HTMLDivElement | undefined;
|
||||
getState: () => TypingState;
|
||||
setState: (updates: Partial<TypingState>) => void;
|
||||
onComplete?: () => void;
|
||||
scrollToHash: () => void;
|
||||
}
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll terminal body to bottom
|
||||
*/
|
||||
function scrollToBottom(bodyElement: HTMLDivElement | undefined, autoscroll: boolean) {
|
||||
if (!autoscroll || !bodyElement) return;
|
||||
bodyElement.scrollTo({
|
||||
top: bodyElement.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Run the typing animation for all lines
|
||||
*/
|
||||
export async function runTypingAnimation(options: TypingOptions): Promise<void> {
|
||||
const {
|
||||
parsedLines,
|
||||
speedMultiplier,
|
||||
terminalSettings,
|
||||
buttonIndices,
|
||||
interactive,
|
||||
autoscroll,
|
||||
getBodyElement,
|
||||
getState,
|
||||
setState,
|
||||
onComplete,
|
||||
scrollToHash
|
||||
} = options;
|
||||
|
||||
if (parsedLines.length === 0) return;
|
||||
|
||||
setState({ isTyping: true });
|
||||
|
||||
// Apply speed multiplier to start delay
|
||||
const startDelayMs = speedMultiplier === 0 ? 0 : terminalSettings.startDelay * speedMultiplier;
|
||||
await sleep(startDelayMs);
|
||||
if (getState().skipRequested) return;
|
||||
|
||||
for (let i = 0; i < parsedLines.length; i++) {
|
||||
const state = getState();
|
||||
if (state.skipRequested) return;
|
||||
|
||||
const parsed = parsedLines[i];
|
||||
const line = parsed.line;
|
||||
const plainLength = parsed.plainText.length;
|
||||
|
||||
// Add new line to displayed lines
|
||||
const currentDisplayed = [...state.displayedLines, { parsed, charIndex: 0, complete: false, showImage: false }];
|
||||
setState({ displayedLines: currentDisplayed, currentLineIndex: i });
|
||||
|
||||
if (line.delay && speedMultiplier > 0) {
|
||||
await sleep(line.delay * speedMultiplier);
|
||||
if (getState().skipRequested) return;
|
||||
}
|
||||
|
||||
const bodyElement = getBodyElement();
|
||||
|
||||
// Handle different line types
|
||||
if (line.type === 'image') {
|
||||
await sleep(speedMultiplier === 0 ? 0 : 100 * speedMultiplier);
|
||||
if (getState().skipRequested) return;
|
||||
updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: true }, getState, setState);
|
||||
scrollToBottom(bodyElement, autoscroll);
|
||||
} else if (line.type === 'blank' || line.type === 'divider') {
|
||||
updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
|
||||
} else if (line.type === 'button') {
|
||||
// Buttons appear instantly
|
||||
updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
|
||||
scrollToBottom(bodyElement, autoscroll);
|
||||
} else if (speedMultiplier === 0) {
|
||||
// Instant mode - no typing animation
|
||||
updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
|
||||
if (i % 5 === 0) scrollToBottom(bodyElement, autoscroll);
|
||||
} else if (line.type === 'header') {
|
||||
const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier * 0.25);
|
||||
for (let j = 0; j <= plainLength; j++) {
|
||||
if (getState().skipRequested) return;
|
||||
updateDisplayedLine(i, {
|
||||
parsed,
|
||||
charIndex: j,
|
||||
complete: j === plainLength,
|
||||
showImage: false
|
||||
}, getState, setState);
|
||||
if (j < plainLength) await sleep(typeSpeed);
|
||||
}
|
||||
scrollToBottom(bodyElement, autoscroll);
|
||||
} else {
|
||||
const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier);
|
||||
|
||||
for (let j = 0; j <= plainLength; j++) {
|
||||
if (getState().skipRequested) return;
|
||||
updateDisplayedLine(i, {
|
||||
parsed,
|
||||
charIndex: j,
|
||||
complete: j === plainLength,
|
||||
showImage: false
|
||||
}, getState, setState);
|
||||
|
||||
if (j % 10 === 0) scrollToBottom(bodyElement, autoscroll);
|
||||
|
||||
if (j < plainLength) {
|
||||
await sleep(typeSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (getState().skipRequested) return;
|
||||
|
||||
// Mark line as complete
|
||||
const finalState = getState();
|
||||
const updatedLines = [...finalState.displayedLines];
|
||||
if (updatedLines[i]) {
|
||||
updatedLines[i].complete = true;
|
||||
setState({ displayedLines: updatedLines });
|
||||
}
|
||||
|
||||
scrollToBottom(bodyElement, autoscroll);
|
||||
|
||||
if (i < parsedLines.length - 1 && speedMultiplier > 0) {
|
||||
await sleep(terminalSettings.lineDelay * speedMultiplier);
|
||||
}
|
||||
}
|
||||
|
||||
setState({ isTyping: false, isComplete: true });
|
||||
|
||||
if (interactive && buttonIndices.length > 0) {
|
||||
setState({ selectedIndex: buttonIndices[0] });
|
||||
}
|
||||
|
||||
// Scroll to hash anchor if present in URL
|
||||
scrollToHash();
|
||||
|
||||
onComplete?.();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a single displayed line at index
|
||||
*/
|
||||
function updateDisplayedLine(
|
||||
index: number,
|
||||
update: DisplayedLine,
|
||||
getState: () => TypingState,
|
||||
setState: (updates: Partial<TypingState>) => void
|
||||
) {
|
||||
const state = getState();
|
||||
const updatedLines = [...state.displayedLines];
|
||||
updatedLines[index] = update;
|
||||
setState({ displayedLines: updatedLines });
|
||||
}
|
||||
|
||||
/**
|
||||
* Skip animation and show all content instantly
|
||||
*/
|
||||
export function skipTypingAnimation(
|
||||
parsedLines: ParsedLine[],
|
||||
buttonIndices: number[],
|
||||
interactive: boolean,
|
||||
getState: () => TypingState,
|
||||
setState: (updates: Partial<TypingState>) => void,
|
||||
getBodyElement: () => HTMLDivElement | undefined,
|
||||
autoscroll: boolean,
|
||||
onComplete?: () => void
|
||||
): void {
|
||||
const state = getState();
|
||||
if (!state.isTyping) return;
|
||||
|
||||
const displayedLines = parsedLines.map(parsed => ({
|
||||
parsed,
|
||||
charIndex: parsed.plainText.length,
|
||||
complete: true,
|
||||
showImage: parsed.line.type === 'image'
|
||||
}));
|
||||
|
||||
setState({
|
||||
skipRequested: true,
|
||||
displayedLines,
|
||||
isTyping: false,
|
||||
isComplete: true,
|
||||
currentLineIndex: parsedLines.length - 1,
|
||||
selectedIndex: interactive && buttonIndices.length > 0 ? buttonIndices[0] : -1
|
||||
});
|
||||
|
||||
scrollToBottom(getBodyElement(), autoscroll);
|
||||
onComplete?.();
|
||||
}
|
||||
@@ -15,6 +15,50 @@ export interface FormOption {
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
// Terminal API for reactive manipulation
|
||||
export interface TerminalAPI {
|
||||
/** Clear all lines from the terminal */
|
||||
clear: () => void;
|
||||
/** Write a new line to the terminal (appends) */
|
||||
write: (line: TerminalLine) => void;
|
||||
/** Write multiple lines to the terminal (appends) */
|
||||
writeLines: (lines: TerminalLine[]) => void;
|
||||
/** Update a specific line by index */
|
||||
update: (index: number, line: Partial<TerminalLine>) => void;
|
||||
/** Update a line's content by index */
|
||||
updateContent: (index: number, content: string) => void;
|
||||
/** Insert a line at a specific index */
|
||||
insert: (index: number, line: TerminalLine) => void;
|
||||
/** Remove a line by index */
|
||||
remove: (index: number) => void;
|
||||
/** Remove lines by range */
|
||||
removeRange: (startIndex: number, count: number) => void;
|
||||
/** Replace all lines */
|
||||
setLines: (lines: TerminalLine[]) => void;
|
||||
/** Get current line count */
|
||||
getLineCount: () => number;
|
||||
/** Get a line by index */
|
||||
getLine: (index: number) => TerminalLine | undefined;
|
||||
/** Get all lines */
|
||||
getLines: () => TerminalLine[];
|
||||
/** Find line index by id */
|
||||
findById: (id: string) => number;
|
||||
/** Update a line by its id */
|
||||
updateById: (id: string, line: Partial<TerminalLine>) => void;
|
||||
/** Remove a line by its id */
|
||||
removeById: (id: string) => void;
|
||||
/** Scroll to bottom */
|
||||
scrollToBottom: () => void;
|
||||
/** Scroll to a specific line index */
|
||||
scrollToLine: (index: number) => void;
|
||||
/** Check if terminal is currently animating */
|
||||
isAnimating: () => boolean;
|
||||
/** Skip current animation */
|
||||
skip: () => void;
|
||||
/** Restart the typing animation */
|
||||
restart: () => void;
|
||||
}
|
||||
|
||||
export interface TerminalLine {
|
||||
type: LineType;
|
||||
content: string;
|
||||
|
||||
@@ -30,7 +30,7 @@ export type { Project, Model3D, Card } from './content';
|
||||
export { projects, models, cards, sortedCards } from './content';
|
||||
|
||||
// Terminal settings, TUI styling, speed presets, model viewer, particles, shortcuts
|
||||
export type { SpeedPreset } from './terminal';
|
||||
export type { SpeedPreset, TerminalSettings } from './terminal';
|
||||
export {
|
||||
terminalSettings,
|
||||
tuiStyle,
|
||||
|
||||
@@ -4,7 +4,19 @@
|
||||
|
||||
export type SpeedPreset = 'instant' | 'fast' | 'normal' | 'slow' | 'typewriter';
|
||||
|
||||
export const terminalSettings = {
|
||||
export interface TerminalSettings {
|
||||
baseTypeSpeed: number;
|
||||
minTypeSpeed: number;
|
||||
maxTypeSpeed: number;
|
||||
startDelay: number;
|
||||
lineDelay: number;
|
||||
showCursor: boolean;
|
||||
promptStyle: 'full' | 'short' | 'minimal';
|
||||
icon: string;
|
||||
scrollMargin: number;
|
||||
}
|
||||
|
||||
export const terminalSettings: TerminalSettings = {
|
||||
// Base typing speed in ms per character (will be adjusted by content length)
|
||||
baseTypeSpeed: 20,
|
||||
// Minimum typing speed (fastest)
|
||||
@@ -18,7 +30,7 @@ export const terminalSettings = {
|
||||
// Show cursor
|
||||
showCursor: true,
|
||||
// Prompt style
|
||||
promptStyle: 'full' as 'full' | 'short' | 'minimal',
|
||||
promptStyle: 'full',
|
||||
// Terminal icon (emoji or text)
|
||||
icon: '🐧',
|
||||
// Scroll margin when navigating buttons (px)
|
||||
|
||||
@@ -75,3 +75,6 @@ export function getPrompt(path: string = '~'): string {
|
||||
|
||||
// Barrel exports (convenience re-exports)
|
||||
export { user, terminalSettings, pageSpeedSettings, speedPresets, pageAutoscrollSettings, pageMeta, site } from './config';
|
||||
|
||||
// Export terminal types
|
||||
export type { TerminalAPI, TerminalLine, LineType, ParsedLine, DisplayedLine } from './components/tui/types';
|
||||
|
||||
@@ -514,6 +514,66 @@ export const lines: TerminalLine[] = [
|
||||
{ type: 'output', content: "{ type: 'select', content: 'Choose:', selectOptions: [{ value: 'a', label: 'Option A' }] }" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// TERMINAL API
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
{ type: 'divider', content: 'TERMINAL API', id: 'terminal-api' },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Reactive Terminal Control(&)' },
|
||||
{ type: 'output', content: 'The (&cyan)TerminalAPI(&) allows programmatic control of terminal content.' },
|
||||
{ type: 'output', content: 'Use (&primary)bind:terminal(&) to access the API from your component.' },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Writing Lines(&)' },
|
||||
{ type: 'output', content: "(&muted)terminal.write({ type: 'output', content: 'Hello!' })(&) (&dim)// Append line(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.writeLines([...lines])(&) (&dim)// Append multiple(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.clear()(&) (&dim)// Clear all(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.setLines([...lines])(&) (&dim)// Replace all(&)" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Updating Lines(&)' },
|
||||
{ type: 'output', content: "(&muted)terminal.update(0, { content: 'New text' })(&) (&dim)// Update by index(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.updateContent(0, 'New text')(&) (&dim)// Update content only(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.updateById('my-id', { content: 'New' })(&) (&dim)// Update by ID(&)" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Removing Lines(&)' },
|
||||
{ type: 'output', content: "(&muted)terminal.remove(0)(&) (&dim)// Remove by index(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.removeRange(0, 3)(&) (&dim)// Remove range(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.removeById('my-id')(&) (&dim)// Remove by ID(&)" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Navigation & Control(&)' },
|
||||
{ type: 'output', content: "(&muted)terminal.scrollToBottom()(&) (&dim)// Scroll to end(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.scrollToLine(5)(&) (&dim)// Scroll to line(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.skip()(&) (&dim)// Skip animation(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.restart()(&) (&dim)// Restart animation(&)" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Reading State(&)' },
|
||||
{ type: 'output', content: "(&muted)terminal.getLine(0)(&) (&dim)// Get line by index(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.getLines()(&) (&dim)// Get all lines(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.getLineCount()(&) (&dim)// Get count(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.findById('my-id')(&) (&dim)// Find index by ID(&)" },
|
||||
{ type: 'output', content: "(&muted)terminal.isAnimating()(&) (&dim)// Check if typing(&)" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
{ type: 'info', content: '(&blue,bold)Usage Example(&)' },
|
||||
{ type: 'output', content: "(&dim)// In your Svelte component:(&)" },
|
||||
{ type: 'output', content: "(&cyan)import(&) TerminalTUI (&cyan)from(&) '(&green)$lib/components/TerminalTUI.svelte(&)';" },
|
||||
{ type: 'output', content: "(&cyan)import type(&) { TerminalAPI } (&cyan)from(&) '(&green)$lib(&)';" },
|
||||
{ type: 'output', content: "" },
|
||||
{ type: 'output', content: "(&magenta)let(&) terminal = (&yellow)$state(&)<TerminalAPI>();" },
|
||||
{ type: 'output', content: "(&magenta)let(&) lines = (&yellow)$state(&)([{ type: '(&green)output(&)', content: '(&green)Hello!(&)' }]);" },
|
||||
{ type: 'output', content: "" },
|
||||
{ type: 'output', content: "(&dim)// In template:(&)" },
|
||||
{ type: 'output', content: "<TerminalTUI (&cyan)bind:terminal(&) (&cyan)bind:lines(&) />" },
|
||||
{ type: 'output', content: "" },
|
||||
{ type: 'output', content: "(&dim)// Then use the API:(&)" },
|
||||
{ type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
|
||||
{ type: 'blank', content: '' },
|
||||
|
||||
// End
|
||||
{ type: 'success', content: '(&success)Component showcase complete!(&)' }
|
||||
];
|
||||
@@ -10,7 +10,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Components | {user.name}</title>
|
||||
<title>Components | {user.displayname}</title>
|
||||
<meta name="description" content="Terminal UI Components Showcase" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>3D Models | {user.name}</title>
|
||||
<title>3D Models | {user.displayname}</title>
|
||||
<meta name="description" content="3D Models portfolio - Characters, Environments, Props and more" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Projects | {user.name}</title>
|
||||
<title>Projects | {user.displayname}</title>
|
||||
<meta name="description" content="Hackathon projects and achievements" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user