Skip to content

Refactor and optimize htmx attributes #812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 21, 2025
Merged

Refactor and optimize htmx attributes #812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8314f3d
Refactor and optimize htmx attributes
reakaleek Mar 21, 2025
c4da40a
Remove excess attribute
reakaleek Mar 21, 2025
2cd1118
Fix tests
reakaleek Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions src/Elastic.Markdown/Helpers/Htmx.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,20 @@ public static string GetHxSelectOob(bool hasSameTopLevelGroup)
return selectTargets;
}

public static string GetPreload() => "true";
public const string Preload = "mousedown";
public const string HxSwap = "none";
public const string HxPushUrl = "true";
public const string HxIndicator = "#htmx-indicator";

private static string GetHxSwap() => "none";
private static string GetHxPushUrl() => "true";
private static string GetHxIndicator() => "#htmx-indicator";

public static string GetHxAttributes(string targetUrl, bool hasSameTopLevelGroup)
public static string GetHxAttributes(string targetUrl, bool hasSameTopLevelGroup, string? preload = Preload)
{
var attributes = new StringBuilder();
_ = attributes.Append($" hx-get={targetUrl}");
_ = attributes.Append($" hx-select-oob={GetHxSelectOob(hasSameTopLevelGroup)}");
_ = attributes.Append($" hx-swap={GetHxSwap()}");
_ = attributes.Append($" hx-push-url={GetHxPushUrl()}");
_ = attributes.Append($" hx-indicator={GetHxIndicator()}");
_ = attributes.Append($" preload={GetPreload()}");
_ = attributes.Append($" hx-swap={HxSwap}");
_ = attributes.Append($" hx-push-url={HxPushUrl}");
_ = attributes.Append($" hx-indicator={HxIndicator}");
_ = attributes.Append($" preload={preload}");
return attributes.ToString();
}
}
8 changes: 4 additions & 4 deletions src/Elastic.Markdown/Myst/Renderers/HtmxLinkInlineRenderer.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ protected override void Write(HtmlRenderer renderer, LinkInline link)
_ = renderer.WriteEscapeUrl(url);
_ = renderer.Write('"');
_ = renderer.Write($" hx-select-oob=\"{Htmx.GetHxSelectOob(currentRootNavigation?.Id == targetRootNavigation?.Id)}\"");
_ = renderer.Write(" hx-swap=\"none\"");
_ = renderer.Write(" hx-push-url=\"true\"");
_ = renderer.Write(" hx-indicator=\"#htmx-indicator\"");
_ = renderer.Write($" preload=\"{Htmx.GetPreload()}\"");
_ = renderer.Write($" hx-swap=\"{Htmx.HxSwap}\"");
_ = renderer.Write($" hx-push-url=\"{Htmx.HxPushUrl}\"");
_ = renderer.Write($" hx-indicator=\"{Htmx.HxIndicator}\"");
_ = renderer.Write($" preload=\"{Htmx.Preload}\"");
}
else if (link.Url?.StartsWith("http") == true && (link.GetData("isCrossLink") as bool?) == false)
{
Expand Down
14 changes: 2 additions & 12 deletions src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
{
<a
href="@Model.Previous.Url"
hx-get="@Model.Previous.Url"
hx-select-oob="@Htmx.GetHxSelectOob(Model.CurrentDocument.RootNavigation.Id == Model.Previous.RootNavigation.Id)"
hx-swap="none"
hx-push-url="true"
hx-indicator="#htmx-indicator"
preload="@Htmx.GetPreload()"
@Htmx.GetHxAttributes(Model.Previous.Url, Model.CurrentDocument.RootNavigation.Id == Model.Previous.RootNavigation.Id)
class="flex h-full items-center text-ink-light hover:black border-1 border-grey-20 hover:border-grey-80 rounded-lg p-6 shadow-md"
>
<svg class="size-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
Expand All @@ -30,12 +25,7 @@
{
<a
href="@Model.Next.Url"
hx-get="@Model.Next.Url"
hx-select-oob="@Htmx.GetHxSelectOob(Model.CurrentDocument.RootNavigation.Id == Model.Next.RootNavigation.Id)"
hx-swap="none"
hx-push-url="true"
hx-indicator="#htmx-indicator"
preload="@Htmx.GetPreload()"
@Htmx.GetHxAttributes(Model.Next.Url, Model.CurrentDocument.RootNavigation.Id == Model.Next.RootNavigation.Id)
class="flex h-full items-center justify-end text-ink-light hover:black border-1 border-grey-20 hover:border-grey-80 rounded-lg p-6 shadow-md text-right"
>
<div>
Expand Down
9 changes: 4 additions & 5 deletions src/Elastic.Markdown/Slices/Layout/_TocTree.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<a
class="hover:underline text-blue-elastic hover:text-blue-elastic-100"
href="@current.Group.Index?.Url"
@Htmx.GetHxAttributes(current.Group.Index?.Url!, true)
@Htmx.GetHxAttributes(current.Group.Index?.Url!, false)
>
@current.Group.Index?.NavigationTitle
</a>
Expand All @@ -39,10 +39,9 @@
<a
class="block py-2 px-4 hover:underline hover:text-black hover:bg-grey-10 active:bg-blue-elastic-70 active:text-white font-semibold @(item.Group.Id == Model.Tree.Id ? "text-blue-elastic" : "")"
href="@item.Group.Index.Url"
hx-get="@item.Group.Index.Url"
hx-select-oob="#pages-nav,#content-container,#toc-nav"
hx-push-url="true"
preload>@item.Group.Index.NavigationTitle</a>
@Htmx.GetHxAttributes(item.Group.Index.Url, false, "mouseover")>
@item.Group.Index.NavigationTitle
</a>
</li>
}
</ul>
Expand Down
10 changes: 5 additions & 5 deletions tests/Elastic.Markdown.Tests/Inline/AnchorLinkTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ [Sub Requirements](testing/req.md#sub-requirements)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
);

[Fact]
Expand All @@ -93,7 +93,7 @@ [Sub Requirements](testing/req.md#new-reqs)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#new-reqs" hx-get="/docs/testing/req#new-reqs" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
);

[Fact]
Expand All @@ -110,7 +110,7 @@ public class ExternalPageAnchorAutoTitleTests(ITestOutputHelper output) : Anchor
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements &gt; Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#sub-requirements" hx-get="/docs/testing/req#sub-requirements" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements &gt; Sub Requirements</a></p>"""
);

[Fact]
Expand Down Expand Up @@ -146,7 +146,7 @@ [Sub Requirements](testing/req.md#sub-requirements2)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#sub-requirements2" hx-get="/docs/testing/req#sub-requirements2" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
);

[Fact]
Expand All @@ -165,7 +165,7 @@ [Heading inside dropdown](testing/req.md#heading-inside-dropdown)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Heading inside dropdown</a>"""
"""<a href="/docs/testing/req#heading-inside-dropdown" hx-get="/docs/testing/req#heading-inside-dropdown" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Heading inside dropdown</a>"""
);
[Fact]
public void HasError() => Collector.Diagnostics.Should().HaveCount(0);
Expand Down
2 changes: 1 addition & 1 deletion tests/Elastic.Markdown.Tests/Inline/DirectiveBlockLinkTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ [Sub Requirements](testing/req.md#hint_ref)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#hint_ref" hx-get="/docs/testing/req#hint_ref" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
);

[Fact]
Expand Down
2 changes: 1 addition & 1 deletion tests/Elastic.Markdown.Tests/Inline/InlineAnchorTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ [Sub Requirements](testing/req.md#custom-anchor)
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Sub Requirements</a></p>"""
"""<p><a href="/docs/testing/req#custom-anchor" hx-get="/docs/testing/req#custom-anchor" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Sub Requirements</a></p>"""
);

[Fact]
Expand Down
12 changes: 6 additions & 6 deletions tests/Elastic.Markdown.Tests/Inline/InlineLinkTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ public class InlineLinkTests(ITestOutputHelper output) : LinkTestBase(output,
public void GeneratesHtml() =>
// language=html
Html.Should().Be(
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#content-container,#toc-nav,#pages-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Elasticsearch</a></p>"""
"""<p><a href="/docs/_static/img/observability.png" hx-get="/docs/_static/img/observability.png" hx-select-oob="#content-container,#toc-nav,#pages-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Elasticsearch</a></p>"""
);

[Fact]
Expand All @@ -66,7 +66,7 @@ public class LinkToPageTests(ITestOutputHelper output) : LinkTestBase(output,
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Requirements</a></p>"""
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Requirements</a></p>"""
);

[Fact]
Expand All @@ -86,7 +86,7 @@ public class InsertPageTitleTests(ITestOutputHelper output) : LinkTestBase(outpu
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></p>"""
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></p>"""
);

[Fact]
Expand All @@ -108,7 +108,7 @@ public class LinkReferenceTest(ITestOutputHelper output) : LinkTestBase(output,
public void GeneratesHtml() =>
// language=html
Html.Should().Contain(
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">test</a></p>"""
"""<p><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">test</a></p>"""
);

[Fact]
Expand Down Expand Up @@ -270,10 +270,10 @@ public void GeneratesHtml() =>
Html.ReplaceLineEndings().TrimEnd().Should().Be("""
<p>Links:</p>
<ul>
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></li>
</ul>
<ul>
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="true">Special Requirements</a></li>
<li><a href="/docs/testing/req" hx-get="/docs/testing/req" hx-select-oob="#content-container,#toc-nav" hx-swap="none" hx-push-url="true" hx-indicator="#htmx-indicator" preload="mousedown">Special Requirements</a></li>
</ul>
""".ReplaceLineEndings());

Expand Down
Loading