Automatic TOC - Javascript Hack (advanced)

Automatic Table of Contents for Headings & Tables.
A complete and utter hack that can break at any time, but I’m using it for personal projects and thought I’d share:

  1. Install a javascript injection plugin for Chrome. E.g.: “User JavaScript and CSS”
    a. Setup Arrive-js as a library: https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.js
  2. Setup javascript: https://gist.github.com/gjroelofs/facee5638e30a581053c51a79839afb3
  3. Setup CSS: https://gist.github.com/gjroelofs/8cd6d0908ac72783ec97bbf7e0c91ef0

When using the mentioned Chrome plugin, make sure to set it up as follows:

image

And that the domain is setup correctly to: https://coda.io/d

This way any auto-dark theme will properly override the CSS colors for the TOC.
See:

Known issues:

  • None

Changelog:

  • 12/10/'19 - Initial implementation
  • 13/10/'19 - Fixed TOC not resetting when moving to a page that has no headers/tables, and not updating after removing / changing headers.
  • 13/10/'19 - Fixed selection bug.
  • 14/10/'19 - Added in H3 support.
10 Likes

Hi @GJ_Roelofs

I tried to use your hack. First I installed arrive.js

Then I copypaste both javascript and css on the extension window

What did I miss?

TIA

@Juan_Luis_Chulilla

  • It looks like the URL used is incorrect. This needs to be just: https://coda.io/d, so that it triggers on all coda subdomains. (It looks like the URL is duplicate in your entry).
  • Make sure that the Options for the plugin are set as in the indicated image.

Then make sure to press Save.

@Juan_Luis_Chulilla It might also be that you need to refresh the website an extra time - It seems that the User Javascript and CSS Chrome Plugin doesn’t apply the override on the first refresh after you change the coda.

YES
YES

This is astounding, man. Now medium sized documents (in the several thousands of words) are much more clear. Indeed I cannot work anymore without a 2-pane outliner

THANKS A LOT

@codaers pay attention to this!!!

1 Like

Now it works… but it doesn’t refresh, or I don’t know how to do it

I executed it once: perfect

I changed view to another section: TOC is the previous one

I change headings in the first section: it is not mirrored at TOC

Edit: Confirmed that it doesn’t clear the TOC if there are no headings on the new section you move to, or update on changes to pre-existing headers. I’m looking into it.

Windows 10, chrome

Only the first section, OK

Wierder: I have add a new heading and it appears on TOC
even moar wierder: I cannot select headings with the cursor

I’ve updated the code: https://gist.github.com/gjroelofs/facee5638e30a581053c51a79839afb3
It should now update when moving between pages, changing headers & removing them.

I’ve confirmed the issue with selection, although it looks like it’s just the highlighting (the header is selected actually).

1 Like

Alright, the selection bug is now fixed as well.

1 Like

Lvl 3 headings don’t appear on TOC. I tried with new ones for no avail

I hadn’t built in support for them. I’ll take a look tonight.

Thanks. It’s amazing anyways

H3 support is in, you only need to update the JS. (see link in starting post)

1 Like

It has stopped working for me. It’s only my case or does it work for you @GJ_Roelofs?

@Juan_Luis_Chulilla It looks like the plugin still works over here?

@GJ_Roelofs it worked after a reboot. Thanks again for you efforts

1 Like

Dude your hack is really amazing. I just cannot understand why codans don’t integrate it or something like that on Coda. It just add and add a lot

1 Like

Hi @GJ_Roelofs
Does this work on mobile (coda app/chrome) or only on desktop?

Only on Desktop I’m afraid.