Repository: pandas-dev/pandas
Pull request: WEB: Restructuring pages and navigation, styling and new footer
xref #28519
closes #28520

You can see the result rendered in: https://datapythonista.github.io/pandas-web/ (the new logo is not in the PR).

Been discussing with NumPy the navigation, and what is proposed here is with minimal differences agreed with them. See https://github.com/numpy/numpy.org/issues/43

I don't touch the home page here, I think we need to remove almost everything we've got so far (based on the current), and move more in the direction of Dask or Jupyter. Discussions about it better in #28168 than here.

Problem statement:
WEB: Content for the footer
What do we want in the new website footer? Will be visible in all the pages (including the documentation I guess)?

Ideas:
- Copyright note
- NumFOCUS note (see Dask website)
- Social media links (GitHub and Twitter I think)
- Back to top link
- Note about sponsors (like the providers of hosting and the design, see Django website)
- Project license
- Trademark note (see Spark website)
- Terms and conditions, privacy note (see Tensorflow page)
- Note link to donate
- ...

Hints from issue discussion:

Commit message: Updating links to install

Patch to review:
diff --git a/web/pandas/_templates/layout.html b/web/pandas/_templates/layout.html
index 253318182f30c..fe3e4d1245d93 100644
--- a/web/pandas/_templates/layout.html
+++ b/web/pandas/_templates/layout.html
@@ -20,41 +20,44 @@
             <link rel="stylesheet"
                   href="{{ base_url }}{{ stylesheet }}">
         {% endfor %}
+        <script src="https://kit.fontawesome.com/79e5369384.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
             <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
+                <div class="container">
+                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
 
-                {% if static.logo %}<a class="navbar-brand" href="{{ base_url }}/"><img alt="" src="{{ base_url }}{{ static.logo }}"/></a>{% endif %}
+                    {% if static.logo %}<a class="navbar-brand" href="{{ base_url }}/"><img alt="" src="{{ base_url }}{{ static.logo }}"/></a>{% endif %}
 
-                <div class="collapse navbar-collapse" id="nav-content">   
-                    <ul class="navbar-nav">
-                        {% for item in navbar %}
-                            {% if not item.has_subitems %}
-                                <li class="nav-item">
-                                    <a class="nav-link" href="{% if not item.target.startswith("http") %}{{ base_url }}{% endif %}{{ item.target }}">{{ item.name }}</a>
-                                </li>
-                            {% else %}
-                                <li class="nav-item dropdown">
-                                    <a class="nav-link dropdown-toggle"
-                                       data-toggle="dropdown"
-                                       id="{{ item.slug }}"
-                                       href="#"
-                                       role="button"
-                                       aria-haspopup="true"
-                                       aria-expanded="false">{{ item.name }}</a>
-                                    <div class="dropdown-menu" aria-labelledby="{{ item.slug }}">
-                                    {% for subitem in item.target %}
-                                        <a class="dropdown-item" href="{% if not subitem.target.startswith("http") %}{{ base_url }}{% endif %}{{ subitem.target }}">{{ subitem.name }}</a>
-                                    {% endfor %}
-                                    </div>
-                                </li>
-                            {% endif %}
-                        {% endfor %}
-                    </ul>
+                    <div class="collapse navbar-collapse" id="nav-content">   
+                        <ul class="navbar-nav ml-auto">
+                            {% for item in navbar %}
+                                {% if not item.has_subitems %}
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="{% if not item.target.startswith("http") %}{{ base_url }}{% endif %}{{ item.target }}">{{ item.name }}</a>
+                                    </li>
+                                {% else %}
+                                    <li class="nav-item dropdown">
+                                        <a class="nav-link dropdown-toggle"
+                                           data-toggle="dropdown"
+                                           id="{{ item.slug }}"
+                                           href="#"
+                                           role="button"
+                                           aria-haspopup="true"
+                                           aria-expanded="false">{{ item.name }}</a>
+                                        <div class="dropdown-menu" aria-labelledby="{{ item.slug }}">
+                                        {% for subitem in item.target %}
+                                            <a class="dropdown-item" href="{% if not subitem.target.startswith("http") %}{{ base_url }}{% endif %}{{ subitem.target }}">{{ subitem.name }}</a>
+                                        {% endfor %}
+                                        </div>
+                                    </li>
+                                {% endif %}
+                            {% endfor %}
+                        </ul>
+                    </div>
                 </div>
             </nav>
         </header>
@@ -64,11 +67,30 @@
             </div>
         </main>
         <footer class="container pt-4 pt-md-5 border-top">
-            <p class="float-right">
-                <a href="#">Back to top</a>
-            </p>
+            <ul class="list-inline social-buttons float-right">
+                <li class="list-inline-item">
+                    <a href="https://twitter.com/pandas_dev/">
+                        <i class="fab fa-twitter"></i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="https://github.com/pandas-dev/pandas/">
+                        <i class="fab fa-github"></i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="https://stackoverflow.com/questions/tagged/pandas">
+                        <i class="fab fa-stack-overflow"></i>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="https://pandas.discourse.group">
+                        <i class="fab fa-discourse"></i>
+                    </a>
+                </li>
+            </ul>
             <p>
-                © 2009 - 2019, pandas team
+                pandas is a fiscally sponsored project of <a href="https://numfocus.org">NumFOCUS</a>
             </p>
         </footer>
                 
diff --git a/web/pandas/community/about.md b/web/pandas/about/about.md
similarity index 100%
rename from web/pandas/community/about.md
rename to web/pandas/about/about.md
diff --git a/web/pandas/community/citing.md b/web/pandas/about/citing.md
similarity index 98%
rename from web/pandas/community/citing.md
rename to web/pandas/about/citing.md
index 6bad948bb3736..77b79c41aa4d1 100644
--- a/web/pandas/community/citing.md
+++ b/web/pandas/about/citing.md
@@ -1,6 +1,6 @@
-# Citing pandas
+# Citing and logo
 
-## Citing
+## Citing pandas
 
 If you use _pandas_ for a scientific publication, we would appreciate citations to one of the following papers:
 
diff --git a/web/pandas/community/roadmap.md b/web/pandas/about/roadmap.md
similarity index 100%
rename from web/pandas/community/roadmap.md
rename to web/pandas/about/roadmap.md
diff --git a/web/pandas/about/sponsors.md b/web/pandas/about/sponsors.md
new file mode 100644
index 0000000000000..352acf01e9efe
--- /dev/null
+++ b/web/pandas/about/sponsors.md
@@ -0,0 +1,33 @@
+# Sponsors
+
+## NumFOCUS
+
+![](https://numfocus.org/wp-content/uploads/2018/01/optNumFocus_LRG.png)
+
+_pandas_ is a Sponsored Project of [NumFOCUS](https://numfocus.org/), a 501(c)(3) nonprofit charity in the United States.
+NumFOCUS provides _pandas_ with fiscal, legal, and administrative support to help ensure the
+health and sustainability of the project. Visit numfocus.org for more information.
+
+Donations to _pandas_ are managed by NumFOCUS. For donors in the United States, your gift is tax-deductible
+to the extent provided by law. As with any donation, you should consult with your tax adviser about your particular tax situation.
+
+## Institutional partners
+
+<ul>
+    {% for company in partners.active if company.employs %}
+        <li><a href="{{ company.url }}">{{ company.name }}</a> ({{ company.employs }})</li>
+    {% endfor %}
+</ul>
+
+## In-kind sponsors
+
+- [OVH](https://us.ovhcloud.com/): Hosting
+- [Indeed](https://opensource.indeedeng.io/): Logo and website design
+
+## Past institutional partners
+
+<ul>
+    {% for company in partners.past %}
+        <li><a href="{{ company.url }}">{{ company.name }}</a></li>
+    {% endfor %}
+</ul>
diff --git a/web/pandas/community/team.md b/web/pandas/about/team.md
similarity index 63%
rename from web/pandas/community/team.md
rename to web/pandas/about/team.md
index c0a15081e1fa8..41da3a0e82bdb 100644
--- a/web/pandas/community/team.md
+++ b/web/pandas/about/team.md
@@ -36,25 +36,12 @@ If you want to support pandas development, you can find information in the [dona
     {% endfor %}
 </div>
 
-## BDFL
+## Governance
 
 Wes McKinney is the Benevolent Dictator for Life (BDFL).
 
-## Governance
-
 The project governance is available in the [project governance documents](https://github.com/pandas-dev/pandas-governance).
 
-## NumFOCUS
-
-![](https://numfocus.org/wp-content/uploads/2018/01/optNumFocus_LRG.png)
-
-_pandas_ is a Sponsored Project of [NumFOCUS](https://numfocus.org/), a 501(c)(3) nonprofit charity in the United States.
-NumFOCUS provides _pandas_ with fiscal, legal, and administrative support to help ensure the
-health and sustainability of the project. Visit numfocus.org for more information.
-
-Donations to _pandas_ are managed by NumFOCUS. For donors in the United States, your gift is tax-deductible
-to the extent provided by law. As with any donation, you should consult with your tax adviser about your particular tax situation.
-
 ## Code of conduct committee
 
 <ul>
@@ -71,19 +58,6 @@ to the extent provided by law. As with any donation, you should consult with you
     {% endfor %}
 </ul>
 
-## Institutional partners
-
-<ul>
-    {% for company in partners.active if company.employs %}
-        <li><a href="{{ company.url }}">{{ company.name }}</a> ({{ company.employs }})</li>
-    {% endfor %}
-</ul>
-
-In-kind sponsors
-
-- [Indeed](https://opensource.indeedeng.io/): Logo and website design
-- Can we find a donor for the hosting (website, benchmarks,...?)
-
 ## Emeritus maintainers
 
 <ul>
@@ -91,11 +65,3 @@ In-kind sponsors
         <li>{{ person }}</li>
     {% endfor %}
 </ul>
-
-## Past institutional partners
-
-<ul>
-    {% for company in partners.past %}
-        <li><a href="{{ company.url }}">{{ company.name }}</a></li>
-    {% endfor %}
-</ul>
diff --git a/web/pandas/blog.html b/web/pandas/community/blog.html
similarity index 100%
rename from web/pandas/blog.html
rename to web/pandas/community/blog.html
diff --git a/web/pandas/community/coc.md b/web/pandas/community/coc.md
index 2841349fdb556..de0e8120f7eee 100644
--- a/web/pandas/community/coc.md
+++ b/web/pandas/community/coc.md
@@ -1,4 +1,4 @@
-# Contributor Code of Conduct
+# Code of conduct
 
 As contributors and maintainers of this project, and in the interest of
 fostering an open and welcoming community, we pledge to respect all people who
diff --git a/web/pandas/community/ecosystem.md b/web/pandas/community/ecosystem.md
index af27c31b52d50..cf242e86f879f 100644
--- a/web/pandas/community/ecosystem.md
+++ b/web/pandas/community/ecosystem.md
@@ -1,4 +1,4 @@
-# Pandas ecosystem
+# Ecosystem
 
 Increasingly, packages are being built on top of pandas to address
 specific needs in data preparation, analysis and visualization. This is
diff --git a/web/pandas/config.yml b/web/pandas/config.yml
index c7c4b77e309f7..e98dfcd01b72d 100644
--- a/web/pandas/config.yml
+++ b/web/pandas/config.yml
@@ -4,12 +4,11 @@ main:
   ignore:
   - _templates/layout.html
   - config.yml
-  - blog.html  # blog will be added at a later stage
   - try.md  # the binder page will be added later
   github_repo_url: pandas-dev/pandas
   context_preprocessors:
   - pandas_web.Preprocessors.navbar_add_info
-  # - pandas_web.Preprocessors.blog_add_posts
+  - pandas_web.Preprocessors.blog_add_posts
   - pandas_web.Preprocessors.maintainers_add_info
   - pandas_web.Preprocessors.home_add_releases
   markdown_extensions:
@@ -17,46 +16,48 @@ main:
   - tables
   - fenced_code
 static:
-  logo: # path to the logo when it's in the repo
+  logo: # /static/img/pandas.svg
   css:
   - /static/css/pandas.css
 navbar:
-  - name: "Install"
-    target: /install.html
+  - name: "About us"
+    target:
+    - name: "About pandas"
+      target: /about/about.html
+    - name: "Project roadmap"
+      target: /about/roadmap.html
+    - name: "Team"
+      target: /about/team.html
+    - name: "Sponsors"
+      target: /about/sponsors.html
+    - name: "Citing and logo"
+      target: /about/citing.html
+  - name: "Getting started"
+    target: /getting_started.html
   - name: "Documentation"
     target:
-    - name: "Getting started"
-      target: /docs/getting_started/index.html
     - name: "User guide"
       target: /docs/user_guide/index.html
     - name: "API reference"
       target: /docs/reference/index.html
-    - name: "Contributing to pandas"
-      target: /docs/development/index.html
     - name: "Release notes"
       target: /docs/whatsnew/index.html
+    - name: "Older versions"
+      target: https://pandas.pydata.org/pandas-docs/version/
   - name: "Community"
     target:
-    - name: "About pandas"
-      target: /community/about.html
-    - name: "Project roadmap"
-      target: /community/roadmap.html
-    - name: "Ecosystem"
-      target: /community/ecosystem.html
+    - name: "Blog"
+      target: /community/blog.html
     - name: "Ask a question (StackOverflow)"
       target: https://stackoverflow.com/questions/tagged/pandas
-    - name: "Discuss (mailing list)"
-      target: https://groups.google.com/forum/#!forum/pydata
-    - name: "Team"
-      target: /community/team.html
-    - name: "Code of Conduct"
+    - name: "Discuss"
+      target: https://pandas.discourse.group
+    - name: "Code of conduct"
       target: /community/coc.html
-    - name: "Citing pandas"
-      target: /community/citing.html
-  # - name: "Blog"
-  #  target: /blog.html
-  - name: "Donate"
-    target: /donate.html
+    - name: "Ecosystem"
+      target: /community/ecosystem.html
+  - name: "Contribute"
+    target: /contribute.html
 blog:
   num_posts: 8
   feed:
diff --git a/web/pandas/contribute.md b/web/pandas/contribute.md
new file mode 100644
index 0000000000000..6d8fb9e224fe1
--- /dev/null
+++ b/web/pandas/contribute.md
@@ -0,0 +1,12 @@
+# Contribute to pandas
+
+_pandas_ is and always will be **free**. To make de development sustainable, we need _pandas_ users, corporate
+or individual, to support the development by providing their time and money.
+
+You can find more information about current developers in the [team page](about/team.html),
+and about current sponsors in the [sponsors page](about/sponsors.html).
+Financial contributions will mainly be used to advance in the [pandas roadmap](about/roadmap.html).
+
+- If your **company or organization** is interested in helping make pandas better, please contact us at [info@numfocus.org](mailto:info@numfocus.org)
+- If you want to contribute to _pandas_ with your **time**, please visit the [contributing page]({{ base_url }}/docs/development/index.html)
+- If you want to support _pandas_ with a **donation**, please use the [donations page](donate.html).
diff --git a/web/pandas/donate.md b/web/pandas/donate.md
index 5f5b07fb8763c..69db7e4648e77 100644
--- a/web/pandas/donate.md
+++ b/web/pandas/donate.md
@@ -1,16 +1,5 @@
 # Donate to pandas
 
-_pandas_ is and always will be **free**. To make de development sustainable, we need _pandas_ users, corporate
-or individual, to support the development by providing their time and money.
-
-You can find more information about current developers and supporters in the [team page](community/team.html).
-Financial contributions will mainly be used to advance in the [pandas roadmap](community/roadmap.html).
-
-- If your **company or organization** is interested in helping make pandas better, please contact us at [info@numfocus.org](mailto:info@numfocus.org)
-- If you want to contribute to _pandas_ with your **time**, please visit the [contributing page]({{ base_url }}/docs/development/index.html)
-- If you want to support _pandas_ with a **donation**, please use the form below:
-
-
 <div id="salsalabs-donate-container">
 </div>
 <script type="text/javascript"
diff --git a/web/pandas/install.md b/web/pandas/getting_started.md
similarity index 62%
rename from web/pandas/install.md
rename to web/pandas/getting_started.md
index 84721b3d1d9a4..99a7a9f4b2d60 100644
--- a/web/pandas/install.md
+++ b/web/pandas/getting_started.md
@@ -1,4 +1,6 @@
-# Installation instructions
+# Getting started
+
+## Installation instructions
 
 The next steps provides the easiest and recommended way to set up your
 environment to use pandas. Other installation options can be found in
@@ -21,8 +23,29 @@ the [advanced installation page]({{ base_url}}/docs/install.html).
 
     <img class="img-fluid" alt="" src="{{ base_url }}/static/img/install/pandas_import_and_version.png"/>
 
-5. Now you are ready to use pandas you can write your code in the next cells.
+5. Now you are ready to use pandas, and you can write your code in the next cells.
 
+## Tutorials
 
 You can learn more about pandas in the [tutorials](#), and more about JupyterLab
 in the [JupyterLab documentation](https://jupyterlab.readthedocs.io/en/stable/user/interface.html).
+
+## Books
+
+The book we recommend to learn pandas is [Python for Data Analysis](https://amzn.to/2KI5JJw),
+by [Wes McKinney](https://wesmckinney.com/), creator of pandas.
+
+<a href="https://amzn.to/2KI5JJw">
+    <img alt="Python for Data Analysis" src="{{ base_url }}/static/img/pydata_book.gif"/>
+</a>
+
+## Videos
+
+<iframe width="560" height="315" frameborder="0"
+src="https://www.youtube.com/embed/_T8LGqJtuGc"
+allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+allowfullscreen></iframe>
+
+## Cheat sheet
+
+[pandas cheat sheet](https://pandas.pydata.org/Pandas_Cheat_Sheet.pdf)
diff --git a/web/pandas/index.html b/web/pandas/index.html
index 9f1a0e9a64174..df6e5ab9a330b 100644
--- a/web/pandas/index.html
+++ b/web/pandas/index.html
@@ -10,7 +10,7 @@ <h1>pandas</h1>
                         built on top of the <a href="http://www.python.org">Python</a> programming language.
                     </p>
                     <p>
-                        <a class="btn btn-primary" href="{{ base_url }}/install.html">Install pandas now!</a>
+                        <a class="btn btn-primary" href="{{ base_url }}/getting_started.html">Install pandas now!</a>
                     </p>
                 </section>
 
@@ -19,7 +19,7 @@ <h1>pandas</h1>
                         <h5>Getting started</h5>
                         <ul>
                             <!-- <li><a href="{{ base_url }}/try.html">Try pandas online</a></li> -->
-                            <li><a href="{{ base_url }}/install.html">Install pandas</a></li>
+                            <li><a href="{{ base_url }}/getting_started.html">Install pandas</a></li>
                             <li><a href="{{ base_url }}/docs/getting_started/index.html">Getting started</a></li>
                         </ul>
                     </div>
diff --git a/web/pandas/static/css/pandas.css b/web/pandas/static/css/pandas.css
index 5911de96b5fa9..0a227cf8d96c9 100644
--- a/web/pandas/static/css/pandas.css
+++ b/web/pandas/static/css/pandas.css
@@ -1,16 +1,54 @@
 body {
     padding-top: 5em;
-    padding-bottom: 3em;
+    color: #444;
+}
+h1 {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: #130654;
+}
+h2 {
+    font-size: 1.45rem;
+    font-weight: 700;
+    color: black;
+}
+h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: black;
+}
+a {
+    color: #130654;
 }
 code {
     white-space: pre;
 }
+.fab {
+    font-size: 1.2rem;
+    color: #666;
+}
+.fab:hover {
+    color: #130654;
+}
 a.navbar-brand img {
     max-height: 2em;
 }
 div.card {
     margin: 0 0 .2em .2em !important;
 }
+div.card .card-title {
+    font-weight: 500;
+    color: #130654;
+}
 .book {
     padding: 0 20%;
 }
+.bg-dark {
+    background-color: #130654 !important;
+}
+.navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, .9);
+}
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: white;
+}


Code review comments:
diff_hunk: @@ -4,59 +4,60 @@ main:
   ignore:
   - _templates/layout.html
   - config.yml
-  - blog.html  # blog will be added at a later stage
   - try.md  # the binder page will be added later
   github_repo_url: pandas-dev/pandas
   context_preprocessors:
   - pandas_web.Preprocessors.navbar_add_info
-  # - pandas_web.Preprocessors.blog_add_posts
+  - pandas_web.Preprocessors.blog_add_posts
   - pandas_web.Preprocessors.maintainers_add_info
   - pandas_web.Preprocessors.home_add_releases
   markdown_extensions:
   - toc
   - tables
   - fenced_code
 static:
-  logo: # path to the logo when it's in the repo
+  logo: # /static/img/pandas.svg
   css:
   - /static/css/pandas.css
 navbar:
-  - name: "Install"
-    target: /install.html
+  - name: "About us"
+    target:
+    - name: "About pandas"
+      target: /about/about.html
path: web/pandas/config.yml
text: @user1:
Small nit: we could rename about/about.md to about/index.md? (the url would be a bit nicer I think)