Update dotnet-cheatsheet.html
· 1 year ago
cbcddca3fdd181a6c4d4f41bb900ed29f11411c8
Parent:
9fac3151e
1 file changed +233 −79
- dotnet-cheatsheet.html +233 −79
Diff
--- a/dotnet-cheatsheet.html +++ b/dotnet-cheatsheet.html @@ -8,16 +8,16 @@ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>#️⃣</text></svg>"> <!-- SEO Meta Description --> - <meta name="description" content="Comprehensive and interactive cheatsheet for the .NET ecosystem and C# language. Explore modern .NET (Core) versions, key C# features, major components, libraries, frameworks like ASP.NET Core, MAUI, EF Core, and essential tooling for senior developers and architects."> + <meta name="description" content="Comprehensive and interactive cheatsheet for the .NET ecosystem and C# language. Explore modern .NET versions (.NET 9), key C# 13 features, major components, libraries, frameworks like ASP.NET Core, MAUI, EF Core, and essential tooling for senior developers and architects."> <!-- Keywords --> - <meta name="keywords" content=".NET, C#, Cheatsheet, .NET Core, ASP.NET Core, MAUI, EF Core, C# Language Features, .NET SDK, .NET Runtime, Visual Studio, NuGet, Programming Guide, Software Development, Microsoft Technologies, .NET 8, C# 12, Modern .NET"> + <meta name="keywords" content=".NET, C#, Cheatsheet, .NET Core, ASP.NET Core, MAUI, EF Core, C# Language Features, .NET SDK, .NET Runtime, Visual Studio, NuGet, Programming Guide, Software Development, Microsoft Technologies, .NET 9, C# 13, Modern .NET"> <!-- Canonical URL --> <link rel="canonical" href="https://cheatsheets.davidveksler.com/dotnet-cheatsheet.html"> <!-- Social Media Metadata (Open Graph) --> <meta property="og:title" content="Interactive .NET & C# Cheatsheet: Modern Frameworks, Libraries & Language Features Guide"> - <meta property="og:description" content="An in-depth visual guide to the .NET platform, latest C# language features, ASP.NET Core, .NET MAUI, EF Core, essential libraries, and architectural concepts for modern .NET development. Perfect for developers and architects."> + <meta property="og:description" content="An in-depth visual guide to the .NET platform, latest C# language features (C# 13), ASP.NET Core, .NET MAUI, EF Core, essential libraries, and architectural concepts for modern .NET development (up to .NET 9). Perfect for developers and architects."> <meta property="og:type" content="article"> <meta property="og:url" content="https://cheatsheets.davidveksler.com/dotnet-cheatsheet.html"> <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/dotnet-cheatsheet.png"> @@ -31,7 +31,7 @@ <!-- Twitter Card Metadata --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Interactive .NET & C# Cheatsheet: Modern Frameworks & Language Guide"> - <meta name="twitter:description" content="Explore the .NET platform, C# language, ASP.NET Core, MAUI, EF Core, and more with this visual guide for modern .NET developers and architects."> + <meta name="twitter:description" content="Explore the .NET platform, C# language (C# 13), ASP.NET Core, MAUI, EF Core, and more with this visual guide for modern .NET developers and architects (up to .NET 9)."> <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/dotnet-cheatsheet.png"> <meta name="twitter:image:alt" content="Visual overview of the .NET and C# ecosystem for developers. Highlights frameworks like ASP.NET Core, MAUI, and core language features."> <!-- Optional: <meta name="twitter:site" content="@YourTwitterHandle"> --> @@ -42,8 +42,8 @@ { "@context": "https://schema.org", "@type": "TechArticle", - "headline": "Interactive .NET & C# Language Cheatsheet - Modern Ecosystem Overview", - "description": "A comprehensive and interactive cheatsheet for the .NET ecosystem and C# language, covering modern .NET versions, key C# features, major components, libraries, frameworks (ASP.NET Core, MAUI, EF Core), and tooling for senior developers and architects.", + "headline": "Interactive .NET & C# Language Cheatsheet - Modern Ecosystem Overview (.NET 9, C# 13)", + "description": "A comprehensive and interactive cheatsheet for the .NET ecosystem and C# language, covering modern .NET versions (up to .NET 9), key C# 13 features, major components, libraries, frameworks (ASP.NET Core, MAUI, EF Core), and tooling for senior developers and architects.", "image": "https://cheatsheets.davidveksler.com/images/dotnet-cheatsheet.png", "author": { "@type": "Person", @@ -64,7 +64,7 @@ "@type": "WebPage", "@id": "https://cheatsheets.davidveksler.com/dotnet-cheatsheet.html" }, - "keywords": ".NET, C#, Cheatsheet, .NET Core, ASP.NET Core, MAUI, EF Core, C# Language Features, .NET SDK, .NET Runtime, LINQ, Async Programming, Visual Studio, NuGet, .NET Architecture, Software Development, Programming Guide" + "keywords": ".NET, C#, Cheatsheet, .NET Core, .NET 9, C# 13, ASP.NET Core, MAUI, EF Core, C# Language Features, .NET SDK, .NET Runtime, LINQ, Async Programming, Visual Studio, NuGet, .NET Architecture, Software Development, Programming Guide" } </script> @@ -127,7 +127,7 @@ padding: 2.5rem 1.5rem; text-align: center; border-bottom: 2px solid var(--schema-border-color); - margin-bottom: 3rem; + margin-bottom: 1.5rem; /* Reduced margin to bring controls closer */ position: relative; z-index: 10; box-shadow: 0 4px 15px rgba(81, 43, 212, 0.1); @@ -142,6 +142,36 @@ .page-header h1 .bi { font-size: 0.9em; vertical-align: -0.05em; margin-right: 0.3em;} .page-header .lead { color: #343a40; font-size: 1.15rem; max-width: 800px; margin: auto; } + #filter-controls { + background-color: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(5px); + padding: 1rem; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.07); + margin-bottom: 2rem; + position: sticky; + top: 10px; /* Adjust as needed */ + z-index: 100; /* Ensure it's above other content */ + } + + #category-filters .btn { + margin: 0.25rem; + font-size: 0.9rem; + } + #category-filters .btn.active { + background-color: var(--bs-primary); + color: white; + border-color: var(--bs-primary-dark); + } + #search-box { + border-color: var(--schema-border-color); + } + #search-box:focus { + border-color: var(--bs-primary); + box-shadow: 0 0 0 0.25rem rgba(81, 43, 212, 0.25); + } + + .schema-container { background-color: var(--schema-bg-color); border: 2px solid var(--schema-border-color); @@ -180,7 +210,7 @@ border-radius: 4px; /* Softer radius */ box-shadow: 0 3px 8px var(--card-shadow-color); height: 100%; - display: flex; + display: flex; /* Keep flex for consistent layout */ flex-direction: column; transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.2s ease; position: relative; @@ -188,25 +218,18 @@ opacity: 1; } - #main-container.is-dimmed .schema-container:not(.is-highlighted-section) .info-card { - opacity: 0.35; transform: scale(0.98); - } - #main-container.is-dimmed .schema-container:not(.is-highlighted-section) > .section-title { - opacity: 0.4; - } - .info-card.is-highlighted { - opacity: 1 !important; - transform: scale(1.02) !important; + transform: scale(1.01); /* Subtle scale for focused card */ box-shadow: 0 0 0 3px var(--db-category-color), 0 8px 16px rgba(0, 50, 130, .2) !important; z-index: 25 !important; } .info-card:not(.is-highlighted):hover { box-shadow: 0 5px 12px rgba(0, 60, 150, .18); - transform: translateY(-2px); + transform: translateY(-2px); /* Keep hover transform for individual cards */ z-index: 20; } + .info-card .card-body { padding: 0; flex-grow: 1; display: flex; flex-direction: column; } .info-card h5 { color: #fff; background-color: var(--db-category-color); /* Uses card's specific color */ @@ -215,8 +238,22 @@ gap: .5rem; font-family: 'Segoe UI Semibold', Consolas, Menlo, Monaco, 'Courier New', monospace; border-bottom: 1px solid var(--card-border-color); border-radius: 3px 3px 0 0; /* Match card radius */ + position: relative; /* For version tag positioning */ } .info-card h5 .bi { font-size: 1.2em; color: #fff; opacity: 0.85; } + + .version-tag { + font-size: 0.65rem; + font-weight: normal; + background-color: rgba(0,0,0,0.2); + color: #fff; + padding: 0.1em 0.4em; + border-radius: 3px; + margin-left: 0.5em; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + } + + .card-content-wrapper { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; } .info-card p.summary { font-size: .9rem; color: var(--text-color-secondary); margin-bottom: .8rem; flex-grow: 1; line-height: 1.6; } @@ -273,18 +310,29 @@ <body> <header class="page-header"> <h1><i class="bi bi-box-seam" aria-hidden="true"></i> .NET & C# Language Cheatsheet</h1> - <p class="lead">An interactive guide to modern .NET components, C# language features, frameworks, and libraries for architects & senior developers.</p> + <p class="lead">An interactive guide to modern .NET components, C# language features, frameworks, and libraries for architects & senior developers (Covering .NET 9 & C# 13).</p> </header> + +<div class="container"> + <div id="filter-controls" class="mb-4"> + <input type="search" id="search-box" class="form-control mb-3" placeholder="Search topics, features, keywords..."> + <div id="category-filters" class="btn-toolbar" role="toolbar" aria-label="Category Filters"> + <!-- Filter buttons will be injected here by JavaScript --> + </div> + <div id="no-results" class="alert alert-info mt-3" style="display: none;">No items match your criteria. Please try a different search or filter.</div> + </div> +</div> + <div class="container" id="main-container"> <!-- I. .NET PLATFORM FOUNDATION --> - <div class="schema-container section-platform" data-section-id="section-platform-foundation"> + <div class="schema-container section-platform" data-section-id="section-platform-foundation" data-section-name=".NET Platform"> <h2 class="section-title" id="section-platform-foundation">.NET Platform Foundation</h2> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="info-card card-platform" id="card-dotnet-sdk"> <div class="card-body"> - <h5><i class="bi bi-tools" aria-hidden="true"></i> .NET SDK</h5> + <h5><i class="bi bi-tools" aria-hidden="true"></i> .NET SDK <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">The <span class="term">Software Development Kit</span> providing tools to <span class="term">develop, build, test, and publish</span> .NET applications. Includes the .NET CLI, compilers, and runtime. <a href="https://learn.microsoft.com/en-us/dotnet/core/sdk" target="_blank" rel="noopener noreferrer">SDK Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDotnetSdk" aria-expanded="false" aria-controls="collapseDotnetSdk"> @@ -310,7 +358,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-platform" id="card-dotnet-runtime"> <div class="card-body"> - <h5><i class="bi bi-cpu" aria-hidden="true"></i> .NET Runtime</h5> + <h5><i class="bi bi-cpu" aria-hidden="true"></i> .NET Runtime <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">The execution environment for .NET applications. Manages <span class="term">memory (GC)</span>, <span class="term">JIT compilation</span>, type safety, and exception handling. <a href="https://learn.microsoft.com/en-us/dotnet/core/introduction#net-runtime" target="_blank" rel="noopener noreferrer">Runtime Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDotnetRuntime" aria-expanded="false" aria-controls="collapseDotnetRuntime"> @@ -336,7 +384,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-platform" id="card-bcl"> <div class="card-body"> - <h5><i class="bi bi-collection" aria-hidden="true"></i> Base Class Library (BCL)</h5> + <h5><i class="bi bi-collection" aria-hidden="true"></i> Base Class Library (BCL) <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">A rich set of <span class="term">core libraries</span> providing fundamental functionalities like collections, I/O, networking, JSON handling, and threading. <a href="https://learn.microsoft.com/en-us/dotnet/standard/bcl/" target="_blank" rel="noopener noreferrer">BCL Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBcl" aria-expanded="false" aria-controls="collapseBcl"> @@ -361,7 +409,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-platform" id="card-cil"> <div class="card-body"> - <h5><i class="bi bi-file-earmark-code" aria-hidden="true"></i> CIL / MSIL</h5> + <h5><i class="bi bi-file-earmark-code" aria-hidden="true"></i> CIL / MSIL <span class="version-tag">.NET Fx 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary"><span class="term">Common Intermediate Language</span> (formerly MSIL). The platform-agnostic compiled output of .NET languages, executed by the CLR. <a href="https://learn.microsoft.com/en-us/dotnet/standard/managed-execution-process#cil-and-jit-compilation" target="_blank" rel="noopener noreferrer">CIL and JIT</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCil" aria-expanded="false" aria-controls="collapseCil"> @@ -384,7 +432,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-platform" id="card-assemblies"> <div class="card-body"> - <h5><i class="bi bi-archive" aria-hidden="true"></i> Assemblies & Metadata</h5> + <h5><i class="bi bi-archive" aria-hidden="true"></i> Assemblies & Metadata <span class="version-tag">.NET Fx 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Units of <span class="term">deployment and versioning</span> in .NET (DLLs or EXEs). Contain CIL code and self-describing <span class="term">metadata</span>. <a href="https://learn.microsoft.com/en-us/dotnet/standard/assembly/" target="_blank" rel="noopener noreferrer">Assemblies in .NET</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAssemblies" aria-expanded="false" aria-controls="collapseAssemblies"> @@ -409,13 +457,13 @@ </div> <!-- /.schema-container --> <!-- II. C# LANGUAGE FEATURES --> - <div class="schema-container section-csharp" data-section-id="section-csharp-features"> + <div class="schema-container section-csharp" data-section-id="section-csharp-features" data-section-name="C# Language"> <h2 class="section-title" id="section-csharp-features-title">C# Language Features</h2> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-overview"> <div class="card-body"> - <h5><i class="bi bi-code-slash" aria-hidden="true"></i> C# Language Overview</h5> + <h5><i class="bi bi-code-slash" aria-hidden="true"></i> C# Language <span class="version-tag">C# 1.0 - 13</span></h5> <div class="card-content-wrapper"> <p class="summary">A modern, object-oriented, and type-safe programming language. Key to .NET development, offering powerful features for building diverse applications. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/" target="_blank" rel="noopener noreferrer">C# Guide</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpOverview" aria-expanded="false" aria-controls="collapseCsharpOverview"> @@ -433,7 +481,7 @@ <li><strong>Component-Oriented:</strong> Based on software components with properties, methods, and events.</li> <li><strong>Unified Type System:</strong> All C# types inherit from a single root `object` type.</li> <li><strong>Garbage Collection:</strong> Automatic memory management simplifies development.</li> - <li><strong>Evolving Language:</strong> Regularly updated with new features to enhance productivity and capabilities (e.g., .NET 8 / C# 12). <a href="https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-12" target="_blank" rel="noopener noreferrer">What's New in C# 12</a></li> + <li><strong>Evolving Language:</strong> Regularly updated with new features to enhance productivity and capabilities (e.g., .NET 9 / C# 13). <a href="https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-13" target="_blank" rel="noopener noreferrer">What's New in C# 13</a></li> </ul> </div> </div> @@ -441,7 +489,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-async"> <div class="card-body"> - <h5><i class="bi bi-lightning" aria-hidden="true"></i> Async Programming (async/await)</h5> + <h5><i class="bi bi-lightning" aria-hidden="true"></i> Async (async/await) <span class="version-tag">C# 5+</span></h5> <div class="card-content-wrapper"> <p class="summary">Simplifies writing non-blocking code using <span class="term">async</span> and <span class="term">await</span> keywords, crucial for responsive UIs and scalable services. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/async" target="_blank" rel="noopener noreferrer">Async Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpAsync" aria-expanded="false" aria-controls="collapseCsharpAsync"> @@ -467,7 +515,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-linq"> <div class="card-body"> - <h5><i class="bi bi-funnel" aria-hidden="true"></i> LINQ (Language Integrated Query)</h5> + <h5><i class="bi bi-funnel" aria-hidden="true"></i> LINQ <span class="version-tag">C# 3+</span></h5> <div class="card-content-wrapper"> <p class="summary">Provides powerful, SQL-like query capabilities directly within C# for collections, databases (via EF Core), XML, and other data sources. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/linq/" target="_blank" rel="noopener noreferrer">LINQ Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpLinq" aria-expanded="false" aria-controls="collapseCsharpLinq"> @@ -492,7 +540,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-pattern-matching"> <div class="card-body"> - <h5><i class="bi bi-grid-3x3-gap" aria-hidden="true"></i> Pattern Matching</h5> + <h5><i class="bi bi-grid-3x3-gap" aria-hidden="true"></i> Pattern Matching <span class="version-tag">C# 7-13+</span></h5> <div class="card-content-wrapper"> <p class="summary">Enhanced control flow based on the "shape" of data using <span class="term">is</span> expressions and <span class="term">switch expressions/statements</span>. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/functional/pattern-matching" target="_blank" rel="noopener noreferrer">Pattern Matching</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpPatternMatching" aria-expanded="false" aria-controls="collapseCsharpPatternMatching"> @@ -518,7 +566,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-records"> <div class="card-body"> - <h5><i class="bi bi-journal-bookmark" aria-hidden="true"></i> Records & Immutability</h5> + <h5><i class="bi bi-journal-bookmark" aria-hidden="true"></i> Records <span class="version-tag">C# 9+</span></h5> <div class="card-content-wrapper"> <p class="summary">Concise syntax for creating immutable reference types (<span class="term">record class</span>) or value types (<span class="term">record struct</span>) ideal for data transfer objects (DTOs). <a href="https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/record" target="_blank" rel="noopener noreferrer">Records Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpRecords" aria-expanded="false" aria-controls="collapseCsharpRecords"> @@ -544,7 +592,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-csharp" id="card-csharp-nullable-types"> <div class="card-body"> - <h5><i class="bi bi-question-circle" aria-hidden="true"></i> Nullable Reference Types</h5> + <h5><i class="bi bi-question-circle" aria-hidden="true"></i> Nullable Ref Types <span class="version-tag">C# 8+</span></h5> <div class="card-content-wrapper"> <p class="summary">Helps prevent <span class="term">NullReferenceException</span> at runtime by distinguishing between nullable and non-nullable reference types through compiler analysis. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/nullable-references" target="_blank" rel="noopener noreferrer">Nullable Types</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCsharpNullableTypes" aria-expanded="false" aria-controls="collapseCsharpNullableTypes"> @@ -572,13 +620,13 @@ <!-- III. APPLICATION MODELS & FRAMEWORKS --> - <div class="schema-container section-web" data-section-id="section-app-models"> + <div class="schema-container section-web" data-section-id="section-app-models" data-section-name="App Models"> <h2 class="section-title" id="section-app-models-title">Application Models & Frameworks</h2> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="info-card card-web" id="card-aspnetcore"> <div class="card-body"> - <h5><i class="bi bi-globe2" aria-hidden="true"></i> ASP.NET Core</h5> + <h5><i class="bi bi-globe2" aria-hidden="true"></i> ASP.NET Core <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Modern, cross-platform framework for building <span class="term">web apps, APIs, and microservices</span>. High-performance and modular. <a href="https://learn.microsoft.com/en-us/aspnet/core/" target="_blank" rel="noopener noreferrer">ASP.NET Core Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAspnetcore" aria-expanded="false" aria-controls="collapseAspnetcore"> @@ -589,7 +637,7 @@ <div class="collapse collapse-content" id="collapseAspnetcore"> <h6>Key Sub-Frameworks/Patterns</h6> <ul> - <li><strong>Minimal APIs:</strong> Lightweight syntax for creating HTTP APIs. <a href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis" target="_blank" rel="noopener noreferrer">Minimal APIs Docs</a></li> + <li><strong>Minimal APIs <span class="version-tag">.NET 6+</span>:</strong> Lightweight syntax for creating HTTP APIs. <a href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis" target="_blank" rel="noopener noreferrer">Minimal APIs Docs</a></li> <li><strong>MVC (Model-View-Controller):</strong> Pattern for building web UIs and APIs. <a href="https://learn.microsoft.com/en-us/aspnet/core/mvc/overview" target="_blank" rel="noopener noreferrer">MVC Docs</a></li> <li><strong>Razor Pages:</strong> Page-centric model for building web UIs. <a href="https://learn.microsoft.com/en-us/aspnet/core/razor-pages/" target="_blank" rel="noopener noreferrer">Razor Pages Docs</a></li> <li><strong>Blazor:</strong> Build interactive client-side web UIs with C#. (Server, WebAssembly, Hybrid). <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/" target="_blank" rel="noopener noreferrer">Blazor Docs</a></li> @@ -603,7 +651,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-crossplatform" id="card-maui"> <div class="card-body"> - <h5><i class="bi bi-phone-vibrate" aria-hidden="true"></i> .NET MAUI</h5> + <h5><i class="bi bi-phone-vibrate" aria-hidden="true"></i> .NET MAUI <span class="version-tag">.NET 6+</span></h5> <div class="card-content-wrapper"> <p class="summary"><span class="term">Multi-platform App UI</span>. Build native mobile and desktop apps from a single C# codebase for iOS, Android, Windows, and macOS. <a href="https://learn.microsoft.com/en-us/dotnet/maui/" target="_blank" rel="noopener noreferrer">.NET MAUI Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMaui" aria-expanded="false" aria-controls="collapseMaui"> @@ -630,7 +678,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-crossplatform" id="card-wpf"> <div class="card-body"> - <h5><i class="bi bi-window-desktop" aria-hidden="true"></i> WPF</h5> + <h5><i class="bi bi-window-desktop" aria-hidden="true"></i> WPF <span class="version-tag">.NET Fx 3.0+ | .NET Core 3.0+</span></h5> <div class="card-content-wrapper"> <p class="summary"><span class="term">Windows Presentation Foundation</span>. A UI framework for creating desktop client applications on Windows with rich user interfaces. <a href="https://learn.microsoft.com/en-us/dotnet/desktop/wpf/" target="_blank" rel="noopener noreferrer">WPF Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWpf" aria-expanded="false" aria-controls="collapseWpf"> @@ -654,7 +702,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-crossplatform" id="card-winforms"> <div class="card-body"> - <h5><i class="bi bi-app-indicator" aria-hidden="true"></i> Windows Forms</h5> + <h5><i class="bi bi-app-indicator" aria-hidden="true"></i> Windows Forms <span class="version-tag">.NET Fx 1.0+ | .NET Core 3.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">A framework for creating Windows desktop applications with a rich set of UI controls and a visual designer. <a href="https://learn.microsoft.com/en-us/dotnet/desktop/winforms/" target="_blank" rel="noopener noreferrer">Windows Forms Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinforms" aria-expanded="false" aria-controls="collapseWinforms"> @@ -678,7 +726,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-general" id="card-console"> <div class="card-body"> - <h5><i class="bi bi-terminal" aria-hidden="true"></i> Console Applications</h5> + <h5><i class="bi bi-terminal" aria-hidden="true"></i> Console Applications <span class="version-tag">.NET Fx 1.0+ | .NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Command-line applications that run in a text-based console window, ideal for utilities and background tasks. <a href="https://learn.microsoft.com/en-us/dotnet/core/tutorials/top-level-templates" target="_blank" rel="noopener noreferrer">Console App Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConsole" aria-expanded="false" aria-controls="collapseConsole"> @@ -694,7 +742,7 @@ <li><strong>Cross-Platform:</strong> Can run on Windows, Linux, and macOS.</li> <li><strong>Command-Line Arguments:</strong> Easily parse input parameters.</li> <li><strong>Standard I/O:</strong> Interact via console input, output, and error streams.</li> - <li><strong>Top-level statements:</strong> Simplified syntax for `Program.cs` in modern C#.</li> + <li><strong>Top-level statements <span class="version-tag">C# 9+</span>:</strong> Simplified syntax for `Program.cs` in modern C#.</li> </ul> </div> </div> @@ -702,7 +750,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-web" id="card-worker-services"> <div class="card-body"> - <h5><i class="bi bi-hdd-stack" aria-hidden="true"></i> Worker Services</h5> + <h5><i class="bi bi-hdd-stack" aria-hidden="true"></i> Worker Services <span class="version-tag">.NET Core 3.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Framework for creating long-running background services, message queue processors, or other non-UI tasks. <a href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/host/hosted-services" target="_blank" rel="noopener noreferrer">Worker Services Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWorkerServices" aria-expanded="false" aria-controls="collapseWorkerServices"> @@ -724,9 +772,9 @@ </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-web" id="card-cloud-native"> + <div class="info-card card-web" id="card-cloud-native"> <!-- Updated from card-cloud-native to card-web for category consistency --> <div class="card-body"> - <h5><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> .NET Aspire</h5> + <h5><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> .NET Aspire <span class="version-tag">.NET 8+</span></h5> <div class="card-content-wrapper"> <p class="summary">An opinionated, cloud-ready stack for building observable, production-ready, distributed applications. <a href="https://learn.microsoft.com/en-us/dotnet/aspire/" target="_blank" rel="noopener noreferrer">.NET Aspire Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCloudNative" aria-expanded="false" aria-controls="collapseCloudNative"> @@ -752,13 +800,13 @@ <!-- IV. KEY LIBRARIES & TECHNOLOGIES --> - <div class="schema-container section-data" data-section-id="section-key-libs"> + <div class="schema-container section-data" data-section-id="section-key-libs" data-section-name="Libraries & Tech"> <h2 class="section-title" id="section-key-libs-title">Key Libraries & Technologies</h2> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="info-card card-data" id="card-efcore"> <div class="card-body"> - <h5><i class="bi bi-server" aria-hidden="true"></i> Entity Framework Core</h5> + <h5><i class="bi bi-server" aria-hidden="true"></i> Entity Framework Core <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Modern, cross-platform <span class="term">Object-Relational Mapper (ORM)</span>. Enables developers to work with databases using .NET objects. <a href="https://learn.microsoft.com/en-us/ef/core/" target="_blank" rel="noopener noreferrer">EF Core Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEfcore" aria-expanded="false" aria-controls="collapseEfcore"> @@ -806,7 +854,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-networking"> <div class="card-body"> - <h5><i class="bi bi-hdd-network" aria-hidden="true"></i> Networking (HTTP, gRPC)</h5> + <h5><i class="bi bi-hdd-network" aria-hidden="true"></i> Networking (HTTP, gRPC) <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">.NET provides rich libraries for network communication, including <span class="term">HttpClient</span> for HTTP requests and support for <span class="term">gRPC</span>. <a href="https://learn.microsoft.com/en-us/dotnet/fundamentals/networking/overview" target="_blank" rel="noopener noreferrer">Networking Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNetworking" aria-expanded="false" aria-controls="collapseNetworking"> @@ -817,8 +865,8 @@ <div class="collapse collapse-content" id="collapseNetworking"> <h6>Key Libraries/Technologies</h6> <ul> - <li><strong>`HttpClient` & `HttpRequestMessage`:</strong> For making HTTP requests and handling responses. <a href="https://learn.microsoft.com/en-us/dotnet/api/system.net.http.httpclient" target="_blank" rel="noopener noreferrer">HttpClient Docs</a></li> - <li><strong>gRPC for .NET:</strong> High-performance, cross-platform RPC framework. <a href="https://learn.microsoft.com/en-us/aspnet/core/grpc/" target="_blank" rel="noopener noreferrer">gRPC for .NET Docs</a></li> + <li><strong>`HttpClient` & `HttpRequestMessage`:</strong> For making HTTP requests and handling responses. (Consider `IHttpClientFactory` <span class="version-tag">.NET Core 2.1+</span>) <a href="https://learn.microsoft.com/en-us/dotnet/api/system.net.http.httpclient" target="_blank" rel="noopener noreferrer">HttpClient Docs</a></li> + <li><strong>gRPC for .NET <span class="version-tag">.NET Core 3.0+</span>:</strong> High-performance, cross-platform RPC framework. <a href="https://learn.microsoft.com/en-us/aspnet/core/grpc/" target="_blank" rel="noopener noreferrer">gRPC for .NET Docs</a></li> <li><strong>`System.Net.Sockets`:</strong> Low-level socket programming. <a href="https://learn.microsoft.com/en-us/dotnet/api/system.net.sockets" target="_blank" rel="noopener noreferrer">Sockets Docs</a></li> </ul> </div> @@ -827,7 +875,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-security-libs"> <div class="card-body"> - <h5><i class="bi bi-shield-lock" aria-hidden="true"></i> Security Libraries</h5> + <h5><i class="bi bi-shield-lock" aria-hidden="true"></i> Security Libraries <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Built-in libraries for cryptography, authentication, authorization, and data protection. <a href="https://learn.microsoft.com/en-us/dotnet/standard/security/" target="_blank" rel="noopener noreferrer">.NET Security Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSecurityLibs" aria-expanded="false" aria-controls="collapseSecurityLibs"> @@ -849,7 +897,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-configuration"> <div class="card-body"> - <h5><i class="bi bi-gear" aria-hidden="true"></i> Configuration</h5> + <h5><i class="bi bi-gear" aria-hidden="true"></i> Configuration <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Flexible system for managing application settings from various sources (JSON, XML, environment variables, command-line). <a href="https://learn.microsoft.com/en-us/dotnet/core/extensions/configuration" target="_blank" rel="noopener noreferrer">Configuration Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfiguration" aria-expanded="false" aria-controls="collapseConfiguration"> @@ -870,7 +918,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-logging"> <div class="card-body"> - <h5><i class="bi bi-journal-text" aria-hidden="true"></i> Logging</h5> + <h5><i class="bi bi-journal-text" aria-hidden="true"></i> Logging <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Built-in logging API with providers for console, debug output, EventSource, EventLog, and third-party systems. <a href="https://learn.microsoft.com/en-us/dotnet/core/extensions/logging" target="_blank" rel="noopener noreferrer">Logging Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLogging" aria-expanded="false" aria-controls="collapseLogging"> @@ -892,7 +940,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-di"> <div class="card-body"> - <h5><i class="bi bi-diagram-3" aria-hidden="true"></i> Dependency Injection (DI)</h5> + <h5><i class="bi bi-diagram-3" aria-hidden="true"></i> Dependency Injection (DI) <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">First-class support for DI, promoting loose coupling and testability. Manages object lifecycles and dependencies. <a href="https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection" target="_blank" rel="noopener noreferrer">DI Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDi" aria-expanded="false" aria-controls="collapseDi"> @@ -914,7 +962,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-libraries" id="card-testing"> <div class="card-body"> - <h5><i class="bi bi-clipboard2-check" aria-hidden="true"></i> Testing</h5> + <h5><i class="bi bi-clipboard2-check" aria-hidden="true"></i> Testing <span class="version-tag">.NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Support for unit testing, integration testing, and web application testing using frameworks like MSTest, NUnit, xUnit. <a href="https://learn.microsoft.com/en-us/dotnet/core/testing/" target="_blank" rel="noopener noreferrer">.NET Testing Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTesting" aria-expanded="false" aria-controls="collapseTesting"> @@ -926,7 +974,7 @@ <h6>Frameworks & Tools</h6> <ul> <li><strong>Unit Testing:</strong> MSTest, NUnit, xUnit.</li> - <li><strong>Integration Testing:</strong> `WebApplicationFactory` for ASP.NET Core. <a href="https://learn.microsoft.com/en-us/aspnet/core/test/integration-tests" target="_blank" rel="noopener noreferrer">Integration Testing</a></li> + <li><strong>Integration Testing:</strong> `WebApplicationFactory` for ASP.NET Core <span class="version-tag">.NET Core 2.1+</span>. <a href="https://learn.microsoft.com/en-us/aspnet/core/test/integration-tests" target="_blank" rel="noopener noreferrer">Integration Testing</a></li> <li><strong>Mocking:</strong> Libraries like Moq, NSubstitute.</li> <li><strong>Test Runners:</strong> `dotnet test` CLI, Visual Studio Test Explorer.</li> </ul> @@ -938,7 +986,7 @@ <!-- V. TOOLING & ECOSYSTEM --> - <div class="schema-container section-tooling" data-section-id="section-tooling-eco"> + <div class="schema-container section-tooling" data-section-id="section-tooling-eco" data-section-name="Tooling"> <h2 class="section-title" id="section-tooling-eco-title">Tooling & Ecosystem</h2> <div class="row"> <div class="col-lg-4 col-md-6"> @@ -1029,7 +1077,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-tooling" id="card-diagnostics"> <div class="card-body"> - <h5><i class="bi bi-activity" aria-hidden="true"></i> Performance & Diagnostics</h5> + <h5><i class="bi bi-activity" aria-hidden="true"></i> Performance & Diagnostics <span class="version-tag">.NET Core 3.0+ (CLI Tools)</span></h5> <div class="card-content-wrapper"> <p class="summary">Tools and APIs for profiling, debugging, and monitoring .NET applications. <a href="https://learn.microsoft.com/en-us/dotnet/core/diagnostics/" target="_blank" rel="noopener noreferrer">Diagnostics Overview</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDiagnostics" aria-expanded="false" aria-controls="collapseDiagnostics"> @@ -1052,13 +1100,13 @@ </div> <!-- VI. ADVANCED & ARCHITECTURAL CONCEPTS --> - <div class="schema-container section-advanced" data-section-id="section-advanced-concepts"> + <div class="schema-container section-advanced" data-section-id="section-advanced-concepts" data-section-name="Advanced Concepts"> <h2 class="section-title" id="section-advanced-concepts-title">Advanced & Architectural Concepts</h2> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="info-card card-advanced" id="card-native-aot"> <div class="card-body"> - <h5><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Native AOT</h5> + <h5><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Native AOT <span class="version-tag">.NET 7+</span></h5> <div class="card-content-wrapper"> <p class="summary"><span class="term">Ahead-of-Time</span> compilation that compiles .NET code directly to native machine code for faster startup, smaller deployments, and reduced memory. <a href="https://learn.microsoft.com/en-us/dotnet/core/deploying/native-aot/" target="_blank" rel="noopener noreferrer">Native AOT Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNativeAot" aria-expanded="false" aria-controls="collapseNativeAot"> @@ -1087,7 +1135,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-advanced" id="card-modularity"> <div class="card-body"> - <h5><i class="bi bi-puzzle" aria-hidden="true"></i> Modularity & Libraries</h5> + <h5><i class="bi bi-puzzle" aria-hidden="true"></i> Modularity & Libraries <span class="version-tag">.NET Standard 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Designing systems with well-defined <span class="term">class libraries</span> and understanding <span class="term">.NET Standard</span> (for older library compatibility). <a href="https://learn.microsoft.com/en-us/dotnet/standard/class-libraries" target="_blank" rel="noopener noreferrer">Class Libraries</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseModularity" aria-expanded="false" aria-controls="collapseModularity"> @@ -1100,7 +1148,7 @@ <ul> <li><strong>Class Libraries:</strong> Package reusable code into DLLs.</li> <li><strong>.NET Standard (Legacy):</strong> A formal specification of .NET APIs intended to be available on all .NET implementations. Useful for libraries targeting multiple .NET runtimes (e.g., .NET Framework and .NET Core). <a href="https://learn.microsoft.com/en-us/dotnet/standard/net-standard" target="_blank" rel="noopener noreferrer">.NET Standard Docs</a></li> - <li><strong>Modern .NET Targeting:</strong> For new libraries, targeting `netX.Y` (e.g., `net8.0`) is often sufficient.</li> + <li><strong>Modern .NET Targeting:</strong> For new libraries, targeting `netX.Y` (e.g., `net9.0`) is often sufficient.</li> </ul> </div> </div> @@ -1108,7 +1156,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-advanced" id="card-interop"> <div class="card-body"> - <h5><i class="bi bi-link-45deg" aria-hidden="true"></i> Interoperability</h5> + <h5><i class="bi bi-link-45deg" aria-hidden="true"></i> Interoperability <span class="version-tag">.NET Fx 1.0+ | .NET Core 1.0+</span></h5> <div class="card-content-wrapper"> <p class="summary">Interacting with non-.NET code, such as native C/C++ libraries (<span class="term">P/Invoke</span>) or COM components. <a href="https://learn.microsoft.com/en-us/dotnet/standard/native-interop/" target="_blank" rel="noopener noreferrer">Native Interop</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInterop" aria-expanded="false" aria-controls="collapseInterop"> @@ -1129,7 +1177,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-advanced" id="card-source-generators"> <div class="card-body"> - <h5><i class="bi bi-magic" aria-hidden="true"></i> Source Generators</h5> + <h5><i class="bi bi-magic" aria-hidden="true"></i> Source Generators <span class="version-tag">C# 9+</span></h5> <div class="card-content-wrapper"> <p class="summary">A Roslyn compiler feature that lets C# developers inspect user code and generate new C# source files during compilation. <a href="https://learn.microsoft.com/en-us/dotnet/csharp/roslyn-sdk/source-generators-overview" target="_blank" rel="noopener noreferrer">Source Generators Docs</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSourceGenerators" aria-expanded="false" aria-controls="collapseSourceGenerators"> @@ -1152,7 +1200,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-advanced" id="card-observability"> <div class="card-body"> - <h5><i class="bi bi-graph-up-arrow" aria-hidden="true"></i> Observability</h5> + <h5><i class="bi bi-graph-up-arrow" aria-hidden="true"></i> Observability <span class="version-tag">.NET 5+ (Metrics/Tracing APIs)</span></h5> <div class="card-content-wrapper"> <p class="summary">Designing systems to provide insights into their behavior through <span class="term">logging, metrics, and tracing</span>. Often using <span class="term">OpenTelemetry</span>. <a href="https://learn.microsoft.com/en-us/dotnet/core/diagnostics/observability-with-otel" target="_blank" rel="noopener noreferrer">OpenTelemetry with .NET</a></p> <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseObservability" aria-expanded="false" aria-controls="collapseObservability"> @@ -1199,7 +1247,7 @@ </div> <!-- VII. KEY CONSIDERATIONS FOR ARCHITECTS --> - <div class="schema-container section-general" data-section-id="section-arch-considerations"> + <div class="schema-container section-general" data-section-id="section-arch-considerations" data-section-name="Architecture"> <h2 class="section-title" id="section-arch-considerations-title">Key Considerations for Architects</h2> <div class="row"> <div class="col-12"> @@ -1231,11 +1279,11 @@ </div> <!-- /.row --> </div> <!-- /.schema-container --> -</div> <!-- /container --> +</div> <!-- /container#main-container --> <footer class="container text-center pb-3"> <p class="mb-1">© <span id="currentYear"></span> David Veksler Cheatsheets</p> - <p class="mb-2" style="font-size: 0.8em;">Last Updated: <span id="lastUpdatedDate">May 10, 2025</span></p> <!-- Placeholder: Update this dynamically or manually --> + <p class="mb-2" style="font-size: 0.8em;">Last Updated: <span id="lastUpdatedDate">May 10, 2025</span></p> <div> <a href="https://learn.microsoft.com/en-us/dotnet/" title=".NET Documentation" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary"> <i class="bi bi-book" aria-hidden="true"></i> .NET Docs @@ -1262,8 +1310,111 @@ <script> document.addEventListener('DOMContentLoaded', () => { const mainContainer = document.getElementById('main-container'); + const searchBox = document.getElementById('search-box'); + const categoryFiltersContainer = document.getElementById('category-filters'); + const noResultsDiv = document.getElementById('no-results'); + const allSchemaContainers = Array.from(document.querySelectorAll('.schema-container')); + const allInfoCards = Array.from(document.querySelectorAll('.info-card')); + let currentHoverState = { card: null, line: null }; + let activeFilter = 'all'; // To store the currently active category filter + + // --- Initialize Filters & Search --- + function initializeFiltersAndSearch() { + // Create filter buttons + const allButton = document.createElement('button'); + allButton.type = 'button'; + allButton.classList.add('btn', 'btn-outline-secondary', 'filter-btn', 'active'); + allButton.textContent = 'All Categories'; + allButton.dataset.filter = 'all'; + categoryFiltersContainer.appendChild(allButton); + + const btnGroup = document.createElement('div'); + btnGroup.classList.add('btn-group', 'flex-wrap'); + btnGroup.setAttribute('role', 'group'); + + allSchemaContainers.forEach(section => { + const sectionId = section.dataset.sectionId; + const sectionName = section.dataset.sectionName || section.querySelector('.section-title').textContent.trim().replace(' Features', '').replace(' Foundation', '').replace(' & Ecosystem','').replace(' & Technologies','').replace(' Concepts','').replace(' Considerations for Architects',''); + const button = document.createElement('button'); + button.type = 'button'; + button.classList.add('btn', 'btn-outline-secondary', 'filter-btn'); + button.textContent = sectionName; + button.dataset.filter = sectionId; + btnGroup.appendChild(button); + }); + categoryFiltersContainer.appendChild(btnGroup); + + + // Event listener for search box + searchBox.addEventListener('input', () => { + applyFiltersAndSearch(); + positionLines(); // Re-evaluate line positions if content shifts + }); + + // Event listener for filter buttons (using event delegation) + categoryFiltersContainer.addEventListener('click', (event) => { + if (event.target.classList.contains('filter-btn')) { + document.querySelectorAll('#category-filters .filter-btn').forEach(btn => btn.classList.remove('active')); + event.target.classList.add('active'); + activeFilter = event.target.dataset.filter; + applyFiltersAndSearch(); + positionLines(); // Re-evaluate line positions + } + }); + } + + function applyFiltersAndSearch() { + const searchTerm = searchBox.value.toLowerCase().trim(); + let itemsFound = 0; + + allSchemaContainers.forEach(section => { + const sectionId = section.dataset.sectionId; + let sectionHasVisibleCards = false; + + const cardsInSection = Array.from(section.querySelectorAll('.info-card')); + + cardsInSection.forEach(card => { + const cardTitle = card.querySelector('h5') ? card.querySelector('h5').textContent.toLowerCase() : ''; + const cardSummary = card.querySelector('p.summary') ? card.querySelector('p.summary').textContent.toLowerCase() : ''; + const cardDetailsCollapse = card.querySelector('.collapse-content'); + const cardDetailsText = cardDetailsCollapse ? cardDetailsCollapse.textContent.toLowerCase() : ''; + const versionTag = card.querySelector('.version-tag') ? card.querySelector('.version-tag').textContent.toLowerCase() : ''; + + const cardTextContent = `${cardTitle} ${cardSummary} ${cardDetailsText} ${versionTag}`; + + const matchesSearch = searchTerm === '' || cardTextContent.includes(searchTerm); + const matchesFilter = activeFilter === 'all' || sectionId === activeFilter; + + if (matchesSearch && matchesFilter) { + card.closest('.col-lg-4.col-md-6').style.display = ''; // Show column + card.style.display = 'flex'; // Show card + sectionHasVisibleCards = true; + itemsFound++; + } else { + card.closest('.col-lg-4.col-md-6').style.display = 'none'; // Hide column + card.style.display = 'none'; // Hide card + } + }); + + // Show/hide entire section based on filter and if it has visible cards + if ((activeFilter === 'all' || sectionId === activeFilter) && sectionHasVisibleCards) { + section.style.display = ''; + } else if (activeFilter !== 'all' && sectionId !== activeFilter) { + section.style.display = 'none'; + } else if (!sectionHasVisibleCards && searchTerm !== '') { // Section matches filter, but no cards match search + section.style.display = 'none'; // Hide section if search term yields no results in it + } + else { + section.style.display = 'none'; + } + }); + + noResultsDiv.style.display = itemsFound === 0 ? 'block' : 'none'; + } + + // --- LeaderLine Drawing Logic (Dimming removed) --- function debounce(func, wait) { let timeout; return function executedFunction(...args) { @@ -1294,7 +1445,6 @@ document.addEventListener('DOMContentLoaded', () => { try { currentHoverState.line.remove(); } catch (e) { console.warn("Error removing line:", e); } currentHoverState.line = null; } - mainContainer.classList.remove('is-dimmed'); if (currentHoverState.card) { currentHoverState.card.classList.remove('is-highlighted'); const oldSchemaContainer = currentHoverState.card.closest('.schema-container'); @@ -1315,8 +1465,6 @@ document.addEventListener('DOMContentLoaded', () => { const sectionHeader = schemaContainer ? schemaContainer.querySelector('.section-title') : null; if (!sectionHeader || !card.id || !sectionHeader.id) { - console.warn("Missing ID on card or section header for line drawing:", card, sectionHeader); - mainContainer.classList.add('is-dimmed'); card.classList.add('is-highlighted'); if (schemaContainer) schemaContainer.classList.add('is-highlighted-section'); currentHoverState.card = card; @@ -1324,7 +1472,6 @@ document.addEventListener('DOMContentLoaded', () => { } currentHoverState.card = card; - mainContainer.classList.add('is-dimmed'); card.classList.add('is-highlighted'); if (schemaContainer) schemaContainer.classList.add('is-highlighted-section'); @@ -1356,7 +1503,7 @@ document.addEventListener('DOMContentLoaded', () => { mainContainer.addEventListener('mouseover', (event) => { const targetCard = event.target.closest('.info-card'); - if (targetCard && targetCard !== currentHoverState.card) { + if (targetCard && targetCard.style.display !== 'none' && targetCard !== currentHoverState.card) { // Only apply if card is visible applyHoverState(targetCard); } }); @@ -1377,7 +1524,15 @@ document.addEventListener('DOMContentLoaded', () => { if (currentHoverState.line) { try { if (currentHoverState.line && typeof currentHoverState.line.position === 'function') { - currentHoverState.line.position(); + const startElem = document.getElementById(currentHoverState.line.start.id); // LeaderLine stores element references, not just IDs + const endElem = document.getElementById(currentHoverState.line.end.id); + // Check if start and end elements are visible and part of the DOM + if (startElem && endElem && document.body.contains(startElem) && document.body.contains(endElem) && + startElem.offsetParent !== null && endElem.offsetParent !== null) { + currentHoverState.line.position(); + } else { + clearHoverState(true); // Remove line if elements are not visible or detached + } } else if (currentHoverState.line) { console.warn("Repositioning on invalid line state. Clearing."); clearHoverState(true); @@ -1394,9 +1549,9 @@ document.addEventListener('DOMContentLoaded', () => { const collapseElements = document.querySelectorAll('.collapse'); collapseElements.forEach(collapseEl => { const button = document.querySelector(`.details-toggle[data-bs-target="#${collapseEl.id}"]`); - const iconEl = button ? button.querySelector('.bi') : null; // Renamed to avoid conflict with global `icon` + const iconEl = button ? button.querySelector('.bi') : null; if (button && iconEl) { - const updateIconState = () => { // Renamed function + const updateIconState = () => { if (collapseEl.classList.contains('show')) { iconEl.classList.remove('bi-chevron-down'); iconEl.classList.add('bi-chevron-up'); button.setAttribute('aria-expanded', 'true'); @@ -1414,9 +1569,8 @@ document.addEventListener('DOMContentLoaded', () => { }); document.getElementById('currentYear').textContent = new Date().getFullYear(); - // Note: The "Last Updated" date in the footer is static HTML here. - // For a live site, this should be updated dynamically or during the build process. - // The JSON-LD schema has a `dateModified` field that should reflect the actual last modification date. + initializeFiltersAndSearch(); // Initialize search and filters + applyFiltersAndSearch(); // Apply initial filter (All) }); </script> </body>