Improve Platform website (#12876)

README.md

@@ -5,7 +5,7 @@
 ![License](https://img.shields.io/github/license/bitfoundation/bitplatform.svg)
 ![Release CI Status](https://github.com/bitfoundation/bitplatform/actions/workflows/bit.ci.release.yml/badge.svg)
 ![NuGet version](https://img.shields.io/nuget/v/bit.blazorui.svg?logo=nuget)
-[![Nuget downloads](https://img.shields.io/badge/packages_download-9M-blue.svg?logo=nuget)](https://www.nuget.org/profiles/bit-foundation)
+[![Nuget downloads](https://img.shields.io/badge/packages_download-10M-blue.svg?logo=nuget)](https://www.nuget.org/profiles/bit-foundation)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform "Average time to resolve an issue")
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/bitfoundation/bitplatform.svg)](http://isitmaintained.com/project/bitfoundation/bitplatform "Percentage of issues still open")
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bitfoundation/bitplatform)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Home/HomePage.razor

@@ -143,7 +143,7 @@
                     </BitStack>
                 </BitLink>
                 <BitLink Href="https://www.nuget.org/profiles/bit-foundation" Target="_blank" NoUnderline>
-                    <BitImage Src="https://img.shields.io/badge/packages_download-9M-blue.svg?logo=nuget" Alt="nuget downloads" />
+                    <BitImage Src="https://img.shields.io/badge/packages_download-10M-blue.svg?logo=nuget" Alt="nuget downloads" />
                 </BitLink>
             </BitStack>
         </BitCard>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj

@@ -4,8 +4,11 @@
         <TargetFramework>net10.0</TargetFramework>
         <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
         <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
-        <InvariantTimezone>true</InvariantTimezone>
-        <InvariantGlobalization>true</InvariantGlobalization>
+        <!-- Like WasmEnableSIMD below, these two are on the wasm SDK's relink-trigger list: any
+             non-default value pulls the native tooling (ManagedToNativeGenerator & co) into every
+             incremental build. Trim the runtime in Release only; dev keeps full icu/tz data. -->
+        <InvariantTimezone Condition="'$(Configuration)' == 'Release'">true</InvariantTimezone>
+        <InvariantGlobalization Condition="'$(Configuration)' == 'Release'">true</InvariantGlobalization>
         <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
         <ResolveStaticWebAssetsInputsDependsOn>
             BeforeBuildTasks;
@@ -15,7 +18,10 @@
         <WasmFingerprintAssets>false</WasmFingerprintAssets>
         <StaticWebAssetsFingerprintContent>false</StaticWebAssetsFingerprintContent>
         <StaticWebAssetFingerprintingEnabled>false</StaticWebAssetFingerprintingEnabled>
-        <WasmEnableSIMD>false</WasmEnableSIMD>
+        <!-- Disabling SIMD flips WasmBuildNative on, which drags the wasm native tooling
+             (ManagedToNativeGenerator & co) into every incremental build (~3s each). Only
+             production needs the SIMD-less runtime for old-browser support, so scope it to Release. -->
+        <WasmEnableSIMD Condition="'$(Configuration)' == 'Release'">false</WasmEnableSIMD>
     </PropertyGroup>
 
     <ItemGroup>
@@ -27,9 +33,6 @@
     </ItemGroup>
 
     <ItemGroup>
-        <Content Remove="compilerconfig.json" />
-        <None Include="compilerconfig.json" />
-
         <Content Remove="appsettings.json" />
         <EmbeddedResource Include="appsettings.json" />
         <PackageReference Include="Bit.Bswup" Version="10.6.0-pre-01" />
@@ -58,7 +61,15 @@
         <Using Include="Bit.Websites.Platform.Client.Services" />
         <Using Include="Bit.Websites.Platform.Shared" />
 
-        <Watch Remove="*.scss" />
+        <!-- dotnet watch: watch the ts sources (so edits trigger the tsc target on rebuilds) AND the
+             generated .razor.css files (so dotnet watch's scoped-css hot reload pushes style changes to
+             the browser when the in-app scss compiler regenerates them - see ScssCompilerService in the
+             server project). Scss sources are intentionally not watched here: the in-app compiler recompiles
+             them without a rebuild. Paths are rooted with $(MSBuildProjectDirectory) because dotnet watch
+             resolves relative Watch items of referenced projects against the startup project's directory. -->
+        <Watch Remove="**\*.scss" />
+        <Watch Include="$(MSBuildProjectDirectory)\**\*.ts" Exclude="$(MSBuildProjectDirectory)\node_modules\**;$(MSBuildProjectDirectory)\bin\**;$(MSBuildProjectDirectory)\obj\**;$(MSBuildProjectDirectory)\**\*.d.ts" />
+        <Watch Include="$(MSBuildProjectDirectory)\**\*.razor.css" Exclude="$(MSBuildProjectDirectory)\node_modules\**;$(MSBuildProjectDirectory)\bin\**;$(MSBuildProjectDirectory)\obj\**" />
     </ItemGroup>
 
     <ItemGroup>
@@ -78,9 +89,11 @@
     </ItemGroup>
 
     <ItemGroup>
-        <IsolatedScssFiles Include="**\*.razor.scss" />
+        <IsolatedScssFiles Include="**\*.razor.scss" Exclude="node_modules\**;bin\**;obj\**" />
         <GlobalScssFiles Include="Styles\**\*.scss" />
-        <TypeScriptFiles Include="**\*.ts" />
+        <!-- Exclude node_modules & build output: stray newer files there would defeat the
+             BuildJavaScript target's up-to-date check and re-run tsc on every build. -->
+        <TypeScriptFiles Include="**\*.ts" Exclude="node_modules\**;bin\**;obj\**" />
     </ItemGroup>
 
     <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile">
@@ -100,7 +113,7 @@
     </Target>
 
     <Target Name="BuildIsolatedScssFiles" Inputs="@(IsolatedScssFiles)" Outputs="@(IsolatedScssFiles-&gt;Replace('.scss', '.css'))">
-        <Exec Command="node_modules/.bin/sass .:. --style compressed --load-path=. --silence-deprecation=import" StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
+        <Exec Command="node_modules/.bin/sass .:. --update --style compressed --load-path=. --silence-deprecation=import" StandardOutputImportance="high" StandardErrorImportance="high" LogStandardErrorAsError="true" />
     </Target>
 
     <Target Name="BuildGlobalScssFiles" Inputs="@(GlobalScssFiles)" Outputs="wwwroot/styles/app.css">        

src/Websites/Platform/src/Bit.Websites.Platform.Client/Extensions/IJSRuntimeExtension.cs

@@ -6,4 +6,9 @@ public static async Task ToggleBodyOverflow(this IJSRuntime jsRuntime, bool isNa
     {
         await jsRuntime.InvokeVoidAsync("toggleBodyOverflow", isNavOpen);
     }
+
+    public static async Task BlurActiveElement(this IJSRuntime jsRuntime)
+    {
+        await jsRuntime.InvokeVoidAsync("blurActiveElement");
+    }
 }

src/Websites/Platform/src/Bit.Websites.Platform.Client/Extensions/IServiceCollectionExtensions.cs

@@ -11,7 +11,7 @@ public static IServiceCollection AddClientSharedServices(this IServiceCollection
     {
         services.AddSharedServices();
 
-        services.AddScoped<NavManuService>();
+        services.AddScoped<NavMenuService>();
 
         services.AddTransient<IPrerenderStateService, PrerenderStateService>();
         services.AddTransient<IExceptionHandler, ExceptionHandler>();

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/AboutUsPage.razor

@@ -3,7 +3,7 @@
 
 <PageOutlet Url="about-us"
             Title="About us"
-            Description="about the bit platform" />
+            Description="Meet the team behind bit platform and learn about our mission to empower C# .NET developers to build fast, cross-platform apps." />
 
 <div class="page-container">
     <section class="page-section vision-section">
@@ -45,9 +45,9 @@
 
     <section class="page-section download-section">
         <div class="page-section-content">
-            <BitText Typography="BitTypography.H3" Gutter>9M</BitText>
+            <BitText Typography="BitTypography.H3" Gutter>10M</BitText>
             <hr style="width:100%" />
-            <a href="https://www.nuget.org/profiles/bit-foundation" target="_blank">
+            <a href="https://www.nuget.org/profiles/bit-foundation" target="_blank" rel="noopener">
                 <BitText Typography="BitTypography.H5" Class="blue-txt">
                     Total downloads of packages
                 </BitText>
@@ -62,25 +62,25 @@
             <div class="member-card-list">
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/yaser-moradi.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/yaser-moradi.webp" alt="Yaser Moradi" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">Yaser Moradi</div>
                         <div class="member-position">Co-Founder</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/ysmoradi" target="_blank" />
-                            <a class="contact-lnk twitter" href="https://twitter.com/ysmoradi" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/ysmoradi" target="_blank" rel="noopener" aria-label="Yaser Moradi on GitHub"></a>
+                            <a class="contact-lnk twitter" href="https://twitter.com/ysmoradi" target="_blank" rel="noopener" aria-label="Yaser Moradi on X (Twitter)"></a>
                         </div>
                     </div>
                 </div>
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/saleh-yousefnejad.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/saleh-yousefnejad.webp" alt="Saleh Yusefnejad" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">Saleh Yusefnejad</div>
                         <div class="member-position">Co-Founder</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/msynk" target="_blank" />
-                            <a class="contact-lnk twitter" href="https://twitter.com/SalehYusefnejad" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/msynk" target="_blank" rel="noopener" aria-label="Saleh Yusefnejad on GitHub"></a>
+                            <a class="contact-lnk twitter" href="https://twitter.com/SalehYusefnejad" target="_blank" rel="noopener" aria-label="Saleh Yusefnejad on X (Twitter)"></a>
                         </div>
                     </div>
                 </div>
@@ -90,24 +90,24 @@
             <div class="member-card-list">
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/mohammad-aminsafaei.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/mohammad-aminsafaei.webp" alt="Mohammad Aminsafaei" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">Mohammad Aminsafaei</div>
                         <div class="member-position">Developer</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/Cyrus-Sushiant" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/Cyrus-Sushiant" target="_blank" rel="noopener" aria-label="Mohammad Aminsafaei on GitHub"></a>
                         </div>
                     </div>
                 </div>
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/mh-rastegari.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/mh-rastegari.webp" alt="M. H. Rastegarinia" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">M. H. Rastegarinia</div>
                         <div class="member-position">Developer</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/mhrastegari" target="_blank" />
-                            <a class="contact-lnk twitter" href="https://twitter.com/mhrastegari77" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/mhrastegari" target="_blank" rel="noopener" aria-label="M. H. Rastegarinia on GitHub"></a>
+                            <a class="contact-lnk twitter" href="https://twitter.com/mhrastegari77" target="_blank" rel="noopener" aria-label="M. H. Rastegarinia on X (Twitter)"></a>
                         </div>
                     </div>
                 </div>
@@ -117,23 +117,23 @@
             <div class="member-card-list">
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/zahra-sangtarash.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/zahra-sangtarash.webp" alt="Zahra Sangtarash" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">Zahra Sangtarash</div>
                         <div class="member-position">UI/UX designer</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/ZahraSng" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/ZahraSng" target="_blank" rel="noopener" aria-label="Zahra Sangtarash on GitHub"></a>
                         </div>
                     </div>
                 </div>
 
                 <div class="member-card">
-                    <img class="member-img" src="/images/about-us/team/zahra-yousefi.webp" alt="Team member image" width="70" height="70" />
+                    <img class="member-img" src="/images/about-us/team/zahra-yousefi.webp" alt="Zahra Yousefi" width="70" height="70" />
                     <div class="member-container">
                         <div class="member-name">Zahra Yousefi</div>
                         <div class="member-position">UI/UX designer</div>
                         <div class="contact-grp">
-                            <a class="contact-lnk github" href="https://github.com/zahra-yousefi" target="_blank" />
+                            <a class="contact-lnk github" href="https://github.com/zahra-yousefi" target="_blank" rel="noopener" aria-label="Zahra Yousefi on GitHub"></a>
                         </div>
                     </div>
                 </div>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql01OverviewPage.razor

@@ -1,13 +1,13 @@
-@page "/besql"
+@page "/besql"
 @page "/besql/overview"
 @inherits AppComponentBase
 
-<PageOutlet Url="besql/overview"
+<PageOutlet Url="besql"
             Title="Overview - Besql"
-            Description="overview of the bit Besql" />
+            Description="bit Besql brings Entity Framework Core and SQLite to the browser in Blazor WebAssembly apps, enabling offline-capable data storage." />
 
 <div class="page-container">
-    <BitText Typography="BitTypography.H3" Gutter>Besql</BitText>
+    <BitText Typography="BitTypography.H3" Element="h1" Gutter>Besql</BitText>
     <br />
     <BitText Typography="BitTypography.H5" Gutter>Blazor Entity Framework SQLite utilities</BitText>
     <br />
@@ -25,15 +25,15 @@
     </div>
     <br />
     <div class="video-container">
-        <iframe src="https://www.youtube.com/embed/ClpMKUboJmA?si=_P1DM9_-KcYRPWDl"
+        <iframe loading="lazy" src="https://www.youtube.com/embed/ClpMKUboJmA?si=_P1DM9_-KcYRPWDl"
                 width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
         </iframe>
     </div>
     <br />
     <div class="section-card-txt">
         You can find the sample source-code of the above video
-        <a href="https://github.com/bitfoundation/bitplatform-samples/tree/develop/videos/Bit.Besql" target="_blank">here</a>.
+        <a href="https://github.com/bitfoundation/bitplatform-samples/tree/develop/videos/Bit.Besql" target="_blank" rel="noopener">here</a>.
     </div>
     <br />
     <BitText Typography="BitTypography.H6" Gutter>Supported browsers</BitText>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql02InstallPage.razor

@@ -3,10 +3,10 @@
 
 <PageOutlet Url="besql/install"
             Title="Install - Besql"
-            Description="installing the bit Besql" />
+            Description="Install the Bit.Besql NuGet package to use Entity Framework Core with SQLite in your Blazor WebAssembly apps." />
 
 <div class="page-container">
-    <BitText Typography="BitTypography.H3" Gutter>Install bit Besql</BitText>
+    <BitText Typography="BitTypography.H3" Element="h1" Gutter>Install bit Besql</BitText>
     <br />
     <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to install the bit Besql?
@@ -28,7 +28,7 @@
             Open your Visual Studio's Manage NuGet Packages window and install the Bit.Besql package:
             <br />
             <br />
-            <img src="/images/besql/install-visualstudio.webp" class="besql-img" />
+            <img src="/images/besql/install-visualstudio.webp" class="besql-img" alt="Installing the Bit.Besql NuGet package in Visual Studio" loading="lazy" />
         </div>
     </section>
 </div>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Besql/Besql03UsagePage.razor

@@ -3,10 +3,10 @@
 
 <PageOutlet Url="besql/usage"
             Title="Usage - Besql"
-            Description="usage of the bit Besql" />
+            Description="Use bit Besql in three steps: add the script tag, register the services, then use EF Core's SQLite provider with IDbContextFactory in the browser." />
 
 <div class="page-container">
-    <BitText Typography="BitTypography.H3" Gutter>Using bit Besql</BitText>
+    <BitText Typography="BitTypography.H3" Element="h1" Gutter>Using bit Besql</BitText>
     <br />
     <BitText Typography="BitTypography.Subtitle1" Gutter>
         How to use the bit Besql?
@@ -38,4 +38,4 @@
     </section>
 </div>
 
-<NavigationButtons Prev="Overview" PrevUrl="/besql/overview" />
+<NavigationButtons Prev="Install" PrevUrl="/besql/install" />