{"id":13466438,"url":"https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement","last_synced_at":"2025-03-25T21:32:17.917Z","repository":{"id":64665351,"uuid":"208071263","full_name":"jsakamoto/Toolbelt.Blazor.HeadElement","owner":"jsakamoto","description":"Head element support (change the document title, \"meta\" elements such as OGP, and \"link\" elements) for Blazor apps.","archived":false,"fork":false,"pushed_at":"2024-07-09T21:14:48.000Z","size":1089,"stargazers_count":158,"open_issues_count":23,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-21T12:11:33.055Z","etag":null,"topics":["blazor","head","meta","ogp","ogp-meta","title"],"latest_commit_sha":null,"homepage":"https://demo-blazor-headelement.azurewebsites.net/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsakamoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-12T14:30:08.000Z","updated_at":"2025-02-13T12:41:28.000Z","dependencies_parsed_at":"2024-07-31T15:13:06.019Z","dependency_job_id":null,"html_url":"https://github.com/jsakamoto/Toolbelt.Blazor.HeadElement","commit_stats":{"total_commits":181,"total_committers":2,"mean_commits":90.5,"dds":"0.027624309392265234","last_synced_commit":"6289cf906ffb39c244cc56b56b4fcb19c45d305d"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FToolbelt.Blazor.HeadElement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FToolbelt.Blazor.HeadElement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FToolbelt.Blazor.HeadElement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsakamoto%2FToolbelt.Blazor.HeadElement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsakamoto","download_url":"https://codeload.github.com/jsakamoto/Toolbelt.Blazor.HeadElement/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245548346,"owners_count":20633564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","head","meta","ogp","ogp-meta","title"],"created_at":"2024-07-31T15:00:44.199Z","updated_at":"2025-03-25T21:32:16.815Z","avatar_url":"https://github.com/jsakamoto.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Components","2D/3D Rendering engines"],"readme":"# Blazor Head Element Helper [![NuGet Package](https://img.shields.io/nuget/v/Toolbelt.Blazor.HeadElement.svg)](https://www.nuget.org/packages/Toolbelt.Blazor.HeadElement/)\n\n## Summary\n\nThis components and services allows you to **change the title of document, \"meta\" elements such as OGP, and \"link\" elements such as canonical url, favicon etc. on your Blazor app**.\n\nThis package supports both seiver-side Blazor and client-side Blazor WebAssembly app.\n\nAnd also supports server-side pre-rendering on your server-side Blazor app.\n\nSee also following the live demonstration sites.\n\n- [Blazor WebAssembly (Client-side Blazor) edition](https://demo-blazor-headelement-wasm.azurewebsites.net/)\n- [Blazor Server (Server-side Blazor) edition](https://demo-blazor-headelement.azurewebsites.net/)\n\n### Notice\n\nBlazor on .NET 6 (since preview 7) or later has started to provide `\u003cPageTitle\u003e` and `\u003cHeadContent\u003e` components.\n\n_[\"ASP.NET Core updates in .NET 6 Preview 7 - Modify HTML `\u003chead\u003e` content from Blazor components\" | ASP.NET Blog](https://j.mp/3zJ9mWD)_\n\nHowever, I'm going to continue to provide this package and keep maintaining, because this library still has a few advantages in some edge cases.\n\nPlease see the following table to know the differences between this library and `\u003cPageTitle\u003e`/`\u003cHeadContent\u003e` components in .NET 6 or later.\n\nFeature                               | This library            | .NET6 or later\n--------------------------------------|-------------------------|--------------------------------------------  \nOverriding pre-rendered meta or link  | 👍 Can handle it properly. | 😢 Just append it. it may cause duplication.\nCanceling `\u003cmeta \"http-equiv\"=\"refresh\" /\u003e`   | 👍 Works well.             | 😢 There is no support.\nUsing it as a service, not components | 👍 Supported.              | 😢 Maybe not Supported.\nModify `\u003chead\u003e` content from many places | 👍 Can do. | 😢 Only one instance of the `\u003cHeadContent\u003e` component can effect.\nServer-side pre-rendering | 👍 Just add one line inside the server code. | 😢 You have to split the fallback page into two .cshtml files for resolving complicated rendering order problems.\nControlling the order of elements inside a `\u003chead\u003e` | 😢 hard | 👍 Can control perfectly\nSupport | 😢 Just personal hobby | 👍 Official support from the ASP.NET Team\n\n## How to use\n\n### Installation\n\n1. Add package to your project like this.\n\n```shell\ndotnet add package Toolbelt.Blazor.HeadElement\n```\n\n2. Register \"Head Element Helper\" service at your Blazor app's `Startup`.\n\n```csharp\nusing Toolbelt.Blazor.Extensions.DependencyInjection; // \u003c- Add this, and...\n\npublic class Startup\n{\n  public void ConfigureServices(IServiceCollection services)\n  {\n    services.AddHeadElementHelper(); // \u003c- Add this.\n    ...\n```\n\nIf the project is Blazor WebAssembly App v.3.2+, you should do it in `Program` class, instead.\n\n```csharp\nusing Toolbelt.Blazor.Extensions.DependencyInjection; // \u003c- Add this, and...\n...\npublic class Program\n{\n  public static async Task Main(string[] args)\n  {\n    var builder = WebAssemblyHostBuilder.CreateDefault(args);\n    ...\n    builder.Services.AddHeadElementHelper(); // \u003c- Add this.\n    ...\n```\n\n\n3. Open `Toolbelt.Blazor.HeadElement` namespace in `_Imports.razor` file.\n\n```\n@* This is \"_Imports.razor\" *@\n...\n@using Toolbelt.Blazor.HeadElement\n```\n\n### A. Change the title of the document\n\n3. Markup `\u003cTitle\u003e` component in your .razor file.\n\n```html\n@* This is \"Pages/Counter.razor\" *@\n@page \"/counter\"\n\n\u003cTitle\u003eCounter(@currentCount) - Server Side App\u003c/Title\u003e\n```\n\nThe title of document will be changed.\n\n![fig1](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.HeadElement/master/.assets/fig1.png)\n\n### B. Change \"meta\" elements\n\nYou can also add or override \"meta\" elements at runtime dynamically using `\u003cMeta\u003e` component like this.\n\n```html\n@* This is \"Pages/Counter.razor\" *@\n@page \"/counter\"\n\n\u003cMeta Property=\"ogp:title\" Content=\"Counter\" /\u003e\n```\n\n_**Note:**_ You can also use native attribute names (lower and kebab case. ex: \"http-equiv\") instead of Razor component parameter names (pascal case).\n\n### C. Change \"link\" elements\n\nYou can add or override \"link\" elements at runtime dynamically using `\u003cLink\u003e` component like this.\n\n```html\n@* This is \"Pages/Counter.razor\" *@\n@page \"/counter\"\n\n\u003cLink Rel=\"icon\" Href=\"@($\"/favicons/{GetFaviconName()}\")\" /\u003e\n```\n\n![fig3](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.HeadElement/master/.assets/fig3.gif)\n\n_**Note:**_ You can also use native attribute names (lower and kebab case) instead of Razor component parameter names (pascal case).\n\n### D. IHeadElementHelper\n\nYou can do these tasks by using `IHeadElementHelper` service instead of using `\u003cTitle\u003e`, `\u003cMeta\u003e`, and `\u003cLink\u003e` components.\n\nYou can get the `IHeadElementHelper` service instnace by \"Dependency Injection\" mechanism.\n\n```csharp\n@inject IHeadElementHelper HeadElementHelper\n@using static Toolbelt.Blazor.HeadElement.MetaElement\n...\n@code {\n  protected override async Task OnInitializedAsync()\n  {\n    await HeadElementHelper.SetTitleAsync(\"Wow!\");\n    await HeadElementHelper.SetMetaElementsAsync(\n      ByName(\"description\", \"Foo bar...\"),\n      ByProp(\"og:title\", \"WoW!\")\n    );\n    await HeadElementHelper.SetLinkElementsAsync(\n      new LinkElement(\"canonical\", \"https://foo.com/bar\")\n    );\n    ...\n```\n\n## Server-side pre-rendering support\n\nIf you want to get srever-side pre-rendering support, do this.\n\n1. Add `Toolbelt.Blazor.HeadElement.ServerPrerendering` package to your project like this.\n\n```shell\ndotnet add package Toolbelt.Blazor.HeadElement.ServerPrerendering\n```\n\n2. Register \"Head Element Server Prerendering\" middleware at your server-side Blazor app's `Startup`, before `app.UseStaticFiles()`.\n\n```csharp\nusing Toolbelt.Blazor.Extensions.DependencyInjection; // \u003c- Add this, and...\n...\npublic class Startup\n{\n  ...\n  public void ConfigureServices(IServiceCollection services)\n  {\n    services.AddHeadElementHelper(); // \u003c!- Don't miss this line, and...\n    ...\n\n  public void Configure(IApplicationBuilder app)\n  {\n    app.UseHeadElementServerPrerendering(); // \u003c- Add this.\n    ...\n    app.UseStaticFiles()\n    ...\n```\n\n![fig2](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.HeadElement/master/.assets/fig2.png)\n\n## License\n\n[Mozilla Public License Version 2.0](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.HeadElement/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2FToolbelt.Blazor.HeadElement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsakamoto%2FToolbelt.Blazor.HeadElement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsakamoto%2FToolbelt.Blazor.HeadElement/lists"}