Offer coupon below TOC in sidebar and other minor changes

[zapaul]

In the future, we will offer a coupon in the sidebar of the docs. While working on this, I noticed a few more things that could be improved a bit in my opinion.

NOTE: Feel free to take a look at the code already if everything is fine from your perspective, but please DO NOT merge this yet as the voucher endpoint in the main application is pending deployment.

So the PR roughly does this:

• Main update: The desktop TOC (which practically is the entire sidebar, unfortunately there is no real sidebar component) is being wrapped (not replaced so hopefully this will be easier to maintain in case of upstream updates) so we can add our own content. Not the TOC itself is pinned to the top anymore, but a container box in it. I limited the TOC height for desktops to 50% of the viewport height (minus the navbar height) to create space for the voucher box. We fetch the voucher from the main website application and display it. On smaller devices, the entire sidebar can now be scrolled vertically in order for this to work for everyone.
• Sidebar on the left shrinked by 100px. In my mind it is pretty big right now.
• A bit more whitespace between the content and the sidebar on bigger devices (VP >= 1280px).

I never used React before. Feel free to tell me if the code makes you wanna unalive yourself and why.

A few other notes:

• ̶T̶h̶e̶ ̶t̶r̶a̶n̶s̶l̶a̶t̶i̶o̶n̶ ̶s̶h̶o̶u̶l̶d̶ ̶w̶o̶r̶k̶ ̶i̶f̶ ̶o̶u̶r̶ ̶s̶y̶s̶t̶e̶m̶ ̶w̶o̶r̶k̶s̶ ̶a̶c̶c̶o̶r̶d̶i̶n̶g̶ ̶t̶o̶ ̶t̶h̶e̶ ̶d̶o̶c̶s̶ ̶a̶n̶d̶ ̶w̶a̶s̶n̶'̶t̶ ̶f̶i̶d̶d̶l̶e̶d̶ ̶w̶i̶t̶h̶ ̶t̶o̶o̶ ̶m̶u̶c̶h̶.̶ ̶I̶ ̶w̶a̶s̶n̶'̶t̶ ̶r̶e̶a̶l̶l̶y̶ ̶a̶b̶l̶e̶ ̶t̶o̶ ̶t̶e̶s̶t̶ ̶t̶h̶i̶s̶ ̶a̶s̶ ̶t̶h̶e̶ ̶G̶e̶r̶m̶a̶n̶ ̶t̶r̶a̶n̶s̶l̶a̶t̶i̶o̶n̶ ̶d̶o̶e̶s̶n̶'̶t̶ ̶w̶o̶r̶k̶ ̶i̶n̶ ̶m̶y̶ ̶l̶o̶c̶a̶l̶ ̶e̶n̶v̶i̶r̶o̶n̶m̶e̶n̶t̶ ̶a̶t̶ ̶a̶l̶l̶.̶ ̶I̶s̶ ̶t̶h̶i̶s̶ ̶j̶u̶s̶t̶ ̶m̶e̶?̶
• If we keep adding more custom content, we might want to implement TailwindCSS to avoid create more messy stuff like this: https://github.com/zapaul/docs/blob/92aa56ebf60f7b4399aafac437c6f96dbe602698/src/theme/VoucherBox/styles.module.css

[fgalz]

The sidebar has been widened slightly so that all the entries do not become a two-liner when one or two sub-categories are opened. This can be seen particularly well under Gameserver -> FiveM -> ... We should probably not stick to 250 pixels here. Maybe 300 instead of 350 pixels?

If you have the project open in Visual Studio Code and Node.js is installed, you can run the full build with F5. This will then build the complete page for DE and EN. If you use npm start, only the English version will be generated. Alternatively, you can also use the following command.

npm i | npm run docusaurus clear | npm run docusaurus build | npm run docusaurus serve

The use of TailwindCSS has to be looked at again, the question is how much is added and how suitable it is. We already use a few React components for the product cards and YouTube integrations. So this might be a good idea for the future.

[zapaul]

The sidebar has been widened slightly so that all the entries do not become a two-liner when one or two sub-categories are opened.

Is two lines an issue? Some are in two lines already anyways, I don't think this is something that can be prevented altogether or needs to be prevented in the first place. It looks okay to me. What I noticed looking at this is that we might want to decrease the font-size by a pixel or two. Try 14px for example, what do you think?

If you use npm start, only the English version will be generated.

That was it, thanks :) Translations work fine, everything looks good to me in the full build.

the question is how much is added and how suitable it is.

How much is added in terms of how heavy the final build that is served to the users will be? TailwindCSS is very lightweight, that won't be an issue. The more custom stuff we add, the more CSS classes we will have, the bigger the build. With TailwindCSS, you mostly only use the same small set of classes and TailwindCSS only includes the classes you actually used in the final build. So it will not really grow over time. I looked up a few guides when I wrote the message above, it looks pretty doable: https://dev.to/shannonajclarke/using-tailwindcss-v3-in-docusaurus-in-5-steps-5c26 We basically configure TailwindCSS as usual and add a plugin to the Docusaurus config.

[fgalz]

Whether a two-liner is a serious problem is ultimately a personal opinion. However, this only takes up more vertical space and lengthens the list. I have already adjusted the font sizes in the past (they were even larger before) and have also shortened or generalized the sidebar titles.

I think adjusting the sidebar to 300 pixels and reducing the font size would be the perfect solution. What do you think?

TailwindCSS is probably not a bad idea for the future.

[ThatGuyJacobee]

Overall changes sound good, voucher stuff is a nice addition for the future :)

I hear the point about the sidebar currently being too wide, but I believe that after these changes it is now ultra-cramped. Perhaps meeting halfway and re-adding 50px to the width would be perfect (as Florian has also suggested)? And regarding the two-line overflowing stuff, I think it looks fine, but it is up to preference of course.

I can vouch for TailwindCSS from previous experiences as long as it can be implemented into Docusarus well. Would make working with CSS much simpler going forward and I'm sure there are performance and build benefits as Paul has mentioned. Can be considered sometime in the future for sure.

[zapaul]

meeting halfway

Sounds just fair, I'll take the 50px reduction :)

Closing this one since new requests from Marvin will require the coupon system to use code from a different PR I was working on and vice versa. I'll create a single big branch and PR for all of it to make the process a little easier. I'll take the 50px, font size and some other possible stuff I notice along the way into account.