Website: How did you do the terminal command tab preview component?

[mainrs]

I really like how the CLI is presented on the website. How is the command tab component implemented? By that I mean this one:

I'd really like to use a similar approach for my CLIs. I expected it to be an asciinema embed or something similar, but that doesn't seem to be the case (or at least I coudln't find an iframe in the page source).

The repository seems to be private as well, or else I would have taken a look :) Cheers!

[mislav]

Hi, this is done via simple JavaScript: https://gist.github.com/f63b3a8dcdb83c6b80803f8aef748217

This is roughly the markup:

    <tab-container>
      <div class="container-xl mx-auto px-3 px-md-4 mb-6">
        <!-- Terminal -->
        <h3 class="command-header text-mono f2 text-normal text-center mb-2">
          <span class="text-blue-mktg mr-2">$</span>
          <span class="command command-1 type-animate d-none">gh issue list</span>
          <span class="command command-2 type-animate d-none">gh pr status</span>
          <!-- ... -->
        </h3>
        <p class="command command-1 d-none f4 text-gray text-center mb-4">View and filter a repository’s open issues.</p>
        <p class="command command-2 d-none f4 text-gray text-center mb-4">Check on the status of your pull requests.</p>
        <!-- ... -->

        <div class="col-12 col-lg-10 mx-auto bg-true-black rounded-2 box-shadow-default-mktg position-relative cli-window overflow-x-scroll" style="height: 480px; border: 1px solid rgba(255, 255, 255, 0.1)">
          <div class="f4-mktg-fluid px-5 text-white-fade text-mono mt-5">
            <span class="text-white mr-1">$</span>
            <div role="tabpanel" class="d-inline" hidden>
              <span class="command command-1 type-animate text-white d-none">gh issue list</span>
              <div class="command command-1 type-animate-done d-none"><br>
                <strong class="text-white">Showing 4 of 4 issues in cli/cli</strong><br><br>
                ...
              </div>
            </div>
            ...
          </div>
        </div>
      </div>

      <div role="tablist" class="my-6 px-1 mx-auto">
        <button class="btn-mktg-fluid btn-white-outline-mktg-fluid text-mono m-1" type="button" role="tab" data-tab="1" tabindex="-1">gh issue list</button>
        <button class="btn-mktg-fluid btn-white-outline-mktg-fluid text-mono m-1" type="button" role="tab" data-tab="2" tabindex="-1">gh pr status</button>
        <!-- ... -->
      </div>
    </tab-container>

The tab-container component is here: https://github.com/github/tab-container-element

This is all pretty ad-hoc and not immediately reusable for other projects, but maybe you get some inspiration from it! Cheers