spectre.console/docs/input/_layout.cshtml
Phil Scott 461348f2fb
Update asciinema (#648)
* Updating doc build dependencies

Updates playwright to latest version. This requires an update in how it is ran as part of the statiq build set up to ensure dependencies exist for the run.

Also brings misc packages up to date to fix vulnerabilities.

* Updates CI to use node v16 and dotnet 5

Playwright CLI currently needs net5 to execute. There is a PR in the works to get it running on net6 but until then the recommended steps it to have both installed.
2021-12-01 13:40:51 +01:00

166 lines
9.6 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="@Context.GetLink("/assets/styles.css")" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="@Context.GetLink("/assets/favicons/apple-touch-icon.png")">
<link rel="icon" type="image/png" sizes="32x32" href="@Context.GetLink("/assets/favicons/favicon-32x32.png")">
<link rel="icon" type="image/png" sizes="16x16" href="@Context.GetLink("/assets/favicons/favicon-16x16.png")">
@{
string title = Document.ContainsKey(Keys.Title) ? $"Spectre.Console - {Document.GetString(Keys.Title)}" : "Spectre.Console";
string description = Document.ContainsKey(Constants.Description) ? Document.GetString(Constants.Description) : "Spectre.Console is a .NET Standard 2.0 library that makes it easier to create beautiful console applications";
var card = Outputs.FirstOrDefault(i => i.GetString("DocId") == Model.Id.ToString());
var urlBase = $"https://{Document.GetString(Keys.Host)}/";
}
<title>@title</title>
<meta name="description" content="@description" />
@if(card != null){
<meta name="twitter:card" content="summary_large_image" />
<meta name="og:title" content="@title" />
<meta name="og:description" content="@description" />
<meta name="og:image" content="@(urlBase + card.Destination)" />
}
</head>
<body class="antialiased text-gray-600 min-h-full flex flex-col bg-gray-50">
<header class="flex-none text-sm font-medium bg-gradient-to-b from-gray-200 to-gray-100 ring-1 ring-gray-900 ring-opacity-5 shadow py-2 md:py-4">
<nav class="flex flex-row container mx-auto items-center">
<a class="flex flex-row items-center" href="@Context.GetLink("/")">
<img id="logo" class="w-auto h-10 md:h-12" height="48" width="48" src="@Context.GetLink("/assets/logo.svg")" alt="Spectre.Console">
<span class="text-lg md:text-2xl font-light ml-2 lg:ml-4 font-mono tracking-tighter">Spectre.Console</span>
</a>
<div class="ml-auto">
<ul class="flex flex-row">
<li>
<a class="flex flex-row items-center text-red-700" href="https://github.com/sponsors/patriksvensson">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<title>Sponsor</title>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span class="hidden sm:block">Sponsor</span>
</a>
</li>
<li class="ml-4">
<a class="flex flex-row items-center text-gray-600" href="https://github.com/spectreconsole/spectre.console">
<svg role="img" class="h-6 w-6 mr-2" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GitHub icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
<span class="hidden sm:block">GitHub</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container mx-auto pt-4 md:pt-8 w-full">
<div class="flex flex-col-reverse lg:flex-row">
<nav class="flex-none font-light text-sm xl:text-base sm:mr-16 mt-8 pt-6 lg:mt-0 lg:pt-0 border-t border-gray-300 lg:border-t-0">
@{
IDocument root = OutputPages["index.html"].First();
<div class="text-xl @(Document.IdEquals(root) ? "font-bold" : null)">
@if(root.ShowLink())
{
@Html.DocumentLink(root)
}
else
{
@root.GetTitle()
}
</div>
@foreach (IDocument document in OutputPages.GetChildrenOf(root).OrderBy(i => i.GetInt("Order")).OnlyVisible())
{
if(string.IsNullOrWhiteSpace(document.GetTitle()))
{
continue;
}
DocumentList<IDocument> documentChildren = OutputPages.GetChildrenOf(document);
<div class="text-blue-700 mt-4">
@if(document.ShowLink())
{
@Html.DocumentLink(document)
}
else
{
@document.GetTitle()
}
</div>
@if (documentChildren.OnlyVisible().Any())
{
<div class="ml-2 flex flex-row flex-wrap lg:flex-col border-separate">
@foreach (IDocument child in documentChildren.OnlyVisible())
{
<div class="mt-2 mr-4 @(Document.IdEquals(child) ? "font-bold" : null)">
@Html.DocumentLink(child)
</div>
}
</div>
}
}
}
</nav>
<article class="flex-1 min-w-0">
<header class="text-gray-800 mb-4">
<h1 class="text-4xl font-extrabold">@(Document.GetString(Keys.Title) ?? Document.GetTitle())</h1>
@RenderSection("subheading", required: false)
</header>
<div class="prose max-w-none prose-sm lg:prose lg:max-w-none 2xl:prose-xl 2xl:max-w-none text-gray-700 font-light">
@RenderBody()
</div>
</article>
</div>
</main>
<footer class="py-4 md:py-8 mt-8 bg-gray-100 text-sm border-t border-gray-200">
<div class="container">
<div class="flex flex-row">
<span>© @DateTime.Today.Year Patrik Svensson, Phil Scott</span>
<span class="ml-auto">@VersionUtilities.GetVersion()</span>
</div>
</div>
</footer>
<script>
// adapted from https://www.w3schools.com/howto/howto_js_filter_table.asp
function search(input, searchTarget, columnIndex) {
// Declare variables
var filter, table, tr, td, i, txtValue;
filter = input.value.toUpperCase();
table = document.getElementById(searchTarget);
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[columnIndex];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-zc7WDnCM3aom2EziyDIRAtQg1mVXLdILE09Bo+aE1xk0AM2c2cVLfSW9NrxE5tKTX44WBY0Z2HClZ05ur9vB6A==" crossorigin="anonymous"></script>
<script src="@Context.GetLink("/assets/asciinema-player.js")"></script>
<script>
document.querySelectorAll('asciinema-player').forEach(cast => {
AsciinemaPlayer.create(cast.attributes['src'].value, cast, {autoplay: true, fit: 'none', fontSize: 'inherit'});
});
</script>
</body>
</html>