gtfs-to-html 2.6.8 → 2.6.10

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.10] - 2024-07-15
+
+### Updated
+- Better date format in timetable comment
+- favicon
+- Improved timetable_page_name fallback
+- Overview template formatting
+- Update mapbox version
+
+## [2.6.9] - 2024-07-11
+
+### Added
+- Stop popup window on map link to streetview
+
+### Updated
+- Dependency updates
+
 ## [2.6.8] - 2024-06-21
 
 ### Updated

package/lib/formatters.js

@@ -512,22 +512,16 @@ export function formatTimetablePageLabel(timetablePage) {
     timetablePage.consolidatedTimetables &&
     timetablePage.consolidatedTimetables.length > 0
   ) {
-    if (timetablePage.consolidatedTimetables.length === 1) {
-      // Get label from first timetable if there is only one
-      return timetablePage.consolidatedTimetables[0].timetable_label;
-    } else {
-      // Otherwise, use route names from all timetables
-      const routes = uniqBy(
-        flatMap(
-          timetablePage.consolidatedTimetables,
-          (timetable) => timetable.routes,
-        ),
-        'route_id',
-      );
-      const timetablePageLabel = routes.map((route) => formatRouteName(route));
+    // Use route names from all timetables
+    const routes = uniqBy(
+      flatMap(
+        timetablePage.consolidatedTimetables,
+        (timetable) => timetable.routes,
+      ),
+      'route_id',
+    );
 
-      return timetablePageLabel.join(' and ');
-    }
+    return routes.map((route) => formatRouteName(route)).join(' and ');
   }
 
   return 'Unknown';

package/lib/log-utils.js

@@ -17,7 +17,7 @@ export function generateLogText(outputStats, config) {
   const logText = [
     `Feed Version: ${feedVersion}`,
     `GTFS-to-HTML Version: ${config.gtfsToHtmlVersion}`,
-    `Date Generated: ${new Date()}`,
+    `Date Generated: ${new Date().toISOString()}`,
     `Timetable Page Count: ${outputStats.timetablePages}`,
     `Timetable Count: ${outputStats.timetables}`,
     `Calendar Service ID Count: ${outputStats.calendars}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.6.8",
+  "version": "2.6.10",
   "private": false,
   "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [
@@ -42,23 +42,23 @@
     "copy-dir": "^1.3.0",
     "csv-stringify": "^6.5.0",
     "express": "^4.19.2",
-    "gtfs": "^4.12.0",
+    "gtfs": "^4.13.0",
     "insane": "^2.6.2",
     "js-beautify": "^1.15.1",
     "lodash-es": "^4.17.21",
-    "marked": "^13.0.0",
+    "marked": "^13.0.2",
     "moment": "^2.30.1",
     "morgan": "^1.10.0",
     "pretty-error": "^4.0.0",
     "pug": "^3.0.3",
-    "puppeteer": "^22.12.0",
+    "puppeteer": "^22.13.0",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.3",
     "timer-machine": "^1.1.0",
     "toposort": "^2.0.2",
     "untildify": "^5.0.0",
     "yargs": "^17.7.2",
-    "yoctocolors": "^2.0.2"
+    "yoctocolors": "^2.1.1"
   },
   "devDependencies": {
     "husky": "^9.0.11",
@@ -66,7 +66,7 @@
     "prettier": "^3.3.2"
   },
   "engines": {
-    "node": ">= 18.0.0"
+    "node": ">= 20.11.0"
   },
   "release-it": {
     "github": {

package/public/css/timetable_styles.css

@@ -186,7 +186,7 @@ a:hover {
   font-size: 20px;
   font-weight: bold;
   letter-spacing: -1px;
-  padding: 0 8px;
+  padding: 0 6px;
 }
 
 @media screen and (max-width: 767px) {

package/public/js/system-map.js

@@ -60,10 +60,23 @@ function formatStopPopup(feature) {
     $('<strong>').text(feature.properties.stop_code).appendTo(html);
   }
 
-  $('<div>').addClass('text-sm').text('Routes Served:').appendTo(html);
+  $('<label>').addClass('block').text('Routes Served:').appendTo(html);
 
   $(html).append(routes.map((route) => formatRoute(route)));
 
+  $('<a>')
+    .addClass(
+      'bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded inline-block hover:no-underline mt-2',
+    )
+    .prop(
+      'href',
+      `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,
+    )
+    .prop('target', '_blank')
+    .prop('rel', 'noopener noreferrer')
+    .html('View on Streetview')
+    .appendTo(html);
+
   return html.prop('outerHTML');
 }
 

package/public/js/timetable-map.js

@@ -53,10 +53,23 @@ function formatStopPopup(feature, routes) {
     $('<strong>').text(feature.properties.stop_code).appendTo(html);
   }
 
-  $('<div>').addClass('text-sm mb-2').text('Routes Served:').appendTo(html);
+  $('<label>').addClass('block').text('Routes Served:').appendTo(html);
 
   $(html).append(routeIds.map((routeId) => formatRoute(routes[routeId])));
 
+  $('<a>')
+    .addClass(
+      'bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded inline-block hover:no-underline mt-2',
+    )
+    .prop(
+      'href',
+      `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&heading=0&pitch=0&fov=90`,
+    )
+    .prop('target', '_blank')
+    .prop('rel', 'noopener noreferrer')
+    .html('View on Streetview')
+    .appendTo(html);
+
   return html.prop('outerHTML');
 }
 

package/views/default/formatting_functions.pug

@@ -11,14 +11,8 @@
     return summary;
   }
 
-  function formatRouteName(route) {
-    const hasLongName = route.route_long_name !== '' && route.route_long_name !== null;
-
-    if (hasLongName) {
-      return route.route_long_name;
-    }
-
-    return route.route_short_name;
+  function isNullOrEmpty(value) {
+    return value === null || value === '';
   }
 
   function formatFrequencyWarning(frequencies) {

package/views/default/overview.pug

@@ -1,28 +1,28 @@
 include formatting_functions.pug
 
-.container.mx-4.h-screen.items-stretch(class="md:mx-auto md:flex")
+.h-screen.items-stretch(class="md:flex")
   if !timetablePages || !timetablePages.length
     .flex.justify-center
       .bg-blue-700.text-white.font-bold.rounded-lg.border.shadow-lg.text-lg.p-8(class="w-1/2") No timetables found
   else
-    .overview-list.flex-none(class="md:overflow-y-scroll")
+    .overview-list.flex-none(class="md:overflow-y-scroll md:max-w-96")
       each timetablePageGroup in getAgencyTimetableGroups(timetablePages, agencies)
-        h1.text-2xl.pt-4.pb-2= `${formatAgencyName(timetablePageGroup.agency)} Routes`
+        h1.text-2xl.mx-4.py-3= `${formatAgencyName(timetablePageGroup.agency)} Routes`
+  
         each timetablePage in timetablePageGroup.timetablePages
           if config.allowEmptyTimetables || timetablePage.consolidatedTimetables.length > 0
-            a.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
-              .text-lg.text-gray-800.leading-none= timetablePage.timetable_page_label
+            a.timetable-overview-label.flex.items-center.gap-2.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
               each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
-                .flex.my-1.items-center.gap-1
-                  .route-color-swatch.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
-                  .text-gray-600.leading-none= formatRouteName(route)
-              .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
+                .route-color-swatch-large.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
+              div
+                .text-xl.leading-none.text-slate-800= timetablePage.timetable_page_label
+                .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
     if config.showMap
-      .map.ml-4.h-full.w-full(id="system_map")
+      .map.h-full.w-full(id="system_map")
 
       //- Use #{variable} format to inject values from pug to client side js
       script.
         (function() {
-          var geojson = !{JSON.stringify(geojson) || '\'\''};
+          const geojson = !{JSON.stringify(geojson) || '\'\''};
           createSystemMap('system_map', geojson);
         })();

package/views/default/overview_full.pug

@@ -6,9 +6,9 @@ block extraHeader
   if config.showMap
     script(src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous")
     script(src="https://unpkg.com/lodash@4.17.21/lodash.min.js" crossorigin="anonymous")
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/system-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet")

package/views/default/timetablepage.pug

@@ -1,6 +1,6 @@
 include formatting_functions.pug
 
-<!-- Timetable generated on #{Date()} using GTFS-to-HTML version #{config.gtfsToHtmlVersion} -->
+<!-- Timetable generated on #{new Date().toISOString()} using GTFS-to-HTML version #{config.gtfsToHtmlVersion} -->
 .timetable-page(class=`menu-type-${config.menuType}`)
   .container.mx-4(class="md:mx-auto")
     if config.showRouteTitle

package/views/default/timetablepage_full.pug

@@ -9,10 +9,10 @@ block extraHeader
     script(src=`${config.assetPath}js/timetable-menu.js`)
 
   if config.showMap
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/timetable-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet")
 

package/www/docs/previewing-html-output.md

@@ -11,10 +11,14 @@ After an initial run of `gtfs-to-html`, the GTFS data will be downloaded and loa
 
 You can view an individual route HTML on demand by running the included Express app:
 
+```bash
     node app
+```
 
 By default, `gtfs-to-html` will look for a `config.json` file in the project root. To specify a different path for the configuration file:
 
+```bash
     node app --configPath /path/to/your/custom-config.json
+```
 
 Once running, you can view the HTML in your browser at [localhost:3000](http://localhost:3000)

package/www/docs/processing-large-gtfs.md

@@ -5,4 +5,6 @@ title: Processing very large GTFS files
 
 By default, node has a memory limit of 512 MB or 1 GB. If you have a very large GTFS file and want to use the option `showOnlyTimepoint` = `false` you may need to allocate more memory. Use the `max-old-space-size` option. For example to allocate 4 GB:
 
+```
     NODE_OPTIONS=--max_old_space_size=4096 gtfs-to-html
+```

package/www/docs/related-libraries.md

@@ -4,37 +4,51 @@ title: Related Libraries
 ---
 
 ## `node-gtfs`
-
-`gtfs-to-html` uses the [`node-gtfs`](https://github.com/blinktaginc/node-gtfs) library to handle importing and querying GTFS data. It provides methods for loading transit data in GTFS format into a SQLite database and methods to query for agencies, routes, stops, times, fares, calendars and other GTFS data. It also offers spatial queries to find nearby stops, routes and agencies and can convert stops and shapes to geoJSON format.
-
 [`https://github.com/blinktaginc/node-gtfs`](https://github.com/blinktaginc/node-gtfs)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/node-gtfs/raw/master/docs/images/node-gtfs-logo.svg" alt="node-gtfs" width="100" /></div>
+  <div><code>gtfs-to-html</code> uses the <a href="https://github.com/blinktaginc/node-gtfs">node-gtfs</a> library to handle importing and querying GTFS data. It provides methods for loading transit data in GTFS format into a SQLite database and methods to query for agencies, routes, stops, times, fares, calendars and other GTFS data. It also offers spatial queries to find nearby stops, routes and agencies and can convert stops and shapes to geoJSON format.</div>
+</div>
 
 ## `gtfs-to-geojson`
-
-[`gtfs-to-geojson`](https://github.com/blinktaginc/gtfs-to-geojson) converts transit data in GTFS format into geoJSON. This includes both shapes and stops. It can be configured to generate one geoJSON file per route or a single file which contains all routes for an agency. This is useful for creating maps of transit routes.
-
 [`https://github.com/blinktaginc/gtfs-to-geojson`](https://github.com/blinktaginc/gtfs-to-geojson)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/gtfs-to-geojson/raw/master/docs/images/gtfs-to-geojson-logo.svg" alt="gtfs-to-geojson" width="100" /></div>
+  <div><a href="https://github.com/blinktaginc/gtfs-to-geojson"><code>gtfs-to-geojson</code></a> converts transit data in GTFS format into geoJSON. This includes both shapes and stops. It can be configured to generate one geoJSON file per route or a single file which contains all routes for an agency. This is useful for creating maps of transit routes.</div>
+</div>
 
 ## `gtfs-to-chart`
-
-[`gtfs-to-chart`](https://github.com/blinktaginc/gtfs-to-chart) generates a stringline chart in D3 using data from an agency's GTFS. This chart shows all trips for a specific route as they travel through space over a single day.
-
 [`https://github.com/blinktaginc/gtfs-to-chart`](https://github.com/blinktaginc/gtfs-to-chart)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/gtfs-to-chart/raw/master/docs/images/gtfs-to-chart-logo.svg" alt="gtfs-to-chart" width="100" /></div>
+  <div><a href="https://github.com/blinktaginc/gtfs-to-chart"><code>gtfs-to-chart</code></a> generates a stringline chart in D3 using data from an agency's GTFS. This chart shows all trips for a specific route as they travel through space over a single day.</div>
+</div>
 
 ## Transit Departures Widget
-
-The [Transit Departures Widget](https://github.com/BlinkTagInc/transit-departures-widget) generates a user-friendly transit realtime departures widget in HTML format directly from GTFS and GTFS-RT transit data. Most transit agencies have schedule data in GTFS format and many publish realtime departure information using GTFS-RT. This project generates HTML, JS and CSS for use on a transit agency website to allow users to see when the next vehicle is departing from a specific stop and includes features like caching, auto-refresh, url parameters and custom templates.
-
 [`https://github.com/BlinkTagInc/transit-departures-widget`](https://github.com/BlinkTagInc/transit-departures-widget)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/transit-departures-widget/raw/main/docs/images/transit-departures-widget-logo.svg" alt="Transit Departures Widget" width="100" /></div>
+  <div>The <a href="https://github.com/BlinkTagInc/transit-departures-widget">Transit Departures Widget</a> generates a user-friendly transit realtime departures widget in HTML format directly from GTFS and GTFS-RT transit data. Most transit agencies have schedule data in GTFS format and many publish realtime departure information using GTFS-RT. This project generates HTML, JS and CSS for use on a transit agency website to allow users to see when the next vehicle is departing from a specific stop and includes features like caching, auto-refresh, url parameters and custom templates.</div>
+</div>
+
+## GTFS Accessibility Validator
+[`https://github.com/BlinkTagInc/gtfs-accessibility-validator`](https://github.com/BlinkTagInc/gtfs-accessibility-validator)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/gtfs-accessibility-validator/raw/main/docs/images/gtfs-accessibility-validator-logo.svg" alt="Transit Departures Widget" width="100" /></div>
+  <div>The <a href="https://github.com/BlinkTagInc/gtfs-accessibility-validator">GTFS Accessibility Validator</a> checks transit data in GTFS format for fields and files related to accessibility. The accessibility guidelines are taken from the <a href="https://dot.ca.gov/cal-itp/california-transit-data-guidelines-v3_0#section-checklist">California Transit Data Guidelines</a> published by Caltrans.</div>
+</div>
 
 ## GTFS Text-to-Speech Tester
-
-The [GTFS Text-to-Speech Tester](https://github.com/BlinkTagInc/node-gtfs-tts) is a command-line tool that will read all GTFS stop names using Text-to-Speech and allow flagging which names need Text-to-Speech values for tts_stop_name in stops.txt. Using this tool is the quickest way to determine which stops need phoenetic spellings, abbreviations written out, large digits written as words, ordinals written out or other changes so that they can be read.
-
 [`https://github.com/BlinkTagInc/node-gtfs-tts`](https://github.com/BlinkTagInc/node-gtfs-tts)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/node-gtfs-tts/raw/main/docs/images/gtfs-tts-logo.svg" alt="Transit Departures Widget" width="100" /></div>
+  <div>The <a href="https://github.com/BlinkTagInc/node-gtfs-tts">GTFS Text-to-Speech Tester</a> is a command-line tool that will read all GTFS stop names using Text-to-Speech and allow flagging which names need Text-to-Speech values for tts_stop_name in stops.txt. Using this tool is the quickest way to determine which stops need phonetic spellings, abbreviations written out, large digits written as words, ordinals written out or other changes so that they can be read.</div>
+</div>
 
 ## `node-gtfs-realtime`
-
-[GTFS-realtime](https://developers.google.com/transit/gtfs-realtime) transit data is in [protobuf format](https://developers.google.com/protocol-buffers) which means its not human-readable by default. `node-GTFS-Realtime` aims to make it fast and easy to inspect GTFS-realtime data by providing a one-line command for downloading [GTFS-realtime format](https://developers.google.com/transit/gtfs-realtime) data and converting to JSON. Try it by running `npx gtfs-realtime http://api.bart.gov/gtfsrt/tripupdate.aspx` in your terminal.
-
 [`https://github.com/BlinkTagInc/node-gtfs-realtime`](https://github.com/BlinkTagInc/node-gtfs-realtime)
+<div style={{ display: 'flex', gap: 20 }}>
+  <div style={{ width: 100, flexShrink: 0 }}><img src="https://github.com/BlinkTagInc/node-gtfs-realtime/raw/main/docs/images/node-gtfs-realtime-logo.svg
+  " alt="Transit Departures Widget" width="100" /></div>
+  <div>GTFS-realtime transit data is in <a href="https://developers.google.com/protocol-buffers">protobuf format</a> which means its not human-readable by default. <code>node-GTFS-Realtime</code> aims to make it fast and easy to inspect GTFS-realtime data by providing a one-line command for downloading GTFS-realtime format data and converting to JSON. Try it out by running <code>npx gtfs-realtime http://api.bart.gov/gtfsrt/tripupdate.aspx</code> in your terminal.</div>
+</div>

package/www/docs/reviewing-changes.md

@@ -18,8 +18,12 @@ First generate two folders of GTFS-to-HTML output to compare. To make it easy to
 
 Then, install diff2html:
 
+```bash
     npm install -g diff2html-cli
+```
 
 Use the `diff` command and pipe the output to `diff2html` to get a nicely formatted list of the differences between two folders of html files.
 
+```bash
     diff -bur html/folder1 html/folder2 |  diff2html -i stdin
+```