search

egil / Htmxor

Supercharges Blazor static server side rendering (SSR) by seamlessly integrating the Htmx.org frontend library.
MIT License
126 stars 13 forks source link

Make <PageTitle> component HX-request aware #5

Closed egil closed 5 months ago

egil commented 9 months ago

By default, htmx will update the page's title if it finds a tag in the response content. </p> <p>Since the <code><PageTitle></code> component is used in Blazor to do the same thing from any page component, we can make the integration work seamlessly by overriding the <code><PageTitle></code> component behavior to write out a <code><title></code> element where it is being added to the component tree, allowing HX to do its magic.</p> <p>That should only happen when Htmxor is processing an HX request. On normal full page loads the <code><PageTitle></code> component should behave as normal.</p> <p>This can be done by Htmxor including a custom <code>IComponentActivator</code> that returns a different component type during HX requests.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/egil"><img src="https://avatars.githubusercontent.com/u/105649?v=4" />egil</a> commented <strong> 5 months ago</strong> </div> <div class="markdown-body"> <p>For now, if there is a <code><HeadOutlet /></code> in the component tree, the <code><PageTitle></code> component will render the title element and htmx will pick up on that.</p> <pre><code>@page "/replace-head-elements" @inject HtmxContext ctx @if (ctx.Request.IsHtmxRequest) { <head> <HeadOutlet /> </head> <PageTitle>Htmx request @DateTimeOffset.UtcNow</PageTitle> } else { <PageTitle>Normal request</PageTitle> } <button hx-get="/replace-head-elements" type="button" hx-target="this" hx-swap="outerHTML">Change title</button></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/egil"><img src="https://avatars.githubusercontent.com/u/105649?v=4" />egil</a> commented <strong> 5 months ago</strong> </div> <div class="markdown-body"> <p>This is supported by having an hx layout that has includes the headoutlet component. Then the page title component just works. </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>