Open StefanSalewski opened 6 months ago
This issue occurs also when I run the locale server with
npm run dev
Your provided example page do not show such issues, but that page has not much content. From the links at the top of the page, we might get the feeling that names with spaces or hyphens has this issue. But comparing with the similar issue of the link section on the right, some links with space work, and some not. So no idea from my side.
Links at the right of your page https://getdoks.org/docs/reference/markdown-extended-syntax/ has issue too:
First entry "Table" gets highlighted.
Second entry "Fenced code block" gets not highlighted when clicked, but third entry instead!
For all following links, there is an offset of one.
Similar issues for the right menu in https://getdoks.org/docs/reference/markdown-basic-syntax/
I like the dark mode for my pages. Is it possible to make dark theme the default, or have each user select dark on its own? Some users might not know that they can switch to the dark theme.
There are some options for that in config/_default/params.toml
(line15..16):
# Doks (@hyas/doks-core)
[doks]
# Color mode
colorMode = "dark" # auto (default), light or dark
colorModeToggler = false # true (default) or false (this setting is only relevant when colorMode = auto)
So setting the initial default to dark, and still showing the colorModeToggler, is not possible? What I would like best is having dark mode as default (when the page is visited for the first time) but giving the user the option to switch to light. Well, maybe that is technically not possible -- no problem, most users should be smart enough to discover the color toggler. Perhaps "auto" is indeed the best default.
The actual "issue for highlighting the active topic links" is still present. I have done some more testing, and have no idea what is actually going on, but it works not always correctly.
So setting the initial default to dark, and still showing the colorModeToggler, is not possible?
That's correct. This is how it works currently:
colorMode
is set to "auto", it respects the users' system-wide setting — so, it's light in the browser when it's set to light system-wide (for apps et cetera) and vice versa.
colorModeToggler
to true, the user can locally override (Doks website level) the system-wide settings.colorMode
is set to "dark", the Doks website always shows in dark mode, regardless of the user's system-wide setting.colorMode
is set to "light", the Doks website always shows in light mode, regardless of the user's system-wide setting.We could extend the logic for your use case I think, but I'm not 100% sure yet — I have to give it some more thought (how would it work with the system-wide setting — which one wins so to speak).
The links in the Table of Contents get highlighted using Scrollspy.
Settings are via data attributes in node_modules/@hyas/doks-core/layouts/_default/baseof.html
(line 5):
<body class="{{ delimit (.Scratch.Get "class") " " }}"{{ if eq site.Params.doks.scrollSpy true }} data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="0px 0px -60%" data-bs-smooth-scroll="true" tabindex="0"{{ end }}>
If you'd like to customize data-bs-root-margin="0px 0px -60%"
, copy the file over to layouts/_default/baseof.html
and make your changes there.
I noticed that when you add and remove content, the active class on main navbar items do not always get updated.
What I find is that when I clean Hugo's build directories (and run the dev
command again), it works like it should (for me).
So, try with running something like:
npx shx rm -rf public resources .hugo_build.lock
So, try with running something like:
npx shx rm -rf public resources .hugo_build.lock
When I run that, I get a warning:
salewski@hx90 ~/nimprogramming.bak $ npx shx rm -rf public resources .hugo_build.lock
Need to install the following packages:
shx@0.3.4
Ok to proceed? (y) yes
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
sh: /home/salewski/.npm/_npx/f3af5d8365aa3b70/node_modules/.bin/shx: /usr/bin/env: bad interpreter: Text file busy
But it might fix the issue, I will further investigate.
But note that your own page has a similar issue as well, as I wrote before:
https://github.com/gethyas/doks/issues/1241#issuecomment-2117469755
OK, no warning with a copy of my own page:
salewski@hx90 ~ $ cp -r nimprogramming.com /tmp/nimprogramming.com
salewski@hx90 ~ $ cd /tmp/nimprogramming.com
salewski@hx90 /tmp/nimprogramming.com $ npx shx rm -rf public resources .hugo_build.lock
salewski@hx90 /tmp/nimprogramming.com $ npm run dev
But still issues with the link menu on the right!
Well this is for firefox-126.0, I have currently no other browser available. If you can not reproduce this issue, I could test later with Chromium browser, but that one takes a few hours to build from source on my Gentoo box.
But still issues with the link menu on the right!
Not sure if (and how) this can be fixed properly — it's a Bootstrap thing (to be taken upstream).
See also for example this Bootstrap documentation link (expected to highlight Methods, but highlighting Events instead — when clicking Methods in the ToC): https://getbootstrap.com/docs/5.3/components/scrollspy/#methods
There are no ideal Options that fit all use cases (unfortunately), so you could tinker with them to support your setup (or accept the current situation — for now)
Well it is not a too important issue, only careful users might notice it. Your advice "npx shx rm -rf public resources .hugo_build.lock" seems to have fixed the link menu at the top, which is more important.
My sides look really good now, and work well. So I made a $20 donation to the Doks projects yesterday. Not much, but the two pages are nothing I get any profit from. I sold only two pieces of the Nim book in the last 12 months, so before updating the pages to Doks 1.x, I even considered fully removing them from Internet.
Thanks for your financial contribution and for raising your questions and sharing your thoughts. It helps to improve Doks!
Are you ok with me adding the Nim Programming Book site to the Doks showcase? It will get you some traffic and hopefully more book sales 😉
Yes of course, you can use both pages as showcase. I think the general Nim info page created with help of GPT-4 is more interesting:
The book page https://nimprogrammingbook.com/ is more boring. And I have no hope to selling more Nim books -- while the Nim language is really a fine language, it seems to be in trouble now, many old users left, and no new users are coming. A good languages makes not that much sense, when the number of users and developers drops nearly to zero. I have to admit that I have done no Nim work in the last 12 months any more, mostly for personal differences with the core Nim dev. I am learning Rust now. Python, Go, Rust, Julia, Mojo, Kotlin seems to be the more attractive candidates for most people now.
I added the Nim Programming site: https://getdoks.org/showcase/
Good luck and all the best!
It is a bit difficult to explain this tiny issue. At least I think it is an issue, as I have no idea what I might have done wrong.
My two pages
https://nimprogramming.com/ and https://nimprogrammingbook.com/ have no been updated to latest Hyas/Doks, and are mostly fine.
One observation is, that the highlight of selected links does sometimes not work. For example, for https://nimprogramming.com/ we have at the top the menu bar with "Nim About-Nim Tutorials ...". When I click on "Tutorials" that link is drawn blue and bold. But when I click on "About-Nim" there is no blue and bold, just plain display. The same for the other links in the menu, sometimes highlight works, sometimes not. The same for https://nimprogrammingbook.com/ -- for "Blog" highlight works, for "Imprint & Contact" not.
That is with Firefox on Linux.
Similar problems for right side links of https://nimprogramming.com/docs/about-nim/
For some links highlight works, for others not. And sometimes I click on one link, and another one is highlighted.
Here is the source-code of that page, should be OK:
Paste the information here as shown by
npm run info
Two other remarks: A feature to hide the links at the bottom of content pages world be fine. You told me already a way to remove them, but I have let then visible for now.
I like the dark mode for my pages. Is it possible to make dark theme the default, or have each user select dark on its own? Some users might not know that they can switch to the dark theme.