Add Line component and update existing Razor files

Author: Ajay kumar

TestArena/Blog/Common/GithubGistSnippet.razor

@@ -1,14 +1,14 @@
 @inherits GithubGistSnippetBase
 
 <section class="[ flex flex-col ]">
-    <h4 class="[ bg-gray-200 ] [ p-2 ] [ font-semibold ] [ text-black ] [ flex items-center ]">
+    <h5 class="[ bg-gray-200 ] [ p-2 ] [ font-semibold ] [ text-black ] [ flex items-center ]">
         <svg xmlns="http://www.w3.org/2000/svg" class="[ icon icon-tabler icon-tabler-code ] [ text-purple-700 ] [ fill-purple-500 ]" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
             <polyline points="7 8 3 12 7 16"></polyline>
             <polyline points="17 8 21 12 17 16"></polyline>
             <line x1="14" y1="4" x2="10" y2="20"></line>
-        </svg> Code Sample - @Title
-    </h4>
+        </svg><code>Code Sample - @Title</code>
+    </h5>
     <article id="@Id" class="[ bg-gray-300 ]">
     </article>
 </section>

TestArena/Blog/Common/TextDecorators/FailureMessage.razor

@@ -1,5 +1,4 @@
-<h3>FailureMessage</h3>
-
 @code {
-    
-}
+    [Parameter, EditorRequired] public RenderFragment ChildContent { get; set; } = default!;
+}
+<span class="text-danger">@ChildContent</span>

TestArena/Blog/Common/TextDecorators/Line.razor

@@ -0,0 +1,7 @@
+@code {
+    [Parameter, EditorRequired] public int Number { get; set; }
+    [Parameter] public string Text { get; set; } = "Line"!;
+
+    public string LineTextWithLineNumber => Text + " #" + Number;
+}
+<span class="text-success">@LineTextWithLineNumber</span>

TestArena/Blog/PactNet/Intro/FailureScenario.razor

@@ -1,17 +1,18 @@
 @using TestArena.Blog.Common
+@using TestArena.Blog.Common.TextDecorators
 
 <Section Heading="Failure Scenario">
     <ChildContent>
 
         <p>To test out failure scenario, we will try to change the pact file manually and mimic a scenario such that the
-            consumer is expecting another field called “classId” (line 26) which, at the moment, our provider API does
+            consumer is expecting another field called <code>classId</code> (<Line Number="22"/>) which, at the moment, our provider API does
             not supports. After manually changing the pact file the response expected by consumer service will look like
             below:</p>
         <GithubGistSnippet Title="Changing pact file manually to mimic fail scenario" UserId="ajaysskumar"
                            FileName="5762614e542611588dacff1d77158bd8"/>
 
         <p>After this, if we try to get this pact file verified by our provider unit test, we will get a failure result
-            indicating why the test failed. The failure message ($ -> Actual map is missing the following keys: classId)
+            indicating why the test failed. The failure message (<FailureMessage>$ -> Actual map is missing the following keys: classId</FailureMessage>)
             below indicates the field name that was not supported by the provider API but was expected by the consumer
             service.</p>
 

TestArena/Blog/PactNet/Intro/ProviderSideTest.razor

@@ -1,4 +1,5 @@
 @using TestArena.Blog.Common
+@using TestArena.Blog.Common.TextDecorators
 
 <Section Heading="Provider side tests and verification of pact file:">
     <ChildContent>
@@ -20,7 +21,7 @@
 
         <p>In ProviderStateMiddleware class we are trying to setup the state of the system. It is to note that using Pact we can write complex test scenarios as well. For example lets say if student address anything other than Delhi then, consumer is expecting an additional field called City. These kind of scenarios can be handled by defining the state of the Provider API using state middlewares like below.</p>
 
-        <p>In the below middleware, we are adding a middleware that will add a student with id 1 in the system. If you correlate, then code (line #28) below is the same sentence that is mentioned in the pact file, provider state section.</p>
+        <p>In the below middleware, we are adding a middleware that will add a student with id 1 in the system. If you correlate, then code (<Line Number="11"/>) below is the same sentence that is mentioned in the pact file, provider state section.</p>
 
         <GithubGistSnippet Title="ProviderStateMiddleware class" UserId="ajaysskumar" FileName="1840eccd3ce4a945c78c0996f9bb45d3"/>
 
@@ -30,7 +31,7 @@
 
         <GithubGistSnippet Title="TestStartup class" UserId="ajaysskumar" FileName="8d26f9a989788452d1a50bc18a1da21d"/>
 
-        <p>Finally the test case. In the test case, instruct Pact verifier about which fixture class to use for setting up and running the host (line 16) and along with the path of the Pact file that was generated by the consumer. Pact verifier take all the required information about host and pact file and finally runs <code>Verify()</code> method.</p>
+        <p>Finally the test case. In the test case, instruct Pact verifier about which fixture class to use for setting up and running the host (<Line Number="5"/>) and along with the path of the Pact file that was generated by the consumer (<Line Number="11"/>). Pact verifier take all the required information about host and pact file and finally runs <code>Verify()</code> method.</p>
 
         <GithubGistSnippet Title="Provider test class" UserId="ajaysskumar" FileName="72d9859ec5c4b2f8cf82b684dc7ded6b"/>