Skip to content

Commit c4ef075

Browse files
DavidOliverDavidOliver
authored
Revert hover link approach to fix markup of headings containing links (#1752)
1 parent 7612584 commit c4ef075

File tree

6 files changed

+45
-51
lines changed

6 files changed

+45
-51
lines changed

‎assets/css/content/admonition.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108

109109
.content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) :is(a, a:visited) {
110110
color: inherit;
111+
text-decoration-color: currentColor;
111112
}
112113

113114
@media screen and (max-width: 768px) {

‎assets/css/content/general.css

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,23 +132,29 @@
132132
}
133133

134134
.content-inner .section-heading a {
135-
color: var(--links);
136-
text-decoration: none;
135+
color: var(--links);
137136
display: inline-block;
138137
}
139138

140139
.content-inner .section-heading a.no-underline {
141140
color: var(--links);
142141
}
143142

143+
.content-inner .section-heading a.hover-link {
144+
text-decoration: none;
145+
}
146+
144147
.content-inner .section-heading i {
145-
font-size: 16px;
148+
--icon-size: 16px;
149+
--icon-spacing: 5px;
150+
font-size: var(--icon-size);
146151
margin-top: .1em;
147-
margin-left: -21px;
152+
margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
153+
padding-right: var(--icon-spacing);
148154
opacity: 0;
149155
}
150156

151-
.content-inner .section-heading a:is(:hover, :focus) i {
157+
.content-inner .section-heading:hover i {
152158
opacity: 1;
153159
}
154160

‎lib/ex_doc/formatter/html/templates.ex

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -302,10 +302,9 @@ defmodule ExDoc.Formatter.HTML.Templates do
302302

303303
"""
304304
<#{tag} id="#{prefix}#{id}" class="#{class_attribute}">
305-
<a href="##{prefix}#{id}">
305+
<a href="##{prefix}#{id}" class="hover-link">
306306
<i class="ri-link-m" aria-hidden="true"></i>
307-
#{title}
308-
</a>
307+
</a>#{title}
309308
</#{tag}>
310309
"""
311310
end

‎test/ex_doc/formatter/epub/templates_test.exs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ defmodule ExDoc.Formatter.EPUB.TemplatesTest do
6060
assert content =~ ~r{<h1 id="content">\s*CompiledWithDocs\s*}
6161

6262
assert content =~
63-
~r{<h2 id="module-example-unicode-escaping" class="section-heading">.*<a href="#module-example-unicode-escaping">.*<i class="ri-link-m" aria-hidden="true"></i>.*Example.*</a>.*</h2>}ms
63+
~r{<h2 id="module-example-unicode-escaping" class="section-heading">.*<a href="#module-example-unicode-escaping" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*Example.*</h2>}ms
6464

6565
assert content =~
66-
~r{<h3 id="module-example-h3-heading" class="section-heading">.*<a href="#module-example-h3-heading">.*<i class="ri-link-m" aria-hidden="true"></i>.*Example H3 heading.*</a>.*</h3>}ms
66+
~r{<h3 id="module-example-h3-heading" class="section-heading">.*<a href="#module-example-h3-heading" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*Example H3 heading.*</h3>}ms
6767

6868
assert content =~
6969
~r{moduledoc.*Example.*<samp class="nc">CompiledWithDocs</samp><samp class="o">\.</samp><samp class="n">example</samp>.*}ms

‎test/ex_doc/formatter/html/templates_test.exs

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -47,101 +47,90 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
4747
test "generates headers with hovers" do
4848
assert Templates.link_headings("<h2>Foo</h2><h2>Bar</h2>") == """
4949
<h2 id="foo" class="section-heading">
50-
<a href="#foo">
50+
<a href="#foo" class="hover-link">
5151
<i class="ri-link-m" aria-hidden="true"></i>
52-
Foo
53-
</a>
52+
</a>Foo
5453
</h2>
5554
<h2 id="bar" class="section-heading">
56-
<a href="#bar">
55+
<a href="#bar" class="hover-link">
5756
<i class="ri-link-m" aria-hidden="true"></i>
58-
Bar
59-
</a>
57+
</a>Bar
6058
</h2>
6159
"""
6260

6361
assert Templates.link_headings("<h2>Foo</h2>\n<h2>Bar</h2>") == """
6462
<h2 id="foo" class="section-heading">
65-
<a href="#foo">
63+
<a href="#foo" class="hover-link">
6664
<i class="ri-link-m" aria-hidden="true"></i>
67-
Foo
68-
</a>
65+
</a>Foo
6966
</h2>
7067
7168
<h2 id="bar" class="section-heading">
72-
<a href="#bar">
69+
<a href="#bar" class="hover-link">
7370
<i class="ri-link-m" aria-hidden="true"></i>
74-
Bar
75-
</a>
71+
</a>Bar
7672
</h2>
7773
"""
7874

7975
assert Templates.link_headings("<h2></h2><h2>Bar</h2>") == """
8076
<h2></h2><h2 id="bar" class="section-heading">
81-
<a href="#bar">
77+
<a href="#bar" class="hover-link">
8278
<i class="ri-link-m" aria-hidden="true"></i>
83-
Bar
84-
</a>
79+
</a>Bar
8580
</h2>
8681
"""
8782

8883
assert Templates.link_headings("<h2></h2>\n<h2>Bar</h2>") == """
8984
<h2></h2>
9085
<h2 id="bar" class="section-heading">
91-
<a href="#bar">
86+
<a href="#bar" class="hover-link">
9287
<i class="ri-link-m" aria-hidden="true"></i>
93-
Bar
94-
</a>
88+
</a>Bar
9589
</h2>
9690
"""
9791

9892
assert Templates.link_headings("<h2>Foo</h2><h2></h2>") ==
9993
String.trim_trailing("""
10094
<h2 id="foo" class="section-heading">
101-
<a href="#foo">
95+
<a href="#foo" class="hover-link">
10296
<i class="ri-link-m" aria-hidden="true"></i>
103-
Foo
104-
</a>
97+
</a>Foo
10598
</h2>
10699
<h2></h2>
107100
""")
108101

109102
assert Templates.link_headings("<h2>Foo</h2>\n<h2></h2>") ==
110103
String.trim_trailing("""
111104
<h2 id="foo" class="section-heading">
112-
<a href="#foo">
105+
<a href="#foo" class="hover-link">
113106
<i class="ri-link-m" aria-hidden="true"></i>
114-
Foo
115-
</a>
107+
</a>Foo
116108
</h2>
117109
118110
<h2></h2>
119111
""")
120112

121113
assert Templates.link_headings("<h3>Foo</h3>") == """
122114
<h3 id="foo" class="section-heading">
123-
<a href="#foo">
115+
<a href="#foo" class="hover-link">
124116
<i class="ri-link-m" aria-hidden="true"></i>
125-
Foo
126-
</a>
117+
</a>Foo
127118
</h3>
128119
"""
129120
end
130121

131122
test "generates headers with unique id's" do
132123
assert Templates.link_headings("<h3>Foo</h3>\n<h3>Foo</h3>") == """
133124
<h3 id="foo" class="section-heading">
134-
<a href="#foo">
125+
<a href="#foo" class="hover-link">
135126
<i class="ri-link-m" aria-hidden="true"></i>
136-
Foo
137-
</a>
127+
</a>Foo
138128
</h3>
139129
140130
<h3 id="foo-1" class="section-heading">
141-
<a href="#foo-1">
131+
<a href="#foo-1" class="hover-link">
142132
<i class="ri-link-m" aria-hidden="true"></i>
143-
Foo
144-
</a>
133+
</a>Foo
145134
</h3>
146135
"""
147136
end
@@ -153,10 +142,9 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
153142

154143
assert Templates.link_headings(admonition_block) == """
155144
<blockquote><h3 id="foo" class="warning section-heading">
156-
<a href="#foo">
145+
<a href="#foo" class="hover-link">
157146
<i class="ri-link-m" aria-hidden="true"></i>
158-
Foo
159-
</a>
147+
</a>Foo
160148
</h3>
161149
</blockquote>
162150
"""
@@ -471,10 +459,10 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
471459
~r{moduledoc.*Example.*<span class="nc">CompiledWithDocs</span><span class="o">\.</span><span class="n">example</span>.*}ms
472460

473461
assert content =~
474-
~r{<h2 id="module-example-unicode-escaping" class="section-heading">.*<a href="#module-example-unicode-escaping">.*<i class="ri-link-m" aria-hidden="true"></i>.*Example.*</a>.*</h2>}ms
462+
~r{<h2 id="module-example-unicode-escaping" class="section-heading">.*<a href="#module-example-unicode-escaping" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*Example.*</h2>}ms
475463

476464
assert content =~
477-
~r{<h3 id="module-example-h3-heading" class="section-heading">.*<a href="#module-example-h3-heading">.*<i class="ri-link-m" aria-hidden="true"></i>.*Example H3 heading.*</a>.*</h3>}ms
465+
~r{<h3 id="module-example-h3-heading" class="section-heading">.*<a href="#module-example-h3-heading" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*Example H3 heading.*</h3>}ms
478466

479467
# Summaries
480468
assert content =~ ~r{example/2.*Some example}ms
@@ -567,7 +555,7 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
567555
content = get_module_page([CompiledWithDocs], context)
568556

569557
assert content =~
570-
~r{<h3 id="example_with_h3/0-examples" class="section-heading">.*<a href="#example_with_h3/0-examples">.*<i class="ri-link-m" aria-hidden="true"></i>.*Examples.*</a>.*</h3>}ms
558+
~r{<h3 id="example_with_h3/0-examples" class="section-heading">.*<a href="#example_with_h3/0-examples" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*Examples.*</h3>}ms
571559
end
572560

573561
test "do not output overlapping functions, causing duplicate IDs", context do

‎test/ex_doc/formatter/html_test.exs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -365,10 +365,10 @@ defmodule ExDoc.Formatter.HTMLTest do
365365
assert content =~ ~r{<title>README [^<]*</title>}
366366

367367
assert content =~
368-
~r{<h2 id="header-sample" class="section-heading">.*<a href="#header-sample">.*<i class="ri-link-m" aria-hidden="true"></i>.*<code(\sclass="inline")?>Header</code> sample.*</a>.*</h2>}ms
368+
~r{<h2 id="header-sample" class="section-heading">.*<a href="#header-sample" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*<code(\sclass="inline")?>Header</code> sample.*</h2>}ms
369369

370370
assert content =~
371-
~r{<h2 id="more-than" class="section-heading">.*<a href="#more-than">.*<i class="ri-link-m" aria-hidden="true"></i>.*more &gt; than.*</a>.*</h2>}ms
371+
~r{<h2 id="more-than" class="section-heading">.*<a href="#more-than" class="hover-link">.*<i class="ri-link-m" aria-hidden="true"></i>.*</a>.*more &gt; than.*</h2>}ms
372372

373373
assert content =~ ~r{<a href="RandomError.html"><code(\sclass="inline")?>RandomError</code>}
374374

0 commit comments

Comments
 (0)