DiscoTOC - automatic table of contents

Sorry, I’m not sure I understand - do you want the same font for all the links in the Table of Contents? If so, you could probably use something like this:

#d-toc a {
  font-weight: bold;
}

If you want different styles for different levels of heading, you’ll need something a bit more complicated:

// Style for first-level headings
.d-toc-heading > li > a {
  font-weight: bold;
}

// Style for second-level headings
.d-toc-heading > li > ul > li > a {
  color: red;
}

// Style for third-level headings
.d-toc-heading > li > ul > li > ul > li > a {
  color: green;
}

// etc.

image

Note that this is quite closely tied to the implementation of the theme component, so if that ever changes, you might need to update these rules.

4 Likes

Thank you so much, this is what i want.

2 Likes

There are currently no plans to support published pages. It is supported alongside the docs plugin.

1 Like

Does anyone have an issue with DiscoTOC being displayed in desktop mode while in :iphone: mobile view?

We had the issue on 2.7.x and even after 2.8. update it persists, see here:

1 Like

Excuse me! Joe
Today, i update Discourse, My DiscoToc full right Display but broken screen width.
I update newest Disco Toc theme Component.
Can you continue to fix this issue.

https://nganhangbatdongsan. com/t/bang-gia-xem-data-nha-chinh-chu/63389

Thank you!

1 Like

So that’s not a problem of DiscoTOC, it’s because you have the layouts plugin taking up space as well.

3 Likes

Still getting the same issue; have had to remove the old version of DiscoTOC that was at least installing/working as it doesn’t work with the latest Discourse.

The /log summary is:

Aws::S3::Errors::InvalidArgument (Unsupported value for canned acl 'public-read')
lib/s3_helper.rb:74:in `upload'
lib/file_store/s3_store.rb:116:in `store_file'
lib/file_store/s3_store.rb:30:in `store_upload'
lib/upload_creator.rb:212:in `block (2 levels) in create_for'
lib/upload_creator.rb:211:in `open'
lib/upload_creator.rb:211:in `block in create_for'
lib/distributed_mutex.rb:33:in `block in synchronize'
lib/distributed_mutex.rb:29:in `synchronize'
lib/distributed_mutex.rb:29:in `synchronize'
lib/distributed_mutex.rb:14:in `synchronize'
lib/upload_creator.rb:64:in `create_for'
app/models/remote_theme.rb:164:in `block in update_from_remote'
app/models/remote_theme.rb:160:in `each'
app/models/remote_theme.rb:160:in `update_from_remote'
app/models/remote_theme.rb:93:in `import_theme'
app/controllers/admin/themes_controller.rb:104:in `import'
app/controllers/application_controller.rb:397:in `block in with_resolved_locale'
app/controllers/application_controller.rb:397:in `with_resolved_locale'
lib/middleware/omniauth_bypass_middleware.rb:71:in `call'
lib/content_security_policy/middleware.rb:12:in `call'
lib/middleware/anonymous_cache.rb:358:in `call'
config/initializers/100-quiet_logger.rb:23:in `call'
config/initializers/100-silence_logger.rb:31:in `call'
lib/middleware/enforce_hostname.rb:23:in `call'
lib/middleware/request_tracker.rb:202:in `call'

And backtrace:

aws-sdk-core (3.121.2) lib/seahorse/client/plugins/raise_response_errors.rb:17:in `call'
aws-sdk-s3 (1.96.1) lib/aws-sdk-s3/plugins/sse_cpk.rb:24:in `call'
aws-sdk-s3 (1.96.1) lib/aws-sdk-s3/plugins/dualstack.rb:36:in `call'
aws-sdk-s3 (1.96.1) lib/aws-sdk-s3/plugins/accelerate.rb:50:in `call'
aws-sdk-core (3.121.2) lib/aws-sdk-core/plugins/jsonvalue_converter.rb:22:in `call'
aws-sdk-core (3.121.2) lib/aws-sdk-core/plugins/idempotency_token.rb:19:in `call'
aws-sdk-core (3.121.2) lib/aws-sdk-core/plugins/param_converter.rb:26:in `call'
aws-sdk-core (3.121.2) lib/seahorse/client/plugins/request_callback.rb:71:in `call'
aws-sdk-core (3.121.2) lib/aws-sdk-core/plugins/response_paging.rb:12:in `call'
aws-sdk-core (3.121.2) lib/seahorse/client/plugins/response_target.rb:24:in `call'
aws-sdk-core (3.121.2) lib/seahorse/client/request.rb:72:in `send_request'
aws-sdk-s3 (1.96.1) lib/aws-sdk-s3/client.rb:11274:in `put_object'
aws-sdk-s3 (1.96.1) lib/aws-sdk-s3/object.rb:1329:in `put'
lib/s3_helper.rb:74:in `upload'
lib/file_store/s3_store.rb:116:in `store_file'
lib/file_store/s3_store.rb:30:in `store_upload'
lib/upload_creator.rb:212:in `block (2 levels) in create_for'
lib/upload_creator.rb:211:in `open'
lib/upload_creator.rb:211:in `block in create_for'
lib/distributed_mutex.rb:33:in `block in synchronize'
lib/distributed_mutex.rb:29:in `synchronize'
lib/distributed_mutex.rb:29:in `synchronize'
lib/distributed_mutex.rb:14:in `synchronize'
lib/upload_creator.rb:64:in `create_for'
app/models/remote_theme.rb:164:in `block in update_from_remote'
app/models/remote_theme.rb:160:in `each'
app/models/remote_theme.rb:160:in `update_from_remote'
app/models/remote_theme.rb:93:in `import_theme'
app/controllers/admin/themes_controller.rb:104:in `import'
actionpack (6.1.4.1) lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
actionpack (6.1.4.1) lib/abstract_controller/base.rb:228:in `process_action'
actionpack (6.1.4.1) lib/action_controller/metal/rendering.rb:30:in `process_action'
actionpack (6.1.4.1) lib/abstract_controller/callbacks.rb:42:in `block in process_action'
activesupport (6.1.4.1) lib/active_support/callbacks.rb:117:in `block in run_callbacks'
app/controllers/application_controller.rb:397:in `block in with_resolved_locale'
i18n (1.10.0) lib/i18n.rb:328:in `with_locale'
app/controllers/application_controller.rb:397:in `with_resolved_locale'
activesupport (6.1.4.1) lib/active_support/callbacks.rb:126:in `block in run_callbacks'
activesupport (6.1.4.1) lib/active_support/callbacks.rb:137:in `run_callbacks'
actionpack (6.1.4.1) lib/abstract_controller/callbacks.rb:41:in `process_action'
actionpack (6.1.4.1) lib/action_controller/metal/rescue.rb:22:in `process_action'
actionpack (6.1.4.1) lib/action_controller/metal/instrumentation.rb:34:in `block in process_action'
activesupport (6.1.4.1) lib/active_support/notifications.rb:203:in `block in instrument'
activesupport (6.1.4.1) lib/active_support/notifications/instrumenter.rb:24:in `instrument'
activesupport (6.1.4.1) lib/active_support/notifications.rb:203:in `instrument'
actionpack (6.1.4.1) lib/action_controller/metal/instrumentation.rb:33:in `process_action'
actionpack (6.1.4.1) lib/action_controller/metal/params_wrapper.rb:249:in `process_action'
activerecord (6.1.4.1) lib/active_record/railties/controller_runtime.rb:27:in `process_action'
actionpack (6.1.4.1) lib/abstract_controller/base.rb:165:in `process'
actionview (6.1.4.1) lib/action_view/rendering.rb:39:in `process'
rack-mini-profiler (2.3.4) lib/mini_profiler/profiling_methods.rb:111:in `block in profile_method'
actionpack (6.1.4.1) lib/action_controller/metal.rb:190:in `dispatch'
actionpack (6.1.4.1) lib/action_controller/metal.rb:254:in `dispatch'
actionpack (6.1.4.1) lib/action_dispatch/routing/route_set.rb:50:in `dispatch'
actionpack (6.1.4.1) lib/action_dispatch/routing/route_set.rb:33:in `serve'
actionpack (6.1.4.1) lib/action_dispatch/routing/mapper.rb:19:in `block in <class:Constraints>'
actionpack (6.1.4.1) lib/action_dispatch/routing/mapper.rb:49:in `serve'
actionpack (6.1.4.1) lib/action_dispatch/journey/router.rb:50:in `block in serve'
actionpack (6.1.4.1) lib/action_dispatch/journey/router.rb:32:in `each'
actionpack (6.1.4.1) lib/action_dispatch/journey/router.rb:32:in `serve'
actionpack (6.1.4.1) lib/action_dispatch/routing/route_set.rb:842:in `call'
lib/middleware/omniauth_bypass_middleware.rb:71:in `call'
rack (2.2.3) lib/rack/tempfile_reaper.rb:15:in `call'
rack (2.2.3) lib/rack/conditional_get.rb:40:in `call'
rack (2.2.3) lib/rack/head.rb:12:in `call'
actionpack (6.1.4.1) lib/action_dispatch/http/permissions_policy.rb:22:in `call'
lib/content_security_policy/middleware.rb:12:in `call'
lib/middleware/anonymous_cache.rb:358:in `call'
rack (2.2.3) lib/rack/session/abstract/id.rb:266:in `context'
rack (2.2.3) lib/rack/session/abstract/id.rb:260:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/cookies.rb:689:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/callbacks.rb:27:in `block in call'
activesupport (6.1.4.1) lib/active_support/callbacks.rb:98:in `run_callbacks'
actionpack (6.1.4.1) lib/action_dispatch/middleware/callbacks.rb:26:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/actionable_exceptions.rb:18:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/debug_exceptions.rb:29:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
logster (2.10.1) lib/logster/middleware/reporter.rb:43:in `call'
railties (6.1.4.1) lib/rails/rack/logger.rb:37:in `call_app'
railties (6.1.4.1) lib/rails/rack/logger.rb:28:in `call'
config/initializers/100-quiet_logger.rb:23:in `call'
config/initializers/100-silence_logger.rb:31:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/request_id.rb:26:in `call'
lib/middleware/enforce_hostname.rb:23:in `call'
rack (2.2.3) lib/rack/method_override.rb:24:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/executor.rb:14:in `call'
rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
actionpack (6.1.4.1) lib/action_dispatch/middleware/host_authorization.rb:92:in `call'
rack-mini-profiler (2.3.4) lib/mini_profiler/profiler.rb:393:in `call'
message_bus (4.2.0) lib/message_bus/rack/middleware.rb:60:in `call'
lib/middleware/request_tracker.rb:202:in `call'
railties (6.1.4.1) lib/rails/engine.rb:539:in `call'
railties (6.1.4.1) lib/rails/railtie.rb:207:in `public_send'
railties (6.1.4.1) lib/rails/railtie.rb:207:in `method_missing'
rack (2.2.3) lib/rack/urlmap.rb:74:in `block in call'
rack (2.2.3) lib/rack/urlmap.rb:58:in `each'
rack (2.2.3) lib/rack/urlmap.rb:58:in `call'
unicorn (6.1.0) lib/unicorn/http_server.rb:634:in `process_client'
unicorn (6.1.0) lib/unicorn/http_server.rb:739:in `worker_loop'
unicorn (6.1.0) lib/unicorn/http_server.rb:547:in `spawn_missing_workers'
unicorn (6.1.0) lib/unicorn/http_server.rb:143:in `start'
unicorn (6.1.0) bin/unicorn:128:in `<top (required)>'
vendor/bundle/ruby/2.7.0/bin/unicorn:25:in `load'
vendor/bundle/ruby/2.7.0/bin/unicorn:25:in `<main>'

The URL from the env summary was: REQUEST_URI /admin/themes/import - so I’m pretty sure I’ve got the right error.

Maybe I’ve unintentionally set things up in a non-standard way. I have Backblaze (S3 API) configured in app.yml with DISCOURSE_USE_S3 commented out, but all other S3 settings entered. DISCOURSE_BACKUP_LOCATION is set to S3. The goal was to keep local image etc uploads but have backups go to Backblaze. None of the S3 settings appear to be enabled in the admin web pages. Backups have been appearing on Backblaze, and I can still add images etc- so I assumed all is good.

Any suggestions appreciated!

1 Like

This isn’t a DiscoTOC issue. Please search for Backblaze here on meta to see if you can find the solution to your issue. (And if you don’t find one, feel free to open a separate support topic.)

1 Like

We’re getting an error after upgrading Discourse:

Screenshot from 2022-02-25 18-35-43

edit: oh no, sorry. that’s on an instance that is not updated. It’s probably because of that.

3 Likes

In case this helps others, I was struggling to add a ToC to a seemingly-properly formatted post & it kept not showing up. Finally I checked edit history:

Selection_022

Moving the tag to a new line (and whittling it down to just one instance) fixed the problem.

2 Likes

Hi, I face the following issue.
If there are chinese headings, TOC link can not link to correct location.
For example, KeepZotero 防止 Zotero 被關掉 - 綜合討論 - TW Community
Clicking the 2nd-5th links from right side table always shift to second heading position not the corresponding position.
If click the link on heading left side, it works and the link is like ${topic-url}#h-4
Is it the same issue as Bug of DiscoTOC with Chinese Headings - bug - Discourse Meta mentioned?

3 Likes

I believe it is the same

3 Likes

I try your fix on my site and it works correctly.
Do you plan to create a pull request?

2 Likes

I am using DiscoTOC for a long time, and it works fine with Chinese headings until recent update.

If there are multiple Chinese headings (including no ascii characters) in the post, it will only navigate to the first heading of one level when the navigation item on the right side is clicked. I believe this is because the DiscoTOC generates navigation items with the same id (because the headings are all in Chinese). So, the query selector will only find the first heading.

As a try, I forked the GitHub repo and pushed a little commit as

It seems to work in my site. If it looks good to you team, I can raise a pull request, or this bug need to be fixed in another way.

8 Likes

Thanks @topological :slight_smile: I’ve moved your bug report over to the DisoTOC topic itself to hopefully get it in front of the right people. :+1:

3 Likes

Thanks for the report and the PR. As noted in the PR, I have implemented a different fix, that doesn’t rely on headings having anchors as children.

(I’m happy to merge the translations in your PR, though.)

4 Likes

First off, this is a super helpful theme component for long posts!

However, there’s an issue with this theme component on mobile devices (at least on iOS). When I open a large table of contents, scrolling through the TOC doesn’t work on mobile like it does on a desktop.


The list contains Headings A-H, but I can’t scroll through it

The list appears to be scrollable, but a touchstart event prevents the list from being scrolled. Disabling the touch start event listener for the d-toc element seems to solve the issue.


I can’t see the version of the theme component we have on our forum, nor can I test this on a local install (since I can’t load it on a phone). So, if there is a fix I’m not aware of or if there’s anything I should, please let me know.

Thanks in advance :slight_smile:

3 Likes

Thanks for the report, the screenshots were particularly helpful in tracking down the issue. This is a problem that comes from core, one of the parent elements of the DiscoTOC mobile UI disables scrolling of its children, and this affected DiscoTOC. Should be fixed via FIX: Limit pan event handler to fix scrolling in TOC by pmusaraj · Pull Request #16673 · discourse/discourse · GitHub (it’ll likely be merged early next week).

3 Likes

Is this still working?

@pmusaraj I guess it’s possible that I haven’t set this correctly but I have installed the theme and the TOC I set up on a topic is not appearing on the discourse-docs version but it is appearing in the main topic

3 Likes

Hmm, I agree, the ToC seems not to be appearing in discourse-docs pages again. For example:

https://meta.discourse.org/docs?ascending=false&category=53&tags=themes&topic=91966

4 Likes