DOC-12: new homepage design

[fantkolja]

No description provided.

[oliverhowell]

Overall it's looking good and great to be able to pull this branch down and build versions of this ourselves! Some quick feedback comments here, based on the original design but also pulling in some comments from recent discussions / iterations:

• We have large images but no rollover or indication these can be clicked - if we keep the large images we should be able to click Get Started to open a Get Started landing page or topic; if we revert to the small images then obviously we don't need the design feedback on the images (though we should retain the ability to create links for the titles / category headings).
• I like that we have the 3 columns now, more content above the fold, but in terms of white space it does feel a little cramped / tight. Not sure how much of this is original design or if it's got a bit tighter during coding.
• We don't have the wider section titles for Popular and Tutorials - at the moment they're just the same as the others (which is why the text for their links wraps). Would be nice to see the half-width tiles rendered, either with or without the individual descriptions Pawel has included in the latest designs (I prefer with but this is a change from original design so don't mind waiting for complete design for this)
• is there a content page we can see yet or is this blocked by version picker discussions? Let me know and maybe we can unblock this too

[Serdaro]

Looks awesome @fantkolja. Not sure if this is the time to comment on the article pages (not the landing page), but just wanted to share.

Here are some cute minor issues:

• Admonitions (they look super cool in general by the way):
  • When there are consecutive admonition blocks, they look like they are stuck together. Maybe a little space between them would look nicer. See “Develop Solutions -> Distributed Data Structures -> Map -> Making Your Map Data Safe -> Enabling In-Memory Backup Reads (Embedded Mode)”.
  • I’ve seen differences in the gap sizes between the admonition heading (NOTE, WARNING, etc.) and the admonition text. See the 2nd and 3rd warning admonitions in the above section.
  • It would be nice if there also is a small space between the admonition block and the text or heading comes before it.
  • The admonition symbol, and the admonition heading and text overlaps if the admonition block is within the flow of an ordered/unordered list or within a table cell. See “Upgrade -> Using the Data Migration Tool -> Migrate Your Data”, or see “Configure and Manage Clusters -> CP Subsystem -> Configuration -> Global Configuration Options”. I’d suggest either making admonition symbols smaller or even removing them.
• Left Navigation Menu:
  • Some long texts overlap with the down/up arrow symbols. Example: Go to “Configure and Manage Clusters” and see the overlap for the “Synchronizing Data Across Clusters”.
• Right Navigation Menu:
  • If the right navigation menu list is a bit longer, the feedback area (Edit This Page, Report an Issue) is not wholly visible. You need to scroll down to see all of the feedback items. Maybe it'd be good to have that area positionally fixed.

And here are comments for you, @rebekah-lawrence and @oliverhowell:

• The article body font size looks a bit large to me; I needed to resize the page to 90% to have a similar reading experience with the current docs - which is more relaxing for my eyes.
• The preformatted text in the left navigation looks a bit disturbing. See “Develop Solutions -> SQL -> Statements”. I would either suggest making them small or not using preformatted text for left navigation items.
• The preformatted text within the article page content has always seemed large to me; couldn’t find the time to dive in so far - but I’d prefer a smaller code text, while I am happy with Roboto Mono. (inline code sizes look fine relative to the rest of the text)
• I loved the box-highlighting of the selected left navigation item. Relatedly, it would be nice to have the parent chapter headings (Get Started, Develop Solutions, Deploy Clusters, etc.) to be distinctive in color, for example, as they are in the current docs.

[fantkolja]

@oliverhowell @Serdaro I have fixed all the issues in your comments, except for the "Right Navigation Menu" issue from @Serdaro's comment. My thoughts:

• if I make those buttons fixed, there might be overlapping between buttons and the content list on some resolutions;
• I have reduced a bit the sizes (font-size and margins) to reduce the problem;
• maybe it's better to make the footer fixed and always visible at the bottom and move all those feedback buttons to the footer, something similar to what @pawelklasa has suggested in the new design originally;

[oliverhowell]

Adding screenshots for the right-hand menu issue - the issue is the Edit/Rate page section is part of the right-hand menu so for extra long pages you don't see it unless you scroll right down to the end (yet there is plenty of space to show it if these buttons were in a different div):

It does seem to be an issue with existing site too so not a regression.

[oliverhowell]

Happy to add this to a new issue but could we add a tag onto the Get Hazelcast button in the top right?
Something like "?utm_source=docs-website"? This would enable us to track clickthrus from docs site specifically and make it a key metric.

[oliverhowell]

Happy to add this to a new issue but could we add a tag onto the Get Hazelcast button in the top right?
Something like "?utm_source=docs-website"? This would enable us to track clickthrus from docs site specifically and make it a key metric.

I've got a local build with this enabled for both the hazelcast.com links in header:

[rebekah-lawrence]

Spotted in a local build, but can be seen in https://docs.hazelcast.com/hazelcast/5.5-snapshot/system-properties:

Where a Note is in a table (hazelcast.diagnostics.directory row in the page linked above), the body of the note seems to be inside row dividers

[oliverhowell]

Getting ready to make this live - some minor issues/questions @fantkolja :

1. Line spacing after secondary nav items is still too big (see screenshot)
   
2. Kapa lozenge should be the rectangular shape not the square
3. ^ do we need to resolve the above conflicts?
4. New body-home will be incoming - ok to commit it to this branch?

[oliverhowell]

Also, I know the tutorials CSS refresh was a bonus but the lefthand nav on normal content has some issues with text size and spacing: