jhipster.github.io website new design implementation

[Jessy-BAER]

trafficstars

I would suggest to create a specific issue for the implementation of the issue created by @ascelineboullen and @ntorionbearstudio 13595

I see 2 options :

1 - Update design & organization pages only

We focus on the design part 13595 and rearrange the pages to improve the UX 21139

Maybe clean some things out on the project

• remove unused code
• upgrade bootstrap version or replace it with tailwind (I'd recommend the latter)

With this strategy, we can keep the current stack (Jekyll, angular, etc). This is less fun but requires less work

2 - Update design & organization pages & stack

We take advantage of this subject to also replace the current stack by a new one

Why replace the stack ?

• To attract new contributors : it's easier for new developers to come and contribute if we modernize the stack
• To improve the developer experience
• Improve live reload (we need to run npm run sass after updates)
• Propose a more Front End friendly stack
• Some dependencies/tools are getting old
• To improve SEO (this could be splitted as a specific issue)

All of this will take time and require thorough discussion. As a result, it may not be available soon :)

My suggestion

In my opinion, it's better to go with the first option. I am available to work on it with Asceline. This will improve our knowledge of the website and allow us to consider option 2 later on this year

[pascalgrimaud]

I'm for the 1st option too, as it won't require to change the architecture and the deployment

[DanielFran]

@Jessy-BAER I am for the 1st option too, let's do it step by step.

[atomfrede]

Would go with the 1st option too. The stack might be "old" but it works well, so I don't see a need to change it right now.

[mraible]

Do we have a timeline for when the new design will be live on jhipster.tech? I ask because I noticed today we still Copyright © JHipster 2013-2021 at the bottom of the site.

[pascalgrimaud]

@mraible : we should not wait for the new design. Updating the current jhipster.tech is faster :)

[mraible]

What's the current status of the new design? Selfishly, I'd love to see it launched with the release of 8.0!

[JeroenAdam]

Anyone thought about moving from Reactstrap to Tailwind for jhipster-generator? I see the Jhipster website will soon adopt it: https://github.com/Jessy-BAER/jhipster.github.io/pull/1/commits/142a6ec1adb041139ddfb79ecf1a1ca6733252f8

NPM trends shows a steep adoption rate for Tailwind... at the moment 11 times more weekly downloads compared to Reactstrap https://npmtrends.com/react-bootstrap-vs-reactstrap-vs-tailwindcss

[github-actions[bot]]

This issue is stale because it has been open for too long without any activity. Due to the moving nature of jhipster generated application, bugs can become invalid. If this issue still applies please comment otherwise it will be closed in 7 days

[mraible]

I still want to implement this.

[mraible]

@SvMak has been working on this and has implemented the new design with Docusaurus. Here's some screenshots of the homepage in light and dark mode. IMO, it's looks fantastic! Well done, Sviatoslav!! 🥳

[ascelineboullen]

Well done @SvMak! Do you have a link (staging / preprod) where we can see your work in progress? I made the design, so dont hesitate if you have any question, or if I can do anything to help!

[SvMak]

Well done @SvMak! Do you have a link (staging / preprod) where we can see your work in progress? I made the design, so dont hesitate if you have any question, or if I can do anything to help!

Thank you! There is no demo yet, but I hope there will be one soon.

[mraible]

I've deployed a demo to https://jhipster-website.netlify.app. The password is:

qre7zad7QZM*hrt@cqt

The password protection is to prevent Google from indexing the site.

[MathieuAA]

That's really great, thanks a lot @SvMak!!

[deepu105]

This is excellent work @SvMak

[deepu105]

@mraible this work deserves atleast 2 x $500 bounty IMO

[atomfrede]

It is really great. I like the separation of docs and website. The design feels fresh but not too fancy. Nice typographic and font size/style too.👍

[mraible]

@mraible this work deserves atleast 2 x $500 bounty IMO

I say we go big and donate 5K to the author. I love it! ❤️

[pascalgrimaud]

Very good job @SvMak

@mraible : I think we should list all people involved in this, to reward all of them

[vishal423]

Great work @SvMak 👍

[SvMak]

Bounty claimed https://opencollective.com/generator-jhipster/expenses/210670

[pascalgrimaud]

After discussing with the other leads, we agree that you can claim the same amount of bounty for all the work done for the design. Plz claim 2k @ascelineboullen Big thanks for all your work too

[ascelineboullen]

Hi everyone! I've just claimed the bounty, thank you very much! https://opencollective.com/generator-jhipster/expenses/211088

Delighted to have participated in this redesign! Thx, and well done again @SvMak

[ascelineboullen]

Do you know when the website could be deploy online? 🙂. And where I could give some feedbacks about graphic design (make a list on another issue on generator-jhipster?) ? Thank

[mraible]

Hello @ascelineboullen! There's a chance we could deploy it right now if I merged https://github.com/jhipster/jhipster.github.io/pull/1357. However, I think we should deploy it to a staging site first since I'm not sure the deployment process will work with the new Docusaurus scripts.

@jdubois Is it possible to test the above PR on a staging site?

[jdubois]

Can you deploy it in a fork? I can probably configure Cloudflare to point to it, with something like staging.jhipster.tech

[jdubois]

@mraible I just sent you an invitation to our Cloudflare account, with admin rights, use it wisely!

[mraible]

@jdubois I forked it to https://github.com/mraible/jhipster.github.io and merged the new-website branch into the main branch.