Migrate to Codeberg Design Kit (#132) #149

TODO:

• Hide navbar items on small screens
• Fix <blockquote> rendering
• Fix <code> rendering
• LibreJS Compatibility

Will you add // is there an automatic dark theme? My Quality Assurance will need this for approvement as adding the dark theme to the docs was kinda hyped on Socialmedia 😂

We've got an automatic dark mode

This PR is now ready for review!

You can see a preview at (削除) https://n.codeberg.page (削除ここまで) https://docs.codeberg-test.org

Some notes:

• I couldn't get the footer to be consistently pushed to the bottom (on small and large pages) so I opted to remove it.
• The dark mode button doesn't seem to set a cookie to persist the setting.
• Not yet LibreJS compliant, but tracking seperately in Codeberg/Design#33
• For anybody merging, don't forget to squash commits!

Thank you. I'm usually offline (for periods longer than 24h) till Sunday or Monday, will try to have a look before.

Thank you very much for the work

Two remarks after some tests:

• Can we ensure that the currently selected page is visible in the navigation panel at the left? At the moment the nav panel jumps back to top after a page is selected. This is kinda annoying when you browse pages that are enlisted at the bottom of the navigation.
• On page https://n.codeberg.page/security/ssh-key/ the numbered list items are standalone, the sentence is moved to a new line. No clue why this happens, all the other pages seems fine.

Besides these small glitches it seems fine.

I'm on a terrible network right now, first load takes forever ... either wait for me to get a more stable connection, or maybe make things lighter for everyone who has the same struggle? :-)

Having a first glance right now, looks good, but I already looked at this PR a while ago and I didn't catch the detailed improvements yet.

Can we ensure that the currently selected page is visible in the navigation panel at the left? At the moment the nav panel jumps back to top after a page is selected. This is kinda annoying when you browse pages that are enlisted at the bottom of the navigation.

Good idea. Added some JavaScript to do that in 26d4db517f.

On page https://n.codeberg.page/security/ssh-key/ the numbered list items are standalone, the sentence is moved to a new line. No clue why this happens, all the other pages seems fine.

Having inline numbers didn't work well with multi-line lists. I fixed it by overriding halfmoon's style in 2d7eca0824.

I'm on a terrible network right now, first load takes forever ... either wait for me to get a more stable connection, or maybe make things lighter for everyone who has the same struggle? :-)

Making the docs more lightweight is definitely something we can improve on, and I've opened #157 for that. Already this PR makes the docs a little more lightweight than before.

Already this PR makes the docs a little more lightweight than before.

On the generator side? Browsing the current live version is fun on a flaky internet connection, browsing it with the new version is a single pain. The sites are literally loading forever until everything is there, it seems to use much more network connections (because of the design stuff) and it also seems to use more computing power to render (like, my browser hangs for a moment when I open the page, doesn't happen with the old version).

I know, my hardware is fairly old, but I like efficient technology (also for accessibility, people with slow internet or hardware and / or people working from mobile). I don't want to block this, but I really find the new version much slower and harder for quickly looking sth. up, this only works in the old version.

Hey, this PR is fairly large, and involves some changes that aren't really related IMHO (like deployment changes). I find it difficult to know what I need to test..

Sorry for that, and I'll keep that in mind for the future. The only other change I made was a command to deploy to docs.codeberg-test.org and an environment variable to disable indexing of those test deployments. I can invite you to the repo on codeberg-test if you send me your username.

Why doesn't the dark mode work without Javascript? Shouldn't this be a CSS thing like with the current docs?

Why doesn't the dark mode work without Javascript? Shouldn't this be a CSS thing like with the current docs?

Unfortunately that's a design choice that Halfmoon decided to make. It uses JavaScript to add a .dark-theme class to the page wrapper depending on prefers-dark-scheme and a dark-mode cookie. I assume this is to allow switching between dark and light mode.