diff --git a/.gitmodules b/.gitmodules index e69de29..c10a343 100644 --- a/.gitmodules +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src/Downpatch.Web/content"] + path = src/Downpatch.Web/content + url = https://github.com/VyPr-Red/content.git diff --git a/src/Downpatch.Web/Components/App.razor b/src/Downpatch.Web/Components/App.razor index c3672f8..dab4832 100644 --- a/src/Downpatch.Web/Components/App.razor +++ b/src/Downpatch.Web/Components/App.razor @@ -5,21 +5,36 @@ + + + + + + + + + - - + + + + + + diff --git a/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor b/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor new file mode 100644 index 0000000..b1655b5 --- /dev/null +++ b/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor @@ -0,0 +1,165 @@ +@using Downpatch.Web.Components.Guide.Models +@using Microsoft.AspNetCore.Components.Web + +
+ +
+ +
+ + @if (!string.IsNullOrWhiteSpace(Info.Game)) + { +
@Info.Game
+ } + +

@Info.Title

+ +
+ + @if (!string.IsNullOrWhiteSpace(Info.MissionNumber)) + { +
+ @Info.MissionNumber +
+ } + +
+ + @if (!string.IsNullOrWhiteSpace(Info.HeroImage)) + { + @Info.Title + } + + @if (!string.IsNullOrWhiteSpace(Info.MapName)) + { +
+ +
+ Map +
+ +
+ @Info.MapName?.ToUpperInvariant() +
+ +
+ } + + @if (Info.Goals.Any()) + { +
+ +
+ Goals +
+ +
+ + + + + + + +
+ + @foreach (var goal in Info.Goals) + { +
+ +
+ + + @goal.Label +
+ +
+ + + + @(difficulty switch + { + "Easy" => goal.Easy, + "Legendary" => goal.Legendary, + "LASO" => goal.Laso, + _ => goal.Easy + }) + + + +
+ +
+ } + +
+ } + +
+ +
+ Navigation +
+ +
+ + @if (!string.IsNullOrWhiteSpace(Info.PreviousName)) + { + + ← @Info.PreviousName + + } + +
+ @Info.Title +
+ + @if (!string.IsNullOrWhiteSpace(Info.NextName)) + { + + @Info.NextName → + + } + +
+ +
+ +
+ +@code +{ + [Parameter] + public required LevelInfo Info { get; set; } + + private void ShowEasy() => difficulty = "Easy"; + + private void ShowLegendary() => difficulty = "Legendary"; + + private void ShowLASO() => difficulty = "LASO"; + + private string difficulty = "Easy"; + + private void SetDifficulty(string value) + { + difficulty = value; + } +} diff --git a/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor.css b/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor.css new file mode 100644 index 0000000..0458714 --- /dev/null +++ b/src/Downpatch.Web/Components/Guide/LevelInfoCard.razor.css @@ -0,0 +1,244 @@ +.level-card { + display: flex; + flex-direction: column; + gap: 1.5rem; + + padding: 1.5rem; + + border-radius: 22px; + + background: rgba(18,22,28,.82); + backdrop-filter: blur(18px); + + border: 1px solid rgba(255,255,255,.08); + + box-shadow: 0 18px 50px rgba(0,0,0,.35); +} + +.level-header { + + display: flex; + + justify-content: space-between; + + align-items: flex-start; + + gap: 1rem; + +} + +.level-game { + + text-transform: uppercase; + + letter-spacing: .12em; + + font-size: .72rem; + + color: #8b9097; + + margin-bottom: .35rem; + +} + +.level-title { + + margin: 0; + + font-size: 1.6rem; + + line-height: 1.15; + +} + +.level-mission-number { + + white-space: nowrap; + + padding: .45rem .9rem; + + border-radius: 999px; + + background: rgba(246,182,76,.12); + + color: #F6B64C; + + font-weight: 600; + + font-size: .82rem; + +} + +.level-image { + + width: 100%; + + border-radius: 16px; + + display: block; + + aspect-ratio: 16 / 9; + + object-fit: cover; + +} + +.level-section { + + display: flex; + + flex-direction: column; + + gap: .85rem; + +} + +.section-title { + + text-transform: uppercase; + + letter-spacing: .12em; + + font-size: .72rem; + + color: #8b9097; + +} + +.goal-row { + + display: flex; + + align-items: center; + + justify-content: space-between; + + padding: .45rem 0; + +} + +.goal-name { + display: flex; + align-items: center; + gap: .75rem; + + font-size: .92rem; + font-weight: 500; + + min-width: 0; +} + +.goal-dot { + width: 10px; + height: 10px; + border-radius: 999px; + flex-shrink: 0; +} + +.goal-time { + display: flex; + justify-content: flex-end; + flex-shrink: 0; +} + +.goal-time strong { + font-size: .92rem; + font-weight: 600; +} + +.difficulty-toggle { + + display: flex; + + gap: .5rem; + +} + +.difficulty-toggle button { + + background: transparent; + + color: #9ca3af; + + border: 1px solid rgba(255,255,255,.10); + + transition: .18s; + +} + +.difficulty-toggle button.active { + + background: #F6B64C; + + color: #111; + + border-color: #F6B64C; + + font-weight: 600; + + box-shadow: + 0 0 0 1px rgba(246,182,76,.35), + 0 8px 24px rgba(246,182,76,.18); + +} + +.level-map-id { + display: inline-block; + width: fit-content; + + padding: .35rem .7rem; + + border-radius: 8px; + + background: rgba(255,255,255,.05); + + border: 1px solid rgba(255,255,255,.08); + + font-family: ui-monospace, + SFMono-Regular, + Menlo, + Consolas, + monospace; + + font-size: .9rem; + + font-weight: 600; + + letter-spacing: .08em; + + color: #e5e7eb; +} + +.level-navigation { + + display: flex; + + flex-direction: column; + + gap: .85rem; + +} + +.nav-link { + + color: #d7b16a; + + text-decoration: none; + + transition: color .15s ease; + +} + +.nav-link:hover { + + color: white; + +} + +.nav-current { + + font-weight: 700; + + color: #f3f4f6; + +} diff --git a/src/Downpatch.Web/Components/Guide/Models/GoalInfo.cs b/src/Downpatch.Web/Components/Guide/Models/GoalInfo.cs new file mode 100644 index 0000000..2c88f69 --- /dev/null +++ b/src/Downpatch.Web/Components/Guide/Models/GoalInfo.cs @@ -0,0 +1,14 @@ +namespace Downpatch.Web.Components.Guide.Models; + +public class GoalInfo +{ + public string Label { get; set; } = ""; + + public string Easy { get; set; } = ""; + + public string Legendary { get; set; } = ""; + + public string? Laso { get; set; } + + public string Accent { get; set; } = "#F6B64C"; +} diff --git a/src/Downpatch.Web/Components/Guide/Models/LevelInfo.cs b/src/Downpatch.Web/Components/Guide/Models/LevelInfo.cs new file mode 100644 index 0000000..0e033c4 --- /dev/null +++ b/src/Downpatch.Web/Components/Guide/Models/LevelInfo.cs @@ -0,0 +1,24 @@ +namespace Downpatch.Web.Components.Guide.Models; + +public class LevelInfo +{ + public string Title { get; set; } = ""; + + public string Game { get; set; } = ""; + + public string? MissionNumber { get; set; } + + public string HeroImage { get; set; } = ""; + + public string MapName { get; set; } = ""; + + public string PreviousName { get; set; } = ""; + + public string PreviousUrl { get; set; } = ""; + + public string NextName { get; set; } = ""; + + public string NextUrl { get; set; } = ""; + + public List Goals { get; set; } = []; +} diff --git a/src/Downpatch.Web/Components/Layout/MainLayout.razor b/src/Downpatch.Web/Components/Layout/MainLayout.razor index 6175e7a..c777065 100644 --- a/src/Downpatch.Web/Components/Layout/MainLayout.razor +++ b/src/Downpatch.Web/Components/Layout/MainLayout.razor @@ -7,7 +7,10 @@

- downpatch.com + + ⬢ + DOWNPATCH +

} @@ -129,6 +160,7 @@ else private string? _leaderboard; private string? _discord; + private LevelInfo? _levelInfo; private IReadOnlyList _toc = Array.Empty(); private string _currentPath = "/guide"; @@ -159,6 +191,7 @@ else _noIndex = true; _leaderboard = null; _discord = null; + _levelInfo = null; _headings = new(); return; } @@ -175,6 +208,7 @@ else _description = GetFm(fm, "description"); _leaderboard = GetFm(fm, "leaderboard"); _discord = GetFm(fm, "discord"); + _levelInfo = BuildLevelInfo(fm); if (string.IsNullOrWhiteSpace(_discord)) _discord = GetFm(fm, "discordurl"); @@ -291,6 +325,81 @@ else return new string(buf[..w]); } + private static string Get( + IReadOnlyDictionary fm, + string key) +{ + return fm.TryGetValue(key, out var value) + ? value + : ""; +} + + private static LevelInfo? BuildLevelInfo( + IReadOnlyDictionary fm) + { + if (!fm.ContainsKey("mission_number")) + return null; + + return new LevelInfo + { + Title = Get(fm, "title"), + + Game = Get(fm, "game"), + + MissionNumber = Get(fm, "mission_number"), + + MapName = Get(fm, "map_name"), + + HeroImage = Get(fm, "hero_image"), + + PreviousName = Get(fm, "previous_title"), + + PreviousUrl = Get(fm, "previous_url"), + + NextName = Get(fm, "next_title"), + + NextUrl = Get(fm, "next_url"), + + Goals = + [ + new GoalInfo + { + Label = "Beginner", + Accent = "#44d27b", + Easy = Get(fm,"goal_beginner_easy"), + Legendary = Get(fm,"goal_beginner_legendary"), + Laso = Get(fm,"goal_beginner_laso") + }, + + new GoalInfo + { + Label = "Intermediate", + Accent = "#1fb56a", + Easy = Get(fm,"goal_intermediate_easy"), + Legendary = Get(fm,"goal_intermediate_legendary"), + Laso = Get(fm, "goal_intermediate_laso") + }, + + new GoalInfo + { + Label = "Top 10", + Accent = "#4cbcff", + Easy = Get(fm,"goal_world_easy"), + Legendary = Get(fm,"goal_world_legendary"), + Laso = Get(fm, "goal_world_laso") + }, + + new GoalInfo + { + Label = "IL Record", + Accent = "#9d73ff", + Easy = Get(fm,"goal_il_easy"), + Legendary = Get(fm,"goal_il_legendary"), + Laso = Get(fm, "goal_il_laso") + } + ] + }; + } private static string GetEditUrl(string? slug) { diff --git a/src/Downpatch.Web/Components/Pages/GuideHome.razor b/src/Downpatch.Web/Components/Pages/GuideHome.razor index 90fd70c..a41e948 100644 --- a/src/Downpatch.Web/Components/Pages/GuideHome.razor +++ b/src/Downpatch.Web/Components/Pages/GuideHome.razor @@ -134,14 +134,21 @@ foreach (var entry in Index.AllEntries) { - if (!IsOneLevelDeepGameIndex(entry.Slug)) - continue; - var routeSlug = ToRouteSlug(entry.Slug); if (!Pages.TryGetRendered(routeSlug, out var page)) continue; + // Only index pages become cards + if (!entry.Slug.EndsWith("/index", StringComparison.OrdinalIgnoreCase)) + continue; + + // Only pages with a square image become cards + var square = GetFm(page.FrontMatter, "square_image"); + + if (string.IsNullOrWhiteSpace(square)) + continue; + var title = GetFm(page.FrontMatter, "nav_title") ?? GetFm(page.FrontMatter, "title") ?? @@ -149,12 +156,14 @@ var href = "/guide/" + routeSlug.Trim('/'); - var square = GetFm(page.FrontMatter, "square_image"); - var squarePath = !string.IsNullOrWhiteSpace(square) - ? ToContentPath(routeSlug, square!) - : null; + var squarePath = ToContentPath(routeSlug, square); - list.Add(new GuideCard(routeSlug, entry.Slug, title, href, squarePath)); + list.Add(new GuideCard( + routeSlug, + entry.Slug, + title, + href, + squarePath)); } return list @@ -162,22 +171,6 @@ .ToList(); } - private static bool IsOneLevelDeepGameIndex(string slug) - { - slug = (slug ?? "").Trim('/'); - - if (!slug.StartsWith("guide/", StringComparison.OrdinalIgnoreCase)) - return false; - - if (!slug.EndsWith("/index", StringComparison.OrdinalIgnoreCase)) - return false; - - var rel = slug["guide/".Length..]; // e.g. "halo/index" or "halo/haloreach/index" - var segs = rel.Split('/', StringSplitOptions.RemoveEmptyEntries); - - return segs.Length == 2; // "/index" - } - private static string ToRouteSlug(string fullSlug) { fullSlug = (fullSlug ?? "").Trim('/').Replace('\\', '/'); diff --git a/src/Downpatch.Web/Components/Pages/Home.razor b/src/Downpatch.Web/Components/Pages/Home.razor index c04a766..923f8b9 100644 --- a/src/Downpatch.Web/Components/Pages/Home.razor +++ b/src/Downpatch.Web/Components/Pages/Home.razor @@ -2,70 +2,100 @@ @using Microsoft.AspNetCore.Components.Web -Downpatch Wiki - speedrunning setup docs +Downpatch — The Open Speedrunning Knowledge Base + content="Master the run with Downpatch. Access precise setups, optimized routing, engine mechanics, and downpatching guides to eliminate execution guesswork." /> - + + content="The ultimate execution database. Get precise setups, downpatching guides, and technical routing to optimize your run." /> - + + content="Stop guessing on your setups. Access precise downpatching instructions, visual trick cues, and route logic." />
-

Wiki

-

Downpatch is a speedrunning setup wiki

+

Knowledge Base

+

+ The open knowledge base for faster runs. +

+

- Fast, practical reference pages for game setup, timing, versions, and downpatching. + Eliminate execution guesswork. Access community-driven breakdowns for difficult tricks, route optimization, engine exploitation, and legacy research.

-
-

What each page gives you

+ +
+

Learn the Meta

+ +

+ Whether you are learning your very first level or trying to optimize a legacy route, + get the exact tools, video cues, and execution breakdowns you need to level up your runs. +

+
    -
  • Timing method and LiveSplit expectations
    • -
  • Version requirements and downpatch notes
    • -
  • Links to official guides, rules, and Discords
    • +
  • Get consistent at tough skips
    • +
  • Understand the logic behind the routes
    • +
  • Visualize setups with video tutorials
    • +
  • Track your progress against benchmark times
-
-

Use it in 30 seconds

-
    -
  1. Open your game page in Guides
    2. -
  2. Apply the listed setup for your category
    3. -
  3. Follow links to community-owned resources
    4. -
-
+
+

Find the Next Skip

-
-

Community maintained

- This wiki is maintained by contributors. If you spot outdated setup info, submit a fix. + Equip yourself with the technical documentation needed to break open new levels, + troubleshoot inconsistent glitches, and dive deep into the game's core logic.

+ +
    +
  • Understand the precise parameters of a glitch
    • +
  • Visualize trigger volumes
    • +
  • Learn how the game handles asset loads
    • +
  • Develop new routing theories and strategies
    • +
+
+ +
+

Explore the Legacy

+

- Downpatch aims to be fully WCAG compliant and handle hosting complexity so communities can focus on writing and improving content. + See how the meta evolved. Trace the lineage of today's fastest strategies through a permanent + archive of route discoveries, retired world records, and the community breakthroughs that made them possible. +

+ +
    +
  • Study the origin of classic skips
    • +
  • Track the timeline of world record breakthroughs
    • +
  • Review legacy routes used in historic runs
    • +
  • Access community research and patch history
    • +
+ +

+ + Help document history on GitHub +

-

Contribute content on GitHub

+
diff --git a/src/Downpatch.Web/Components/Pages/Home.razor.css b/src/Downpatch.Web/Components/Pages/Home.razor.css index df9c945..f6428b4 100644 --- a/src/Downpatch.Web/Components/Pages/Home.razor.css +++ b/src/Downpatch.Web/Components/Pages/Home.razor.css @@ -1,6 +1,12 @@ .home-hero { - border-bottom: 1px solid var(--border); - background: var(--surface-2); + background: + linear-gradient( + 180deg, + rgba(255,255,255,.015), + rgba(255,255,255,0) + ); + + border-bottom: 1px solid rgba(255,255,255,.05); } .home-hero-inner { @@ -41,17 +47,46 @@ .home-action { display: inline-flex; align-items: center; - padding: .55rem .8rem; - border: 1px solid var(--border); + gap: .45rem; + + padding: .65rem 1rem; + border-radius: 999px; + text-decoration: none; + color: var(--text); - background: rgba(15,19,24,.55); + + border: 1px solid var(--border); + + background: rgba(255,255,255,.03); + + transition: + background .18s ease, + border-color .18s ease, + transform .18s ease; } .home-action:hover { - border-color: #3a4656; - background: rgba(19,26,34,.65); + transform: translateY(-1px); + + background: rgba(255,255,255,.05); + + border-color: var(--border-strong); +} + +.home-action.primary { + background: var(--accent); + + color: #08111d; + + border: 0; + + font-weight: 700; +} + +.home-action.primary:hover { + background: var(--accent-hover); } .home-action:focus-visible { @@ -59,12 +94,6 @@ outline-offset: 2px; } -.home-action.primary { - border-color: #3a4656; - background: #141c26; - font-weight: 650; -} - .home-body { max-width: var(--page-max); margin: 0 auto; @@ -78,15 +107,31 @@ } .home-card { - border: 1px solid var(--border); + background: #1b2331; + + border: 1px solid rgba(255,255,255,.06); + border-radius: 12px; - background: var(--surface-2); - padding: 1rem; + + padding: 1.25rem; + + transition: + border-color .15s ease, + transform .15s ease; +} + +.home-card:hover { + border-color: rgba(130,180,255,.18); } .home-h2 { - margin: 0 0 .6rem; + margin: 0 0 .85rem; + font-size: 1.1rem; + + font-weight: 700; + + letter-spacing: -.02em; } .home-list { @@ -95,7 +140,41 @@ } .home-list li { - margin: .45rem 0; + margin: .7rem 0; + + color: var(--muted); + + line-height: 1.6; +} + +.home-card, +.docs-left, +.docs-right, +.docs-header { + position: relative; +} + +.home-card::before, +.docs-left::before, +.docs-right::before, +.docs-header::before { + content: ""; + + position: absolute; + + left: 0; + right: 0; + top: 0; + + height: 1px; + + background: + linear-gradient( + 90deg, + transparent, + rgba(255,255,255,.08), + transparent + ); } @media (max-width: 980px) { diff --git a/src/Downpatch.Web/Downpatch.Web.csproj b/src/Downpatch.Web/Downpatch.Web.csproj index 826a5bb..dfae8f2 100644 --- a/src/Downpatch.Web/Downpatch.Web.csproj +++ b/src/Downpatch.Web/Downpatch.Web.csproj @@ -4,6 +4,7 @@ net10.0 enable enable + true true diff --git a/src/Downpatch.Web/Program.cs b/src/Downpatch.Web/Program.cs index b8912ae..2a8724c 100644 --- a/src/Downpatch.Web/Program.cs +++ b/src/Downpatch.Web/Program.cs @@ -14,7 +14,9 @@ public static void Main(string[] args) var builder = WebApplication.CreateBuilder(args); // Add services to the container. - builder.Services.AddRazorComponents(); + builder.Services + .AddRazorComponents() + .AddInteractiveServerComponents(); builder.Services.AddHttpContextAccessor(); builder.Services.AddRouting(); builder.Services.AddMemoryCache(o => @@ -33,8 +35,26 @@ public static void Main(string[] args) builder.Services.AddSingleton(sp => { var pipeline = new MarkdownPipelineBuilder() - .DisableHtml() + + // GitHub-style heading IDs .UseAutoIdentifiers(Markdig.Extensions.AutoIdentifiers.AutoIdentifierOptions.GitHub) + + // Enable nearly all standard Markdown + GFM features + .UseAdvancedExtensions() + + // Better table support + .UsePipeTables() + .UseGridTables() + + // GitHub task lists + .UseTaskLists() + + // ~~strikethrough~~, subscript, superscript + .UseEmphasisExtras() + + // {#custom-id .class} + .UseGenericAttributes() + .Build(); return pipeline; @@ -66,6 +86,7 @@ public static void Main(string[] args) { ctx.Response.Headers["Content-Security-Policy"] = "default-src 'self'; " + + "frame-src https://www.youtube.com https://www.youtube-nocookie.com; " + "base-uri 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none'; " + "script-src 'self' 'unsafe-inline'; " + "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; " + @@ -112,7 +133,8 @@ public static void Main(string[] args) app.UseStaticFiles(); app.MapRobots(); app.MapSitemap(); - app.MapRazorComponents(); + app.MapRazorComponents() + .AddInteractiveServerRenderMode(); using var scope = app.Services.CreateScope(); var pages = scope.ServiceProvider.GetRequiredService(); diff --git a/src/Downpatch.Web/Services/MarkdownPageService.cs b/src/Downpatch.Web/Services/MarkdownPageService.cs index a01c8e4..cab48b7 100644 --- a/src/Downpatch.Web/Services/MarkdownPageService.cs +++ b/src/Downpatch.Web/Services/MarkdownPageService.cs @@ -47,8 +47,20 @@ public bool TryGetRendered(string? slug, out RenderedPage page) var (fm, body) = ParseFrontMatter(markdown); var title = fm.TryGetValue("title", out var t) && !string.IsNullOrWhiteSpace(t) ? t : entry.Slug; + var placeholders = new Dictionary(); + + body = RewriteStrategyBlocks(body, placeholders); + var htmlBody = Markdown.ToHtml(body, _pipeline); + + foreach (var pair in placeholders) + { + htmlBody = htmlBody.Replace(pair.Key, pair.Value); + } + htmlBody = RewriteRelativeLinks(htmlBody, entry.Slug); + htmlBody = RewriteYoutubeEmbeds(htmlBody); + htmlBody = RewriteCallouts(htmlBody); page = new RenderedPage( Slug: entry.Slug, @@ -141,6 +153,258 @@ private static string RewriteRelativeLinks(string html, string slug) ); } + private static string RewriteYoutubeEmbeds(string html) + { + return System.Text.RegularExpressions.Regex.Replace( + html, + @"]*)>", + match => + { + var attrs = match.Groups[1].Value; + + string? video = null; + string title = "YouTube video"; + + // Optional title + var titleMatch = System.Text.RegularExpressions.Regex.Match( + attrs, + @"title=""([^""]+)""" + ); + + if (titleMatch.Success) + { + title = System.Net.WebUtility.HtmlEncode(titleMatch.Groups[1].Value); + } + + // id="..." + var idMatch = System.Text.RegularExpressions.Regex.Match( + attrs, + @"id=""([^""]+)""" + ); + + if (idMatch.Success) + { + video = $"https://www.youtube.com/embed/{idMatch.Groups[1].Value}"; + } + else + { + // url="..." + var urlMatch = System.Text.RegularExpressions.Regex.Match( + attrs, + @"url=""([^""]+)""" + ); + + if (urlMatch.Success) + { + video = ExtractYoutubeEmbedUrl(urlMatch.Groups[1].Value); + } + } + + if (string.IsNullOrWhiteSpace(video)) + return match.Value; + + return $""" +
+ +
+ """; + }, + System.Text.RegularExpressions.RegexOptions.IgnoreCase + ); + } + private string RewriteStrategyBlocks( + string markdown, + Dictionary placeholders) + { + return System.Text.RegularExpressions.Regex.Replace( + markdown, + @":::strategy\s*(.*?)\n\n(.*?):::", + match => + { + var header = match.Groups[1].Value; + var body = match.Groups[2].Value.Trim(); + + var data = new Dictionary(StringComparer.OrdinalIgnoreCase); + + foreach (var line in header.Split('\n')) + { + var trimmed = line.Trim(); + + if (string.IsNullOrWhiteSpace(trimmed)) + continue; + + var colon = trimmed.IndexOf(':'); + + if (colon <= 0) + continue; + + data[trimmed[..colon].Trim()] = + trimmed[(colon + 1)..].Trim(); + } + + string Get(string key) => + data.TryGetValue(key, out var value) + ? System.Net.WebUtility.HtmlEncode(value) + : ""; + + var renderedBody = Markdown.ToHtml(body, _pipeline); + + var key = $"%%STRATEGY_{placeholders.Count}%%"; + + placeholders[key] = $""" +
+ +
+

{Get("title")}

+
+ +
+ +
Difficulty
+
+ + {Get("difficulty")} + +
+ +
Time Save
+
+ + {Get("time-save")} + + + {(string.IsNullOrWhiteSpace(Get("compared-to")) + ? "" + : $"
over {Get("compared-to")}
")} +
+ +
Platform
+
+ {Get("platform")} +
+ +
Input
+
+ {Get("input")} +
+ +
Recommended
+
+ {Get("recommended")} +
+ +
Consistency
+
+ {Get("consistency")} +
+ +
+ +
+ {renderedBody} +
+ +
+ """; + + return key; + }, + System.Text.RegularExpressions.RegexOptions.Singleline | + System.Text.RegularExpressions.RegexOptions.IgnoreCase); + } + + private static string DifficultyClass(string difficulty) + { + return difficulty.Trim().ToLowerInvariant() switch + { + "beginner" => "beginner", + "intermediate" => "intermediate", + "advanced" => "advanced", + "il only" => "il-only", + "experimental" => "experimental", + _ => "" + }; + } + + private static string TimeSaveClass(string value) + { + var match = System.Text.RegularExpressions.Regex.Match(value, @"\d+"); + + if (!match.Success) + return ""; + + var seconds = int.Parse(match.Value); + + if (seconds >= 45) + return "legendary"; + + if (seconds >= 30) + return "major"; + + if (seconds >= 15) + return "great"; + + if (seconds >= 5) + return "good"; + + return "minor"; + } + + private static string ConsistencyClass(string consistency) + { + var digits = new string(consistency.Where(char.IsDigit).ToArray()); + + if (!int.TryParse(digits, out var value)) + return ""; + + if (value >= 80) + return "high"; + + if (value >= 50) + return "medium"; + + return "low"; + } + + private static string RewriteCallouts(string html) + { + return System.Text.RegularExpressions.Regex.Replace( + html, + @"
\s*

\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(.*?)

(.*?)
", + match => + { + var type = match.Groups[1].Value.ToLowerInvariant(); + var first = match.Groups[2].Value.Trim(); + var rest = match.Groups[3].Value; + + var title = type switch + { + "note" => "Note", + "tip" => "Tip", + "important" => "Important", + "warning" => "Warning", + "caution" => "Caution", + _ => "Note" + }; + + return $""" +
+
{title}
+
+

{first}

+ {rest} +
+
+ """; + }, + System.Text.RegularExpressions.RegexOptions.Singleline | + System.Text.RegularExpressions.RegexOptions.IgnoreCase); + } public readonly record struct RenderedPage( string Slug, @@ -149,5 +413,41 @@ public readonly record struct RenderedPage( IReadOnlyDictionary FrontMatter, DateTime LastModifiedUtc ); + + private static string? ExtractYoutubeEmbedUrl(string url) + { + if (string.IsNullOrWhiteSpace(url)) + return null; + + var uri = new Uri(url); + + string? videoId = null; + + if (uri.Host.Contains("youtu.be")) + { + videoId = uri.AbsolutePath.Trim('/'); + } + else + { + var query = System.Web.HttpUtility.ParseQueryString(uri.Query); + videoId = query["v"]; + } + + if (string.IsNullOrWhiteSpace(videoId)) + return null; + + var queryParams = System.Web.HttpUtility.ParseQueryString(uri.Query); + + var t = + queryParams["t"] ?? + queryParams["start"]; + + if (string.IsNullOrWhiteSpace(t)) + return $"https://www.youtube.com/embed/{videoId}"; + + t = t.TrimEnd('s'); + + return $"https://www.youtube.com/embed/{videoId}?start={t}"; + } } } diff --git a/src/Downpatch.Web/content b/src/Downpatch.Web/content new file mode 160000 index 0000000..c88473e --- /dev/null +++ b/src/Downpatch.Web/content @@ -0,0 +1 @@ +Subproject commit c88473e46aa923b700c62e0180f649781e117030 diff --git a/src/Downpatch.Web/wwwroot/css/markdown.css b/src/Downpatch.Web/wwwroot/css/markdown.css new file mode 100644 index 0000000..66e81d2 --- /dev/null +++ b/src/Downpatch.Web/wwwroot/css/markdown.css @@ -0,0 +1,282 @@ +/* Base alert */ + +.markdown-alert { + margin: 0.85rem 0; + padding: .75rem .9rem; + border-radius: 10px; +} + +.markdown-alert-title { + margin: 0 0 .35rem 0; + font-size: .92rem; +} + +/* Icon */ + +.markdown-alert-title svg { + width: 15px; + height: 15px; + + flex: 0 0 auto; + + fill: currentColor; +} + +/* Body */ + +.markdown-alert p { + margin: 0; +} + +.markdown-alert > p:last-child { + margin-top: .15rem; +} + +/* ---------------- Colors ---------------- */ + +.markdown-alert-note { + border-left-color: #4493f8; + background: rgba(68,147,248,.10); + color: #dbeafe; +} + +.markdown-alert-note .markdown-alert-title { + color: #6cb6ff; +} + +.markdown-alert-tip { + border-left-color: #3fb950; + background: rgba(63,185,80,.10); + color: #dcfce7; +} + +.markdown-alert-tip .markdown-alert-title { + color: #56d364; +} + +.markdown-alert-important { + border-left-color: #a371f7; + background: rgba(163,113,247,.10); + color: #ede9fe; +} + +.markdown-alert-important .markdown-alert-title { + color: #c297ff; +} + +.markdown-alert-warning { + border-left-color: #d29922; + background: rgba(210,153,34,.10); + color: #fef3c7; +} + +.markdown-alert-warning .markdown-alert-title { + color: #e3b341; +} + +.markdown-alert-caution { + border-left-color: #f85149; + background: rgba(248,81,73,.10); + color: #fee2e2; +} + +.markdown-alert-caution .markdown-alert-title { + color: #ff7b72; +} + +/* ========================================================== + Strategy Cards + ========================================================== */ + +.strategy-card { + margin: 2rem 0; + background: var(--surface-1); + border: 1px solid var(--border); + border-radius: 14px; + overflow: hidden; + position:relative; + background: + linear-gradient( + 180deg, + rgba(28,35,52,.92) 0%, + rgba(22,28,41,.98) 100%); +} + +.strategy-card::before{ + width:2px; + + background:rgba(90,169,255,.35); + + border-radius:2px 0 0 2px; +} + +.strategy-card-header { + display: flex; + justify-content: space-between; + align-items: center; + + padding:.85rem 1rem .4rem; +} + +.strategy-card-header h3{ + margin:0; + font-size:1.45rem; + font-weight:650; +} + +.strategy-card-meta{ + display:grid; + grid-template-columns:130px 1fr; + + row-gap:.85rem; + column-gap:1rem; + + max-width:520px; + + background:rgba(255,255,255,.02); + + border:1px solid rgba(255,255,255,.05); + + border-radius:10px; + + padding:1rem; + + margin:1rem; + margin-top:.35rem; +} + +.strategy-card-label{ + font-size:.68rem; + letter-spacing:.12em; + font-weight:700; + color:var(--text-muted); + + margin-bottom:.15rem; +} + +.strategy-card-value{ + font-size:1rem; + font-weight:550; + line-height:1.2; +} + +.strategy-card-value > *{ + margin:0; +} + +.strategy-card-content{ + padding:1rem; + + font-size:.94rem; + + line-height:1.6; + color:var(--text-muted); +} + +.strategy-card-content p{ + margin:.75rem 0; +} + +.strategy-card-content ul{ + margin:.5rem 0; +} + +.strategy-card-content li{ + margin:.15rem 0; +} + +.strategy-card-content strong{ + color:var(--text); +} + +.strategy-time-save{ + display:flex; + flex-direction:column; + align-items:flex-start; +} + +.strategy-time-value{ + font-size:1.05rem; + font-weight:700; +} + +.strategy-time-subtext{ + margin-top:.08rem; + + font-size:.72rem; + + color:var(--text-muted); +} + +.strategy-time-value.minor{ + color:#8fd3ff; +} + +.strategy-time-value.good{ + color:#56d7ff; +} + +.strategy-time-value.great{ + color:#58e98d; +} + +.strategy-time-value.major{ + color:#b88cff; +} + +.strategy-time-value.legendary{ + color:#ffd76b; + text-shadow:0 0 10px rgba(255,215,107,.18); +} + +.strategy-consistency.high{ + color:#49d17d; +} + +.strategy-consistency.medium{ + color:#ffcb4d; +} + +.strategy-consistency.low{ + color:#ff6b6b; +} + +/* Difficulty Pills */ + +.strategy-card-difficulty{ + padding:.18rem .55rem; + + font-size:.72rem; + + border-radius:999px; +} + +.strategy-card-difficulty.beginner { + color: #49d17d; + background: rgba(73,209,125,.12); + box-shadow: 0 0 10px rgba(73,209,125,.15); +} + +.strategy-card-difficulty.intermediate { + color: #4db3ff; + background: rgba(77,179,255,.12); + box-shadow: 0 0 10px rgba(77,179,255,.15); +} + +.strategy-card-difficulty.advanced { + color: #ffb347; + background: rgba(255,179,71,.12); + box-shadow: 0 0 10px rgba(255,179,71,.15); +} + +.strategy-card-difficulty.il-only { + color: #b78cff; + background: rgba(183,140,255,.12); + box-shadow: 0 0 12px rgba(183,140,255,.18); +} + +.strategy-card-difficulty.experimental { + color: #ff6bd6; + background: rgba(255,107,214,.12); + box-shadow: 0 0 12px rgba(255,107,214,.18); +} \ No newline at end of file diff --git a/src/Downpatch.Web/wwwroot/css/site.css b/src/Downpatch.Web/wwwroot/css/site.css index 072eb91..d503ba8 100644 --- a/src/Downpatch.Web/wwwroot/css/site.css +++ b/src/Downpatch.Web/wwwroot/css/site.css @@ -1,30 +1,94 @@ :root { - --bg: #0b0c0c; - --text: #f2f4f7; - --muted: #c2c8d1; - --surface-2: #0f1318; - --surface-3: #111418; - --border: #2b3440; - --link: #8bd3ff; - --visited: #c4b5ff; - --focus: #ffdd00; - --pad: 16px; - --radius: 12px; - --shadow: 0 1px 0 rgba(0,0,0,.35); - --lh: 1.6; + + /* ========= Colors ========= */ + + --bg: #090d13; + --bg-top: #0b0f16; + + --surface-1: #111827; + --surface-2: #182130; + --surface-3: #202b3d; + --surface-4: #2b3647; + + --text: #f5f7fb; + --muted: #96a6ba; + + --border: rgba(255,255,255,.055); + --border-strong: rgba(255,255,255,.10); + + --accent: #5da9ff; + --accent-hover: #86c4ff; + --accent-soft: rgba(93,169,255,.12); + + --link: var(--accent); + + --focus: #ffd84d; + + /* ========= Layout ========= */ + --page-max: 1600px; - --content-max: 86ch; + --content-max: 78ch; + + --pad: 16px; + + /* ========= Spacing ========= */ + + --space-1: .25rem; + --space-2: .5rem; + --space-3: .75rem; + --space-4: 1rem; + --space-5: 1.5rem; + --space-6: 2rem; + + --radius: 14px; + --radius-large: 20px; + + /* ========= Shadows ========= */ + + --shadow-sm: 0 3px 10px rgba(0,0,0,.22); + --shadow: 0 10px 28px rgba(0,0,0,.32); + --shadow-lg: 0 18px 50px rgba(0,0,0,.45); + + /* ========= Motion ========= */ + + --transition: .18s ease; + + /* ========= Typography ========= */ + + --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-heading: "Rajdhani", "Inter", sans-serif; + + --lh: 1.65; } -html, body { - height: 100%; +html { + min-height: 100%; + background: + radial-gradient(circle at top center, + rgba(90,140,220,.05), + transparent 45%), + radial-gradient(circle at bottom right, + rgba(35,70,120,.04), + transparent 40%), + linear-gradient( + 180deg, + var(--bg-top), + var(--bg) + ); + background-repeat: no-repeat; + background-size: 100% 100%; + background-color: #090d13; +} + +body { margin: 0; - padding: 0; - background: var(--bg); + min-height: 100vh; + + background: transparent; color: var(--text); - font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; - line-height: var(--lh); - text-rendering: optimizeLegibility; + + font: 400 1rem / var(--lh) var(--font-body); + -webkit-text-size-adjust: 100%; } @@ -34,66 +98,91 @@ html, body { box-sizing: border-box; } -img, svg, video, canvas { +img, +svg, +video, +canvas { + display: block; max-width: 100%; height: auto; } -p, ul, ol { - margin: 0 0 12px; +p, +ul, +ol { + margin: 0 0 var(--space-4); } -ul, ol { - padding-left: 20px; +ul, +ol { + padding-left: 1.25rem; } li { - margin: 8px 0; + margin: var(--space-2) 0; } hr { border: 0; border-top: 1px solid var(--border); - margin: 20px 0; + margin: var(--space-5) 0; } -h1, h2, h3 { - margin: 0 0 10px; - line-height: 1.25; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 .75rem; + + font-family: var(--font-heading); + + font-weight: 700; + + letter-spacing: .02em; + + line-height: 1.18; } h1 { - font-size: 2rem; + font-size: 2.35rem; } h2 { - font-size: 1.25rem; + font-size: 1.55rem; } h3 { - font-size: 1.05rem; + font-size: 1.2rem; } a { color: var(--link); - text-decoration: underline; - text-underline-offset: .18em; + + text-decoration: none; + + transition: + color var(--transition), + opacity var(--transition); } - a:visited { - color: var(--visited); - } +a:visited { + color: var(--link); +} - a:hover { - text-decoration-thickness: 2px; - } +a:hover { + color: var(--accent-hover); - a:active { - opacity: .9; - } + text-decoration: underline; -:focus { - outline: none; + text-underline-offset: .18em; + + text-decoration-thickness: 2px; +} + +a:active { + opacity: .9; } :focus-visible { @@ -107,25 +196,31 @@ input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { - border-radius: 6px; + border-radius: calc(var(--radius) / 2); } .skip-link { - position: absolute; - left: 0; - top: -48px; - padding: 10px 14px; - background: var(--bg); + position: fixed; + top: -120px; + left: 1rem; + z-index: 5000; + + padding: .75rem 1rem; + + background: var(--surface-1); color: var(--text); - border: 2px solid var(--focus); - border-radius: 8px; - z-index: 1000; + + border: 1px solid var(--border-strong); + border-radius: 12px; + + text-decoration: none; + transition: top .2s ease; } - .skip-link:focus-visible { - top: 8px; - left: 8px; - } +.skip-link:focus, +.skip-link:focus-visible { + top: 1rem; +} .muted { color: var(--muted); @@ -140,10 +235,10 @@ summary:focus-visible { position: absolute !important; width: 1px; height: 1px; - padding: 0; margin: -1px; + padding: 0; overflow: hidden; - clip: rect(0, 0, 0, 0); + clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @@ -152,280 +247,315 @@ button, .button { font: inherit; color: var(--text); - background: transparent; + + padding: 10px 14px; + + background: linear-gradient( + 180deg, + rgba(255,255,255,.025), + rgba(255,255,255,.01) + ); + border: 1px solid var(--border); - border-radius: 10px; - padding: 10px 12px; + border-radius: var(--radius); + cursor: pointer; + + transition: + background .18s, + border-color .18s, + transform .18s, + box-shadow .18s; } - button:hover, - .button:hover { - border-color: #3a4656; - } +button:hover, +.button:hover { + background: linear-gradient( + 180deg, + rgba(255,255,255,.05), + rgba(255,255,255,.02) + ); - button:active, - .button:active { - transform: translateY(1px); - } + border-color: var(--border-strong); + + transform: translateY(-1px); + + box-shadow: var(--shadow-sm); +} + +button:active, +.button:active { + transform: translateY(1px); + box-shadow: none; +} label { display: block; - margin: 0 0 6px; + margin-bottom: 6px; } -input, textarea, select { +input, +textarea, +select { + width: 100%; + max-width: 100%; + + padding: 10px 12px; + font: inherit; color: var(--text); + background: var(--surface-2); + border: 1px solid var(--border); border-radius: 10px; - padding: 10px 12px; - width: 100%; - max-width: 100%; } - input::placeholder, - textarea::placeholder { - color: #9aa3ad; - opacity: 1; - } +input::placeholder, +textarea::placeholder { + color: #9aa3ad; + opacity: 1; +} - input:disabled, - textarea:disabled, - select:disabled { - opacity: .65; - cursor: not-allowed; - } +input:disabled, +textarea:disabled, +select:disabled { + opacity: .65; + cursor: not-allowed; +} .help-text { - color: var(--muted); margin-top: 6px; + color: var(--muted); } table { width: 100%; - border-collapse: collapse; margin: 12px 0; + + border-collapse: collapse; } -th, td { - border: 1px solid var(--border); +th, +td { padding: 10px; + text-align: left; vertical-align: top; + + border: 1px solid var(--border); } th { background: var(--surface-2); } -code, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +code, +pre { + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + "Liberation Mono", + "Courier New", + monospace; + font-size: .95em; } pre { + padding: 12px; + + overflow: auto; + background: var(--surface-2); + border: 1px solid var(--border); border-radius: 12px; - padding: 12px; - overflow: auto; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; - transition: none !important; animation: none !important; + transition: none !important; } } .site-header { - margin: 16px auto 0; - max-width: var(--page-max); + position: sticky; + top: 0; + z-index: 1000; + + padding: 12px 24px; + + background: rgba(11,15,22,.88); + + backdrop-filter: blur(12px); + + border-bottom: 1px solid var(--border); + + max-width: none; } .site-header-inner { display: flex; align-items: center; justify-content: space-between; - gap: 12px; - padding: 12px 14px; - border-radius: 14px; - background: var(--surface-2); - box-shadow: 0 0 0 1px rgba(255,255,255,.04); + + max-width: var(--page-max); + + margin: 0 auto; + + padding: 0; + + background: transparent; + + border: 0; + + box-shadow: none; } .site-brand { margin: 0; - font-size: 1.05rem; - line-height: 1.2; - text-transform: lowercase; - letter-spacing: .02em; + + font-size: 1rem; + font-weight: 700; + + letter-spacing: .16em; + text-transform: uppercase; } .site-brand-link { + display: inline-flex; + align-items: center; + gap: .75rem; + color: var(--text); + text-decoration: none; } +.site-brand-mark { + color: var(--accent); + + font-size: 1.1rem; + + opacity: .9; +} + +.site-brand-text { + color: var(--text); + + letter-spacing: .18em; +} + .site-brand-link:hover { text-decoration: underline; text-underline-offset: .18em; } .site-header-nav { - display: inline-flex; + display: flex; + align-items: center; - gap: .45rem; + + gap: .3rem; } .site-header-link { display: inline-flex; align-items: center; - padding: .38rem .62rem; - border-radius: 999px; + + padding: .55rem .9rem; + + border-radius: var(--radius); + border: 1px solid transparent; + text-decoration: none; - color: var(--text); - font-size: .9rem; -} - .site-header-link:hover { - background: #131a22; - border-color: #3a4656; - text-decoration: none; - } + color: var(--muted); -.site-main { - max-width: 1600px; - margin: 12px auto 0; - padding: 0 var(--pad) 32px; - background: var(--surface-2); - border-radius: 16px; - box-shadow: 0 0 0 1px rgba(255,255,255,.04); + transition: + background .18s, + border-color .18s, + color .18s, + transform .18s; } -.site-main:focus, -.site-main:focus-visible { - outline: none; -} +.site-header-link:hover { + color: var(--text); -.site-footer { - margin-top: 28px; - padding-top: 16px; - border-top: 1px solid var(--border); - color: var(--muted); -} + background: rgba(255,255,255,.045); -.container { - max-width: var(--page-max); - margin: 0 auto; - padding: 0 var(--pad); -} + border-color: rgba(255,255,255,.06); -.doc-hero2 { - border-bottom: 1px solid var(--border); - background: var(--surface-2); - overflow: hidden; - border-radius: 16px; + transform: translateY(-1px); + + text-decoration: none; } - .doc-hero2[style*="--hero-image"] { - background-image: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.88)), var(--hero-image); - background-size: cover; - background-position: center; - } +.site-header-link.active { + color: white; + + background: rgba(93,169,255,.08); -.doc-hero2-inner { + border-color: rgba(93,169,255,.18); + + font-weight: 600; +} + +.site-main { + width: 100%; max-width: var(--page-max); + margin: 0 auto; - padding: 2.25rem var(--pad); -} -.site-main > .doc-hero2 { - margin-left: calc(var(--pad) * -1); - margin-right: calc(var(--pad) * -1); - margin-top: calc(var(--pad) * -1); - border-radius: 16px 16px 0 0; -} + padding: 0 var(--pad) 3rem; -.doc-kicker { - margin: 0 0 .5rem; - color: var(--muted); - font-weight: 650; - letter-spacing: .02em; - text-transform: uppercase; - font-size: .9rem; + background: transparent; } -.doc-title { - margin: 0; - font-size: clamp(1.75rem, 3.2vw, 2.5rem); - line-height: 1.15; +.site-main:focus, +.site-main:focus-visible { + outline: none; } -.doc-lead { - margin: .85rem 0 0; - max-width: 70ch; - font-size: 1.06rem; - color: var(--text); -} +.site-footer { + margin-top: 2rem; + padding-top: 1rem; -.doc-actions { - margin-top: 1rem; - display: flex; - gap: .5rem; - flex-wrap: wrap; -} + color: var(--muted); -.doc-action { - display: inline-flex; - align-items: center; - gap: .35rem; - padding: .45rem .65rem; - border: 1px solid var(--border); - border-radius: 999px; - text-decoration: none; - color: var(--text); - background: rgba(15,19,24,.55); + border-top: 1px solid var(--border); } - .doc-action:hover { - border-color: #3a4656; - background: rgba(19,26,34,.65); - } - - .doc-action:focus-visible { - outline: 3px solid var(--focus); - outline-offset: 2px; - } +/* ========================================= + Legacy document layout + Candidate for removal +========================================= */ -.doc-shell { +.container { max-width: var(--page-max); margin: 0 auto; - padding: 1.25rem var(--pad) 2.25rem; - display: grid; - grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); - gap: 28px; - align-items: start; -} - -.doc-nav { - position: sticky; - top: 16px; - align-self: start; - max-height: calc(100vh - 32px); - overflow: auto; - padding-right: 4px; + padding: 0 var(--pad); } .nav-card { - background: var(--surface-3); + background: linear-gradient( + 180deg, + rgba(255,255,255,.025), + rgba(255,255,255,.01) + ); + border: 1px solid var(--border); - border-radius: 14px; - box-shadow: var(--shadow); + + border-radius: var(--radius); + + box-shadow: var(--shadow-sm); } .nav-head { @@ -453,45 +583,64 @@ pre { gap: 6px; } +.nav-text { + display: block; + padding: .45rem .75rem; + border-radius: 8px; + text-decoration: none; +} + .nav-link { display: block; - padding: 9px 10px 9px 14px; - border-radius: 12px; + + padding: .55rem .75rem; + + border-radius: 8px; + + color: rgba(245,247,251,.62); + text-decoration: none; - color: var(--text); + border: 1px solid transparent; - line-height: 1.25; + + line-height: 1.35; + + transition: + color .15s ease, + background .15s ease; } - .nav-link:hover { - background: #131a22; - border-color: #3a4656; - } +.nav-link:hover { + color: white; - .nav-link:focus-visible { - outline: 3px solid var(--focus); - outline-offset: 2px; - } + background: rgba(255,255,255,.04); +} - .nav-link.is-current { - background: #141c26; - border-color: #3a4656; - font-weight: 650; - } +.nav-link.is-current { + color: var(--text); -.nav-list--nested { - margin: 6px 0 0 12px; - padding-left: 12px; - border-left: 1px solid var(--border); + font-weight: 600; + + background: rgba(255,255,255,.035); + + border-left: 2px solid var(--accent); } -.doc-content { - min-width: 0; +.nav-link:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 2px; } -.doc-article { - max-width: var(--content-max); - padding-top: .25rem; +.nav-list--nested { + margin: .4rem 0 .6rem; + + padding-left: .9rem; + + border-left: 1px solid var(--border); + + display: grid; + + gap: .15rem; } .prose h1 { @@ -499,40 +648,34 @@ pre { } .prose h2 { - margin-top: 2rem; - padding-top: .25rem; + margin-top: 3rem; } .prose h3 { - margin-top: 1.25rem; + margin-top: 2rem; } -.prose pre, -.prose table { - margin: 12px 0; +.prose p, +.prose ul, +.prose ol { + margin-bottom: 1.15rem; } -.doc-footer { - max-width: var(--content-max); - margin-top: 2rem; +.prose li { + margin: .45rem 0; } -@media (max-width: 980px) { - .doc-shell { - grid-template-columns: 1fr; - } +.prose img { + border-radius: 12px; +} - .doc-nav { - position: static; - max-height: none; - overflow: visible; - padding-right: 0; - } +.prose blockquote { + margin: 1.5rem 0; +} - .doc-article, - .doc-footer { - max-width: 100%; - } +.prose pre, +.prose table { + margin: 12px 0; } @media (max-width: 640px) { @@ -558,27 +701,45 @@ pre { .sticky-btn { display: inline-flex; align-items: center; - gap: 0.5rem; - padding: 0.65rem 0.8rem; - border-radius: 0.75rem; + gap: .5rem; + + padding: .6rem .8rem; + + background: rgba(20, 28, 38, .82); + backdrop-filter: blur(10px); + + color: var(--muted); text-decoration: none; - font-weight: 600; - background: #111827; - color: #ffffff; - box-shadow: 0 8px 20px rgba(0,0,0,0.25); - border: 1px solid rgba(255,255,255,0.12); + + border: 1px solid var(--border); + border-radius: 12px; + + box-shadow: none; + + transition: + color .18s ease, + background .18s ease, + border-color .18s ease, + transform .18s ease; } - .sticky-btn:hover, - .sticky-btn:focus-visible { - text-decoration: underline; - border-color: rgba(255,255,255,0.22); - } +.sticky-btn:hover, +.sticky-btn:focus-visible { + color: var(--text); - .sticky-btn i { - font-size: 1.1rem; - line-height: 1; - } + background: rgba(35, 47, 62, .9); + + border-color: rgba(93,169,255,.18); + + text-decoration: none; + + transform: translateY(-1px); +} + +.sticky-btn i { + font-size: 1rem; + opacity: .8; +} @media (max-width: 420px) { .sticky-label { @@ -593,91 +754,93 @@ pre { } } -.blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; - padding: 1rem 1rem 1rem 3.7rem; - color: white; -} +.docs-shell { + display: grid; - .blazor-error-boundary::after { - content: "An error has occurred."; - } + grid-template-columns: + 260px + minmax(0, 1fr) + 340px; -.darker-border-checkbox.form-check-input { - border-color: #929292; -} + gap: 32px; -.form-floating > .form-control-plaintext::placeholder, -.form-floating > .form-control::placeholder { - color: var(--bs-secondary-color); - text-align: end; -} + align-items: start; + + max-width: var(--page-max); -.form-floating > .form-control-plaintext:focus::placeholder, -.form-floating > .form-control:focus::placeholder { - text-align: start; -} -.docs-shell { - display: grid; - grid-template-columns: 280px minmax(0, 1fr) 260px; - gap: 24px; - padding: 24px 16px; - max-width: 1440px; margin: 0 auto; + + padding: 24px var(--pad); } .docs-left, .docs-right { position: sticky; - top: 16px; + top: 24px; align-self: start; - height: calc(100vh - 32px); - overflow: auto; + + height: calc(100vh - 48px); + + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; - scrollbar-gutter: stable; - scrollbar-width: auto; - scrollbar-color: #7fa2c7 #0d1420; - border-right: 1px solid var(--border, #2b3440); } .docs-right { - border-right: 0; - border-left: 1px solid var(--border, #2b3440); + border-left: 1px solid rgba(255,255,255,.08); } -.docs-left::-webkit-scrollbar, -.docs-right::-webkit-scrollbar { +.docs-left-inner::-webkit-scrollbar, +.docs-right-inner::-webkit-scrollbar { width: 12px; } -.docs-left::-webkit-scrollbar-track, -.docs-right::-webkit-scrollbar-track { +.docs-left-inner::-webkit-scrollbar-track, +.docs-right-inner::-webkit-scrollbar-track { background: #0d1420; } -.docs-left::-webkit-scrollbar-thumb, -.docs-right::-webkit-scrollbar-thumb { +.docs-left-inner::-webkit-scrollbar-thumb, +.docs-right-inner::-webkit-scrollbar-thumb { background: #7fa2c7; border-radius: 999px; border: 2px solid #0d1420; } -.docs-left-inner, +.docs-left-inner { + height: 100%; + padding: 18px 18px 32px; +} + .docs-right-inner { - padding: 12px 12px 24px 12px; + height: 100%; + padding: 18px 18px 32px; + display: flex; + flex-direction: column; + gap: 1.5rem; } .docs-left-title, .docs-right-title { - font-size: 12px; - font-weight: 600; + margin-bottom: 1rem; + + font-size: .7rem; + + font-weight: 700; + + letter-spacing: .18em; + text-transform: uppercase; - opacity: 0.8; - margin: 8px 0 12px; + + color: rgba(150,166,186,.55); } .docs-main { - min-width: 0; + border-left: 1px solid rgba(255,255,255,.03); + border-right: 1px solid rgba(255,255,255,.03); + + padding-inline: 3rem; } .docs-breadcrumb { @@ -724,51 +887,168 @@ pre { .docs-action { display: inline-flex; align-items: center; - gap: 8px; - text-decoration: none; - font-size: 14px; - padding: 6px 10px; - border: 1px solid var(--border, #2b3440); - border-radius: 10px; + gap: .5rem; + + padding: .45rem .8rem; + + border-radius: 999px; + + background: rgba(255,255,255,.025); + + border: 1px solid rgba(255,255,255,.06); + + color: var(--muted); + + transition: .18s ease; +} + +.docs-action:hover { + color: white; + + background: rgba(93,169,255,.08); + + border-color: rgba(93,169,255,.18); } .docs-content { padding: 4px 0 24px 0; } -.docs-footer { - border-top: 1px solid var(--border, #2b3440); - padding-top: 16px; - margin-top: 24px; +.docs-content a { + color: #8fbdea; } -.nav-list { - list-style: none; - padding-left: 0; - margin: 0; +.docs-content a:hover { + color: #cfe6ff; + + border-bottom-color: rgba(143,189,234,.45); } -.nav-list--nested { - padding-left: 14px; - margin-top: 6px; + +/* ===== Content Typography ===== */ + +.docs-content h2 { + margin-top: 3.5rem; + margin-bottom: 1rem; + + padding-bottom: .6rem; + + border-bottom: 1px solid rgba(255,255,255,.05); } -.nav-item { - margin: 2px 0; +.docs-content h3 { + margin-top: 2rem; + margin-bottom: .75rem; + + color: #d7e8ff; } -.nav-link, -.nav-text { +.docs-content h4 { + margin-top: 1.5rem; + margin-bottom: .5rem; + + color: #b9c7d8; +} + +.docs-content p { + margin-bottom: 1.2rem; + + color: rgba(245,247,251,.88); +} + +.docs-content ul, +.docs-content ol { + margin-bottom: 1.5rem; +} + +.docs-content li { + margin-bottom: .45rem; +} + +.docs-content img { display: block; - padding: 6px 8px; + max-width: 100%; + height: auto; + + margin: 0 auto; + + border-radius: 12px; + border: 1px solid rgba(255,255,255,.08); + + box-shadow: 0 12px 28px rgba(0,0,0,.35); +} + +.docs-content figure { + margin: 2rem 0; +} + +.docs-content figcaption { + margin-top: .75rem; + text-align: center; + color: var(--muted); + font-size: .9rem; + font-style: italic; +} + +.docs-content blockquote { + margin: 1.25rem 0; + + padding: .85rem 1rem; + + background: rgba(255,255,255,.01); + + border: 1px solid rgba(255,255,255,.04); + + border-left: 2px solid rgba(93,169,255,.22); + border-radius: 8px; - text-decoration: none; + + color: var(--muted); + + box-shadow: none; } - .nav-link.is-current { - font-weight: 600; - border: 1px solid var(--border, #2b3440); - } +.docs-content blockquote p:last-child { + margin-bottom: 0; +} + +.docs-content blockquote a { + color: var(--text); + font-weight: 500; +} + +.docs-content blockquote a:hover { + color: var(--accent-hover); +} + +.docs-content :not(pre) > code { + padding: .12rem .38rem; + + background: rgba(255,255,255,.05); + + border: 1px solid rgba(255,255,255,.06); + + border-radius: 6px; + + color: #b8d8ff; + + font-size: .9em; +} + +.docs-footer { + border-top: 1px solid var(--border, #2b3440); + padding-top: 16px; + margin-top: 24px; +} + +del { + text-decoration: line-through; + opacity: .75; +} + +.nav-item { + margin: 4px 0; +} .docs-otp { list-style: none; @@ -777,29 +1057,91 @@ pre { } .docs-otp-item { + position: relative; margin: 2px 0; } .docs-otp-link { display: block; - padding: 6px 8px; - border-radius: 8px; + + padding: 6px 12px; + + border-left: 2px solid transparent; + + color: var(--muted); + text-decoration: none; - font-size: 13px; - opacity: 0.9; + + font-size: .92rem; + + line-height: 1.4; + + transition: + color .18s ease, + border-color .18s ease, + background-color .18s ease; +} + +.docs-otp-link:hover { + color: var(--text); + + background: rgba(255,255,255,.025); + + border-left-color: rgba(120,170,220,.35); } + +.docs-otp-link.active { + color: white; + + font-weight: 600; + + border-left-color: var(--accent); + + background: rgba(93,169,255,.05); +} + .docs-otp-item.is-h3 .docs-otp-link { padding-left: 18px; - opacity: 0.85; + + font-size: .86rem; + + opacity: .8; } + .nav-group { display: block; - padding: 8px 8px 6px; - margin-top: 10px; - font-size: 12px; + + margin: 1.75rem 0 .5rem; + + padding: 0 .75rem; + + font-size: .68rem; + font-weight: 700; + + letter-spacing: .18em; + text-transform: uppercase; - opacity: 0.75; + + color: rgba(150,166,186,.55); + + user-select: none; +} + +.video-embed { + margin: 2rem 0; + aspect-ratio: 16 / 9; +} + +.video-embed iframe { + width: 100%; + height: 100%; + + border: 0; + + border-radius: 12px; + + box-shadow: var(--shadow); } @media (max-width: 1100px) { @@ -817,9 +1159,8 @@ pre { grid-template-columns: 1fr; } - .docs-left { - position: static; - height: auto; - border-right: 0; + .docs-left, + .docs-right { + overflow: visible; } -} +} \ No newline at end of file diff --git a/src/Downpatch.Web/wwwroot/js/guide.js b/src/Downpatch.Web/wwwroot/js/guide.js new file mode 100644 index 0000000..123223e --- /dev/null +++ b/src/Downpatch.Web/wwwroot/js/guide.js @@ -0,0 +1,44 @@ +window.initializeGuideTOC = () => { + + const headings = [...document.querySelectorAll("article h2[id], article h3[id]")]; + + if (!headings.length) + return; + + const links = new Map(); + + for (const h of headings) { + + const link = document.getElementById("toc-" + h.id); + + if (link) + links.set(h.id, link); + + } + + const observer = new IntersectionObserver(entries => { + + entries.forEach(entry => { + + if (!entry.isIntersecting) + return; + + for (const l of links.values()) + l.classList.remove("active"); + + const active = links.get(entry.target.id); + + active?.classList.add("active"); + + }); + + }, { + + rootMargin: "0px 0px -70% 0px", + threshold: 0 + + }); + + headings.forEach(h => observer.observe(h)); + +}; \ No newline at end of file