Pular para conteúdo

Aula 14 - Termynal.js Interativo 🐚

Objetivo

Objetivo: Aprender a criar simulações de linha de comando animadas e realistas diretamente no seu site MkDocs utilizando a sintaxe Termynal.js, essencial para tutoriais e documentação de CLI (Command Line Interface).

1. O que é Termynal.js? 🐚

Termynal.js é uma biblioteca minimalista que simula a escrita humana em um terminal de computador. Em vez de apenas colar um bloco de código estático, você pode mostrar ao usuário o processo de digitar um comando e ver a resposta do sistema.

2. Sintaxe Básica 🧱

Para criar uma simulação, usamos o bloco de código com o identificador termynal. Os símbolos indicam o comportamento da linha:

  • $: Indica um comando que será "digitado" (input).
  • (Sem símbolo): Indica a saída do sistema (output), que aparece instantaneamente.
  • >: Pode indicar um prompt contínuo ou um comentário.

Exemplo:

$ cd meu-projeto
$ git status
On branch main
Your branch is up to date.

3. Customizando o Tempo e Atrasos ⏱️

Você pode controlar a velocidade da animação usando comentários especiais ou atributos (se o plugin permitir). No nosso ambiente MkDocs, o foco é na estrutura:

  • Comandos curtos aparecem mais rápido. { .fragment }
  • Blocos de saída longos aparecem de uma só vez para não cansar o leitor. { .fragment }

4. Por que usar Simulações Animadas? 🚀

  • Engajamento: O movimento atrai a atenção. { .fragment }
  • Didática: O usuário entende o que ele deve digitar e o que o computador deve responder. { .fragment }
  • Profissionalismo: Dá um ar de "modernidade" à sua documentação. { .fragment }

5. Visualização de Renderização (Mermaid) 🧜‍♀️

mermaid graph TD A[Bloco termynal] --> B{Script JS} B --> C[Simula Digitaçao] C --> D[Exibe Output] D --> E[Terminal Finalizado]

6. Mini-Projeto: Guia de Instalação Animado 🏗️

Crie um arquivo tutorial_cli.md contendo: 1. Um título H1 "Manual do Desenvolvedor Moderno". 2. Uma breve explicação sobre como instalar uma ferramenta fictícia chamada SuperTools. 3. Um bloco termynal que simule: - A criação de uma pasta (mkdir). - A instalação via npm (npm install supertools). - A execução da ferramenta (supertool --version). - A saída mostrando a versão v1.0.0.

7. Exercícios de Fixação 🧠

  1. Qual o prefixo usado para indicar que um texto deve ser "digitado" no Termynal.js?
  2. Como representar a resposta do sistema (saída) em um bloco de terminal animado?
  3. Qual a principal vantagem de uma animação de terminal em relação a um print do console?

Próxima Aula: O grande Projeto Integrador Final! 🚀