Last active
February 2, 2024 19:20
-
-
Save graywolfcorp/efa46b2fc2506f386a816332fe087a26 to your computer and use it in GitHub Desktop.
Suppress gist footer to prevent X-Origin errors from iframe links
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment