Animate terminal in and out

pindab0ter · Apr 10, 2024 · 430d91c · 430d91c
1 parent 6f62a20
commit 430d91c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/assets/ts/terminal/Terminal.ts b/assets/ts/terminal/Terminal.ts
@@ -11,6 +11,7 @@ export class Terminal {
   private inputElement = document.getElementById("prompt-input") as HTMLSpanElement;
   private promptBlurElement = document.getElementById("prompt-blur") as HTMLSpanElement;
   private terminalOutputElement = document.getElementById("terminal-output") as HTMLDivElement;
+  private container = document.getElementById("terminal-output-container") as HTMLDivElement;
   private navElement = document.getElementsByTagName("nav")[0];
 
   static commands: Command[] = [
@@ -178,6 +179,9 @@ export class Terminal {
       outputElement.textContent = line;
       this.terminalOutputElement.appendChild(outputElement);
     });
+
+    // Animation to expand the terminal output container.
+    this.container.style.height = this.terminalOutputElement.scrollHeight + "px";
   }
 
   private getInput() {
@@ -195,5 +199,8 @@ export class Terminal {
     while (this.terminalOutputElement?.firstChild) {
       this.terminalOutputElement.removeChild(this.terminalOutputElement.firstChild);
     }
+
+    // Animation to contract the terminal output.
+    this.container.style.height = this.terminalOutputElement.scrollHeight + "px";
   }
 }
diff --git a/assets/ts/terminal/commands/ChangeDirectory.ts b/assets/ts/terminal/commands/ChangeDirectory.ts
@@ -84,7 +84,8 @@ export class ChangeDirectory extends AutocompletingCommand {
   public suggestAutocompletions(arg: string): string[] {
     const suggestions = this.pagesInPath
       .map((page: HugoPage) => slugPath(page))
-      .map((path: string) => path.replace(window.location.pathname, ""));
+      .map((path: string) => path.replace(window.location.pathname, ""))
+      .filter((path: string) => path !== "");
 
     return suggestions.filter((path: string) => path.startsWith(arg));
   }

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -16,7 +16,13 @@
     });
   </script>
 
-  <div class="font-mono text-gray-700 dark:text-gray-200 ms-2" id="terminal-output"></div>
+  <div
+    class="font-mono text-gray-700 dark:text-gray-200 ms-2 overflow-clip"
+    id="terminal-output-container"
+    style="transition: all 0.2s;"
+  >
+    <div id="terminal-output"></div>
+  </div>
 
   <nav class="my-0 me-2 lg:me-4 flex flex-col flex-nowrap justify-between sm:my-2 sm:flex-row">
     <div class="flex flex-nowrap items-center justify-between">