[DOC] Freshen up the homepage #1062

Vincent-Maladiere · 2024-09-05T13:51:33Z

This PR revamps the homepage to articulate what skrub does more clearly.
From top to bottom:

Add a Discord link on the navbar
Change the features on the gradient band
Add a sentence describing what skrub aims for, in plain English
Move the button from the left of the band to the center of the page
Add three feature sections to replace the previous cards. These sections are feature-centric instead of module-centric.
Add a contributors section (it's nice to put some faces, or at least icons, to the project)
Add a footer

Vincent-Maladiere · 2024-09-05T16:08:29Z

Just realized that the new footer wasn't playing nice with the current one in all other pages, I need to address that

Vincent-Maladiere · 2024-09-05T16:10:10Z

Also, it would be good to put some large HTML chunks (like the TableReport) elsewhere to ease the readability of the index.html file

jeromedockes

thanks a lot @Vincent-Maladiere this is super cool! 🎉

you may want to check how it looks on narrow screens or mobile phones:

there is no padding in the top banner so the last of the 3 bullet points touches the bottom of the banner
there is too much white space on each side of the screen due to the 80% max-width
the gaps between the sections need to be tightened IMO

I'm not sure why there is no line between "effortless pipelines" and "powerful feature engineering" but there is one between the other sections?

I think we need to create the tablereport as part of the sphinx build process, rather than adding it to the repo. it will avoid having huge meaningless diffs in the repo and also this way when we improve the report the homepage will get updated without needing to regenerate it and add it manually. (we may also be able to do the highlighting of code snippets with pygments during the sphinx build to be able to write them in python and update them more easily). I'm ok with addressing this last point in another PR though

doc/_static/css/custom.css

Vincent-Maladiere · 2024-09-06T12:48:26Z

I'm not sure why there is no line between "effortless pipelines" and "powerful feature engineering" but there is one between the other sections?

I don't see it, can you provide a screenshot? The horizontal lines split all feature sections.

there is too much white space on each side of the screen due to the 80% max-width
the gaps between the sections need to be tightened IMO

I'm afraid I have to disagree with both points. Having a small margin on a desktop is awkward. Spacing between sections also prevents it from being too crowded with code and demos. I agree with you on mobile, however. I reduced them for this format.

I also changed the orange color of the button and headers to bump the contrast ratio to 3.33, which should be enough for large texts. I can't do more than that, because it wouldn't be orange any more.

TODO:

generate the HTML table report from a Python script
fix the 3 dots thingy on the banner (hopefully we will get rid of it someday)

jeromedockes · 2024-09-06T13:01:56Z

I don't see it, can you provide a screenshot? The horizontal lines split all feature sections.

I think it is due to the 0.5px line width, the lines appear and disappear depending on the zoom level. on my laptop and external screen at the default zoom 100% on firefox it doesn't show up between those 2 sections. that's not a big deal either though

doc/_static/css/custom.css

jeromedockes · 2024-09-06T13:23:03Z

Spacing between sections also prevents it from being too crowded with code and demos

sorry i wasn't clear, for the spacing between sections I meant on a phone screen only, it looks fine to me on a big screen. (I saw you changed it already for small screens 🚀 )

jeromedockes · 2024-09-06T13:30:05Z

I also changed the orange color of the button and headers to bump the contrast ratio to 3.33, which should be enough for large texts. I can't do more than that, because it wouldn't be orange any more.

thanks! If needed we could always make it not orange but I think it looks ok now. the hovered state still has a very low contrast but that's probably less important

GaelVaroquaux · 2024-09-09T14:33:18Z

One "graphical" detail: the new homepage is made of horizontal blocks.

It would be very nice to have one out of two with a slightly greyed background. I do realize that this implies removing the "hr" elements and using the background color of the divs instead.

doc/_templates/index.html

Vincent-Maladiere · 2024-09-09T14:35:36Z

Feedback applied so far:

Rephrasing the headline (easing -> to ease)
Rephrasing the last bullet point for heteregenous types
Adding / moving code on the feature section
Generate the table report at each build using a function called in conf.py
Showing the 30 randomly sampled contributors + a quick word about the contributor section

GaelVaroquaux · 2024-09-09T14:38:18Z

doc/_static/gap.png

Use an SVG here? Matplotlib saves very nice SVGs (I think that you need to use ", transparent=True" to savefig to have a transparent background, which comes in handy)

The transparent background is challenging to see in darkmode (see below), why do we want SVG? The image is not super big and is displayed in good quality even with a big screen

Co-authored-by: Gael Varoquaux <[email protected]>

GaelVaroquaux · 2024-09-09T14:56:16Z

Can we easily add a vignette saying "And many more" at the end of the contributor list? When clicked it would go to the github contributor list.

Vincent-Maladiere · 2024-09-09T15:02:06Z

Can we easily add a vignette saying "And many more" at the end of the contributor list? When clicked it would go to the github contributor list.

jeromedockes

thanks a lot @Vincent-Maladiere !! I think it highlights the selling points of skrub really well.

I think the blue/orange banner at the top is too tall on narrow displays and ends up pushing the "getting started" button out of the first screen, but that is somewhat orthogonal to the changes done here so it could be addressed in another pr

doc/table_report.py

jeromedockes · 2024-09-09T15:20:22Z

doc/_templates/index.html

+      {% include "demo_table_report_code.html" %}
+    </div>
+    <div class="col-md-7">
+      <p class="click-table-report-hint">Click anywhere on the table!</p>


I don't really have a better suggestion but with "click on the table" people might look only at the table and miss the tabs and the column filter... maybe something like "the displayed report is interactive"?... I can't come up with a better wording and it's not a very big deal

How about moving the text back to the left panel (for better usage of the space), and writing "Try it out: click anywhere ➔"

Ok for me, except for the arrow because the report will be below the text on a small screen and not at its right.

Vincent-Maladiere · 2024-09-09T16:55:21Z

One "graphical" detail: the new homepage is made of horizontal blocks.

It would be very nice to have one out of two with a slightly greyed background. I do realize that this implies removing the "hr" elements and using the background color of the divs instead.

The issue with adding a grey background to some sections is that their margins would remain white (notice how the line breaks don't fill the entire width on big screens).

That is because I can't get rid of the main container {% block docs_main %} defined somewhere in Jinja & Sphinx. This container has set some margins that I can't style.

I suggest adding an issue to try that after this PR because this is quite challenging. WDYT @GaelVaroquaux ?

GaelVaroquaux · 2024-09-09T16:57:39Z

@jeromedockes writes:

I think the blue/orange banner at the top is too tall on narrow displays and ends up pushing the "getting started" button out of the first screen

Indeed, that's a good illustration of why we're always fighting for screen real estate :)

I think that the third bullet point can be made shorter: "Work on heterogenous types (numeric, categorical, dates, text, missing values...)" -> "heterogenous data (numbers, categories, dates, text, missing values...)"

Vincent-Maladiere · 2024-09-11T08:16:03Z

Or this one? https://fontawesome.com/icons/arrow-right?s=solid

jeromedockes · 2024-09-11T08:28:23Z

Or this one? https://fontawesome.com/icons/arrow-right?s=solid

I think Gael's trick was to have an arrow that points towards the south-east so that it's in the right direction whether it is above or on the left of the report. if there isn't one in fontawesome we can just add a small svg file (and it will probably look better, too)

Vincent-Maladiere · 2024-09-11T08:32:58Z

Haha, hacky indeed! Let me try that

Vincent-Maladiere · 2024-09-11T10:27:18Z

I have to say that this last commit creates some weirdness around vertical alignment. I'm struggling to align the h1 and h4 in the band with the text below.

jeromedockes · 2024-09-11T10:44:21Z

I have to say that this last commit creates some weirdness around vertical alignment. I'm struggling to align the h1 and h4 in the band with the text below.

in the custom.css there is a sk-landing-container class that overrides the max-width. in the part you show below the max-width is set by bootstrap's container class and is narrower. as both are centered with auto margins and the top one is wider, they don't line up.

Vincent-Maladiere · 2024-09-11T12:30:44Z

Yes, but more specifically the issue I have is maintaining the gradient band as it is. I can vertically align the h1 and h4 with the text below, but it creates a white margin on the left and right of the band.

Edit: removing sk-landing-container entirely solves the problem

Also, I think putting the button on the right cuts the natural flow of a user landing on the page. It doesn't feel natural to read text on the left and then cross the spread horizontally to see/click the button. I'm -1 for this tradeoff with the vertical scrolling.

GaelVaroquaux · 2024-09-11T13:51:48Z

Side comment: if you want inspiration on a good page (done by professionals with a lot of money) https://spark.apache.org/

It's an awesome tradeoff in terms of information density and vertical scrolling

Vincent-Maladiere · 2024-09-11T14:01:37Z

Side comment: if you want inspiration on a good page (done by professionals with a lot of money) spark.apache.org

They did an amazing job indeed

Vincent-Maladiere · 2024-09-11T14:52:41Z

This is now ready for review!

Side note; Anass from :probabl. looked at the homepage during his spare time and came up with new ideas. I like his draft, I think this is promising. To be continued :)

The sponge "S" logo is very fun

GaelVaroquaux · 2024-09-11T16:02:18Z

I would move the "Our community" text on the side

GaelVaroquaux · 2024-09-11T16:06:16Z

Also: the first line is done with a pair of "md-4" / "md-8" divs. As a consequence, the div where there is the text is much smaller than that where there is the button. I would use "md-6" / "md-6" to have the same size, or "md-8", "md-4" to have a bigger div for the text: it makes reading the text easier

GaelVaroquaux · 2024-09-11T16:07:33Z

How about moving the "Click anywhere on the table ↓" to the side?

Vincent-Maladiere · 2024-09-11T16:38:26Z

I would move the "Our community" text on the side

What do you mean? Isn't it already on the side?

Vincent-Maladiere · 2024-09-11T16:39:39Z

How about moving the "Click anywhere on the table ↓" to the side?

Do you mean on the left side? Below the code?

GaelVaroquaux · 2024-09-11T16:48:27Z

> I would move the "Our community" text on the side What do you mean? Isn't it already on the side?

The whole text in the right panel

> How about moving the "Click anywhere on the table ↓" to the side? Do you mean on the left side? Below the code?

Yes indeed

GaelVaroquaux

This is great. Thanks a lot for all these changes.

Let's merge

jeromedockes · 2024-09-12T11:49:10Z

I like the sponge logo a lot btw :)

GaelVaroquaux · 2024-09-12T12:07:20Z

If we can simplify the sponge enough to have it as a favicon, it could be a good replacement for our current logo.

jeromedockes · 2024-09-12T12:13:09Z

If we can simplify the sponge enough to have it as a favicon

I guess it could be a uniform yellow S without any of the decorations?

GaelVaroquaux · 2024-09-12T12:30:44Z

A uniform S would be without visual identity, IMHO.

Googling a bit shows stylized sponges 🧽 which could be a starting point.

* first version of the new homepage * enhance feature engineering wording * fix footer * split the index.html file into demo html files * remove unused style class * apply some feedbacks * apply feedback * apply jerome feedback on max-width * apply ricardo feedback on hero wording * Update doc/_templates/index.html Co-authored-by: Gael Varoquaux <[email protected]> * add 'and many more' link * generate table report only once * Geal feedback reduce scrolling * fix the vertical alignment issue * justify left community section * use col-md-6 / col-md-6 for the hero * add diag arrow * put community title and text on the right side --------- Co-authored-by: Gael Varoquaux <[email protected]>

This reverts commit 3f06b90.

Vincent-Maladiere added 2 commits September 5, 2024 15:46

first version of the new homepage

33547df

enhance feature engineering wording

122135b

Vincent-Maladiere added 3 commits September 6, 2024 09:44

fix footer

4b18a9b

split the index.html file into demo html files

65ea45e

remove unused style class

466783d

jeromedockes reviewed Sep 6, 2024

View reviewed changes

apply some feedbacks

101065f

jeromedockes reviewed Sep 6, 2024

View reviewed changes

doc/_static/css/custom.css Outdated Show resolved Hide resolved

Vincent-Maladiere added 3 commits September 9, 2024 14:58

apply feedback

8f327e8

apply jerome feedback on max-width

59d3a4b

apply ricardo feedback on hero wording

7987a85

GaelVaroquaux reviewed Sep 9, 2024

View reviewed changes

doc/_templates/index.html Outdated Show resolved Hide resolved

jeromedockes added this to the 0.4.0 milestone Sep 9, 2024

GaelVaroquaux reviewed Sep 9, 2024

View reviewed changes

Update doc/_templates/index.html

6543855

Co-authored-by: Gael Varoquaux <[email protected]>

add 'and many more' link

a39d341

jeromedockes approved these changes Sep 9, 2024

View reviewed changes

generate table report only once

192fa81

Vincent-Maladiere added 2 commits September 11, 2024 11:47

Merge branch 'main' into revamp_homepage

54c305b

Geal feedback reduce scrolling

d889cf7

Vincent-Maladiere added 2 commits September 11, 2024 16:10

fix the vertical alignment issue

e583052

justify left community section

757c758

use col-md-6 / col-md-6 for the hero

1b139f8

Vincent-Maladiere added 2 commits September 12, 2024 10:17

add diag arrow

00be307

put community title and text on the right side

46602ef

GaelVaroquaux approved these changes Sep 12, 2024

View reviewed changes

GaelVaroquaux merged commit e5e4004 into skrub-data:main Sep 12, 2024
22 checks passed

Shree7676 added a commit to Shree7676/skrub that referenced this pull request Sep 12, 2024

Revert "[DOC] Freshen up the homepage (skrub-data#1062)"

b658188

This reverts commit 3f06b90.

[DOC] Freshen up the homepage #1062

[DOC] Freshen up the homepage #1062

Conversation

Vincent-Maladiere commented Sep 5, 2024 • edited Loading

Vincent-Maladiere commented Sep 5, 2024 • edited Loading

Vincent-Maladiere commented Sep 5, 2024 • edited Loading

jeromedockes left a comment

Choose a reason for hiding this comment

Vincent-Maladiere commented Sep 6, 2024 • edited Loading

jeromedockes commented Sep 6, 2024

jeromedockes commented Sep 6, 2024 • edited Loading

jeromedockes commented Sep 6, 2024

GaelVaroquaux commented Sep 9, 2024

Vincent-Maladiere commented Sep 9, 2024

GaelVaroquaux Sep 9, 2024

Choose a reason for hiding this comment

Vincent-Maladiere Sep 9, 2024 • edited Loading

Choose a reason for hiding this comment

GaelVaroquaux commented Sep 9, 2024 • edited Loading

Vincent-Maladiere commented Sep 9, 2024

jeromedockes left a comment

Choose a reason for hiding this comment

jeromedockes Sep 9, 2024

Choose a reason for hiding this comment

GaelVaroquaux Sep 9, 2024

Choose a reason for hiding this comment

Vincent-Maladiere Sep 9, 2024

Choose a reason for hiding this comment

Vincent-Maladiere commented Sep 9, 2024

GaelVaroquaux commented Sep 9, 2024

Vincent-Maladiere commented Sep 11, 2024

jeromedockes commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

jeromedockes commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024 • edited Loading

GaelVaroquaux commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

GaelVaroquaux commented Sep 11, 2024

GaelVaroquaux commented Sep 11, 2024

GaelVaroquaux commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

Vincent-Maladiere commented Sep 11, 2024

GaelVaroquaux commented Sep 11, 2024 via email

GaelVaroquaux left a comment

Choose a reason for hiding this comment

jeromedockes commented Sep 12, 2024

GaelVaroquaux commented Sep 12, 2024

jeromedockes commented Sep 12, 2024

GaelVaroquaux commented Sep 12, 2024

Vincent-Maladiere commented Sep 5, 2024 •

edited

Loading

Vincent-Maladiere commented Sep 5, 2024 •

edited

Loading

Vincent-Maladiere commented Sep 5, 2024 •

edited

Loading

Vincent-Maladiere commented Sep 6, 2024 •

edited

Loading

jeromedockes commented Sep 6, 2024 •

edited

Loading

Vincent-Maladiere Sep 9, 2024 •

edited

Loading

GaelVaroquaux commented Sep 9, 2024 •

edited

Loading

Vincent-Maladiere commented Sep 11, 2024 •

edited

Loading