feat: apisix-website redesign, add shaders and components used in UI (Sub-PR2)

[1502shivam-singh]

Apache APISIX website redesign (Sub-PR: 2)

This large feature addition will be done through 3 chained PRs which for easier reviews and merging. Please merge all these 3 sub PRs together, in ascending order for no breaking changes. Dependency flow is like PR3 depends on PR2, depends on PR1.

Link to next PR to merge
PR3 : #617

Changes:

Added shaders and components used in UI

[netlify]

✔️ Deploy Preview for apisix ready!

🔨 Explore the source changes: 49c11f6

🔍 Inspect the deploy log: https://app.netlify.com/sites/apisix/deploys/6124be2ae0b0e700089f1f15

😎 Browse the preview: https://deploy-preview-495--apisix.netlify.app

[liuxiran]

also cc @Baoyuantop @KishaniKandasamy @foolwc @iamayushdas @guoqqqi to review thanks

[liuxiran]

Hi @1502shivam-singh since it is a big change for your home page, would you please give me a little more time, I want to discuss every details with you later this week, and at the same time competing for everyone's opinion, thanks a lot

[1502shivam-singh]

Hi @1502shivam-singh since it is a big change for your home page, would you please give me a little more time, I want to discuss every details with you later this week, and at the same time competing for everyone's opinion, thanks a lot

No problem 👍, I have already submitted the final report with links of these PRs so I don't think there would be any problem on that front. Take your time😊.

[1502shivam-singh]

Any updates on this and #496 ?
cc @liuxiran @bzp2010

[liuxiran]

Hi @1502shivam-singh, sorry for late reply

let's discuss some details

1. the first Screen

I love the left part~! For the right part it is really cool, but not very practical IMO, may I ask whether we can use this cool animation effects only as auxiliary effect?

2. The technical architecture of Apache APISIX

This our official community chart, I noticed that the multiple copies of APISIX has been Ignored in your redraw chart(If my preview address is still correct：https://apisix-re.netlify.app/)

so how about use this chart directly or make some changes based on the original chart?

[1502shivam-singh]

1. the first Screen

I love the left part~! For the right part it is really cool, but not very practical IMO, may I ask whether we can use this cool animation effects only as auxiliary effect?

The flow/wavy particle system imagery in top section is more of a metphor to the smooth, frictionless and synchronised performance of APISIX. It's a subtle abstract imagery that I came up with, to pull users in through curiosity and illustrate our product indirectly.
Also, I have seen something similar (matching color palletes too) being used in a lot of posters/merchandise of APISIX like in one below, the black hyperloop imagery. Only difference being that one is in motion, other is not. -

If you insist, then one way is to change the main heading on left to something that is more descriptive of APISIX in the light of the right imagery.

1. The technical architecture of Apache APISIX

This our official community chart, I noticed that the multiple copies of APISIX has been Ignored in your redraw chart(If my preview address is still correct：https://apisix-re.netlify.app/)

so how about use this chart directly or make some changes based on the original chart?

Oh okay, one naive question coming up, do those multiple layered rectangles actually mean something, when highlighting the high level design ? I am not aware of this so. If they do, then I will edit this graph to accomodate.

[liuxiran]

The flow/wavy particle system imagery in top section is more of a metphor to the smooth, frictionless and synchronised performance of APISIX. It's a subtle abstract imagery that I came up with, to pull users in through curiosity and illustrate our product indirectly.
Also, I have seen something similar (matching color palletes too) being used in a lot of posters/merchandise of APISIX like in one below, the black hyperloop imagery. Only difference being that one is in motion, other is not

Thanks for elaborating on your design concept @1502shivam-singh , you are indeed a designer with ideas 👍

I agree with your inclusion of dynamic symbolic elements, that really makes our website more dynamic~!
IMO there is still a difference between the design of the product periphery and the design of the web page, web pages should be aesthetically pleasing while still highlighting the content. So It would be better if dynamic elements could be combined with text content.

one naive question coming up, do those multiple layered rectangles actually mean something, when highlighting the high level design

hahaha, got your point, try to express the meaning as clearly as possible while still having a sense of design is the goal we pursue, multiple layered rectangles is the way we commonly represent multiple copies, or you can design a more logical and designed expression, and the only requirement is we support multiple copies of APISIX nodes.

[1502shivam-singh]

So It would be better if dynamic elements could be combined with text content.

Okay, so as a middle ground, then one way could be to change the main heading on left to something that is more descriptive of APISIX in the light of the right imagery. Something like - "Effortless and smooth API Traffic management." This even rhymes better with the flow imagery.
Inserting text in this canvas, doesn't seem to be an issue to me as adding it might conflict with the motion here which can go both ways, either good or bad. Going for subtlety and have the text support will compound the effect of the imagery here I believe and is safer too.

Given the scenario that the product here, an API gateway, doesn't provide much to add some asthetic sense so going for something abstract which can indirectly depict a quality of that service seems a good idea to me.

the only requirement is we support multiple copies of APISIX nodes.

Okay, will do.

[liuxiran]

I believe that as long as we keep the same direction, you will have a constant flow of inspiration @1502shivam-singh .

And last two thing need to confirm:
Since we have upgrade Pluginised workflow with antd x6, the image of Pluginised workflow has to be modifed, you can refer http://139.217.190.60/ to make a change.

thanks a lot, looking forward to the improved version

[1502shivam-singh]

@liuxiran, check the site now link. Made some changes.
After I push changes here (will ping here, when pushed) I guess we can merge them. Then move to the final PR where code review can be done accordingly.
We can continue working on any minor issue, if remaining, after these series of PR are merged.

[liuxiran]

@liuxiran, check the site now link. Made some changes.
After I push changes here (will ping here, when pushed) I guess we can merge them. Then move to the final PR where code review can be done accordingly.
We can continue working on any minor issue, if remaining, after these series of PR are merged.

thanks @1502shivam-singh, looking forward to your final Changes here, and since it is really a big change for our website, after you updated your final Changes, would you like to submit a discuss to our (mail list)[dev@apisix.apache.org], that will get more attention

[1502shivam-singh]

Just pushed the changes in the 3rd PR (for conflict, accept new incoming changes)

Sure, will up a discuss mail tomorrow.
I actually had made one earlier for copy review but it unfortunately got mixed up with the other mails and ignored.
Nevertheless, for the record, will put one up. Thanks for the reviews and your comments 😊

[liuxiran]

Just pushed the changes in the 3rd PR (for conflict, accept new incoming changes)

Sure, will up a discuss mail tomorrow.
I actually had made one earlier for copy review but it unfortunately got mixed up with the other mails and ignored.
Nevertheless, for the record, will put one up. Thanks for the reviews and your comments 😊

thanks for your nice work.