Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

jhipster.github.io website design update #13595

Closed
ntorionbearstudio opened this issue Jan 18, 2021 · 70 comments
Closed

jhipster.github.io website design update #13595

ntorionbearstudio opened this issue Jan 18, 2021 · 70 comments
Labels
area: documentation:books: area: feature request 💡
Milestone
8.7.0

Comments

@ntorionbearstudio
Copy link
Contributor

Overview of the feature request

This is concerning https://github.com/jhipster/jhipster.github.io

With @ascelineboullen we propose our contribution to update and refresh jHipster's website design.

In first @ascelineboullen can create wireframes / sketch on Figma to see future design and use it as a support of discussion.

We also propose to use new technologies for website development :

  • NextJs for using React (to have components approach)
  • Chakra UI as UI library for components and layout (give composable approach and it's very simple to use)
@pascalgrimaud
Copy link
Member

A big +1 from me

I think the difficulty part would be:

  • keep MD files to update content
  • keep a way to test content before submitting pull request

@MarlonLuan
Copy link
Contributor

If the technology has not yet been defined, I suggest you take a look at the Hugo it is written in go, it's simple, and according to its description it is "The world’s fastest framework for building websites."

@pascalgrimaud
Copy link
Member

Cc @jdubois @deepu105 and @jhipster/developers

@atomfrede
Copy link
Member

I use hugo for my personal blog and really like it as it also supports asciidoc(tor) as alternative to markdown. Before do anything we should maybe think about how to structure should be eventually. Maybe we also can make the separation between high level (marketing) overview and user documentation more clear.

@deepu105
Copy link
Member

Yes a site revamp is heavily needed and appreciated. Few things to keep in mind (some pointers from my experience doing the last revamp)

  1. We are hosted on GitHub pages that means the site needs to be Jekyll based else things will become much more difficult like having CIs that can build and publish that static content on each commit. I don't think it's a big deal but its additional work to be considered and makes deployment a bit more complex than today
  2. The markdown content needs to remain the same, which means the framework (gatsby, Hugo or whatever should be able to work with existing markdown files)
  3. Our markdown files use front matter for metadata and stuff like url redirect etc, this behaviours need to be retained, last I checked Gatsby and Hugo doesn't support front matter, but things might have changed
  4. There are parts of the site that uses AngularJS like home page, marketplace etc, these need to be migrated, it shouldn't be a big deal IMO
  5. The URL slugs should not change, this is very very important as it affects our SEO (file structure can change as long as URL slug remains the same, with Jekyll its possible with front matter not sure about others)

IMO the best way to approach this would be

  1. Redesign the site CSS first
  2. Move dynamic pages from Angular to React or Vue
  3. Move to new SSG (Gatsby or Hugo or whatever) personally I don't care much for this step as Jekyll is still good for our usecase

@PierreBesson
Copy link
Contributor

Thanks a lot for offering contributions to the design !

Having managed some aspects of the website over the years (docs archive, chinese i18n, microservice docs...). Here are my suggestion for the website:

  1. Support Markdown for documentation pages. The Markdown format is the most simple to maximize ease of contributions so we need to keep it. However this is only for the documentation part, the landing page and some other specific pages could use other formats.
  2. Use a static site generator (no back-end) and host in GitHub pages. On the contrary to Deepu, I would be OK to move away from Jekyll as they are a lot of other tools which are easy to setup with GitHub Action. However we really don't want to have a back-end as we have a lot of traffic from all over the world (really impressive) and don't want to pay for servers or have the website be slow for users located in far away regions.
  3. Support an archive of old versions of the website (like I did for https://www.jhipster.tech/documentation-archive/)
  4. Support multiple languages. As of right now we have english and chinese language website (https://jhipster.tech/cn) but it's not really an optimal setup as the Chinese website is a fork of the English version.
  5. Make the doc pages look more standard. Typical tech doc pages looks like https://docs.readthedocs.io/ or https://docs.gitbook.com/. This is what we should have.

One great "framework" that fit all requirements is https://docusaurus.io/ . It is developed by the React team for their docs so I guess it could be a good base for the new website on top of which could be developed great looking design.

@ntorionbearstudio
Copy link
Contributor Author

Hello, thanks all for your responses

  1. Yes we will keep markdown files for content. With Next JS there is no problem for that : https://nextjs.org/blog/markdown
  2. Yes it will be only a front-end project, no back-end is needed I think for the website
  3. We will keep current URLs / slugs for all pages for SEO and archived websites
  4. For languages, we will setup an internationalization system with NextJs

For now in first step, I think that we should start by designing the new website with some wireframes and then we'll go back to stack issues

@pascalgrimaud pascalgrimaud added $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $500 https://www.jhipster.tech/bug-bounties/ labels Jan 19, 2021
@pascalgrimaud
Copy link
Member

For now in first step, I think that we should start by designing the new website with some wireframes and then we'll go back to stack issues

Yes plz, small steps to have quick feedbacks first :)

@ntorionbearstudio
Copy link
Contributor Author

Hello everyone, with @ascelineboullen we started to think about new pages and links disposition.
In first, we think that some generator informations or some tools like Jhipster online generator or JDL Studio are not highlighted enough.

We'll have more time to work on it this month. We'll go back soon with some propositions to discuss with you :)

@jdubois
Copy link
Member

jdubois commented Feb 7, 2021

Totally agree on that!
Thanks a lot for your work on this, we have a ton of visitors (110,000 unique visitors last month) and it’s going to help a lot of people.

@deepu105
Copy link
Member

deepu105 commented Feb 7, 2021 via email

@github-actions
Copy link
Contributor

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

@atomfrede
Copy link
Member

Keep it open please

@github-actions
Copy link
Contributor

This issue is stale because it has been open 30 days with no activity.
Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted.
We are accepting PRs 😃.
Comment or this will be closed in 7 days

@atomfrede
Copy link
Member

Keep it open.

@mraible
Copy link
Contributor

mraible commented May 6, 2021

I have a contact that's developing a website for us at @oktadev. I could ask them for a quote to redesign our site too. While we're add it, we should fix our vulnerabilities. I tested Snyk's new website scanner and we get an F.

@jdubois
Copy link
Member

jdubois commented May 7, 2021

We could at least have a new CSS, and also a custom one for the generated apps (not sure if that can work across all front-end frameworks). But having a common visual identity would be awesome.
Concerning Snyk, as the website is a static website, I wonder how we can have XSS attacks - how are those supposed to work?
Anyway, we have money and this is the kind of thing we need to pay for, so yes @mraible if you can get a quote that's very interesting.

@ntorionbearstudio
Copy link
Contributor Author

Hello @mraible @jdubois, @ascelineboullen is preparing some sketchs for the jHipster website, we'll be able to show you this next week I think. This can be a base for a reflexion about the website reorganization and it will give some ideas about the update of the design

@pascalgrimaud
Copy link
Member

oh no worry @ascelineboullen
Take care of yourself, it's more important than Open Source project.

There is no deadline in Open Source project, so take the time you need, really.

@ascelineboullen
Copy link
Contributor

Thank @pascalgrimaud, I know, but now I'm ok, so I will be able to continue on it! 😄

@ascelineboullen
Copy link
Contributor

For information, I updated the mockup: I fixed all the wording errors that you reported, thanks 😃 .

Next: I'm still thinking about your feedback on the structure of the pages (split the team part on another page, how to design the getting started, the news, etc...). In parallel I continue on the responsive version.

I will do another update soon !

@jdubois
Copy link
Member

jdubois commented Jan 18, 2022

Thank you @ascelineboullen for your hard work!

@ascelineboullen
Copy link
Contributor

Hello everyone!

A little update:

  • On desktop version (https://rebrand.ly/jhipster), I fixed some elements on the homepage (I deleted "news section", I split "team section" on another page, fixed somes mistakes on texts, etc..)
  • It's not finished yet, but I init the link to see the homepage on the responsive view. You can see it at: https://rebrand.ly/jhipster-mobile

So don't hesitate to give me some feedback!

I continue on the mockup 😃

@jdubois
Copy link
Member

jdubois commented Mar 8, 2022

Thank you for your hard work @ascelineboullen ! As I'm currently learning more about accessibility, can you have a look at https://accessibilityinsights.io to be sure that the new website would work for everyone?

@ascelineboullen
Copy link
Contributor

Yes I design keeping accessibility constraints in mind. But I will take a look at the link you shared with me to reconfirm that's really ok. Thank @jdubois 😄

@mraible
Copy link
Contributor

mraible commented Mar 12, 2022 •
edited
Loading

Can you please change the text from "Grettings Java Hipster" to "Greetings Java Hipster" at the top?

@ascelineboullen
Copy link
Contributor

New little update:
About desktop proposition https://rebrand.ly/jhipster

  • I've modified/re-organized the structure and hierarchy for main page,
  • split team section on another page (work in progress),
  • add the quick start section with the video,
  • and also add blueprints (at the end of the webpage. Bloc is in progress, I will modified the design if the structure is ok).

To answer you @jdubois : thanks I've check the link you shared about accessibility, it's seems more for the development step, but it was interesting, thank you! Yes, to make the revamp of this webpage, I considered rules of design and accessibility (and Figma offers plugins to test accessibility, such as plugins related to color contrasts for example). Also, about it, today, I open another issue in parallel to this issue, about the brand identity and guidelines (jhipster/jhipster-artwork#21). To complete the graphical charter, and define typefaces for the content, colors rules, etc. It will help us to have established rules (accessibility contrast), and then to have a consistent and coherent whole in the projects.

Also, for your information, I will have more time to allocate to contributions, so I continue on the mockup and additions to the graphical charter, but you can already give me some feedbacks again! 😉. About the structure, what did you think?

Thanks!

@mraible
Copy link
Contributor

mraible commented Aug 31, 2022

It looks awesome! Nicely done @ascelineboullen!!

@deepu105
Copy link
Member

deepu105 commented Sep 1, 2022 via email

@jdubois
Copy link
Member

jdubois commented Sep 1, 2022

Yes that's great work!!! We also need better UX/UI for JHipster Lite, @pascalgrimaud

@ascelineboullen
Copy link
Contributor

Thanks for your positive feedback! 🤩. I will finished module section & team page, and then I will modify the responsive view (on mobile) for the homepage.

Yes, we've discussed with Pascal about JHipster Lite and the better UX/UI needed. That's why I've opened an issue about graphical charter, to have a common graphic base defined before going further in the differents projects. And then, yes I could help in JHipster Lite's project too ;)

@ascelineboullen
Copy link
Contributor

Little update:
Tonight, I'm working on the module section & team page, I will be able to update the link tomorrow and bring fews news 🙂.

I worked the last week on jhipster/jhipster-artwork#21 too. For this issue, I will make an update this week end and show you the draft of the proposal that I want to make for the update of the graphical charter!

@ascelineboullen
Copy link
Contributor

UPDATE:

Desktop version (https://rebrand.ly/jhipster):

  • I've added section modules at the bottom of the homepage
  • I've updated team page: now, all sections are there

Mobile version (https://rebrand.ly/jhipster-mobile)

  • Mobile homepage is now up to date with homepage desktop version

Then, I will work to fix some details: add various datas (because members are still called "Pascal" for exemple 😄. Same problem for tech logo), to be more realistic and get closer to the version that will be integrated.

Feel free to give me more feedback! 🙂.
Thanks!

@mraible mraible mentioned this issue Nov 7, 2022
Closed
@Jessy-BAER
Copy link

Jessy-BAER commented Feb 8, 2023 •
edited
Loading

If the wireframes are good enough, I propose to work on the implementation with asceline.

Maybe it's better to create a specific issue for it ?

@ascelineboullen
Copy link
Contributor

I agree with Jessy. The base of the redesign seems to be ok, here is the export of the first version of the mockup. ;)

Landing page - mobile
Landing Page - Team
Landing Page - Home

We will create more specific tickets as Jessy indicated, to go on the implementation.

I've init a document to think about the site tree, we're going to work on it with Jessy to confirm the structure of the new project.
https://whimsical.com/jhipster-arborescence-RxvQrWktaDY9P2DTzSSR9P

@ascelineboullen ascelineboullen mentioned this issue Feb 14, 2023
Closed
@Jessy-BAER Jessy-BAER mentioned this issue Feb 16, 2023
Closed
@deepu105
Copy link
Member

deepu105 commented Feb 24, 2023 via email

@Jessy-BAER
Copy link

@deepu105 I am on it 21164, but i replace bootstrap by tailwindcss you can see my work ^^

@irwansyahwii
Copy link

I just got laid off, I can work on this full time. Can I take it?

@pascalgrimaud pascalgrimaud removed $$ bug-bounty $$ https://www.jhipster.tech/bug-bounties/ $500 https://www.jhipster.tech/bug-bounties/ labels Jul 11, 2024
@pascalgrimaud
Copy link
Member

The design was done and the bounty already claimed in another ticket

We'll open new ticket to improve the new version

@pascalgrimaud pascalgrimaud mentioned this issue Aug 16, 2024
Open
5 tasks
@mraible mraible added this to the 8.7.0 milestone Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: documentation:books: area: feature request 💡
Projects
None yet
Milestone
8.7.0
Development

No branches or pull requests