mirror of https://github.com/docker/docs.git
103 lines
3.2 KiB
HTML
103 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
</head>
|
|
|
|
<body class="bg-background-light text-base dark:bg-background-dark dark:text-white">
|
|
{{ partial "header.html" . }}
|
|
<main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
|
|
<!-- First column: visible on lg and xl -->
|
|
<div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
|
|
{{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
|
|
x-data @togglesidebar.window="
|
|
if ($store.showSidebar == false) {
|
|
document.body.classList.add('overflow-hidden');
|
|
$el.classList.remove('hidden');
|
|
$el.classList.add({{$classes}});
|
|
$store.showSidebar = true;
|
|
return;
|
|
}
|
|
document.body.classList.remove('overflow-hidden');
|
|
$el.classList.add('hidden');
|
|
$el.classList.remove({{$classes}});
|
|
$store.showSidebar = false;
|
|
"
|
|
>
|
|
<div class="w-full max-w-none lg:max-w-[300px] ml-auto p-2">
|
|
{{ block "left" . }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
{{- if ne .Params.sitemap false }}
|
|
data-pagefind-body
|
|
{{- end }}
|
|
class="min-w-0 px-4 pb-32">
|
|
{{ block "main" . }}
|
|
{{ end }}
|
|
</div>
|
|
<div class="sticky top-16 pb-32 h-screen hidden lg:block overflow-x-hidden overflow-y-scroll pr-2">
|
|
{{ block "right" . }}
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
<footer>{{ partialCached "footer.html" . }}</footer>
|
|
{{ with (.Store.Get "youtube") }}
|
|
<script>
|
|
(function() {
|
|
var tag = document.createElement('script');
|
|
tag.id = "youtube-iframe-api";
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
window.onYouTubeIframeAPIReady = function() {
|
|
var youtubeDivs = document.querySelectorAll(".youtube-video");
|
|
for (var i = 0; i < youtubeDivs.length; i++) {
|
|
createPlayer(youtubeDivs[i].id, youtubeDivs[i].dataset.videoId);
|
|
}
|
|
}
|
|
|
|
function createPlayer(domElementId, videoId) {
|
|
new YT.Player(domElementId, {
|
|
width: "100%",
|
|
height: "100%",
|
|
videoId: videoId,
|
|
playerVars: {
|
|
'rel': 0,
|
|
'iv_load_policy': 3,
|
|
'enablejsapi': 1,
|
|
'origin': window.location.origin
|
|
},
|
|
events: {
|
|
'onStateChange': function (event) {
|
|
onPlayerStateChange(event, videoId);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onPlayerStateChange(event, videoId) {
|
|
if (window.heap === undefined) return;
|
|
|
|
var properties = {
|
|
video_id: videoId,
|
|
page_path: window.location.pathname,
|
|
page_title: document.title,
|
|
};
|
|
|
|
if (event.data == YT.PlayerState.PLAYING) {
|
|
heap.track("Video Play", properties);
|
|
} else if (event.data == YT.PlayerState.PAUSED) {
|
|
heap.track("Video Paused", properties);
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
{{ end }}
|
|
</body>
|
|
|
|
</html>
|