feat: redesign website homepage

website/static/main.js

@@ -10,6 +10,37 @@ var rows = document.querySelectorAll('.table tbody tr.row');
 var tags = document.querySelectorAll('.tag');
 var tbody = document.querySelector('.table tbody');
 
+function initRevealSections() {
+  var sections = document.querySelectorAll('[data-reveal]');
+  if (!sections.length) return;
+
+  if (!('IntersectionObserver' in window)) {
+    sections.forEach(function (section) {
+      section.classList.add('is-visible');
+    });
+    return;
+  }
+
+  var observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (!entry.isIntersecting) return;
+      entry.target.classList.add('is-visible');
+      observer.unobserve(entry.target);
+    });
+  }, {
+    threshold: 0.12,
+    rootMargin: '0px 0px -8% 0px',
+  });
+
+  sections.forEach(function (section, index) {
+    section.classList.add('will-reveal');
+    section.style.transitionDelay = Math.min(index * 70, 180) + 'ms';
+    observer.observe(section);
+  });
+}
+
+initRevealSections();
+
 // Relative time formatting
 function relativeTime(isoStr) {
   var date = new Date(isoStr);
@@ -293,7 +324,7 @@ if (backToTop) {
     }
   });
   backToTop.addEventListener('click', function () {
-    window.scrollTo({ top: 0 });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   });
 }
 

website/templates/base.html

@@ -18,6 +18,12 @@
     <meta property="og:url" content="https://awesome-python.com/" />
     <meta name="twitter:card" content="summary" />
     <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/static/style.css" />
     <script
       async
@@ -38,20 +44,30 @@
     <main id="content">{% block content %}{% endblock %}</main>
 
     <footer class="footer">
-      <span
+      <div class="footer-copy">
-        >Made by
+        Maintained by
-        <a href="https://vinta.ws/" target="_blank" rel="noopener"
+        <a href="https://vinta.ws/" target="_blank" rel="noopener">Vinta</a>
-          >Vinta</a
+        for the Python community.
-        ></span
+      </div>
-      >
+      <div class="footer-links">
-      <span class="footer-sep">/</span>
+        <a
-      <a href="https://github.com/vinta" target="_blank" rel="noopener"
+          href="https://github.com/vinta/awesome-python"
-        >GitHub</a
+          target="_blank"
-      >
+          rel="noopener"
-      <span class="footer-sep">/</span>
+          >Repository</a
-      <a href="https://twitter.com/vinta" target="_blank" rel="noopener"
+        >
-        >Twitter</a
+        <span class="footer-sep">/</span>
-      >
+        <a
+          href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
+          target="_blank"
+          rel="noopener"
+          >Contribute</a
+        >
+        <span class="footer-sep">/</span>
+        <a href="https://github.com/vinta" target="_blank" rel="noopener"
+          >GitHub</a
+        >
+      </div>
     </footer>
 
     <noscript

website/templates/index.html

@@ -1,177 +1,271 @@
 {% extends "base.html" %} {% block content %}
 <header class="hero">
-  <div class="hero-main">
+  <div class="hero-sheen" aria-hidden="true"></div>
-    <div>
+  <div class="hero-noise" aria-hidden="true"></div>
-      <h1>Awesome Python</h1>
+
-      <p class="hero-sub">
+  <div class="hero-shell">
-        {{ subtitle }}<br />Maintained by
+    <div class="hero-topbar">
-        <a href="https://github.com/vinta" target="_blank" rel="noopener"
+      <a href="#content" class="hero-brand-mini">Awesome Python</a>
-          >@vinta</a
+      <div class="hero-topbar-actions">
-        >
-        and
         <a
-          href="https://github.com/JinyangWang27"
+          href="https://github.com/vinta/awesome-python"
+          class="hero-topbar-link"
           target="_blank"
           rel="noopener"
-          >@JinyangWang27</a
+          >Repository</a
-        >.
+        >
-      </p>
+        <a
-      <a
+          href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
-        href="https://github.com/vinta/awesome-python"
+          class="hero-topbar-link hero-topbar-link-strong"
-        class="hero-gh"
+          target="_blank"
-        target="_blank"
+          rel="noopener"
-        rel="noopener"
+          >Submit a Project</a
-        >awesome-python on GitHub &rarr;</a
+        >
-      >
+      </div>
     </div>
-    <a
+
-      href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
+    <div class="hero-grid">
-      class="hero-submit"
+      <div class="hero-copy">
-      target="_blank"
+        <p class="hero-kicker">The field guide to the Python ecosystem</p>
-      rel="noopener"
+        <h1>Awesome Python</h1>
-      >Submit a Project</a
+        <p class="hero-sub">
-    >
+          {{ subtitle }}<br />Maintained by
+          <a href="https://github.com/vinta" target="_blank" rel="noopener"
+            >@vinta</a
+          >
+          and
+          <a
+            href="https://github.com/JinyangWang27"
+            target="_blank"
+            rel="noopener"
+            >@JinyangWang27</a
+          >.
+        </p>
+
+        <div class="hero-actions">
+          <a href="#library-index" class="hero-action hero-action-primary"
+            >Browse the Index</a
+          >
+          <a
+            href="https://github.com/vinta/awesome-python"
+            class="hero-action hero-action-secondary"
+            target="_blank"
+            rel="noopener"
+            >View on GitHub</a
+          >
+        </div>
+
+        <dl class="hero-metrics" aria-label="Site overview">
+          <div>
+            <dt>{{ "{:,}".format(entries | length) }}</dt>
+            <dd>unique projects indexed</dd>
+          </div>
+          <div>
+            <dt>{{ total_categories }}</dt>
+            <dd>categories to search</dd>
+          </div>
+          <div>
+            <dt>{{ groups | length }}</dt>
+            <dd>editorial groupings</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <a href="#library-index" class="hero-scrollcue">Scroll into the index</a>
   </div>
 </header>
 
-<h2 class="sr-only">Search and filter</h2>
+<section class="results-section" id="library-index">
-<div class="controls">
+  <div class="results-intro section-shell" data-reveal>
-  <div class="search-wrap">
+    <div>
-    <svg
+      <p class="section-label">Library index</p>
-      class="search-icon"
+      <h2>One searchable surface for the ecosystem.</h2>
-      width="16"
+    </div>
-      height="16"
+    <p class="results-note">
-      viewBox="0 0 24 24"
+      Use <kbd>/</kbd> to focus search, tap a tag to filter, and open a row for
-      fill="none"
+      descriptions, related projects, and source details.
-      stroke="currentColor"
+    </p>
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-    </svg>
-    <input
-      type="search"
-      class="search"
-      placeholder="Search {{ entries | length }} libraries across {{ total_categories }} categories..."
-      aria-label="Search libraries"
-    />
   </div>
-  <div class="filter-bar">
-    <span>Showing <strong class="filter-value"></strong></span>
-    <button class="filter-clear" aria-label="Clear filter">
-      &times; Clear
-    </button>
-  </div>
-</div>
 
-<h2 class="sr-only">Results</h2>
+  <div class="controls section-shell" data-reveal>
-<div class="table-wrap" tabindex="0" role="region" aria-label="Libraries table">
+    <h2 class="sr-only">Search and filter</h2>
-  <table class="table">
+    <div class="search-wrap">
-    <thead>
+      <svg
-      <tr>
+        class="search-icon"
-        <th class="col-num"><span class="sr-only">#</span></th>
+        width="16"
-        <th class="col-name" data-sort="name">Project Name</th>
+        height="16"
-        <th class="col-stars" data-sort="stars">GitHub Stars</th>
+        viewBox="0 0 24 24"
-        <th class="col-commit" data-sort="commit-time">Last Commit</th>
+        fill="none"
-        <th class="col-cat">Category</th>
+        stroke="currentColor"
-        <th class="col-arrow">
+        stroke-width="2.5"
-          <button class="back-to-top" aria-label="Back to top">&uarr;</button>
+        stroke-linecap="round"
-        </th>
+        stroke-linejoin="round"
-      </tr>
-    </thead>
-    <tbody>
-      {% for entry in entries %}
-      <tr
-        class="row"
-        role="button"
-        data-cats="{{ entry.categories | join('||') }}{% if entry.source_type == 'Built-in' %}||Built-in{% endif %}"
-        data-groups="{{ entry.groups | join('||') }}"
-        tabindex="0"
-        aria-expanded="false"
-        aria-controls="expand-{{ loop.index }}"
       >
-        <td class="col-num">{{ loop.index }}</td>
+        <circle cx="11" cy="11" r="8" />
-        <td class="col-name">
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-          <a href="{{ entry.url }}" target="_blank" rel="noopener"
+      </svg>
-            >{{ entry.name }}</a
+      <input
-          >
+        type="search"
-        </td>
+        class="search"
-        <td class="col-stars">
+        placeholder="Search {{ entries | length }} libraries across {{ total_categories }} categories..."
-          {% if entry.stars is not none %}{{ "{:,}".format(entry.stars) }}{%
+        aria-label="Search libraries"
-          elif entry.source_type %}<span class="source-badge">{{ entry.source_type }}</span>{%
+      />
-          else %}&mdash;{% endif %}
+    </div>
-        </td>
+    <div class="filter-bar" aria-live="polite">
-        <td
+      <span>Filtering for <strong class="filter-value"></strong></span>
-          class="col-commit"
+      <button class="filter-clear" aria-label="Clear filter">
-          {%
+        Clear filter
-          if
+      </button>
-          entry.last_commit_at
+    </div>
-          %}data-commit="{{ entry.last_commit_at }}"
+  </div>
-          {%
-          endif
-          %}
-        >
-          {% if entry.last_commit_at %}<time
-            datetime="{{ entry.last_commit_at }}"
-            >{{ entry.last_commit_at[:10] }}</time
-          >{% else %}&mdash;{% endif %}
-        </td>
-        <td class="col-cat">
-          {% for cat in entry.categories %}
-          <button class="tag" data-type="cat" data-value="{{ cat }}">
-            {{ cat }}
-          </button>
-          {% endfor %}
-          {% if entry.source_type == 'Built-in' %}
-          <button class="tag tag-source" data-type="cat" data-value="Built-in">
-            Built-in
-          </button>
-          {% endif %}
-          <button class="tag tag-group" data-type="group" data-value="{{ entry.groups[0] }}">
-            {{ entry.groups[0] }}
-          </button>
-        </td>
-        <td class="col-arrow"><span class="arrow">&rarr;</span></td>
-      </tr>
-      <tr class="expand-row" id="expand-{{ loop.index }}">
-        <td></td>
-        <td colspan="4">
-          <div class="expand-content">
-            {% if entry.description %}
-            <div class="expand-desc">{{ entry.description | safe }}</div>
-            {% endif %} {% if entry.also_see %}
-            <div class="expand-also-see">
-              Also see: {% for see in entry.also_see %}<a
-                href="{{ see.url }}"
-                target="_blank"
-                rel="noopener"
-                >{{ see.name }}</a
-              >{% if not loop.last %}, {% endif %}{% endfor %}
-            </div>
-            {% endif %}
-            <div class="expand-meta">
-              {% if entry.owner %}<a
-                href="https://github.com/{{ entry.owner }}"
-                target="_blank"
-                rel="noopener"
-                >{{ entry.owner }}</a
-              ><span class="expand-sep">/</span>{% endif %}<a
-                href="{{ entry.url }}"
-                target="_blank"
-                rel="noopener"
-                >{{ entry.url | replace("https://", "") }}</a
-              >
-            </div>
-          </div>
-        </td>
-        <td></td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
 
-<div class="no-results" hidden>No libraries match your search.</div>
+  <h2 class="sr-only">Results</h2>
+  <div
+    class="table-wrap"
+    tabindex="0"
+    role="region"
+    aria-label="Libraries table"
+  >
+    <table class="table">
+      <thead>
+        <tr>
+          <th class="col-num"><span class="sr-only">#</span></th>
+          <th class="col-name" data-sort="name">Project Name</th>
+          <th class="col-stars" data-sort="stars">GitHub Stars</th>
+          <th class="col-commit" data-sort="commit-time">Last Commit</th>
+          <th class="col-cat">Category</th>
+          <th class="col-arrow">
+            <button class="back-to-top" aria-label="Back to top">Top</button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for entry in entries %}
+        <tr
+          class="row"
+          role="button"
+          data-cats="{{ entry.categories | join('||') }}{% if entry.source_type == 'Built-in' %}||Built-in{% endif %}"
+          data-groups="{{ entry.groups | join('||') }}"
+          tabindex="0"
+          aria-expanded="false"
+          aria-controls="expand-{{ loop.index }}"
+        >
+          <td class="col-num">{{ loop.index }}</td>
+          <td class="col-name">
+            <a href="{{ entry.url }}" target="_blank" rel="noopener"
+              >{{ entry.name }}</a
+            >
+          </td>
+          <td class="col-stars">
+            {% if entry.stars is not none %}{{ "{:,}".format(entry.stars) }}{%
+            elif entry.source_type %}<span class="source-badge"
+              >{{ entry.source_type }}</span
+            >{% else %}&mdash;{% endif %}
+          </td>
+          <td
+            class="col-commit"
+            {%
+            if
+            entry.last_commit_at
+            %}data-commit="{{ entry.last_commit_at }}"
+            {%
+            endif
+            %}
+          >
+            {% if entry.last_commit_at %}<time
+              datetime="{{ entry.last_commit_at }}"
+              >{{ entry.last_commit_at[:10] }}</time
+            >{% else %}&mdash;{% endif %}
+          </td>
+          <td class="col-cat">
+            {% for cat in entry.categories %}
+            <button class="tag" data-type="cat" data-value="{{ cat }}">
+              {{ cat }}
+            </button>
+            {% endfor %} {% if entry.source_type == 'Built-in' %}
+            <button
+              class="tag tag-source"
+              data-type="cat"
+              data-value="Built-in"
+            >
+              Built-in
+            </button>
+            {% endif %}
+            <button
+              class="tag tag-group"
+              data-type="group"
+              data-value="{{ entry.groups[0] }}"
+            >
+              {{ entry.groups[0] }}
+            </button>
+          </td>
+          <td class="col-arrow"><span class="arrow">&rarr;</span></td>
+        </tr>
+        <tr class="expand-row" id="expand-{{ loop.index }}">
+          <td></td>
+          <td colspan="4">
+            <div class="expand-content">
+              {% if entry.description %}
+              <div class="expand-desc">{{ entry.description | safe }}</div>
+              {% endif %} {% if entry.also_see %}
+              <div class="expand-also-see">
+                Also see: {% for see in entry.also_see %}<a
+                  href="{{ see.url }}"
+                  target="_blank"
+                  rel="noopener"
+                  >{{ see.name }}</a
+                >{% if not loop.last %}, {% endif %}{% endfor %}
+              </div>
+              {% endif %}
+              <div class="expand-meta">
+                {% if entry.owner %}<a
+                  href="https://github.com/{{ entry.owner }}"
+                  target="_blank"
+                  rel="noopener"
+                  >{{ entry.owner }}</a
+                ><span class="expand-sep">/</span>{% endif %}<a
+                  href="{{ entry.url }}"
+                  target="_blank"
+                  rel="noopener"
+                  >{{ entry.url | replace("https://", "") }}</a
+                >
+              </div>
+            </div>
+          </td>
+          <td></td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+
+  <div class="no-results" hidden>
+    No libraries match your current search or filter.
+  </div>
+</section>
+
+<section class="final-cta section-shell" data-reveal>
+  <p class="section-label">Keep it sharp</p>
+  <h2>Know a project that belongs in the canon?</h2>
+  <p>
+    Submit it with enough context to make the list more useful, not just longer.
+  </p>
+  <div class="final-cta-actions">
+    <a
+      href="https://github.com/vinta/awesome-python/blob/master/CONTRIBUTING.md"
+      class="hero-action hero-action-primary"
+      target="_blank"
+      rel="noopener"
+      >Read the contribution guide</a
+    >
+    <a
+      href="https://github.com/vinta/awesome-python"
+      class="hero-action hero-action-secondary"
+      target="_blank"
+      rel="noopener"
+      >Star the repository</a
+    >
+  </div>
+</section>
 {% endblock %}