Skip to content

Commit cf75154

Browse files
ysmoradiysmoradi
authored
feat(websites): add 25 stages of the AI Wiki to platform website #11564 (#11565)
1 parent b9bc918 commit cf75154

File tree

3 files changed

+200
-5
lines changed

3 files changed

+200
-5
lines changed

‎src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates07InteractiveWiki.razor‎

Lines changed: 149 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,158 @@
1212
<section class="section-card">
1313
<BitText Typography="BitTypography.H5" Gutter>GitHub Copilot Chat Interactive Learning</BitText>
1414
<div class="section-card-txt">
15-
After creating your project from bit Boilerplate, we highly recommend using the built-in <span class="bold-txt">Run getting started</span> to interactively learn about your project architecture directly in your IDE.
15+
After creating your project from bit Boilerplate, we highly recommend using the built-in getting started to interactively learn about your project architecture directly in your IDE.
1616
<br /><br />
17-
This interactive guide is available in <span class="bold-txt">GitHub Copilot Chat</span> within <span class="bold-txt">Visual Studio</span> or <span class="bold-txt">Visual Studio Code</span>. Simply type <code>Run getting started </code> in the chat and choose the getting started prompt to begin your onboarding journey.
17+
This interactive guide is available in <span class="bold-txt"><u>GitHub Copilot Chat</u></span> within <span class="bold-txt">Visual Studio</span> or <span class="bold-txt">Visual Studio Code</span>. Simply type <span class="bold-txt"><u>Run getting started</u></span> in the GitHub Copilot Chat while <span class="bold-txt"><u>Claude Sonnet 4.5</u></span> is selected to begin your onboarding journey.
1818
<br /><br />
19-
The guide walks you through the project in multiple stages, using <span class="bold-txt">real examples from your actual codebase</span>:
20-
This is the <span class="bold-txt">recommended next step</span> for developers after creating their project, providing a hands-on, context-aware learning experience tailored to your specific codebase.
19+
The guide walks you through the project in multiple stages, using <span class="bold-txt">real examples from your own project</span>:
2120
</div>
21+
22+
<div class="video-container">
23+
<div class="video-wrapper">
24+
<video controls
25+
title="Interactive docs"
26+
src="https://videos.bitplatform.dev/InteractiveDoc.mp4" />
27+
</div>
28+
</div>
29+
30+
<BitText Typography="BitTypography.H5" Gutter>Interactive Learning's Comprehensive Stages:</BitText>
31+
<br />
32+
33+
The interactive guide covers your entire project architecture across 25 detailed stages. Each stage provides real examples from your own project with interactive Q&amp;A:
34+
35+
<div id="ef-core" style="margin-top: 1rem;">
36+
<strong>Stage 1: Entity Framework Core</strong>
37+
<p>Learn about DbContext, entity models, entity type configurations, and migrations. Understand nullable reference types in EF Core relationships and client-side offline database support.</p>
38+
</div>
39+
40+
<div id="dtos-mappers" style="margin-top: 1rem;">
41+
<strong>Stage 2: DTOs, Mappers, and Mapperly</strong>
42+
<p>Explore Data Transfer Objects, `AppJsonContext`, and how Mapperly simplifies object mapping. Learn the difference between Project() and Map() methods, and how Patch() updates client-side objects.</p>
43+
</div>
44+
45+
<div id="api-odata" style="margin-top: 1rem;">
46+
<strong>Stage 3: API Controllers and OData</strong>
47+
<p>Understand controller architecture, [AutoInject] attribute, and OData query support ($filter, $top, $skip, $orderby). Learn about PagedResult for total counts, data security, and optimized performance patterns.</p>
48+
</div>
49+
50+
<div id="background-jobs" style="margin-top: 1rem;">
51+
<strong>Stage 4: Background Jobs and CancellationToken Management</strong>
52+
<p>Discover automatic request cancellation, CancellationToken usage, NavigationLock for critical operations, and Hangfire for reliable background job processing with persistence.</p>
53+
</div>
54+
55+
<div id="localization" style="margin-top: 1rem;">
56+
<strong>Stage 5: Localization and Multi-language Support</strong>
57+
<p>Master resource files (resx), `DtoResourceType` attribute, `AppDataAnnotationsValidator`, IStringLocalizer usage, and the `bit-resx` tool for managing translations.</p>
58+
</div>
59+
60+
<div id="exception-handling" style="margin-top: 1rem;">
61+
<strong>Stage 6: Exception Handling and Error Management</strong>
62+
<p>Learn about Known vs Unknown exceptions, safe exception throwing, `WithData()` and `WithExtensionData()` methods, automatic exception handling in Blazor, and `WrapHandled()` for event handlers.</p>
63+
</div>
64+
65+
<div id="identity-auth" style="margin-top: 1rem;">
66+
<strong>Stage 7: ASP.NET Core Identity / Authentication & Authorization</strong>
67+
<p>Comprehensive coverage of JWT tokens (access/refresh), session management, SSO integration (Google, GitHub, Azure AD, etc.), role-based and policy-based authorization, and identity configuration.</p>
68+
</div>
69+
70+
<div id="blazor-pages" style="margin-top: 1rem;">
71+
<strong>Stage 8: Blazor Pages, Components, Styling &amp; Navigation</strong>
72+
<p>Understand the three-file structure (.razor, .razor.cs, .razor.scss), isolated component styles, global styles, ::deep selector, Bit.BlazorUI components, and navigation with `PageUrls`.</p>
73+
</div>
74+
75+
<div id="dependency-injection" style="margin-top: 1rem;">
76+
<strong>Stage 9: Dependency Injection &amp; Service Registration</strong>
77+
<p>Explore service registration patterns across different projects, `AddSessioned` method for session-scoped services, and appropriate service lifetimes (Singleton, Scoped, Transient, `Sessioned`).</p>
78+
</div>
79+
80+
<div id="configuration" style="margin-top: 1rem;">
81+
<strong>Stage 10: Configuration (appsettings.json)</strong>
82+
<p>Learn about configuration hierarchy across projects, appsettings.{environment}.json files, configuration priority, and how to use *__Comment for JSON comments.</p>
83+
</div>
84+
85+
<div id="typescript" style="margin-top: 1rem;">
86+
<strong>Stage 11: TypeScript, Build Process &amp; JavaScript Interop</strong>
87+
<p>Understand TypeScript integration, MSBuild targets for JavaScript compilation, `IJSRuntimeExtensions` for C#-to-JS calls, and how to add npm packages with type definitions.</p>
88+
</div>
89+
90+
<div id="blazor-modes" style="margin-top: 1rem;">
91+
<strong>Stage 12: Blazor Modes, PreRendering &amp; PWA</strong>
92+
<p>Explore Blazor Server, WebAssembly, and Auto modes, pre-rendering configuration for SEO and performance, PWA capabilities, service workers, and `IPrerenderStateService`.</p>
93+
</div>
94+
95+
<div id="force-update" style="margin-top: 1rem;">
96+
<strong>Stage 13: Force Update System</strong>
97+
<p>Learn how `ForceUpdateMiddleware` validates app versions on every request, supports platform-specific update behaviors (auto-update for web/Windows, store redirect for mobile), and ensures all users run supported versions.</p>
98+
</div>
99+
100+
<div id="response-caching" style="margin-top: 1rem;">
101+
<strong>Stage 14: Response Caching System</strong>
102+
<p>Master multi-layer caching: client-side memory cache, browser HTTP cache, CDN edge cache, and ASP.NET Core Output Cache. Learn about `AppResponseCache` attribute, cache purging with `ResponseCacheService`, and optimizing performance.</p>
103+
</div>
104+
105+
<div id="logging" style="margin-top: 1rem;">
106+
<strong>Stage 15: Logging, OpenTelemetry and Health Checks</strong>
107+
<p>Understand ILogger for logging, `AppActivitySource` for tracking operations, in-app Diagnostic Modal, integration with Sentry and Azure App Insights, Aspire Dashboard, and built-in health checks.</p>
108+
</div>
109+
110+
<div id="cicd" style="margin-top: 1rem;">
111+
<strong>Stage 16: CI/CD Pipeline and Environments</strong>
112+
<p>Explore workflow files, environment configuration (Development, Staging, Production), build and deployment pipelines for client platforms, and best practices for secure backend deployment.</p>
113+
</div>
114+
115+
<div id="testing" style="margin-top: 1rem;">
116+
<strong>Stage 17: Automated Testing (Unitigration Tests)</strong>
117+
<p>Learn about the Unitigration Test approach that combines the benefits of Unit Tests and Integration Tests, UI tests with real server behavior, and flexible test architecture.</p>
118+
</div>
119+
120+
<div id="prompts" style="margin-top: 1rem;">
121+
<strong>Stage 18: Other Available Prompt Templates</strong>
122+
<p>Discover additional specialized prompt templates available in the .github/prompts/ directory for specific development tasks and scenarios.</p>
123+
</div>
124+
125+
<div id="misc-files" style="margin-top: 1rem;">
126+
<strong>Stage 19: Project Miscellaneous Files</strong>
127+
<p>Review important configuration files: Clean scripts, global.json, vs-spell.dic, settings.VisualStudio.json, mcp.json, Directory.Build.props, Directory.Packages.props, and .vsconfig.</p>
128+
</div>
129+
130+
<div id="aspire" style="margin-top: 1rem;">
131+
<strong>Stage 20: .NET Aspire</strong>
132+
<p>Understand .NET Aspire benefits for development (dashboard monitoring) and deployment (Azure, Docker Compose, Kubernetes). Learn database persistence configuration and Linux testing with Dev Containers.</p>
133+
</div>
134+
135+
<div id="maui-hybrid" style="margin-top: 1rem;">
136+
<strong>Stage 21: .NET MAUI / Blazor Hybrid</strong>
137+
<p>Explore native platform capabilities on Android, iOS, macOS, and Windows. Learn about Deep Links/Universal Links, `ApplicationVersion` for app stores, Windows project advantages, and WebView considerations.</p>
138+
</div>
139+
140+
<div id="messaging" style="margin-top: 1rem;">
141+
<strong>Stage 22: Messaging</strong>
142+
<p>Master in-app messaging with `PubSubService`, JavaScript-to-C# communication with `AppJsBridge`, real-time server-to-client messaging with SignalR, and push notifications with deep linking.</p>
143+
</div>
144+
145+
<div id="diagnostic" style="margin-top: 1rem;">
146+
<strong>Stage 23: Diagnostic Modal</strong>
147+
<p>Explore the powerful in-app diagnostic tools, including browser DevTools that work on mobile devices and real-time log viewing capabilities.</p>
148+
</div>
149+
150+
<div id="webauthn" style="margin-top: 1rem;">
151+
<strong>Stage 24: WebAuthn and Passwordless Authentication (Advanced)</strong>
152+
<p>Learn about biometric authentication (fingerprint, Face ID, PIN) that's more secure than native implementations, cross-platform support.</p>
153+
</div>
154+
155+
<div id="vector-embeddings" style="margin-top: 1rem;">
156+
<strong>Stage 25: RAG / Semantic Search with Vector Embeddings (Advanced)</strong>
157+
<p>Understand vector embeddings for semantic search, cross-language search capabilities, embedding models (OpenAI, Azure, Hugging Face), and how to implement RAG (Retrieval-Augmented Generation) patterns.</p>
158+
</div>
159+
160+
<br />
161+
162+
<strong style="font-size: 1.1rem;">Ready to Start Your Interactive Learning Journey?</strong>
163+
<p>
164+
You can specify which stage you want to start with (e.g., "Stage 5") and your preferred language
165+
(e.g., English, Persian, Français or any other language).
166+
</p>
22167
</section>
23168

24169
<section class="section-card" id="ai-powered-wiki">

‎src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates07InteractiveWiki.razor.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,19 @@
4646
::deep a {
4747
color: $bit-color-primary;
4848
}
49+
50+
.video-container {
51+
width: 100%;
52+
display: flex;
53+
justify-content: center;
54+
55+
.video-wrapper {
56+
width: 100%;
57+
max-width: 800px;
58+
position: relative;
59+
}
60+
61+
video {
62+
width: 100%;
63+
}
64+
}

‎src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor.cs‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,41 @@ public partial class MainLayout : IDisposable
3535
new BitNavItem { Text = "Project structure", Url = "/templates/project-structure", AdditionalUrls = [ "/boilerplate/project-structure" ] },
3636
new BitNavItem { Text = "Create project", Url = "/templates/create-project", AdditionalUrls = [ "/boilerplate/create-project" ] },
3737
new BitNavItem { Text = "Run project", Url = "/templates/run-project", AdditionalUrls = [ "/boilerplate/run-project" ] },
38-
new BitNavItem { Text = "Interactive Wiki", Url = "/templates/wiki", AdditionalUrls = ["/boilerplate/wiki"] },
38+
new BitNavItem
39+
{
40+
Text = "Interactive Wiki",
41+
Url = "/templates/wiki",
42+
AdditionalUrls = ["/boilerplate/wiki"],
43+
IsExpanded = true,
44+
ChildItems =
45+
[
46+
new BitNavItem { Text = "Entity Framework Core", Url = "/templates/wiki#ef-core", AdditionalUrls = ["/boilerplate/wiki#ef-core"] },
47+
new BitNavItem { Text = "DTOs & Mapperly", Url = "/templates/wiki#dtos-mappers", AdditionalUrls = ["/boilerplate/wiki#dtos-mappers"] },
48+
new BitNavItem { Text = "API & OData", Url = "/templates/wiki#api-odata", AdditionalUrls = ["/boilerplate/wiki#api-odata"] },
49+
new BitNavItem { Text = "Background Jobs", Url = "/templates/wiki#background-jobs", AdditionalUrls = ["/boilerplate/wiki#background-jobs"] },
50+
new BitNavItem { Text = "Localization", Url = "/templates/wiki#localization", AdditionalUrls = ["/boilerplate/wiki#localization"] },
51+
new BitNavItem { Text = "Exception Handling", Url = "/templates/wiki#exception-handling", AdditionalUrls = ["/boilerplate/wiki#exception-handling"] },
52+
new BitNavItem { Text = "Identity & Auth", Url = "/templates/wiki#identity-auth", AdditionalUrls = ["/boilerplate/wiki#identity-auth"] },
53+
new BitNavItem { Text = "Components, Styling", Url = "/templates/wiki#blazor-pages", AdditionalUrls = ["/boilerplate/wiki#blazor-pages"] },
54+
new BitNavItem { Text = "Dependency Injection", Url = "/templates/wiki#dependency-injection", AdditionalUrls = ["/boilerplate/wiki#dependency-injection"] },
55+
new BitNavItem { Text = "Configuration", Url = "/templates/wiki#configuration", AdditionalUrls = ["/boilerplate/wiki#configuration"] },
56+
new BitNavItem { Text = "TypeScript", Url = "/templates/wiki#typescript", AdditionalUrls = ["/boilerplate/wiki#typescript"] },
57+
new BitNavItem { Text = "Blazor Modes & PWA", Url = "/templates/wiki#blazor-modes", AdditionalUrls = ["/boilerplate/wiki#blazor-modes"] },
58+
new BitNavItem { Text = "Force Update", Url = "/templates/wiki#force-update", AdditionalUrls = ["/boilerplate/wiki#force-update"] },
59+
new BitNavItem { Text = "Response Caching", Url = "/templates/wiki#response-caching", AdditionalUrls = ["/boilerplate/wiki#response-caching"] },
60+
new BitNavItem { Text = "Logging & OpenTelemetry", Url = "/templates/wiki#logging", AdditionalUrls = ["/boilerplate/wiki#logging"] },
61+
new BitNavItem { Text = "CI/CD Pipeline", Url = "/templates/wiki#cicd", AdditionalUrls = ["/boilerplate/wiki#cicd"] },
62+
new BitNavItem { Text = "Automated Testing", Url = "/templates/wiki#testing", AdditionalUrls = ["/boilerplate/wiki#testing"] },
63+
new BitNavItem { Text = "Prompt Templates", Url = "/templates/wiki#prompts", AdditionalUrls = ["/boilerplate/wiki#prompts"] },
64+
new BitNavItem { Text = "Misc Files", Url = "/templates/wiki#misc-files", AdditionalUrls = ["/boilerplate/wiki#misc-files"] },
65+
new BitNavItem { Text = ".NET Aspire", Url = "/templates/wiki#aspire", AdditionalUrls = ["/boilerplate/wiki#aspire"] },
66+
new BitNavItem { Text = "MAUI / Blazor Hybrid", Url = "/templates/wiki#maui-hybrid", AdditionalUrls = ["/boilerplate/wiki#maui-hybrid"] },
67+
new BitNavItem { Text = "Messaging", Url = "/templates/wiki#messaging", AdditionalUrls = ["/boilerplate/wiki#messaging"] },
68+
new BitNavItem { Text = "Diagnostic Modal", Url = "/templates/wiki#diagnostic", AdditionalUrls = ["/boilerplate/wiki#diagnostic"] },
69+
new BitNavItem { Text = "WebAuthn and Passwordless Auth", Url = "/templates/wiki#webauthn", AdditionalUrls = ["/boilerplate/wiki#webauthn"] },
70+
new BitNavItem { Text = "RAG / Vector Embeddings", Url = "/templates/wiki#vector-embeddings", AdditionalUrls = ["/boilerplate/wiki#vector-embeddings"] },
71+
]
72+
},
3973
];
4074

4175
private readonly List<BitNavItem> bswupNavItems =

0 commit comments

Comments
 (0)