balki/blog
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Update asciinema and hugo version

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2024-06-27 10:02:29 -04:00
parent 425dd6cdd2
commit d2a3d53e54
4 changed files with 118 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -1,4 +1,4 @@
ASCIINEMA_VERSION=3.7.1 ASCIINEMA_VERSION=3.8.0
.PHONY: update-bootstrap .PHONY: update-bootstrap
update-bootstrap: update-bootstrap:

2
public

@ -1 +1 @@
Subproject commit 3acaa3362896434a14bc5c14da58470adcbeada6 Subproject commit 094b566f7ea054b1b047ecf618d474988cd2c287

173
static/assets/asciinema-player.css
View File

@ -36,9 +36,6 @@ div.ap-wrapper:fullscreen {
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
div.ap-wrapper:fullscreen div.ap-player {
position: static;
}
div.ap-wrapper:fullscreen .title-bar { div.ap-wrapper:fullscreen .title-bar {
display: initial; display: initial;
} }
@ -200,6 +197,7 @@ pre.ap-terminal {
background-color: var(--term-color-background); background-color: var(--term-color-background);
border-color: var(--term-color-background); border-color: var(--term-color-background);
outline: none; outline: none;
line-height: var(--term-line-height);
font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols'; font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
font-variant-ligatures: none; font-variant-ligatures: none;
} }
@ -215,10 +213,12 @@ pre.ap-terminal .ap-line span {
pre.ap-terminal .ap-line { pre.ap-terminal .ap-line {
display: block; display: block;
width: 100%; width: 100%;
height: var(--term-line-height);
position: relative; position: relative;
} }
pre.ap-terminal .ap-line span { pre.ap-terminal .ap-line span {
position: absolute; position: absolute;
left: calc(100% * var(--offset) / var(--term-cols));
color: var(--fg); color: var(--fg);
background-color: var(--bg); background-color: var(--bg);
} }
@ -227,35 +227,35 @@ pre.ap-terminal .ap-line .ap-inverse {
background-color: var(--fg); background-color: var(--fg);
} }
pre.ap-terminal .ap-line .cp-2580 { pre.ap-terminal .ap-line .cp-2580 {
border-top: calc(0.5em * var(--term-line-height)) solid var(--fg); border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2581 { pre.ap-terminal .ap-line .cp-2581 {
border-bottom: calc(0.125em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.125 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2582 { pre.ap-terminal .ap-line .cp-2582 {
border-bottom: calc(0.25em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.25 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2583 { pre.ap-terminal .ap-line .cp-2583 {
border-bottom: calc(0.375em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.375 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2584 { pre.ap-terminal .ap-line .cp-2584 {
border-bottom: calc(0.5em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2585 { pre.ap-terminal .ap-line .cp-2585 {
border-bottom: calc(0.625em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.625 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2586 { pre.ap-terminal .ap-line .cp-2586 {
border-bottom: calc(0.75em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.75 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2587 { pre.ap-terminal .ap-line .cp-2587 {
border-bottom: calc(0.875em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.875 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2588 { pre.ap-terminal .ap-line .cp-2588 {
@ -303,7 +303,7 @@ pre.ap-terminal .ap-line .cp-2593 {
background-color: color-mix(in srgb, var(--fg) 75%, var(--bg)); background-color: color-mix(in srgb, var(--fg) 75%, var(--bg));
} }
pre.ap-terminal .ap-line .cp-2594 { pre.ap-terminal .ap-line .cp-2594 {
border-top: calc(0.125em * var(--term-line-height)) solid var(--fg); border-top: calc(0.125 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2595 { pre.ap-terminal .ap-line .cp-2595 {
@ -312,25 +312,25 @@ pre.ap-terminal .ap-line .cp-2595 {
} }
pre.ap-terminal .ap-line .cp-2596 { pre.ap-terminal .ap-line .cp-2596 {
border-right: 0.5ch solid var(--bg); border-right: 0.5ch solid var(--bg);
border-top: calc(0.5em * var(--term-line-height)) solid var(--bg); border-top: calc(0.5 * var(--term-line-height)) solid var(--bg);
background-color: var(--fg); background-color: var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2597 { pre.ap-terminal .ap-line .cp-2597 {
border-left: 0.5ch solid var(--bg); border-left: 0.5ch solid var(--bg);
border-top: calc(0.5em * var(--term-line-height)) solid var(--bg); border-top: calc(0.5 * var(--term-line-height)) solid var(--bg);
background-color: var(--fg); background-color: var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2598 { pre.ap-terminal .ap-line .cp-2598 {
border-right: 0.5ch solid var(--bg); border-right: 0.5ch solid var(--bg);
border-bottom: calc(0.5em * var(--term-line-height)) solid var(--bg); border-bottom: calc(0.5 * var(--term-line-height)) solid var(--bg);
background-color: var(--fg); background-color: var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-2599 { pre.ap-terminal .ap-line .cp-2599 {
border-left: 0.5ch solid var(--fg); border-left: 0.5ch solid var(--fg);
border-bottom: calc(0.5em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-259a { pre.ap-terminal .ap-line .cp-259a {
@ -341,7 +341,7 @@ pre.ap-terminal .ap-line .cp-259a::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 0.5ch; width: 0.5ch;
height: calc(0.5em * var(--term-line-height)); height: calc(0.5 * var(--term-line-height));
background-color: var(--fg); background-color: var(--fg);
} }
pre.ap-terminal .ap-line .cp-259a::before { pre.ap-terminal .ap-line .cp-259a::before {
@ -354,17 +354,17 @@ pre.ap-terminal .ap-line .cp-259a::after {
} }
pre.ap-terminal .ap-line .cp-259b { pre.ap-terminal .ap-line .cp-259b {
border-left: 0.5ch solid var(--fg); border-left: 0.5ch solid var(--fg);
border-top: calc(0.5em * var(--term-line-height)) solid var(--fg); border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-259c { pre.ap-terminal .ap-line .cp-259c {
border-right: 0.5ch solid var(--fg); border-right: 0.5ch solid var(--fg);
border-top: calc(0.5em * var(--term-line-height)) solid var(--fg); border-top: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-259d { pre.ap-terminal .ap-line .cp-259d {
border-left: 0.5ch solid var(--bg); border-left: 0.5ch solid var(--bg);
border-bottom: calc(0.5em * var(--term-line-height)) solid var(--bg); border-bottom: calc(0.5 * var(--term-line-height)) solid var(--bg);
background-color: var(--fg); background-color: var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
@ -376,7 +376,7 @@ pre.ap-terminal .ap-line .cp-259e::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 0.5ch; width: 0.5ch;
height: calc(0.5em * var(--term-line-height)); height: calc(0.5 * var(--term-line-height));
background-color: var(--fg); background-color: var(--fg);
} }
pre.ap-terminal .ap-line .cp-259e::before { pre.ap-terminal .ap-line .cp-259e::before {
@ -389,19 +389,19 @@ pre.ap-terminal .ap-line .cp-259e::after {
} }
pre.ap-terminal .ap-line .cp-259f { pre.ap-terminal .ap-line .cp-259f {
border-right: 0.5ch solid var(--fg); border-right: 0.5ch solid var(--fg);
border-bottom: calc(0.5em * var(--term-line-height)) solid var(--fg); border-bottom: calc(0.5 * var(--term-line-height)) solid var(--fg);
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-e0b0 { pre.ap-terminal .ap-line .cp-e0b0 {
border-left: 1ch solid var(--fg); border-left: 1ch solid var(--fg);
border-top: calc(0.5em * var(--term-line-height)) solid transparent; border-top: calc(0.5 * var(--term-line-height)) solid transparent;
border-bottom: calc(0.5em * var(--term-line-height)) solid transparent; border-bottom: calc(0.5 * var(--term-line-height)) solid transparent;
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal .ap-line .cp-e0b2 { pre.ap-terminal .ap-line .cp-e0b2 {
border-right: 1ch solid var(--fg); border-right: 1ch solid var(--fg);
border-top: calc(0.5em * var(--term-line-height)) solid transparent; border-top: calc(0.5 * var(--term-line-height)) solid transparent;
border-bottom: calc(0.5em * var(--term-line-height)) solid transparent; border-bottom: calc(0.5 * var(--term-line-height)) solid transparent;
box-sizing: border-box; box-sizing: border-box;
} }
pre.ap-terminal.ap-cursor-on .ap-line .ap-cursor { pre.ap-terminal.ap-cursor-on .ap-line .ap-cursor {
@ -441,8 +441,7 @@ div.ap-player div.ap-control-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, #000000 25%, #000000 100%); color: var(--term-color-foreground);
color: #bbb;
box-sizing: content-box; box-sizing: content-box;
line-height: 1; line-height: 1;
position: absolute; position: absolute;
@ -451,19 +450,17 @@ div.ap-player div.ap-control-bar {
opacity: 0; opacity: 0;
transition: opacity 0.15s linear; transition: opacity 0.15s linear;
user-select: none; user-select: none;
border-top: 2px solid color-mix(in oklab, black 33%, var(--term-color-background));
z-index: 30; z-index: 30;
} }
div.ap-player div.ap-control-bar * { div.ap-player div.ap-control-bar * {
box-sizing: inherit; box-sizing: inherit;
font-size: 0;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
} }
div.ap-control-bar svg.ap-icon path { div.ap-control-bar svg.ap-icon path {
fill: #bbb; fill: var(--term-color-foreground);
} }
div.ap-control-bar span.ap-playback-button { div.ap-control-bar span.ap-playback-button {
display: block; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
height: 12px; height: 12px;
@ -475,19 +472,21 @@ div.ap-control-bar span.ap-playback-button svg {
width: 12px; width: 12px;
} }
div.ap-control-bar span.ap-timer { div.ap-control-bar span.ap-timer {
display: block; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
min-width: 50px; min-width: 50px;
margin: 0 10px; margin: 0 10px;
height: 100%; height: 100%;
text-align: center; text-align: center;
font-size: 11px; font-size: 13px;
line-height: 34px; line-height: 100%;
cursor: default; cursor: default;
} }
div.ap-control-bar span.ap-timer span { div.ap-control-bar span.ap-timer span {
display: inline-block; font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace;
font-size: inherit; font-size: inherit;
font-weight: 600;
margin: auto;
} }
div.ap-control-bar span.ap-timer .ap-time-remaining { div.ap-control-bar span.ap-timer .ap-time-remaining {
display: none; display: none;
@ -496,7 +495,7 @@ div.ap-control-bar span.ap-timer:hover .ap-time-elapsed {
display: none; display: none;
} }
div.ap-control-bar span.ap-timer:hover .ap-time-remaining { div.ap-control-bar span.ap-timer:hover .ap-time-remaining {
display: inline; display: flex;
} }
div.ap-control-bar .ap-progressbar { div.ap-control-bar .ap-progressbar {
display: block; display: block;
@ -518,14 +517,15 @@ div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter {
left: 0; left: 0;
right: 0; right: 0;
height: 3px; height: 3px;
background-color: #333;
} }
div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter .ap-gutter-fill { div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter-empty {
display: inline-block; background-color: color-mix(in oklab, var(--term-color-foreground) 20%, var(--term-color-background));
height: 100%; }
background-color: #bbb; div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter-full {
width: 100%;
transform-origin: left center;
background-color: var(--term-color-foreground);
border-radius: 3px; border-radius: 3px;
z-index: 10;
} }
div.ap-control-bar.ap-seekable .ap-progressbar .ap-bar { div.ap-control-bar.ap-seekable .ap-progressbar .ap-bar {
cursor: pointer; cursor: pointer;
@ -537,24 +537,30 @@ div.ap-control-bar .ap-fullscreen-button {
height: 14px; height: 14px;
padding: 9px; padding: 9px;
cursor: pointer; cursor: pointer;
position: relative;
} }
div.ap-control-bar .ap-fullscreen-button svg { div.ap-control-bar .ap-fullscreen-button svg {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
div.ap-control-bar .ap-fullscreen-button svg:first-child { div.ap-control-bar .ap-fullscreen-button svg.ap-icon-fullscreen-on {
display: inline; display: inline;
} }
div.ap-control-bar .ap-fullscreen-button svg:last-child { div.ap-control-bar .ap-fullscreen-button svg.ap-icon-fullscreen-off {
display: none; display: none;
} }
div.ap-control-bar .ap-fullscreen-button .ap-tooltip {
right: 5px;
left: initial;
transform: none;
}
div.ap-wrapper.ap-hud .ap-control-bar { div.ap-wrapper.ap-hud .ap-control-bar {
opacity: 1; opacity: 1;
} }
div.ap-wrapper:fullscreen .ap-fullscreen-button svg:first-child { div.ap-wrapper:fullscreen .ap-fullscreen-button svg.ap-icon-fullscreen-on {
display: none; display: none;
} }
div.ap-wrapper:fullscreen .ap-fullscreen-button svg:last-child { div.ap-wrapper:fullscreen .ap-fullscreen-button svg.ap-icon-fullscreen-off {
display: inline; display: inline;
} }
span.ap-progressbar span.ap-marker-container { span.ap-progressbar span.ap-marker-container {
@ -564,7 +570,6 @@ span.ap-progressbar span.ap-marker-container {
width: 21px; width: 21px;
position: absolute; position: absolute;
margin-left: -10px; margin-left: -10px;
z-index: 9;
} }
span.ap-marker-container span.ap-marker { span.ap-marker-container span.ap-marker {
display: block; display: block;
@ -572,40 +577,42 @@ span.ap-marker-container span.ap-marker {
bottom: 12px; bottom: 12px;
left: 7px; left: 7px;
right: 7px; right: 7px;
background-color: #555; background-color: color-mix(in oklab, var(--term-color-foreground) 33%, var(--term-color-background));
position: absolute; position: absolute;
transition: top 0.1s, bottom 0.1s, left 0.1s, right 0.1s, background-color 0.1s; transition: top 0.1s, bottom 0.1s, left 0.1s, right 0.1s, background-color 0.1s;
border-radius: 50%; border-radius: 50%;
} }
span.ap-marker-container span.ap-marker.ap-marker-past { span.ap-marker-container span.ap-marker.ap-marker-past {
background-color: #bbb; background-color: var(--term-color-foreground);
} }
span.ap-marker-container span.ap-marker:hover, span.ap-marker-container span.ap-marker:hover,
span.ap-marker-container:hover span.ap-marker { span.ap-marker-container:hover span.ap-marker {
background-color: #bbb; background-color: var(--term-color-foreground);
top: 11px; top: 11px;
bottom: 10px; bottom: 10px;
left: 5px; left: 5px;
right: 5px; right: 5px;
} }
span.ap-marker-container span.ap-marker-tooltip { .ap-tooltip-container span.ap-tooltip {
visibility: hidden; visibility: hidden;
background-color: #333; background-color: var(--term-color-foreground);
color: #bbb; color: var(--term-color-background);
font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace;
font-weight: bold;
text-align: center; text-align: center;
padding: 2px 8px 0px 8px; padding: 0 0.5em;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
white-space: nowrap; white-space: nowrap;
/* Prevents the text from wrapping and makes sure the tooltip width adapts to the text length */ /* Prevents the text from wrapping and makes sure the tooltip width adapts to the text length */
font-size: 11px; font-size: 13px;
line-height: 2em; line-height: 2em;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
span.ap-marker-container:hover span.ap-marker-tooltip { .ap-tooltip-container:hover span.ap-tooltip {
visibility: visible; visibility: visible;
} }
.ap-player .ap-overlay { .ap-player .ap-overlay {
@ -680,6 +687,56 @@ span.ap-marker-container:hover span.ap-marker-tooltip {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
} }
.ap-player .ap-overlay-help {
background-color: rgba(0, 0, 0, 0.8);
container-type: inline-size;
}
.ap-player .ap-overlay-help > div {
font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
font-variant-ligatures: none;
max-width: 85%;
max-height: 85%;
font-size: 18px;
color: var(--term-color-foreground);
background-color: var(--term-color-background);
border-radius: 6px;
box-sizing: border-box;
margin-bottom: 32px;
}
.ap-player .ap-overlay-help > div .ap-line {
letter-spacing: normal;
overflow: hidden;
}
.ap-player .ap-overlay-help > div .ap-line span {
padding: 0;
display: inline-block;
height: 100%;
}
.ap-player .ap-overlay-help > div div {
padding: calc(min(4cqw, 40px));
font-size: calc(min(1.9cqw, 18px));
}
.ap-player .ap-overlay-help > div div p {
font-weight: bold;
margin: 0 0 2em 0;
}
.ap-player .ap-overlay-help > div div ul {
list-style: none;
padding: 0;
}
.ap-player .ap-overlay-help > div div ul li {
margin: 0 0 0.75em 0;
}
.ap-player .ap-overlay-help > div div kbd {
color: var(--term-color-background);
background-color: var(--term-color-foreground);
padding: 0.2em 0.5em;
border-radius: 0.2em;
font-family: inherit;
font-size: 0.85em;
border: none;
margin: 0;
}
.ap-player .ap-overlay-error span { .ap-player .ap-overlay-error span {
font-size: 8em; font-size: 8em;
} }

2
static/assets/asciinema-player.min.js vendored
View File

File diff suppressed because one or more lines are too long