Re-create a similar Travis CI Console log interface
The first time I saw Travis CI in real time, updated the build log, I was admittedly uncomfortably impressed. And I know, with very time consuming CSS styling and JS coding, I could get something half as nice. But, to my question, are there libraries out there that could make something like this easier? I understand that Travis CI uses Ember as the basis for its web applications, but I'm assuming it's not an Ember component, right?
source to share
"travis-web" uses Ember, but the functionality for "log-container" is common. It contains the text of the log file ("Download Log"). Download the raw version of the log and take a look.
You will see that there are several "annotations" in the log file. This is a syntax that indicates areas where some custom styles are applied. These lines are processed by the Log script and then removed.
Okay, expand this:
► Code folds
Folds start with "travis_fold:start:section_name"
and end with"travis_fold:end:section_name"
The content inside the fold fits in the gap. The default span height is 0. Initially, no content is displayed.
An additional CSS style is added in the click open
. The style open
sets the height
span element to auto
- and the content of the fold will be displayed.
Linear numbers ://url#L100
Annotations are removed from the contents of the log file
( total number of lines = raw log file lines - annotation lines
).
All line numbers are anchor ( a
) elements , so line reference is possible.
The numbering itself is done using CSS - the number is added before the anchor.
log-body p a::before {
content: counter(line-numbering);
counter-increment: line-numbering;
Colors
The ansi-color codes are used throughout the raw log file. The content is parsed by the AnsiParser script and the color codes are deansi'ed to their css class color names.
Line
[0K[33;1mBuild system information[0m
becomes
<span id="1-3" class="yellow bold">Build system information</span>
Scroll-To-End-Of-Log and go to the beginning
Scroll-To-End-Of-Log is like scrolling to the end of a div: this.scrollIntoView(false);
When scrolling is activated, the activation button itself is positioned at the top to keep it in the same place.
"Move Up" is located at the bottom.
Active linear hover
The current cursor line is styled p:hover: #color
.
Chapter and duration display
On the right side, "section or folder name" and "duration" are displayed. Both are spacing 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 it easier to create something like this?
For a small site, you can use a Javascript-based themed CodeEditor like CodeMirror.
Apply a dark theme, add some custom rules for code folding and code highlighting, hovering active line. This will allow you to get close quickly.
source to share