[Blog] [Ajay]: Add gist component

Ajay kumar · Ajay kumar · commit 5acd5f84585e · 2025-03-02T13:19:32.000+05:30
diff --git a/TestArena/Blog/Common/GithubGistSnippet.razor b/TestArena/Blog/Common/GithubGistSnippet.razor
@@ -0,0 +1,14 @@
+@inherits GithubGistSnippetBase
+
+<section class="[ flex flex-col ]">
+    <h4 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>
+    <article id="@Id" class="[ bg-gray-300 ]">
+    </article>
+</section>
diff --git a/TestArena/Blog/Common/GithubGistSnippet.razor.cs b/TestArena/Blog/Common/GithubGistSnippet.razor.cs
@@ -0,0 +1,32 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace TestArena.Blog.Common;
+
+public class GithubGistSnippetBase : ComponentBase, IAsyncDisposable
+{
+    private IJSObjectReference? module;
+
+    protected string Id = Guid.NewGuid().ToString();
+
+    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
+
+    [Parameter, EditorRequired] public string Title { get; set; } = default!;
+    [Parameter, EditorRequired] public string UserId { get; set; } = default!;
+    [Parameter, EditorRequired] public string FileName { get; set; } = default!;
+
+    protected override async Task OnInitializedAsync()
+    {
+        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/githubgist.js");
+
+        await module.InvokeVoidAsync("printSnippetFrom", Id, UserId, FileName);
+    }
+
+    async ValueTask IAsyncDisposable.DisposeAsync()
+    {
+        if (module is not null)
+        {
+            await module.DisposeAsync();
+        }
+    }
+}
diff --git a/TestArena/Blog/PactNet/Intro/Index.razor b/TestArena/Blog/PactNet/Intro/Index.razor
@@ -7,4 +7,12 @@
     <Summary/>
     <BuildStepDetection />
     <HowToSteps />
+    
+    <Section Heading="Consumer side tests:">
+        <ChildContent>
+            <p>The very first step is to create a unit test file and initialize pact builder as shown below</p>
+            <GithubGistSnippet Title="Pact Builder Setup" UserId="ajaysskumar" FileName="c45d40c48ea2a3e2c81719e41df6f882"/>
+        </ChildContent>
+    </Section>
+    
 </BlogContainer>
diff --git a/TestArena/wwwroot/js/githubgist.js b/TestArena/wwwroot/js/githubgist.js
@@ -0,0 +1,20 @@
+export function printSnippetFrom(id, userId, filename) {
+    const target = document.getElementById(id);
+    const iframe = document.createElement('iframe');
+    const iframeId = `${userId}-${filename}`;
+    iframe.setAttribute("id", iframeId);
+    iframe.setAttribute("width", "100%");
+    target.appendChild(iframe);
+
+    let doc = iframe.document;
+    if (iframe.contentDocument) doc = iframe.contentDocument;
+    else if (iframe.contentWindow) doc = iframe.contentWindow.document;
+
+    const gistScript = `<script src="https://gist.github.com/${userId}/${filename}.js"></script>`;
+    const resizeScript = `onload="parent.document.getElementById('${iframeId}').style.height=document.body.scrollHeight + 'px'"`;
+    const iframeHtml = `<html><body ${resizeScript}>${gistScript}</body></html>`;
+
+    doc.open();
+    doc.writeln(iframeHtml);
+    doc.close();
+}
