Nicolas/website-astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reworked HP + new snippet

Browse source
This commit is contained in:
Nico 2023-06-12 15:47:35 +02:00
parent 4d184782fc
commit 407cdf9099
17 changed files with 334 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/TOC.astro
View file

@ -10,24 +10,26 @@ const { toc } = Astro.props;
<ol class="table-of-content__list" role="list">
{
// loop over the toc
toc.map((heading) =>
// if h2, set as a li
heading.depth === 2 ? (
<li>
<a href={`#${heading.slug}`} class="toc-2">
{heading.text}
</a>
</li>
) : // if h3, set as inner ol > li
heading.depth === 3 ? (
<ol role="list">
toc.map(
(
heading
// if h2, set as a li
) =>
heading.depth === 2 ? (
<li>
<a href={`#${heading.slug}`} class="toc-3">
<a href={`#${heading.slug}`} class="toc-2">
{heading.text}
</a>
</li>
</ol>
) : null
</li> // if h3, set as inner ol > li
) : heading.depth === 3 ? (
<ol role="list">
<li>
<a href={`#${heading.slug}`} class="toc-3">
{heading.text}
</a>
</li>
</ol>
) : null
)
}
</ol>
@ -68,15 +70,18 @@ const { toc } = Astro.props;
}
.table-of-content__list a::before {
content: "·";
content: "";
position: absolute;
top: 0;
top: 50%;
left: 0;
inline-size: 2px;
block-size: 2px;
border-radius: 4px;
transform: translate(-6px, 0);
color: var(--color-grey);
background-color: var(--color-grey);
}
.table-of-content__list a:visited::before {
color: white;
background-color: white;
}
.table-of-content__list a:focus,