[jira] [Commented] (CAMEL-15337) Create toc for hugo pages

["ASF GitHub Bot (Jira)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/CAMEL-15337?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17169599#comment-17169599 ] 

ASF GitHub Bot commented on CAMEL-15337:
----------------------------------------

AemieJ opened a new pull request #446:
URL: https://github.com/apache/camel-website/pull/446


   ### Motive for building Hugo toc
   For the apache camel website, the antora pages have a toc generated which will help in easing the user navigation. Thus, for the Hugo pages, toc should be implemented. 
   
   ### DIfference between toc of Antora and Hugo 
   The manner in which the toc of Antora and Hugo is structured is completed different. To trigger the toc for Hugo, one code of line needs to be inserted i.e `{{ TableOfContents }}` however I wanted the UI implementation of both Antora and Hugo to be the same.
   In Hugo, the manner in which toc is created is just a nested loop of `ul` and `li` but in the case of Antora, it's a proper structure with defined levels where `##`  would signify `data-level: 2` and `###` would signify `data-level:3`. This wasn't the case of Hugo. 
   
   Thus, my first implementation within the **js** file was to create the data levels.
   
   ### Problems faced while implementing fragment jumping of links and also based on scrolling. 
   The `scroll` event function that is implemented for antora in the `on-this-page.js` can't be used for the Hugo as their structures are completely different as stated before. Hence, I have implemented my own logic similar to that of antora for the scroll and fragment jumping and it works. 
   
   #### Drawbacks to my implementation currently
   
   In my implementation, the fragment jumping works smoothly when done through the keyboard however when using a scrollbar, it shows odd behavior on scrolling down in some cases. 
   
   ![toc-content-hugo](https://user-images.githubusercontent.com/44139348/89124527-66809400-d4f5-11ea-99f9-77806e1984f4.gif)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


> Create toc for hugo pages
> -------------------------
>
>                 Key: CAMEL-15337
>                 URL: https://issues.apache.org/jira/browse/CAMEL-15337
>             Project: Camel
>          Issue Type: Task
>          Components: website
>            Reporter: Aemie
>            Priority: Major
>              Labels: suggestions
>         Attachments: toc-hugo.png
>
>
> The antora UI makes use of the table of content so when a webpage has a large amount of content, it makes it easier for the user to navigate. 
> I have observed this in Hugo pages such as articles that have a large amount of content as well. So to improve user experience over the Hugo content as well, I suggest adding the toc for the Hugo pages excluding the blog posts.
> I have added an image of how it looks. It uses the same CSS as that of antora UI. 



--
This message was sent by Atlassian Jira
(v8.3.4#803005)