jhipster.github.io website new design implementation

[Jessy-BAER]

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.

[mraible]

@jdubois Where is jhipster.tech hosted? It looks like Cloudflare is pointing to jhipster.github.io. Does that mean it's hosted on GitHub pages? If so, how do you redirect from jhipster.github.io to jhipster.tech?

[mraible]

I forked this repo to https://github.com/mraible/mraible.github.io, cloned it with gh repo clone mraible/mraible.github.io, then merged new-website into main. This resulted in a couple of conflicts:

CONFLICT (file location): _posts/2024-08-26-jhipster-release-8.7.0.md added in HEAD inside a directory that was renamed in new-website, suggesting it should perhaps be moved to docs/releases/2024-08-26-jhipster-release-8.7.0.md.
CONFLICT (modify/delete): pages/team.md deleted in new-website and modified in HEAD.  Version HEAD of pages/team.md left in tree.
Automatic merge failed; fix conflicts and then commit the result.

I accepted the changes from the new-website branch and committed everything.

I changed jhipster to mraible in docusaurus.config.ts. Then I committed and pushed to main. This trigged an action and seems to deploy the main branch to https://mraible.github.io, not the built branch.

If I add deploymentBranch: 'gh-pages' to the Docusaurus config and run USE_SSH=true npm run deploy, the result is the same.

If I change the branch from main to gh-pages in Settings > Pages, it solves the problem.

Unfortunately, this does not automate the deployment since I need to run USE_SSH=true npm run deploy. If I move the workflows from .github/workflows-draft to github/workflows, it does run the new deploy action.

See https://mraible.github.io for the new website!

P.S. I looked up how to remove old actions that are no longer used. Stack Overflow says you have to delete all the workflow runs to do this.

[SvMak]

Unfortunately, this does not automate the deployment since I need to run USE_SSH=true npm run deploy. If I move the workflows from .github/workflows-draft to github/workflows, it does run the new deploy action.

@mraible For automated deployment, we can use workflows from workflows-draft

Detailed for additional setup: https://docusaurus.io/docs/deployment#triggering-deployment-with-github-actions and https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow

[jdubois]

@mraible yes it's hosted on GitHub pages. When you "git push", it creates the jhipster.github.io website, and then Cloudflare goes on top of it and handles the DNS, adds some optimisation and caching. It also allows us to go beyond the (soft) limits for GitHub pages, as we have a lot of traffic.

[mraible]

@SvMak Thanks for the fix and clarification about workflows.

@jdubois Excellent! That means that once this PR is merged, we need to change the branch from main to gh-pages in Settings > Pages and update it to use GitHub Actions.

@jhipster/developers Please review and approve https://github.com/jhipster/jhipster.github.io/pull/1357. I can merge and update the repo tonight (est. 6pm MDT, 12am GMT), and the new site will be live!

[mraible]

The new site is live! https://www.jhipster.tech 🎊

Y'all are awesome for helping make this happen! ❤️