xfnw/clam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

html: improve heading anchors

Browse Source
This commit is contained in:
xfnw 2024-05-12 23:33:14 -04:00
parent 02384a0262
commit 65e0f0aa70
2 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/html.rs
View File

@ -33,7 +33,6 @@ impl Traverser for Handler {
match event {
Event::Enter(Container::Headline(headline)) => {
let lvl = headline.level();
let lead = "#".repeat(lvl);
let lvl = 1 + min(lvl, 5);
let txt = headline.title().map(|t| t.to_string()).collect::<String>();
@ -47,10 +46,7 @@ impl Traverser for Handler {
slugify!(&txt)
};
self.exp.push_str(format!(
r##"<h{} id="{1}"><a aria-hidden=true tabindex=-1 href="#{1}">{2}</a> "##,
lvl, id, lead
));
self.exp.push_str(format!("<h{} id=\"{}\">", lvl, id));
if let Some(keyword) = headline.todo_keyword() {
self.exp.push_str(match headline.todo_type() {
@ -69,7 +65,7 @@ impl Traverser for Handler {
}
self.exp.push_str(format!(
r##" <small><a class=see-focus href="#{}">permalink to section</a></small></h{}>"##,
r##" <a class=see-focus href="#{}" aria-label="permalink to section">¶</a></h{}>"##,
id, lvl
));
}
@ -309,7 +305,7 @@ AAAA even more
res.traverse(&mut exp);
assert_eq!(
exp.exp.finish(),
r##"<main><section></section><h2 id="meow"><a aria-hidden=true tabindex=-1 href="#meow">#</a> meow <small><a class=see-focus href="#meow">permalink to section</a></small></h2><section><div class="chat"><img class=chat-head width=64 src="faces/fox.png" alt="fox is fox"><div class=chat-text><span class=chat-nick aria-label="fox says">&lt;fox&gt;</span> AAAA
r##"<main><section></section><h2 id="meow">meow <a class=see-focus href="#meow" aria-label="permalink to section">¶</a></h2><section><div class="chat"><img class=chat-head width=64 src="faces/fox.png" alt="fox is fox"><div class=chat-text><span class=chat-nick aria-label="fox says">&lt;fox&gt;</span> AAAA
</div></div><p>this__has__under_scores yip_{yap yop}
</p><p><a href="#finish-writing-this-test">i am a heading link</a>
<a href="hmm/example.org/test.html">should link to .html</a>
@ -317,8 +313,8 @@ AAAA even more
<a href="hmm/example.org/">im a directory!</a>
<a href="https://example.org">webbed sight</a>
</p><p><img src="https://cheapiesystems.com/media/images/libera-cat.png" alt="the libera.chat logo, but with the mountain replaced with a cat">
</p></section><h3 id="foxwash-time"><a aria-hidden=true tabindex=-1 href="#foxwash-time">##</a> <span class=todo>TODO</span> wash the fox <small><a class=see-focus href="#foxwash-time">permalink to section</a></small></h3><section><p></p><div class="chat"><img class=chat-head width=64 src="faces/fox-stimky.png" alt="fox is stimky"><div class=chat-text><span class=chat-nick aria-label="fox says">&lt;fox&gt;</span> AAAA even more
</div></div></section><h3 id="finish-writing-this-test"><a aria-hidden=true tabindex=-1 href="#finish-writing-this-test">##</a> <span class=done>DONE</span> finish writing this test <small><a class=see-focus href="#finish-writing-this-test">permalink to section</a></small></h3></main>"##
</p></section><h3 id="foxwash-time"><span class=todo>TODO</span> wash the fox <a class=see-focus href="#foxwash-time" aria-label="permalink to section"></a></h3><section><p></p><div class="chat"><img class=chat-head width=64 src="faces/fox-stimky.png" alt="fox is stimky"><div class=chat-text><span class=chat-nick aria-label="fox says">&lt;fox&gt;</span> AAAA even more
</div></div></section><h3 id="finish-writing-this-test"><span class=done>DONE</span> finish writing this test <a class=see-focus href="#finish-writing-this-test" aria-label="permalink to section"></a></h3></main>"##
);
}
}

9
src/style.css
View File

@ -9,10 +9,6 @@ body {
padding: 10px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
a {
text-decoration: none;
color: #3291ff;
@ -128,13 +124,12 @@ li p:nth-of-type(1) {
position: absolute;
background: #000;
color: #fff !important;
padding: 5px;
margin: 0 5px;
}
.see-focus:not(:focus) {
:not(:hover) > .see-focus:not(:focus) {
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);