[
https://issues.apache.org/jira/browse/CAMEL-15337?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17171186#comment-17171186
]
ASF GitHub Bot commented on CAMEL-15337:
----------------------------------------
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:
[email protected]
> 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)
