search

slatedocs / slate

Beautiful static documentation for your API
https://slatedocs.github.io/slate
Apache License 2.0
36.06k stars 159 forks source link

TOC submenu highlighting and scrolling not working #1280

Open DylanAndrews opened 4 years ago

DylanAndrews commented 4 years ago

Bug Description Unable to get TOC highlighting and scrolling functionality working after upgrading from slate 1 to 2.

When I put a debugger in the _toc.js IFFE it never gets hit, which makes me think that file is not loading properly. In our old version is was loaded via all.js with //= require ./app/_toc.

Note that we have added an extra layer of nesting based on the deep nesting docs (see screen shot with display: none of .toc-list-h2 and .toc-list-h3 removed below). However, this issue was still present before adding the extra layer of nesting; I just wanted to mention it to give full context..

Screenshots Our TOC nesting with display: none of .toc-list-h2 and .toc-list-h3 removed image

If the display: none is added back to .toc-list-h2 and .toc-list-h3 our docs look like this. Clicking the TOC h1 headings does not expand the sub headings or add any highlighting. image

This is what our current docs look like with the TOC highlighting (this is the old version of slate). image

Browser (please complete the following information):

Last upstream Slate commit (run git log --author="Robert Lord" | head -n 1): fc7612cccacfdb9b15ff7e0ad57e479ae10009eb

Thanks in advance for the help!

MikeRalphson commented 4 years ago

Are you seeing any errors in the javascript console?

DylanAndrews commented 4 years ago

No. Thanks for the quick response! Also wanted to mention that we had to change to use gem 'sprockets', '~> 3.7' instead of middleman-sprockets to get things working with slate.

DylanAndrews commented 4 years ago

Been digging a littler more and I am quite certain the reason this is happening is because we are using sprockets instead of middleman-sprockets. This issue is directly related. We had to move to sprockets because we were getting the error mentioned in that issue, but it appears using sprockets does not load the js files properly. Any thoughts on what we should do?

MasterOdin commented 4 years ago

You should not get the error in that issue if using middleman-sprockets ~> 4.1 and sprockets ~> 3.7. It should only happen if you move to sprockets ~> 4 as that was the version that added support for sassc, which breaks things. How much does your Gemfile and Gemfile.lock differ from the one in master here?

DylanAndrews commented 4 years ago

So if I set set middleman-sprockets ~> 4.1 and sprockets ~> 3.7 in my gemfile I now get this exact error. The js is now loading but the styling is all messed up like is shown in that linked issue.

Gemfile

ruby '>=2.3.1'
source 'https://rubygems.org'

# Middleman
gem 'middleman', '~>4.3'
gem 'middleman-syntax', '~> 3.2'
gem 'middleman-autoprefixer', '~> 2.7'
gem 'middleman-sprockets', '~> 4.1'
gem 'rouge', '~> 3.2'
gem 'redcarpet', '~> 3.4.0'
gem 'sprockets', '~> 3.7'
gem 'nokogiri', '~> 1.10.8'
gem 'sass'

Gemfile.lock

GEM
  remote: https://rubygems.org/
  specs:
    activesupport (5.2.4.3)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 0.7, < 2)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
    addressable (2.7.0)
      public_suffix (>= 2.0.2, < 5.0)
    autoprefixer-rails (9.5.1.1)
      execjs
    backports (3.17.2)
    coffee-script (2.4.1)
      coffee-script-source
      execjs
    coffee-script-source (1.12.2)
    concurrent-ruby (1.1.6)
    contracts (0.13.0)
    dotenv (2.7.5)
    erubis (2.7.0)
    execjs (2.7.0)
    fast_blank (1.0.0)
    fastimage (2.1.7)
    ffi (1.12.2)
    haml (5.1.2)
      temple (>= 0.8.0)
      tilt
    hamster (3.0.0)
      concurrent-ruby (~> 1.0)
    hashie (3.6.0)
    i18n (0.9.5)
      concurrent-ruby (~> 1.0)
    kramdown (1.17.0)
    listen (3.0.8)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    memoist (0.16.2)
    middleman (4.3.7)
      coffee-script (~> 2.2)
      haml (>= 4.0.5)
      kramdown (~> 1.2)
      middleman-cli (= 4.3.7)
      middleman-core (= 4.3.7)
    middleman-autoprefixer (2.10.1)
      autoprefixer-rails (~> 9.1)
      middleman-core (>= 3.3.3)
    middleman-cli (4.3.7)
      thor (>= 0.17.0, < 2.0)
    middleman-core (4.3.7)
      activesupport (>= 4.2, < 6.0)
      addressable (~> 2.3)
      backports (~> 3.6)
      bundler
      contracts (~> 0.13.0)
      dotenv
      erubis
      execjs (~> 2.0)
      fast_blank
      fastimage (~> 2.0)
      hamster (~> 3.0)
      hashie (~> 3.4)
      i18n (~> 0.9.0)
      listen (~> 3.0.0)
      memoist (~> 0.14)
      padrino-helpers (~> 0.13.0)
      parallel
      rack (>= 1.4.5, < 3)
      sassc (~> 2.0)
      servolux
      tilt (~> 2.0.9)
      uglifier (~> 3.0)
    middleman-sprockets (4.1.1)
      middleman-core (~> 4.0)
      sprockets (>= 3.0)
    middleman-syntax (3.2.0)
      middleman-core (>= 3.2)
      rouge (~> 3.2)
    mini_portile2 (2.4.0)
    minitest (5.14.1)
    nokogiri (1.10.9)
      mini_portile2 (~> 2.4.0)
    padrino-helpers (0.13.3.4)
      i18n (~> 0.6, >= 0.6.7)
      padrino-support (= 0.13.3.4)
      tilt (>= 1.4.1, < 3)
    padrino-support (0.13.3.4)
      activesupport (>= 3.1)
    parallel (1.19.1)
    public_suffix (4.0.5)
    rack (2.2.2)
    rb-fsevent (0.10.4)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
    redcarpet (3.4.0)
    rouge (3.17.0)
    sass (3.7.4)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    sassc (2.3.0)
      ffi (~> 1.9)
    servolux (0.13.0)
    sprockets (3.7.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    temple (0.8.2)
    thor (1.0.1)
    thread_safe (0.3.6)
    tilt (2.0.10)
    tzinfo (1.2.7)
      thread_safe (~> 0.1)
    uglifier (3.2.0)
      execjs (>= 0.3.0, < 3)

PLATFORMS
  ruby

DEPENDENCIES
  middleman (~> 4.3)
  middleman-autoprefixer (~> 2.7)
  middleman-sprockets (~> 4.1)
  middleman-syntax (~> 3.2)
  nokogiri (~> 1.10.8)
  redcarpet (~> 3.4.0)
  rouge (~> 3.2)
  sass
  sprockets (~> 3.7)

RUBY VERSION
   ruby 2.3.3p222

BUNDLED WITH
   1.17.3
MasterOdin commented 4 years ago

Just to confirm, what does it say at the start of the build process?

Does it say:

== Sprockets will render css with ruby sass
   consider using Sprockets 4.x to render with SassC

?

DylanAndrews commented 4 years ago

Yes. It says exactly that.

alvarolopes commented 4 years ago

Hey guys, I'm having issues on the "TOC submenu highlighting and scrolling"

My problem was related to $(document).scrollTop() always returning '0' on the _toc.js I was able to make it work by removing the height: 100%; for the html, body on the screen.css.scss

but I'm not sure if this is the same issue. Thanks

DylanAndrews commented 4 years ago

Thanks @alvarolopes, but that sadly didn't seem to fix my issue. @MasterOdin, does my output of the following when I start the build process give you any thoughts on what could be the issue here?

== Sprockets will render css with ruby sass
   consider using Sprockets 4.x to render with SassC
MasterOdin commented 4 years ago

Is the repository for the docs openly available, or would you be able to send them to me via email (see profile for address)? I'm guessing that it's a matter of just one of the updated dependencies slightly changing the HTML structure that's causing things to not quite work properly.

DylanAndrews commented 4 years ago

Thanks so much for the offer. Sadly that is not an option for us. I can send snippets or perhaps specific files if that helps though.