Blog page navigation options

[Bert-Proesmans]

Hi, I've been learning how to use 11ty through this starter template and must say the whole is (relatively) easy to comprehend and extend. Well done!

My goal is to convert my current website (~blog) to 11ty with this template and encounter the "issue" that my blog pages are really long; text-heavy and with a bunch of titles. Intuitively I'd reach for helpers like a "scroll to top"-button and "table of contents" which aren't components of this template.

The official 11ty docs don't seem to have a complete solution for a table of contents, and I cannot find anything about a scroll to top button. Looking through the issues and your custom branches it seems like this is the first mention of those things.
Have you had a need for these things before? Do you have a clear opinion on these items?
Do you maybe have a good reference/guide about these topics (related to 11ty) that I could read?

[Bert-Proesmans]

About the back-to-top button, I was thinking about either adding a link (easy) to the footer or doing a button (harder).

Aaaand I found my challenge in doing the hard thing. Approaching the button as a web-component, with its logical isolation, makes it straightforward to style the offsets of the elements.

File back-to-top.webc

<style webc:scoped>
:host {
  --size: 3rem;
  --offset: 2rem;
  
  position: fixed;
  bottom: var(--offset);
  right: var(--offset);
  
  /* Scroll-driven animation: fades in after 300px of scroll */
  animation: fadeInOnScroll linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0 300px;
}

@keyframes fadeInOnScroll {
  from {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 0.5rem;
  background-color: var(--color-primary);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  border: 2px solid var(--color-primary);
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

a:hover {
  background-color: transparent;
  color: var(--color-primary);
}

a:active {
  transform: scale(0.95);
}

/* Arrow icon - stays centered */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sliding text on hover - appears to the LEFT of the button */
.label {
  position: absolute;
  right: calc(var(--size) + 0.5rem);
  top: 50%;
  transform: translateY(-50%) translateX(-0.5rem);
  white-space: nowrap;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
  pointer-events: none;
}

a:hover ~ .label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Focus styles for accessibility */
a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

</style>

<div class="wrapper">
  <a href="#top" aria-label="Back to top of page">
    <span class="icon">↑</span>
  </a>
  <span class="label">back to top</span>
</div>

Add <back-to-top/> to your _layouts/post.njk file to integrate the component into your blog posts template.

But I don't like this approach because Firefox doesn't support all the animation-* properties. Because I have very little clue what I'm doing it's not obvious how I can emulate the behavior.

I tried pulling the elements out of the webcomponent and use a main-container height mask, but the position anchoring of all elements is to the entire document body which makes it less straightforward to figure out the correct setup for the position and motion of the text "scroll to top". Oh yeah, and I try to do everything without javascript because out of principle it shouldn't be necessary anno 2026. This approach isn't completed yet..

incomplete/broken attempt at full browser compatible scroll-to-top button

File _layouts/post.njk

<div class="container-top">
  <a href="#top" aria-label="Back to top of page"></a>
  <span class="label">back to top</span>
</div>

.post #main {
  display: grid;
  grid-template-columns: auto 0px;
}

.post .container-top {
  --offset: 2rem;
  --fade: 2.5rem;
  --size: 3rem;
  
  display: flex;
  align-items: flex-end;
  justify-self: end;
  justify-content: flex-end;
  mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
  
 /* width: 60px;
  background: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade))); */
}

.post .container-top a {
  position: fixed;
  bottom:1rem;      
  right:1rem;

  display: flex;
  align-items: center;
  justify-content: center;
  
  /* visual styling */
  width:var(--size);
  height:var(--size);
  aspect-ratio:1;
  background:var(--color-primary);
  border-radius:0.5rem;
}

.post .container-top a:before {
  content:"";
  position:absolute;

  border-top:5px solid #fff;
  border-right:5px solid #fff;
  inset:30%;
  transform:translateY(20%) rotate(-45deg);
}

.post .container-top .label {
  position: absolute;
  right:calc(var(--size) + 0.5rem);

  white-space: nowrap;
  font-size: 1rem;
  opacity: 1;
  pointer-events: none;
  
  transition: opacity var(--transition-duration) var(--transition-timing),
              transform var(--transition-duration) var(--transition-timing);
}

.post .container-top a:hover ~ .label {
  opacity: 1;
  transform: translateY(0%) translateX(0);
}

These fragments need some cleanup of course. Use how you see fit.

[madrilene]

Hi!

On my website (based on this starter) I have a table of contents, if you want to take a peek:

https://github.com/madrilene/lenesaile.com/blob/main/package.json#L67
https://github.com/madrilene/lenesaile.com/blob/main/src/_config/plugins/markdown.js#L34-L42
https://github.com/madrilene/lenesaile.com/blob/main/src/_includes/partials/toc.njk

The back to top component is a great idea, especially if it can stay isolated. I'll look into it!