Migrate to Codeberg Design Kit (#132) #149

Merged
fnetX merged 49 commits from design-kit into master 10 months ago
n commented 11 months ago
Collaborator

TODO:

  • Hide navbar items on small screens
  • Fix <blockquote> rendering
  • Fix <code> rendering
  • LibreJS Compatibility
![](https://codeberg.org/attachments/13f4cf0a-bd85-40d1-8be0-40055356d46f) TODO: - [x] Hide navbar items on small screens - [x] Fix `<blockquote>` rendering - [x] Fix `<code>` rendering - [ ] LibreJS Compatibility
n added the
Status: In progress
Kind: Enhancement
Part: Generator
labels 11 months ago
n added 9 commits 11 months ago
Collaborator

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 😂

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 😂
n commented 11 months ago
Poster
Collaborator

We've got an automatic dark mode

We've got an automatic dark mode ![](https://codeberg.org/attachments/6249a7af-5657-4d3e-a25a-b3275168d72c)
n added 1 commit 11 months ago
n added 6 commits 11 months ago
n added 4 commits 11 months ago
n added 1 commit 11 months ago
n added 4 commits 11 months ago
n added 1 commit 10 months ago
n added 5 commits 10 months ago
n added 2 commits 10 months ago
n added 1 commit 10 months ago
n added 4 commits 10 months ago
n added 2 commits 10 months ago
n added 1 commit 10 months ago
n added 2 commits 10 months ago
n changed title from WIP: Migrate to Codeberg Design Kit (#132) to Migrate to Codeberg Design Kit (#132) 10 months ago
n added
Status: Ready for Review
and removed
Status: In progress
labels 10 months ago
n commented 10 months ago
Poster
Collaborator

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!
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!
Collaborator

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

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
Collaborator

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.

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.
Collaborator

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.

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.
n added 2 commits 10 months ago
n added 4 commits 10 months ago
n commented 10 months ago
Poster
Collaborator

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.

> 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.
fnetX approved these changes 10 months ago
fnetX left a comment
Collaborator

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 in the deployed version, but from a source-only perspective (and a quick glance at the live version), it looks good to me, so I think we can test (if not already done by all necessary extents) and merge this. Further issues can be fixed later, this doesn't seem critical to me.

I think I prefer more small changes in the future, but anyway, thank you for your awesome work on this @n. I find this adds a lot of value to Codeberg and is another step towards a shared design amng our different services.

I'll give my approval now and maybe comment on some things as I come along.

🥳 👍

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 in the deployed version, but from a source-only perspective (and a quick glance at the live version), it looks good to me, so I think we can test (if not already done by all necessary extents) and merge this. Further issues can be fixed later, this doesn't seem critical to me. I think I prefer more small changes in the future, but anyway, thank you for your awesome work on this @n. I find this adds a lot of value to Codeberg and is another step towards a shared design amng our different services. I'll give my approval now and maybe comment on some things as I come along. 🥳 👍
Collaborator

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.

> 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.
rwa approved these changes 10 months ago
n commented 10 months ago
Poster
Collaborator

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.

> 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](https://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.
fnetX merged commit ae684fbad4 into master 10 months ago
Collaborator

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?
n commented 10 months ago
Poster
Collaborator

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.

> 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.

Reviewers

fnetX approved these changes 10 months ago
rwa approved these changes 10 months ago
The pull request has been merged as ae684fbad4.
Sign in to join this conversation.
No reviewers
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.