Usability and refactoring

[Mik3Rizzo]

Hi,
Nice work again (I'm the guy from Reddit)!

I've found some small usability issues related to item positioning, general consistency and style. I'm trying to improve the design of the website (I've switched to bootstrap 5.1) in order to reach a better user interaction.
I'm also trying to refactor a little bit the project, both for the structure side and from the coding side (comments, etc.).

I've also some ideas, but I am not sure I'll manage to implement them soon, so I'll leave them as a suggest:

• sidebar to show the hierarchy of the wiki, maybe collapsible
• breadcrumbs to show the current page and the path
• .json/.yaml config file, in my opinion is handier than set up env variables
• periodic git push to personal remote repo

Feel free to check out my fork.
One of these days I'll do a PR if you agree.

Best regards,
Michele

[Linbreux]

Hi @Mik3Rizzo

I checked out your fork, great work appreciate the effort you put into it.
I think I should start with the things I really like. The icons for a new page, edit and remove look great, very user-friendly same with the search bar. Also, I like what you did with the footer, in my opinion it would be even greater if it was centered. Also nice code cleanup!

A couple of notes:
the *.log file and all the envs are removed from gitignore. I use env so I think it would be better to include them back:

# Environments
.env
.venv
env/
venv/
ENV/

The search bar looks great, though I don't yet know if it is greater on the left than right (maybe it's just a getting used to thing).

I think it would be great to support a super dark theme. But I also think that the old dark mode needs to be easily accessible. This should be an option that the user can choose in the UI itself. (maybe a checkbox for a super dark theme)

When deleting a page, you can't cancel the modal and the cross looks weird. Maybe this is because of the bootstrap 5.

Your suggestions:

sidebar to show the hierarchy of the wiki, maybe collapsible

Yes! This is something I also was thinking, although I'm not sure when I will start because of other features I'm implementing.

breadcrumbs to show the current page and the path

This is already implemented. I'll split the links in the future.

.json/.yaml config file, in my opinion is handier than set up env variables

Yes! that's true. The env variables were used for docker support. But a config file would be great.

periodic git push to personal remote repo

Yes, if there is a config file this would be easy to setup.

Again thanks for checking out the project and improve it. If you try implementing multiple features it would be great to create a new branch for each.

[Mik3Rizzo]

Thanks for checking out my fork and for all the suggestions.

What I'll do soon

• include back the environments directories and *.log in the .gitignore, sorry I "cleaned" too much ;-)
• fix the modal - I think you're right, the problem could be related to bootstrap5.
• center the footer.

Please, notice that all the *.svg I used are "stored" directly into the html, so the relative static resources are not needed anymore.

I'll try to add config files and/or command line arguments. Should I keep the env variables for docker support?
I'm not familiar with branches, but I'll try to follow your advice for multiple features.

Super dark theme

I don't really understand if you want to keep the old as a dark theme and my new theme as a super dark theme or if you want to introduce a new theme even darker than the one I proposed.

[Linbreux]

Hi thats great!

I'll try to add config files and/or command line arguments. Should I keep the env variables for docker support?

Perfect! For now I think the env vars should indeed be kept.

I'm not familiar with branches, but I'll try to follow your advice for multiple features.

No problem, its just easier to accept different features in different PR's.

keep the old as a dark theme and my new theme as a super dark theme or if you want to introduce a new theme even darker than the one I proposed.

The first one 😉 I think your theme is already '''super dark'''

[Mik3Rizzo]

The first one 😉 I think your theme is already '''super dark'''

I've done a PR before reading this! But it is not a big problem, switching colors should be easier and faster since I introduced a dedicated wiki.colors.css.

I'm in love with really dark themes, like this GitHub one ;-)

[Linbreux]

Alright! I'll change it before merging and will create the extra dark toggle this week.

[Mik3Rizzo]

will create the extra dark toggle this week.

In my opinion three themes are too many: users are familiar with light/dark mode and no more. With three themes the toggle would be replaced by a drop down menù or something similar, that is not as handy to use as the toggle. My suggestion is to mod the dark theme as you like and keep only light/dark themes.

[Linbreux]

Alright ;) I have merged your PR and added it to the documentation. Thanks for the contribution, If you got any other PR's feel free to submit them!

[Mik3Rizzo]

It was a pleasure contributing, I really like this simple wiki! I've some ideas, maybe I'll implement them and do some PRs ;-)

Maybe we should close the issue!