[GitHub] [camel-website] AemieJ opened a new pull request #446: CAMEL-15337: create toc for hugo based content ( except downloads and blogs )

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ opened a new pull request #446: CAMEL-15337: create toc for hugo based content ( except downloads and blogs )

GitBox

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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox

zregvart commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r465373346



##########
File path: antora-ui-camel/src/css/main.css
##########
@@ -28,7 +30,8 @@
     scrollbar-width: thin; /* Firefox */
   }
 
-  .toc.sidebar .toc-menu ul::-webkit-scrollbar {
+  .toc.sidebar .toc-menu ul::-webkit-scrollbar,
+  .toc-sidebar .toc-hugo ul::-webkit-scrollbar {

Review comment:
       We also control this element's class so we can have `.toc-menu` here, right? There should be a `.static` class that we can narrow only to Hugo rendered content in the JavaScript below.

##########
File path: antora-ui-camel/src/css/main.css
##########
@@ -1,5 +1,6 @@
 @media screen and (max-width: 1023px) {
-  aside.toc.sidebar {
+  aside.toc.sidebar,
+  aside.toc-sidebar {

Review comment:
       We control this element's class, so we can have `aside.toc.sidebar` as selector for both Antora and Hugo pages, am I missing something?

##########
File path: antora-ui-camel/src/js/98-hugo-on-this-page.js
##########
@@ -0,0 +1,91 @@
+;(function () {
+  'use strict'
+
+  var parent
+  var child = []
+  var lastActiveLink = null
+  var selector = document.querySelector('.toolbar')
+  var headings = Array.from(document.querySelectorAll('article.doc h1, article.doc h2, article.doc h3'))
+  var links = Array.from(document.querySelectorAll('aside.toc-sidebar .toc-hugo a'))
+  var width = document.querySelector('.navbar').offsetWidth
+  var parentSelector = document.querySelectorAll('.toc-hugo li ul:first-child')
+
+  var topValMin = selector.getBoundingClientRect().top + selector.getBoundingClientRect().height - 5
+  var topValMax = topValMin + 20

Review comment:
       These are pixels, so not sure if this will calculate correctly if font size is changed in the browser settings.

##########
File path: antora-ui-camel/src/css/toolbar.css
##########
@@ -12,6 +12,10 @@
   z-index: var(--z-index-toolbar);
 }
 
+.toolbar.hugo {
+  box-shadow: none;
+}

Review comment:
       Not sure this is related to TOC.

##########
File path: antora-ui-camel/src/css/toc.css
##########
@@ -17,49 +20,57 @@
   padding-bottom: 0.25rem;
 }
 
-.toc.sidebar .toc-menu h3 {
+.toc.sidebar .toc-menu h3,
+.toc-sidebar .toc-hugo h3 {
   display: flex;
   flex-direction: column;
   height: 2.5rem;
   justify-content: flex-end;
 }
 
-.toc .toc-menu ul {
+.toc .toc-menu ul,
+.toc .toc-hugo ul {
   font-size: calc(15 / var(--rem-base) * 1rem);
   line-height: var(--toc-line-height);
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.toc.sidebar .toc-menu ul {
+.toc.sidebar .toc-menu ul,
+.toc-sidebar .toc-hugo ul {
   max-height: var(--toc-height);
   overflow-y: auto;
 }
 
 @media screen and (min-width: 1024px) {
-  .toc .toc-menu h3 {
+  .toc .toc-menu h3,
+  .toc .toc-hugo h3 {
     font-size: calc(15 / var(--rem-base) * 1rem);
   }
 
-  .toc .toc-menu ul {
+  .toc .toc-menu ul,
+  .toc .toc-hugo ul {
     font-size: calc(13.5 / var(--rem-base) * 1rem);
   }
 }
 
-.toc .toc-menu li {
+.toc .toc-menu li,
+.toc .toc-hugo li {
   margin: 0;
 }
 
-.toc .toc-menu li[data-level="2"] a {
+.toc .toc-menu li[data-level="2"] a,
+.toc .toc-hugo li[data-level="2"] a {

Review comment:
       Do we need the `data-level` attribute for Hugo generated content? This selector could be something like `.static .toc.sidebar nav ul li ul li ul li`. So instead of generating the `data-level` in the JavaScript below, we could use CSS selectors that would depict the depth i.e. level of the heading.

##########
File path: antora-ui-camel/src/css/static.css
##########
@@ -1,6 +1,11 @@
 .static {
   margin: var(--static-margin);
-  max-width: var(--static-max-width--desktop);
+}
+
+@media screen and (min-width: 1024px) {
+  .static {
+    max-width: var(--static-max-width--desktop);
+  }

Review comment:
       Not sure this change is related to TOC?

##########
File path: content/community/articles.md
##########
@@ -2,7 +2,7 @@
 title: "Articles"
 ---
 
-### Camel Videos
+## Camel Videos

Review comment:
       These changes could be on another PR, they don't seem to be related to this.




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466826788



##########
File path: antora-ui-camel/src/css/main.css
##########
@@ -1,5 +1,6 @@
 @media screen and (max-width: 1023px) {
-  aside.toc.sidebar {
+  aside.toc.sidebar,
+  aside.toc-sidebar {

Review comment:
       I need to currently find the issue 'cause whenever I use `<aside class="toc sidebar">` in case of Hugo content, this element doesn't render on the page. That's why I temporarily made use of `<aside class="toc toc-sidebar">`




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466827136



##########
File path: antora-ui-camel/src/css/static.css
##########
@@ -1,6 +1,11 @@
 .static {
   margin: var(--static-margin);
-  max-width: var(--static-max-width--desktop);
+}
+
+@media screen and (min-width: 1024px) {
+  .static {
+    max-width: var(--static-max-width--desktop);
+  }

Review comment:
       Each change in this file is related to the toc. The thing is within the antora pages fragment jumping occurs accurately with respect to the toolbar. As I didn't want to include additional code for fragment jumping and positioning, I included a blank toolbar in the case of Hugo pages as well.




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466827288



##########
File path: antora-ui-camel/src/css/main.css
##########
@@ -28,7 +30,8 @@
     scrollbar-width: thin; /* Firefox */
   }
 
-  .toc.sidebar .toc-menu ul::-webkit-scrollbar {
+  .toc.sidebar .toc-menu ul::-webkit-scrollbar,
+  .toc-sidebar .toc-hugo ul::-webkit-scrollbar {

Review comment:
       I didn't exactly get what do you mean by this?




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466827484



##########
File path: antora-ui-camel/src/js/98-hugo-on-this-page.js
##########
@@ -0,0 +1,91 @@
+;(function () {
+  'use strict'
+
+  var parent
+  var child = []
+  var lastActiveLink = null
+  var selector = document.querySelector('.toolbar')
+  var headings = Array.from(document.querySelectorAll('article.doc h1, article.doc h2, article.doc h3'))
+  var links = Array.from(document.querySelectorAll('aside.toc-sidebar .toc-hugo a'))
+  var width = document.querySelector('.navbar').offsetWidth
+  var parentSelector = document.querySelectorAll('.toc-hugo li ul:first-child')
+
+  var topValMin = selector.getBoundingClientRect().top + selector.getBoundingClientRect().height - 5
+  var topValMax = topValMin + 20

Review comment:
       I have worked with changing the font size in the browser settings, it works as this just sets the range based on the position and height of the toolbar.




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466827626



##########
File path: antora-ui-camel/src/css/toolbar.css
##########
@@ -12,6 +12,10 @@
   z-index: var(--z-index-toolbar);
 }
 
+.toolbar.hugo {
+  box-shadow: none;
+}

Review comment:
       The thing is within the antora pages fragment jumping occurs accurately with respect to the toolbar. As I didn't want to include additional code for fragment jumping and positioning, I included a blank toolbar in the case of Hugo pages as well.




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on a change in pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on a change in pull request #446:
URL: https://github.com/apache/camel-website/pull/446#discussion_r466827843



##########
File path: content/community/articles.md
##########
@@ -2,7 +2,7 @@
 title: "Articles"
 ---
 
-### Camel Videos
+## Camel Videos

Review comment:
       Well, a few of the contents within the Hugo pages weren't perfectly aligned due to which the toc content wasn't being generated accurately. Hence, I had to make changes to these particular files.




----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

AemieJ commented on pull request #446:
URL: https://github.com/apache/camel-website/pull/446#issuecomment-670809878


   @zregvart I did research on **Intersection Observer** and tried its implementation but on observing, it is only possible with a parent and child element. Here, `article.doc` is the parent ( root ) element however it doesn't cover a certain height thus the visibility of the target ( all the headings ) can't be compared based on it. Also, it has a loophole, the threshold triggers for any of its headings on the page.
   
   Other than that, I modified the implementation of logic, currently, it works pretty efficiently ( even when the font-size within browser settings is modified )


----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

zregvart commented on pull request #446:
URL: https://github.com/apache/camel-website/pull/446#issuecomment-673919192


   With #459 merged I think we can close this now. @AemieJ is there anything I've missed?


----------------------------------------------------------------
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:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ closed pull request #446: CAMEL-15337: create toc for hugo based content

GitBox
In reply to this post by GitBox

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


   


----------------------------------------------------------------
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:
[hidden email]