css - Recreate Similar Travis CI Console Log Interface -
the first time saw travis ci live updating build console log, was, i'll admit, nerdily impressed. , know time consuming css styling , js coding, half nice. but, question is, there libraries out there make building easier? realize travis ci uses ember web app framework, i'm guessing isn't component of ember, right?
"travis-web" uses ember, functionality "log-container" custom. contains text of log file ("download log"). please download raw version of log , take look.
you see, log file has several "annotations". it's syntax indicate areas, custom styles applied. these lines processed log script , removed.
ok, let's decompose this:
► code-folds
folds start "travis_fold:start:section_name" , end "travis_fold:end:section_name"
the content inside fold placed in span. default span height 0. content not shown.
on-click, additional css-style open added span. style open sets height of span element auto - , content of fold show up.
line-numbers ://url#l100
the annotations removed form log file content
(total number of lines = raw log file lines - annotation lines).
all lines numbers anchor elements (a), line-wise referencing possible.
the numbering done css - number added before anchor.
log-body p a::before { content: counter(line-numbering); counter-increment: line-numbering;
colors
throughout raw log file ansi-color codes used. content parsed ansiparser script , color-codes converted (deansi'ed) 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 top
scroll-to-end-of-log similar scroll end of div: this.scrollintoview(false);
when scrolling activated, activation button top positioned keep @ same spot.
the "move top" bottom positioned.
active line hovering
the current cursor line styled p:hover: #color.
section , duration display
on right side "section or folder name" , "duration" show. both spans based on following markers:
travis_time:start:0759cab0
cmds
travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802
but, question is, there libraries out there make building easier?
for small site, use themeable javascript based codeeditor, codemirror.
apply dark-theme, add custom rules code-folding , code-highlighting, active-line hovering. pretty close in no time.
Comments
Post a Comment