Update docs_theme to boostrap V5.x

[mostafaei2002]

I am trying to update the docs_theme to bootstrap v5.x, There were some problems with the previous version. The process shouldn't be very hard since the whole HTML structure is less than 250 lines. I don't know how much custom css, js is written for the current active version though. If everything goes smoothly I should finish in a week or two. Ideally I would love to use something other than mkdocs to generate the static HTML web pages. Bootstrap itself seems fine but mkdocs isn't that good. I like something like Astro much better. Probably better to keep it quick and simple though and not overdo it.

[mostafaei2002]

Some updates on my progress so far. I setup webpack for the project and the development environment. The navbar structure is almost completely updated. The side nav structure can be a bit improved and I haven't really touched the main content so far. For the next step there is some discussion needed as most of the project will be finished and the only thing to work on will be the styles, To be more precise customizing the bootstrap variables and styles it is. And also setting up the dark mode which should be very easy with the tools bootstrap provides.

[mostafaei2002]

I would love to have hear your opinions on the new theme. There are some problems specifically with the old django rest framework picture and the sponsers' picture on the dark mode but everything else looks quite good to me. It's fully responsive as far as I've tested it and there is light & dark themes. To build the website use the following commands.

1. npm install inside /docs_theme
2. npm run build:watch inside /docs_theme
3. mkdocs serve inside / directory (don't forget to install mkdocs from requirements.txt beforehand)

[mostafaei2002]

@cclauss It's been a while since my last commit. I would appreciate it if you could take some time to review the current state of the project. Thank you.

[browniebroke]

I deployed a preview of the new theme: https://669e11a0d553a7007d5ec657--effulgent-entremet-d2197e.netlify.app

[mostafaei2002]

I deployed a preview of the new theme: https://669e11a0d553a7007d5ec657--effulgent-entremet-d2197e.netlify.app

Thanks for deploying it. The code formatting with prettify is not working in this deployed version for some reason though. It works fine on my local development server.

[browniebroke]

The code formatting with prettify is not working in this deployed version for some reason though

I see, the request to fetch prettify-1.0.js returns a 404

[mostafaei2002]

That's my bad actually, I accidentally added the dist folder into .gitignore which includes prettify-1.0.js, I'll fix that soon. But as for the other issue, Committing the final build files adds +10k lines of unnecessary code to the repo. Updating the CI/CD pipeline should fix the issue but I am not sure if the workflow in main.yml is responsible for deploying the docs_theme or how the CI/CD pipeline in general is configured.

[mostafaei2002]

Full screen light mode

Full screen dark mode

[mostafaei2002]

The theme is also responsive, I could share the tablet/mobile views if you want. The only remaining issue is deployment, If there is a CI/CD pipeline which ideally there should be there are 2 solutions:

1. Add the final css/js build files into the repository: which adds a lot of useless bootstrap code to the repository which should be reviewed every time for security reasons.
2. Modify the CI/CD pipeline: Add a step to install the dependencies with npm install and another to build the final bootstrap/js files with npm run build:production

If there are any other issues which need to be fixed i would be happy to know.

[lovelydinosaur]

Thanks @mostafaei2002, @peterthomassen…

I’m going to be slightly awkward and blocking here.

I don’t think this ties in neatly with getting a unified doc style throughout encode, and so I’m going to suggest we hold off on this.

Are you OK adding npm install/build to the pipeline?

Not really, no.

[jbostoen]

I really appreciate the effort the author did here. Bootstrap 3 is very outdated already. Are there any plans to actually move to the maintained and more secure bootstrap 5 version (or get rid of bootstrap)?

While I do appreciate the concern and effort to go for a unified style; it's also sad to see that this big effort that was already made, is just on hold right now; while it would also be beneficial in terms of security.

10th of March, 2025: Any comment or update please, @tomchristie @peterthomassen @cclauss @browniebroke ?