remove duplicate section descriptions

use javascript to copy section description into main nav, since that requires javascript anyway.
Saver3011 · Oct 30, 2021 · 688c655 · 688c655
1 parent ac68f7f
commit 688c655
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
@@ -174,7 +174,7 @@ a.YIRnav-YIR-link:hover {
   }
 }
 
-.YIR-nav-body {
+.nav .section-description {
   width: var(--timeline-active-text-width);
   height: 0;
   overflow: hidden;
@@ -245,7 +245,7 @@ a.YIRnav-YIR-link:hover {
   line-height: var(--line-height-xxjumbo);
 }
 
-.nav li.active .YIR-nav-body {
+.nav li.active .section-description {
   margin: 0;
   margin-top: var(--feather-grid-xsmall);
   height: var(--nav-body-text-height);

diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -34,49 +34,42 @@
           <li>
             <a href="#welcome">
               <span class="YIR-nav-title">Welcome</span>
-              <p class="YIR-nav-body">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
             </a>
           </li>
 
           <li>
             <a href="#top10">
               <span class="YIR-nav-title">Top 10 repos</span>
-              <p class="YIR-nav-body">These are our top 10 GitHub repositories, ranked by total commit counts.</p>
             </a>
           </li>
 
           <li>
             <a href="#locations">
               <span class="YIR-nav-title">Locations</span>
-              <p class="YIR-nav-body">Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
             </a>
           </li>
 
           <li>
             <a href="#heat">
               <span class="YIR-nav-title">Heat metrics</span>
-              <p class="YIR-nav-body">Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
             </a>
           </li>
 
           <li>
             <a href="#light">
               <span class="YIR-nav-title">Light metrics</span>
-              <p class="YIR-nav-body">Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
             </a>
           </li>
 
           <li>
             <a href="#love">
               <span class="YIR-nav-title">Love metrics</span>
-              <p class="YIR-nav-body">Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
             </a>
           </li>
 
           <li>
             <a href="#follow">
               <span class="YIR-nav-title">@TwitterOSS</span>
-              <p class="YIR-nav-body">Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
             </a>
           </li>
         </ul>
@@ -94,7 +87,7 @@ <h1 class="YIR-subheading" id="type">An overview of the past 12 months of activi
 
         <!-- Only visible in mobile -->
         <div class="mobile-heading" id="YIR-header-mobile-heading">
-          <p>This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
+          <p class="section-description">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
         </div>
       </div>
     </section>
@@ -104,7 +97,7 @@ <h1 class="YIR-subheading" id="type">An overview of the past 12 months of activi
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1>Top 10 repos</h1>
-          <p>These are our top 10 GitHub repositories, ranked by total commit counts.</p>
+          <p class="section-description">These are our top 10 GitHub repositories, ranked by total commit counts.</p>
         </div>
 
         <table id="top-10-repos">
@@ -134,7 +127,7 @@ <h1>Top 10 repos</h1>
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1 class="large-title">Locations</h1>
-          <p>Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
+          <p class="section-description">Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
         </div>
 
         <div class="locations">
@@ -154,7 +147,7 @@ <h1 class="large-title">Locations</h1>
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1>Heat metrics</h1>
-          <p>Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
+          <p class="section-description">Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
         </div>
 
         <div class="metric-wrapper">
@@ -193,7 +186,7 @@ <h1>Heat metrics</h1>
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1>Light metrics</h1>
-          <p>Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
+          <p class="section-description">Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
         </div>
 
         <div class="metric-wrapper">
@@ -235,7 +228,7 @@ <h1>Light metrics</h1>
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1>Love metrics</h1>
-          <p>Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
+          <p class="section-description">Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
         </div>
 
         <div class="metric-wrapper">
@@ -275,7 +268,7 @@ <h1>Love metrics</h1>
         <!-- Only visible in mobile -->
         <div class="mobile-heading">
           <h1>@TwitterOSS</h1>
-          <p>Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
+          <p class="section-description">Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
         </div>
 
         <div class="YIR-tweet-wrapper">

diff --git a/static/js/year-in-review.js b/static/js/year-in-review.js
@@ -46,6 +46,9 @@ if (window.matchMedia("(prefers-reduced-motion: no-preference)").matches) {
   }, {rootMargin: "-50% 0px"})
   document.querySelectorAll('section').forEach(e => {
     observer.observe(e);
+    if (description = e.querySelector('.section-description')) {
+      document.querySelector(`.nav a[href="#${e.id}"]`).appendChild(description)
+    }
   })
 
   // polyfill smooth scrolling if needed