Recreate Similar Travis CI Console Log Interface

Question

The first time I saw the Travis CI live updating build console log, I was, I'll admit, nerdily impressed. And I know with some very time consuming CSS styling and JS coding, I could probably get something half as nice. But, my question is, are there any libraries out there that would make building something like this easier? I realize that Travis CI uses Ember as their web app framework, but I'm guessing this isn't a component of Ember, right?

Answer 1

"travis-web" uses Ember, but the functionality for the "log-container" is custom. It contains the text of the log file ("Download Log"). Please download a raw version of a log and take a look.

You will see, that the log file has several "annotations". It's a syntax to indicate the areas, where some custom styles are applied. These lines are processed by the Log script and then removed.

Ok, let's decompose this:

► Code-Folds

Folds start with "travis_fold:start:section_name" and end with "travis_fold:end:section_name"

The content inside the fold is placed in a span. By default the span height is 0. Initially the content is not shown.

On-click, the additional css-style open is added to the span. The style open sets the height of the span element to auto - and the content of the fold will show up.

Line-Numbers ://url#L100

The annotations are removed form the log file content

(total number of lines = raw log file lines - annotation lines).

All lines numbers are anchor elements (a), so line-wise referencing is possible.

The numbering itself is done by CSS - the number is added before the anchor.

log-body p a::before { content: counter(line-numbering); counter-increment: line-numbering;

Colors

Throughout the raw log file ansi-color codes are used. The content is parsed by the AnsiParser script and the color-codes are converted (deansi'ed) into their css-class color names.

The string

[0K[33;1mBuild system information[0m

becomes

<span id="1-3" class="yellow bold">Build system information</span>

Scroll-To-End-Of-Log & Move to Top

Scroll-To-End-Of-Log is similar to scroll to end of div: this.scrollIntoView(false);

When scrolling is activated, the activation button itself is top positioned to keep it at the same spot.

The "move to top" is bottom positioned.

Active Line Hovering

The current cursor line is styled with p:hover: #color.

Section and Duration Display

On the right side the "section or folder name" and the "duration" is show. Both are spans based on the following markers:

travis_time:start:0759cab0

cmds

travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802

---

But, my question is, are there any libraries out there that would make building something like this easier?

For a small site, you could use a themeable Javascript based CodeEditor, like CodeMirror.

Apply a dark-theme, add some custom rules for code-folding and code-highlighting, active-line hovering. This will get you pretty close in no time.

• https://codemirror.net/demo/theme.html
• https://codemirror.net/demo/folding.html