Table of Contents on *pages* with Dawn theme

Hi there—does anyone know if it’s possible to add the Table of Contents feature pages with the Dawn theme, as opposed to only posts? I’ve been tinkering and can’t seem to figure it out on my own.

@minimaluminium Is it possible you have a solution?

Thanks so much in advance!
Alex

Hey @alexpriest, you would need to add couple of changes to the theme to get it work.

  1. Enable the sticky header on pages by updating this line in partials/header.hbs file.
{{#is "post, page"}}

And this line in assets/js/main.js file.

if (body.hasClass('post-template') || body.hasClass('page-template')) {
  1. Enable the table of contents on pages by updating this line in assets/js/main.js file as well.
if (body.hasClass('post-template') || body.hasClass('page-template')) {

To compile the updated JS file, you would need run the built-in automation tool. You can find the instructions here. GitHub - TryGhost/Dawn: A minimal newsletter theme for Ghost

You rock. I was getting close I think. I made your tweaks but it didn’t quite work, so I made a similar change to this line:

if (body.hasClass('post-template') || body.hasClass('page-template')) {

That seemed to get the progress bar loading like you would expect, but then it doesn’t seem to completely line up with the content. See this page for example (password: dawn-dev).

It seems like maybe the progress bar is expecting some kind of content below the page content (e.g. related posts / comments like you might see on a post)?

HUGE thanks for your help!

1 Like

Ah really nice find :slightly_smiling_face:, yeah I totally missed that. That part calculates the content offset and used for the sticky header / progress bar.

It seems like maybe the progress bar is expecting some kind of content below the page content

You’re right. The calculation was made in this line to make the progress 100% when the content bottom edge reaches the middle of the screen. You can play with the calculation to make it work in your situation. For example, it can be updated to be 100% right when the content bottom is visible on the viewport.

content.offset().top + contentHeight - $(window).height();

Got it! Amazing. Thank you so much.

toc is built in you just need to press on three lines button while scrolling your article down