Initial commit: Rapport Website (Hugo + Hextra)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
{{- /* Asciinema */ -}}
|
||||
|
||||
{{- $asciinemaBase := "" -}}
|
||||
{{- $useDefaultCdn := true -}}
|
||||
{{- with site.Params.asciinema.base -}}
|
||||
{{- $asciinemaBase = . -}}
|
||||
{{- $useDefaultCdn = false -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $asciinemaJsAsset := "" -}}
|
||||
{{- with site.Params.asciinema.js -}}
|
||||
{{- $asciinemaJsAsset = . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $asciinemaCssAsset := "" -}}
|
||||
{{- with site.Params.asciinema.css -}}
|
||||
{{- $asciinemaCssAsset = . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* If only js/css is set without base, use local asset loading */ -}}
|
||||
{{- if and $useDefaultCdn (or (ne $asciinemaJsAsset "") (ne $asciinemaCssAsset "")) -}}
|
||||
{{- $useDefaultCdn = false -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Set default CDN base if needed */ -}}
|
||||
{{- if $useDefaultCdn -}}
|
||||
{{- $asciinemaBase = "https://cdn.jsdelivr.net/npm/asciinema-player@latest/dist/bundle" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $isRemoteBase := or (strings.HasPrefix $asciinemaBase "http://") (strings.HasPrefix $asciinemaBase "https://") -}}
|
||||
{{- $minSuffix := cond hugo.IsProduction ".min" "" -}}
|
||||
|
||||
{{- /* CSS retrieval: get raw CSS from either local asset or remote, then process */ -}}
|
||||
{{- if $isRemoteBase -}}
|
||||
{{- $cssPath := cond (ne $asciinemaCssAsset "") $asciinemaCssAsset "asciinema-player.css" -}}
|
||||
{{- $asciinemaCssUrl := urls.JoinPath $asciinemaBase $cssPath -}}
|
||||
{{- with try (resources.GetRemote $asciinemaCssUrl) -}}
|
||||
{{- with .Err -}}
|
||||
{{- errorf "Could not retrieve Asciinema css file from %s. Reason: %s." $asciinemaCssUrl . -}}
|
||||
{{- else with .Value -}}
|
||||
{{- with resources.Copy "css/asciinema-player.css" . -}}
|
||||
{{- $asciinemaCss := . | fingerprint -}}
|
||||
<link rel="stylesheet" href="{{ $asciinemaCss.RelPermalink }}" integrity="{{ $asciinemaCss.Data.Integrity }}" crossorigin="anonymous" />
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else if $asciinemaCssAsset -}}
|
||||
{{- with resources.Get $asciinemaCssAsset -}}
|
||||
{{- $asciinemaCss := . | fingerprint -}}
|
||||
<link rel="stylesheet" href="{{ $asciinemaCss.RelPermalink }}" integrity="{{ $asciinemaCss.Data.Integrity }}" crossorigin="anonymous" />
|
||||
{{- else -}}
|
||||
{{- errorf "Asciinema css asset not found at %q" $asciinemaCssAsset -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
|
||||
{{- if $isRemoteBase -}}
|
||||
{{- $jsPath := cond (ne $asciinemaJsAsset "") $asciinemaJsAsset (printf "asciinema-player%s.js" $minSuffix) -}}
|
||||
{{- $asciinemaJsUrl := urls.JoinPath $asciinemaBase $jsPath -}}
|
||||
{{- with try (resources.GetRemote $asciinemaJsUrl) -}}
|
||||
{{- with .Err -}}
|
||||
{{- errorf "Could not retrieve Asciinema js file from %s. Reason: %s." $asciinemaJsUrl . -}}
|
||||
{{- else with .Value -}}
|
||||
{{- with resources.Copy (printf "js/asciinema-player%s.js" $minSuffix) . -}}
|
||||
{{- $asciinemaJs := . | fingerprint -}}
|
||||
<script defer src="{{ $asciinemaJs.RelPermalink }}" integrity="{{ $asciinemaJs.Data.Integrity }}" crossorigin="anonymous"></script>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else if $asciinemaJsAsset -}}
|
||||
{{- with resources.Get $asciinemaJsAsset -}}
|
||||
{{- $asciinemaJs := . | fingerprint -}}
|
||||
<script defer src="{{ $asciinemaJs.RelPermalink }}" integrity="{{ $asciinemaJs.Data.Integrity }}" crossorigin="anonymous"></script>
|
||||
{{- else -}}
|
||||
{{- errorf "Asciinema js asset not found at %q" $asciinemaJsAsset -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<script data-playback-time="{{ (T "playbackTime") | default "Playback time" }}">
|
||||
const playbackTimeLabel =
|
||||
document.currentScript?.getAttribute("data-playback-time") || "Playback time";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const observers = [];
|
||||
|
||||
const applyTimerA11y = (container) => {
|
||||
container.querySelectorAll(".ap-timer[role='textbox']").forEach((timer) => {
|
||||
if (!timer.getAttribute("aria-label")) {
|
||||
timer.setAttribute("aria-label", playbackTimeLabel);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Fix play button position issue
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.ap-player .ap-overlay-start .ap-play-button span > svg {
|
||||
display: inline;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
// Initialize asciinema players
|
||||
document.querySelectorAll(".asciinema-player").forEach((el) => {
|
||||
const castFile = el.dataset.castFile;
|
||||
const theme = el.dataset.theme || "asciinema";
|
||||
const speed = parseFloat(el.dataset.speed) || 1;
|
||||
const autoplay = el.dataset.autoplay === "true";
|
||||
const loop = el.dataset.loop === "true";
|
||||
const poster = el.dataset.poster || "";
|
||||
const markers = el.dataset.markers ? JSON.parse(el.dataset.markers) : [];
|
||||
|
||||
// Create asciinema player
|
||||
if (window.AsciinemaPlayer) {
|
||||
window.AsciinemaPlayer.create(castFile, el, {
|
||||
theme: theme,
|
||||
speed: speed,
|
||||
autoplay: autoplay,
|
||||
loop: loop,
|
||||
poster: poster || undefined,
|
||||
markers: markers.length > 0 ? markers : undefined,
|
||||
controls: true, // Always show user controls (bottom control bar)
|
||||
idleTimeLimit: 2, // Limit terminal inactivity to 2 seconds (compress pauses longer than 2s)
|
||||
});
|
||||
applyTimerA11y(el);
|
||||
const observer = new MutationObserver(() => applyTimerA11y(el));
|
||||
observer.observe(el, { childList: true, subtree: true });
|
||||
observers.push(observer);
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent lingering observers when navigating away.
|
||||
window.addEventListener(
|
||||
"pagehide",
|
||||
() => {
|
||||
observers.forEach((observer) => observer.disconnect());
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user