graywolfcorp/GitHubGistSnippet.txt

## GitHubGistSnippet.txt
Original idea can be found at  https://stackoverflow.com/questions/70732135/how-to-embed-github-gist-in-blazor-wasm

Modified for Blazor server and MudBlazor

Usage:

<GithubGistSnippet Title="Test" UserId="graywolfcorp" FileName="08cafafda5d51ccdac25a8b45afd3d77"></GithubGistSnippet>


GitHubGistSnippet.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

public class GithubGistSnippetBase : ComponentBase
{
    //https://stackoverflow.com/questions/70732135/how-to-embed-github-gist-in-blazor-wasm

    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 OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/githubgist.js");
            await module.InvokeVoidAsync("printSnippetFrom", Id, UserId, FileName);
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

GitHubGistSnippet.razor

@inherits GithubGistSnippetBase

 <MudCard>
    <MudCardHeader Class="mb-0 pb-0 pl-6">
        <CardHeaderContent >
            <MudGrid >
                <MudItem xs="8">
                    <MudText Typo="Typo.h6">
                        Code Sample - @Title
                    </MudText>
                </MudItem>
                <MudItem xs="4">
                    <MudText Align="Align.Right">
                        <a target="_blank" href="https://gist.github.com/@UserId/@FileName">
                            View at GitHub
                            <MudIcon Icon="@Icons.Custom.Brands.GitHub" Title="GitHub" />
                        </a>
                    </MudText>
                </MudItem>
            </MudGrid>
        </CardHeaderContent>
    </MudCardHeader>

    <MudCardContent >
        <span id="@Id"></span>
    </MudCardContent>
</MudCard>

gothubgist.js

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 styleScript = '<style>.gist .gist-meta { display: none !important; }</style>';    // this will hide gist footer to prevent link errors
    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><head>${styleScript}</head><body ${resizeScript}>${gistScript}</body></html>`;

    doc.open();
    doc.writeln(iframeHtml);
    doc.close();
}
	Original idea can be found at https://stackoverflow.com/questions/70732135/how-to-embed-github-gist-in-blazor-wasm

	Modified for Blazor server and MudBlazor

	Usage:

	<GithubGistSnippet Title="Test" UserId="graywolfcorp" FileName="08cafafda5d51ccdac25a8b45afd3d77"></GithubGistSnippet>


	GitHubGistSnippet.razor.cs

	using Microsoft.AspNetCore.Components;
	using Microsoft.JSInterop;

	public class GithubGistSnippetBase : ComponentBase
	{
	//https://stackoverflow.com/questions/70732135/how-to-embed-github-gist-in-blazor-wasm

	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 OnAfterRenderAsync(bool firstRender)
	{
	if (firstRender)
	{
	module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Scripts/githubgist.js");
	await module.InvokeVoidAsync("printSnippetFrom", Id, UserId, FileName);
	}

	await base.OnAfterRenderAsync(firstRender);
	}
	}

	GitHubGistSnippet.razor

	@inherits GithubGistSnippetBase

	<MudCard>
	<MudCardHeader Class="mb-0 pb-0 pl-6">
	<CardHeaderContent >
	<MudGrid >
	<MudItem xs="8">
	<MudText Typo="Typo.h6">
	Code Sample - @Title
	</MudText>
	</MudItem>
	<MudItem xs="4">
	<MudText Align="Align.Right">
	<a target="_blank" href="https://gist.github.com/@UserId/@FileName">
	View at GitHub
	<MudIcon Icon="@Icons.Custom.Brands.GitHub" Title="GitHub" />
	</a>
	</MudText>
	</MudItem>
	</MudGrid>
	</CardHeaderContent>
	</MudCardHeader>

	<MudCardContent >
	<span id="@Id"></span>
	</MudCardContent>
	</MudCard>

	gothubgist.js

	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 styleScript = '<style>.gist .gist-meta { display: none !important; }</style>'; // this will hide gist footer to prevent link errors
	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><head>${styleScript}</head><body ${resizeScript}>${gistScript}</body></html>`;

	doc.open();
	doc.writeln(iframeHtml);
	doc.close();
	}