Site Usability: Apisix versions are easy mistaken

[anhldbk]

Current State

Description of the current state/issue:

I like the modern design system of our website.

I think there's an issue with our web usability: the version block and the component one are too far from each other.

Users may mistakenly think this is the version of apisix instead.

Link to the page:

Any doc page, for example: https://apisix.apache.org/docs/apisix/getting-started/

Desired State

Description of the change you are proposing:

We can move the component-selector block to the sidebar at the top-right corner

Would you like to fix this issue?

No. Please assign another contributor

[SkyeYoung]

We are preparing to modify this part. I have had no time recently, but I will help to modify this part as soon as possible.

@juzhiyuan @guoqqqi Maybe you have time to help improve this?

[juzhiyuan]

No, there have a lot of TODOs... Just added good first issue

[RajVarsani]

I would like to work on this issue

[SkyeYoung]

@RajVarsani 😸 Great! If there are any problems, please feel free to @ any of us. (Hope you won't be dissuaded by the old ugly code. 🥲)

[RajVarsani]

Sure
I'll start with setup then, will update here if I encounter any issue.

[anhldbk]

@SkyeYoung Can we use the same versions for sub components?

[SkyeYoung]

@anhldbk Could you please give me an example? I'm not sure if I'm thinking what you're talking about. 🤔

[anhldbk]

@SkyeYoung AFAIK Apisix comprises of various sub components with differrent versions in releases. Multiple versions lead to this issue and other compatibility issues like this one.

My question is: can we use the same version for each component? Vertx uses this approach.

[RajVarsani]

@SkyeYoung, I set up the codebase in my locally. I have encountered a couple of issues.
I opened it in the Dev container, and it shows 624 (Which is the total number of files in the repo ig) file changes because of End of Line Difference (I'm in windows).

I'm using this command: yarn start:doc . How do I see changes reflected in the server? I tried changing the content of the nav links, but it is not reflecting as hot or even hard reload. I had need to restart the server to see the changes

[SkyeYoung]

@RajVarsani

For the end-of-line symbol problem, I think you can fix it by clicking Ctrl + Shift + P and typing Change End of Line Sequence and selecting LF.

For the question about hot reloading, it's not really supposed to have this problem ... I need to try it out. But I don't use Windows directly for any development work, including installing docker-desktop on it, so it will take a bit of time and I may be able to tell you tomorrow

[RajVarsani]

Update: I've discarded all previous changes and updated vs code prefs, so the LF-CRLF issue seems to be resolved. Thanks, @SkyeYoung, Lmk if you find any update on the reloading issue.

[SkyeYoung]

@SkyeYoung AFAIK Apisix comprises of various sub components with differrent versions in releases. Multiple versions lead to this issue and other compatibility issues like this one.

My question is: can we use the same version for each component? Vertx uses this approach.

🤔 cc @juzhiyuan

[juzhiyuan]

There has no plan to release packages with the same version numbers. But I suggest adding some notes on each project's documentation: which version is compatible?

A better way is let each component to auto detect version 🤔

[SkyeYoung]

Update: I've discarded all previous changes and updated vs code prefs, so the LF-CRLF issue seems to be resolved. Thanks, @SkyeYoung, Lmk if you find any update on the reloading issue.

@RajVarsani Sorry for too late. I tried it, but it doesn't seem to reproduce the thermal reloading problem. I tried searching and found this https://stackoverflow.com/questions/65445600/hot-reload-is-not-working-in-my-react-app. I don't know if it will help you...

[RajVarsani]

I'll check and update here ✅

[Mackenzie-OO7]

@SkyeYoung @anhldbk Hello, can I work on this issue?

[kondapalli19]

Hey, I'm new to open source and would like to work on this so can you please assign me this issue.

[SkyeYoung]

@Mackenzie-OO7 @kondapalli19 Hi, I think you can try to collaborate and work together to complete it. Alternatively, you can try dividing the work among yourselves and each person can complete their own part. This will require you to collaborate and communicate with each other. 😸

[kondapalli19]

@SkyeYoung T component-selector block you want to put that at the top of the version selector block or something else

[kondapalli19]

@Mackenzie-OO7 Hi! Thank you for the suggestions. I think dividing the work among ourselves and communicating with each other would be a good approach. Let's discuss how we can divide the work and make sure we're on the same page. Looking forward to working together on this! 😊

[rukundob451]

Hey @anhldbk, is this still available?

[anhldbk]

@rukundob451 make a PR fast pls

[aarishshahmohsin]

Can I be assigned this issue?

[Rishab87]

Hi , Can I work on this issue?