Improve various page metadata

nickswalker · nickswalker · commit 10cddcda2208 · 2025-01-26T18:44:59.000-08:00
Add more detail to description tags for routes
Canonicalize various internal links
Fix broken internal links in ragnar app
diff --git a/_includes/schedule_table.html b/_includes/schedule_table.html
@@ -45,7 +45,7 @@
         {% endif %}
         <td class="{{part-cancelled-class}}">
             {% if plan.route_id %}
-            <a href="{{site.baseurl}}/routes/{{ plan.route_id }}" title="{{ plan.route_id }}">{{route.name}}</a>
+            <a href="{{site.baseurl}}/routes/{{ plan.route_id }}/" title="{{ plan.route_id }}">{{route.name}}</a>
             {% elsif route.map %}
             <a target="_blank" href="{{ route.map }}">{{route.name}}</a>
             {% else %}
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -3,7 +3,22 @@
 <head>
   <meta charset="UTF-8">
   {% capture title %}{% if page.title %}{{ page.title | escape }} || {{ site.title | escape}}{% else %}{{ site.title | escape }}{% endif %}{% endcapture %}
-  {% capture description %}{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endcapture %}
+  {% capture type %}{% if page.type == "OB" %}out-and-back{% elsif page.type == "Loop" %}loop{% elsif page.type == "P2P" %}point-to-point{% endif %}{% endcapture %}
+  {% if page.distance_mi  %}
+    {% if page.start_neighborhood == page.end_neighborhood %}
+      {% if page.start_neighborhood == 'non-Seattle' %}
+        {% capture description %}{{ page.distance_mi }} mile {{type}} running/walking route with {{page.ascent_m}}m of elevation gain{% endcapture %}
+      {% elsif page.type == "OB" or page.type == "P2P" %}
+        {% capture description %}{{ page.distance_mi }} mile {{type}} running/walking route visiting {% for neighborhood in page.neighborhoods limit:3 %}{{neighborhood}}{% unless forloop.last%}, {%endunless%}{%endfor%}.{% endcapture %}
+      {% else %}
+        {% capture description %}{{ page.distance_mi }} mile {{type}} running/walking route near {{page.start_neighborhood }}{% endcapture %}
+      {% endif %}
+    {% else %}
+      {% capture description %}{{ page.distance_mi }} mile {{type}} running/walking route from {{page.start_neighborhood}} to {{page.end_neighborhood}} via {% for neighborhood in page.neighborhoods limit:3 %}{{neighborhood}}{% unless forloop.last%}, {%endunless%}{%endfor%}.{% endcapture %}
+    {% endif %}
+  {% else %}
+    {% capture description %}{{ page.excerpt | default: page.description | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endcapture %}
+  {% endif %}
   {% capture url %}{{ page.url | absolute_url }}{% endcapture %}
   <title>{{ title }}</title>
   <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
@@ -54,43 +69,43 @@
 <body>
 
 <header class="container">
-  <a href="/" class="text-body">
-    <img src='{{ site.baseurl }}/img/rcc-logo.png' width='150' alt='RCC Logo' class="float-end">
-    <h1>Race Condition Running</h1>
+  <a href="/" class="text-body d-flex flex-wrap align-content-end justify-content-between">
+    <h2 class="align-self-center">Race Condition Running</h2>
+    <img src='{{ site.baseurl }}/img/rcc-logo.png' width='150' alt='RCC Logo'>
   </a>
 </header>
 
 <nav class="navbar navbar-expand-sm mb-4 container" role="navigation">
   <div class="container">
     <ul class="navbar-nav justify-content-between">
-      <li class="nav-item"><a href="{{ site.baseurl }}/"{% if page.url == "/" %} class="active"{% endif %}>Schedule</a></li>
-      <li class="nav-item"><a href="{{ site.baseurl }}/routes/"{% if page.url == "/routes/" %} class="active"{% endif %}>Routes</a></li>
-      <li class="nav-item"><a href="{{ site.baseurl }}/brunch-reviews/"{% if page.url == "/brunch-reviews/" %} class="active"{% endif %}>Brunch Reviews</a></li>
+      <li class="nav-item"><a href="{% link index.html %}"{% if page.url == "/" %} class="active"{% endif %}>Schedule</a></li>
+      <li class="nav-item"><a href="{% link pages/routes.html %}"{% if page.url == "/routes/" %} class="active"{% endif %}>Routes</a></li>
+      <li class="nav-item"><a href="{% link pages/brunch-reviews.html %}"{% if page.url == "/brunch-reviews/" %} class="active"{% endif %}>Brunch Reviews</a></li>
       <li class="nav-item dropdown">
-        <a href="{{ site.baseurl }}/events" id="eventsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Events</a>
+        <a href="{% link pages/events.html %}" id="eventsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Events</a>
         <ul class="dropdown-menu" aria-labelledby="eventsDropdown">
           <li>
-            <a class="dropdown-item text-start" href="{{ site.baseurl }}/light-rail-relay-24/">Light Rail Relay '24</a>
+            <a class="dropdown-item text-start" href="{% link pages/light-rail-relay-24.html %}">Light Rail Relay '24</a>
             <ul class="list-inline d-flex gap-2 dropdown-item">
-              <li><a class="link-secondary" href="{{ site.baseurl }}/light-rail-relay-23/">23</a></li>
-              <li><a class="link-secondary" href="{{ site.baseurl }}/light-rail-relay-22/">22</a></li>
-              <li><a class="link-secondary" href="{{ site.baseurl }}/light-rail-relay-21/">21</a></li>
+              <li><a class="link-secondary" href="{% link pages/light-rail-relay-23.html %}">23</a></li>
+              <li><a class="link-secondary" href="{% link pages/light-rail-relay-22.html %}">22</a></li>
+              <li><a class="link-secondary" href="{% link pages/light-rail-relay-21.html %}">21</a></li>
             </ul>
           </li>
 
           <li>
-            <a class="dropdown-item text-start" href="{{ site.baseurl }}/drumheller-marathon-25/">Drumheller Marathon '25</a>
+            <a class="dropdown-item text-start" href="{% link pages/drumheller-marathon-25.html %}">Drumheller Marathon '25</a>
             <ul class="list-inline d-flex gap-2 dropdown-item">
-              <li><a class="link-secondary" href="{{ site.baseurl }}/drumheller-marathon-24/">24</a></li>
-              <li><a class="link-secondary" href="{{ site.baseurl }}/drumheller-half-23/">23</a></li>
-              <li><a class="link-secondary" href="{{ site.baseurl }}/drumheller-half-22/">22</a></li>
+              <li><a class="link-secondary" href="{% link pages/drumheller-marathon-24.html %}">24</a></li>
+              <li><a class="link-secondary" href="{% link pages/drumheller-half-23.html %}">23</a></li>
+              <li><a class="link-secondary" href="{% link pages/drumheller-half-22.html %}">22</a></li>
             </ul>
           </li>
 
           <li><a class="dropdown-item text-start {% if page.url == "{{ site.baseurl }}/quarantine-relay/" %} active{% endif %}" href="{{ site.baseurl }}/quarantine-relay/">Quarantine Relay</a></li>
         </ul>
       </li>
-      <li class="nav-item"><a href="{{ site.baseurl }}/lore/"{% if page.url == "/lore/" %} class="active"{% endif %}>Lore</a></li>
+      <li class="nav-item"><a href="{% link pages/lore.html %}"{% if page.url == "/lore/" %} class="active"{% endif %}>Lore</a></li>
     </ul>
   </div>
 </nav>
diff --git a/_layouts/brunch-review.html b/_layouts/brunch-review.html
@@ -6,11 +6,11 @@
 {% include brunch_review_card.html reviews=sorted_brunch_reviews %}
 
 <article class="brunch-review" itemscope itemtype="https://schema.org/BlogPosting">
-  <h2 itemprop="headline" class="mb-0">{{ page.restaurant }}</h2>
-  <h5 class="text-secondary">  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date_to_long_string }}</time>
-  </h5>
+  <h1 itemprop="headline" class="mb-0 h2">{{ page.restaurant }}</h1>
+  <h2 class="text-secondary h5">  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date_to_long_string }}</time>
+  </h2>
   {% if page.author %}
-  <h6 class="text-secondary">By <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span></h6>
+  <h3 class="text-secondary h6">By <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span></h3>
   {% endif %}
 
   <div class="post-content" itemprop="articleBody">
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,5 +2,6 @@
 layout: base
 ---
 <div class="container">
+  {% if page.add_h1 %}<h1 class="visually-hidden">{{ page.title }}</h1>{% endif %}
   {{ content }}
 </div>
diff --git a/_layouts/route.html b/_layouts/route.html
@@ -4,10 +4,10 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.css" integrity="sha256-V2sIX92Uh6ZaGSFTKMHghsB85b9toJtmazgG09AI2uk=" crossorigin="anonymous">
 
 <div class="route">
-  <h3 title="{{ page.id }}" class="mb-0">{{ page.title }}</h3>
+  <h1 title="{{ page.id }}" class="mb-0 h2">{{ page.title }}</h1>
   {% assign ascent_ft = page.ascent_m | times: 3.28084 %}
   {% assign descent_ft = page.descent_m | times: 3.28084 %}
-  <h5><span title="{{ page.distance_mi | times: 1.609 | round: 1}}km">{{ page.distance_mi | round: 1}}</span>mi ↑<span title="{{ page.ascent_m}}m">{{ascent_ft | round}}ft</span> ↓<span title="{{ page.descent_m}}m">{{ascent_ft | round}}ft</span> {% if page.deprecated %} <span class="text-warning mx-2" title="We no longer schedule this route">Deprecated</span>{% endif%}</h5>
+  <h2 class="h5"><span title="{{ page.distance_mi | times: 1.609 | round: 1}}km">{{ page.distance_mi | round: 1}}</span>mi ↑<span title="{{ page.ascent_m}}m">{{ascent_ft | round}}ft</span> ↓<span title="{{ page.descent_m}}m">{{ascent_ft | round}}ft</span> {% if page.deprecated %} <span class="text-warning mx-2" title="We no longer schedule this route">Deprecated</span>{% endif%}</h2>
   <div class="mb-4">
     <a class="btn btn-sm btn-outline-primary" href="{{ page.gpx | relative_url }}" data-goatcounter-click="download-{{ page.id }}">Download GPX</a> {% if page.map %}<a class="btn btn-sm btn-outline-primary" href="{{page.map}}" data-goatcounter-click="ext-map-{{ page.id }}">OnTheGoMap</a>{% endif %}
   </div>
@@ -38,7 +38,8 @@ <h5><span title="{{ page.distance_mi | times: 1.609 | round: 1}}km">{{ page.dist
     Never
     {% endif %}
     {% for date_run in page.dates_run reversed %}
-    <a href="{{ site.baseurl }}/lore#{{ date_run }}">{{ date_run }}</a>{% if forloop.last == false %}, {% endif %}
+    {% comment %}Gross hash after slash due to how our permalinks and redirects are set up {% endcomment %}
+    <a href="{{ site.baseurl }}/lore/#{{ date_run }}">{{ date_run }}</a>{% if forloop.last == false %}, {% endif %}
     {% endfor %}
   </div>
   {% if page.notes %}
diff --git a/index.html b/index.html
@@ -1,5 +1,7 @@
 ---
 layout: default
+title: Schedule
+add_h1: true
 ---
 
 <div class="container text-center">
diff --git a/js/common.js b/js/common.js
@@ -115,7 +115,7 @@ export function relayToGPX(trackName, legs, exchanges, options = {}) {
 </gpx>`;
 }
 
-export function legToGPX(coords, eventName, trackName) {
+export function legToGPX(coords, eventName, trackName, year) {
     let points = ""
     for (let coord of coords) {
         points += `    <rtept lat="${coord[1]}" lon="${coord[0]}"/>\n`
diff --git a/pages/brunch-reviews.html b/pages/brunch-reviews.html
@@ -11,10 +11,10 @@
 
 <article class="brunch-review" itemscope itemtype="https://schema.org/BlogPosting">
   <h2 itemprop="headline" class="mb-0">{{ latest_review.restaurant }}</h2>
-  <h5 class="text-secondary">  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ latest_review.date | date_to_long_string }}</time>
-  </h5>
+  <h3 class="text-secondary h5">  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ latest_review.date | date_to_long_string }}</time>
+  </h3>
   {% if latest_review.author %}
-  <h6 class="text-secondary">By <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ latest_review.author }}</span></span></h6>
+  <h3 class="text-secondary h6">By <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ latest_review.author }}</span></span></h3>
   {% endif %}
 
   <div class="post-content" itemprop="articleBody">
diff --git a/pages/drumheller-half-23.html b/pages/drumheller-half-23.html
@@ -585,6 +585,7 @@
         <header>
 
             <div id="logo">
+                <h1 class="visually-hidden">Drumheller Half Marathon 2023</h1>
                 <img id="overlay" src="{{ site.baseurl }}/img/dhm23/dhm23.svg"
                      alt="Line art of a fountain surrounded by text Drumheller Half Marathon 2023"/>
                 <img id="underlay-cw" class="rotating" src="{{ site.baseurl }}/img/dhm23/rose.webp" alt=""/>
diff --git a/pages/events.html b/pages/events.html
@@ -1,7 +1,9 @@
 ---
 title: Events
+description: Club-organized special events
 permalink: events/
 layout: default
+add_h1: true
 ---
 
 <div class="container">
diff --git a/pages/lore.html b/pages/lore.html
@@ -1,7 +1,9 @@
 ---
 title: Lore
+description: Past weekend long-run and race schedules
 permalink: lore/
 layout: default
+add_h1: true
 ---
 
 {% comment %}We want the schedules to appear in the correct quarter order, which Jekyll can't do unless we
diff --git a/pages/ragnar-23.html b/pages/ragnar-23.html
@@ -67,6 +67,25 @@
         color: var(--theme-primary-color);
     }
 
+    .anchor-link {
+      padding: 0 .175rem;
+      font-weight: 400;
+      color: #d2650c;
+      text-decoration: none;
+      opacity: 0;
+      transition: color 0.15s ease-in-out,opacity 0.15s ease-in-out;
+    }
+
+    .anchor-link::after {
+      content: "#";
+    }
+
+    .anchor-link:focus, .anchor-link:hover, :hover > .anchor-link, :target > .anchor-link {
+      color: #fd8f00;
+      text-decoration: none;
+      opacity: 1;
+    }
+
     .btn-outline-primary {
         --bs-btn-color: var(--theme-primary-color);
         --bs-btn-border-color: var(--theme-primary-color);
@@ -808,7 +827,7 @@ <h1 class="leaflet-sidebar-header mb-2">
             L.control.locate({keepCurrentZoomLevel: true, flyTo: true}).addTo(map);
 
             function downloadLegGPX(legNumber) {
-                let gpxString = legToGPX(routeGeoJSON.features[legNumber - 1].geometry.coordinates, legNumber)
+                let gpxString = legToGPX(routeGeoJSON.features[legNumber - 1].geometry.coordinates, legNumber, "2023")
                 download(gpxString, "application/gpx+xml", `ragnar-nwp-leg-${legNumber}.gpx`)
             }
 
@@ -1119,15 +1138,15 @@ <h1 class="leaflet-sidebar-header mb-2">
                         offset: [10, 0],
                         sticky: true
                     })
-                    let makeHeader = (idPrefix, type) => `<h3 id="${idPrefix}-${legNumber}" class="mb-2 leg-${legNumber}">Leg ${legNumber} <a href="${idPrefix}-${legNumber}" class="anchor-link" aria-label="Link to this section. Leg ${legNumber} ${type}"></a></h3>`
+                    let makeHeader = (idPrefix, type) => `<h3 class="mb-2 leg-${legNumber}">Leg ${legNumber} <a href="#${idPrefix}-${legNumber}" class="anchor-link" aria-label="Link to this section. Leg ${legNumber} ${type}"></a></h3>`
                     let content = `${feature.properties.distance}mi ↑${feature.properties.ascent}ft ↓${feature.properties.descent}ft<br/>`
                     if (feature.properties.notes) {
                         content += feature.properties.notes
                     }
 
-                    sideBarLegNotes.innerHTML += `<div class="mb-4">${makeHeader("leg-notes", "Notes")}${content}</div>`
-                    sideBarTurnByTurn.innerHTML += `<div class="mb-4"><a class="btn btn-outline-secondary float-end gpx-download download-${legNumber} mx-2" data-leg-number="${legNumber}" href="#">GPX</a>${makeHeader("leg-runner-directions", "Runner Directions")}${feature.properties.turnByTurn}</div>`
-                    sideBarVanDirections.innerHTML += `<div class="mb-4">${makeHeader("leg-van-directions", "Van Directions")}${feature.properties.vanDirections}<br/><h6 class="exchange-${exchange.properties.id} mb-0">Exchange ${exchange.properties.id}</h6>${exchange.properties.addressString.replaceAll('\n', "<br/>")}</div>`
+                    sideBarLegNotes.innerHTML += `<div class="mb-4" id="leg-notes-${legNumber}">${makeHeader("leg-notes", "Notes")}${content}</div>`
+                    sideBarTurnByTurn.innerHTML += `<div class="mb-4" id="leg-runner-directions-${legNumber}"><a class="btn btn-outline-secondary float-end gpx-download download-${legNumber} mx-2" data-leg-number="${legNumber}" href="#">GPX</a>${makeHeader("leg-runner-directions", "Runner Directions")}${feature.properties.turnByTurn}</div>`
+                    sideBarVanDirections.innerHTML += `<div class="mb-4" id="leg-van-directions-${legNumber}">${makeHeader("leg-van-directions", "Van Directions")}${feature.properties.vanDirections}<br/><h6 class="exchange-${exchange.properties.id} mb-0">Exchange ${exchange.properties.id}</h6>${exchange.properties.addressString.replaceAll('\n', "<br/>")}</div>`
                 }
             })
             const activeLegColor = '#933b00'
diff --git a/pages/routes.html b/pages/routes.html
@@ -1,8 +1,9 @@
 ---
 title: Routes
-description: Every place worth running around our corner of Seattle
+description: Routes for running, walking or urban hiking in Seattle
 permalink: routes/
 layout: base
+add_h1: true
 ---
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/css/tabulator.min.css" integrity="sha256-pG2AUZRMdFyuinl2tPudk9iU0gh2pFIcxPbwNc/vUuo=" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/css/tabulator_bootstrap5.min.css" integrity="sha256-H1gQqBIR3L9enXuoNfFASj+QdGSEQIAloT7c4FXjNzc=" crossorigin="anonymous">

Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@ export function relayToGPX(trackName, legs, exchanges, options = {}) {`
`115`	`115`	</gpx>`;
`116`	`116`	`}`
`117`	`117`
`118`		`-export function legToGPX(coords, eventName, trackName) {`
	`118`	`+export function legToGPX(coords, eventName, trackName, year) {`
`119`	`119`	`let points = ""`
`120`	`120`	`for (let coord of coords) {`
`121`	`121`	points += ` <rtept lat="${coord[1]}" lon="${coord[0]}"/>\n`