Improve and update the sample site

Author: jsakamoto

SampleApps/BlazorWasmApp/BlazorWasmApp.csproj

@@ -12,13 +12,13 @@
     <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all" />
-    <PackageReference Include="PublishSPAforGitHubPages.Build" Version="2.2.0" />
+    <PackageReference Include="PublishSPAforGitHubPages.Build" Version="3.0.0" />
     <PackageReference Include="System.Text.Json" Version="8.0.4" />
   </ItemGroup>
 
   <ItemGroup>
     <!--<ProjectReference Include="..\..\SplitContainer\SplitContainer.csproj" />-->
-    <PackageReference Include="Toolbelt.Blazor.SplitContainer" Version="2.0.0" />
+    <PackageReference Include="Toolbelt.Blazor.SplitContainer" Version="2.0.1" />
   </ItemGroup>
 
 </Project>

SampleApps/BlazorWasmApp/Example2.razor

@@ -2,19 +2,31 @@
 
 <h2>Nesting</h2>
 
-<SplitContainer TSize="int" Id="split-container-2" Orientation="SplitterOrientation.Vertical" Style="width:100%; height:400px;" FirstPaneSize="128" FirstPaneMinSize="80" SecondPaneMinSize="80">
+<SplitContainer TSize="int" Id="split-container-2" Orientation="SplitterOrientation.Vertical" Style="width:100%; height:400px;" FirstPaneSize="160" FirstPaneMinSize="80" SecondPaneMinSize="180">
+
     <FirstPane>
         <h1>Blazor</h1>
     </FirstPane>
 
     <SecondPane>
         <SplitContainer TSize="int" Orientation="SplitterOrientation.Horizontal" Style="width:100%; height:100%;" SecondPaneSize="128" FirstPaneMinSize="80" SecondPaneMinSize="80">
+
             <FirstPane>
-                <h1>Split</h1>
+                <SplitContainer TSize="int" Orientation="SplitterOrientation.Vertical" Style="width:100%; height:100%;" FirstPaneSize="128" FirstPaneMinSize="80" SecondPaneMinSize="80">
+
+                    <FirstPane>
+                        <h1>Split</h1>
+                    </FirstPane>
+
+                    <SecondPane>
+                        <h1>Container</h1>
+                    </SecondPane>
+
+                </SplitContainer>
             </FirstPane>
 
             <SecondPane>
-                <h1>Container</h1>
+                <h1>Component</h1>
             </SecondPane>
 
         </SplitContainer>

SampleApps/BlazorWasmApp/Shared/Layout.razor.css

@@ -31,12 +31,23 @@ main {
 }
 
 ::deep h1 {
-    margin: 0 20px;
+    margin: 0;
+    padding: 0 20px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    border: dashed 2px blueviolet;
+    position: absolute;
+    inset: 0;
+    text-align: center;
 }
 
+    ::deep h1::before {
+        content: "";
+        display: block;
+        height: calc(50% - 0.8em);
+    }
+
 ::deep .split-container {
     --splitter-bar-size: 14px;
 }
@@ -47,10 +58,3 @@ main {
     justify-content: center;
     align-items: center;
 }
-
-::deep #split-container-1 .pane-of-split-container,
-::deep #split-container-2 .pane-of-split-container:first-of-type,
-::deep #split-container-2 .pane-of-split-container:last-of-type .pane-of-split-container:last-of-type,
-::deep #split-container-3 .pane-of-split-container {
-    border: dashed 2px blueviolet;
-}