gtfs-to-html 2.3.5 → 2.4.2

package/public/js/timetable-map.js

@@ -63,6 +63,10 @@ function getBounds(geojson) {
 
 function createMap(id, geojson, routes) {
   const defaultRouteColor = '#FF4728';
+  const lineLayout = {
+    'line-join': 'round',
+    'line-cap': 'round',
+  };
 
   if (!geojson || geojson.features.length === 0) {
     $('#map_' + id).hide();
@@ -92,6 +96,9 @@ function createMap(id, geojson, routes) {
       duration: 0,
     });
 
+    // Turn of Points of Interest labels
+    map.setLayoutProperty('poi-label', 'visibility', 'none');
+
     // Find the index of the first symbol layer in the map style
     let firstSymbolId;
     for (const layer of map.getStyle().layers) {
@@ -101,7 +108,40 @@ function createMap(id, geojson, routes) {
       }
     }
 
-    // Add route line outline first
+    // Add route drop shadow outline first
+    map.addLayer(
+      {
+        id: 'route-line-shadow',
+        type: 'line',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'line-color': '#000000',
+          'line-opacity': 0.3,
+          'line-width': {
+            base: 12,
+            stops: [
+              [14, 20],
+              [18, 42],
+            ],
+          },
+          'line-blur': {
+            base: 12,
+            stops: [
+              [14, 20],
+              [18, 42],
+            ],
+          },
+        },
+        layout: lineLayout,
+        filter: ['!has', 'stop_id'],
+      },
+      firstSymbolId
+    );
+
+    // Add route line outline
     map.addLayer(
       {
         id: 'route-line-outline',
@@ -113,17 +153,21 @@ function createMap(id, geojson, routes) {
         paint: {
           'line-color': '#FFFFFF',
           'line-opacity': 1,
-          'line-width': 6,
-        },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round',
+          'line-width': {
+            base: 8,
+            stops: [
+              [14, 12],
+              [18, 32],
+            ],
+          },
         },
+        layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Add route line
     map.addLayer(
       {
         id: 'route-line',
@@ -135,17 +179,21 @@ function createMap(id, geojson, routes) {
         paint: {
           'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
           'line-opacity': 1,
-          'line-width': 2,
-        },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round',
+          'line-width': {
+            base: 4,
+            stops: [
+              [14, 6],
+              [18, 16],
+            ],
+          },
         },
+        layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Add stops
     map.addLayer(
       {
         id: 'stops',
@@ -155,22 +203,23 @@ function createMap(id, geojson, routes) {
           data: geojson,
         },
         paint: {
+          'circle-color': '#fff',
           'circle-radius': {
+            base: 1.75,
             stops: [
-              [9, 2],
-              [13, 4],
-              [15, 6],
+              [12, 4],
+              [22, 100],
             ],
           },
-          'circle-stroke-width': 1,
-          'circle-stroke-color': '#363636',
-          'circle-color': '#363636',
+          'circle-stroke-color': '#3f4a5c',
+          'circle-stroke-width': 2,
         },
         filter: ['has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Layer for highlighted stops
     map.addLayer(
       {
         id: 'stops-highlighted',
@@ -180,16 +229,16 @@ function createMap(id, geojson, routes) {
           data: geojson,
         },
         paint: {
+          'circle-color': '#fff',
           'circle-radius': {
+            base: 1.75,
             stops: [
-              [9, 3],
-              [13, 4],
-              [15, 7],
+              [12, 5],
+              [22, 125],
             ],
           },
           'circle-stroke-width': 2,
-          'circle-stroke-color': '#666666',
-          'circle-color': '#888888',
+          'circle-stroke-color': '#3f4a5c',
         },
         filter: ['==', 'stop_id', ''],
       },
@@ -216,7 +265,7 @@ function createMap(id, geojson, routes) {
         [event.point.x + 5, event.point.y + 5],
       ];
       const features = map.queryRenderedFeatures(bbox, {
-        layers: ['stops'],
+        layers: ['stops-highlighted', 'stops'],
       });
 
       if (!features || features.length === 0) {
@@ -234,14 +283,10 @@ function createMap(id, geojson, routes) {
 
     function highlightStop(stopId) {
       map.setFilter('stops-highlighted', ['==', 'stop_id', stopId]);
-      map.setPaintProperty('stops', 'circle-opacity', 0.5);
-      map.setPaintProperty('stops', 'circle-stroke-opacity', 0.5);
     }
 
     function unHighlightStop() {
       map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
-      map.setPaintProperty('stops', 'circle-opacity', 1);
-      map.setPaintProperty('stops', 'circle-stroke-opacity', 1);
     }
 
     // On table hover, highlight stop on map

package/views/default/layout.pug

@@ -3,12 +3,13 @@ html
   head
     title= title
     meta(charset="utf-8")
-    link(rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" crossorigin="anonymous")
     link(rel="stylesheet" href=`${config.assetPath}css/timetable_styles.css`)
     if config.outputFormat === 'pdf'
       link(rel="stylesheet" href=`${config.assetPath}css/timetable_pdf_styles.css`)
     meta(name="viewport" content="initial-scale=1.0, width=device-width")
 
+    script(src="https://cdn.tailwindcss.com")
+
     block extraHeader
 
   body

package/views/default/overview.pug

@@ -10,13 +10,13 @@ include formatting_functions.pug
         h1.text-2xl.pt-4.pb-2= `${formatAgencyName(timetablePageGroup.agency)} Routes`
         each timetablePage in timetablePageGroup.timetablePages
           if config.allowEmptyTimetables || timetablePage.consolidatedTimetables.length > 0
-            a.overview-menu-item.mb-3(href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
+            a.block.p-2.border-b.border-slate-200(class="hover:bg-slate-200 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
               each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
                 .flex.my-1
                   .route-color-swatch.flex-none.mr-2(style=`background-color: #${route.route_color}; color: #${route.route_text_color};`)= route.route_short_name || ''
                   .mt-1.text-gray-600.leading-none= formatRouteName(route)
-              .text-gray-600= timetablePage.dayList
+              .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")
 

package/views/default/timetablepage.pug

@@ -14,7 +14,7 @@ include formatting_functions.pug
     include timetable_menu.pug
 
     each timetable in timetablePage.consolidatedTimetables
-      .timetable.mb-5(id=`timetable_id_${formatHtmlId(timetable.timetable_id)}` data-day-list=timetable.dayList data-direction-name=timetable.direction_name data-timetable-id=timetable.timetable_id data-direction-id=timetable.direction_id data-route-id=timetable.route_ids.join('_'))
+      .timetable.mb-10(id=`timetable_id_${formatHtmlId(timetable.timetable_id)}` data-day-list=timetable.dayList data-direction-name=timetable.direction_name data-timetable-id=timetable.timetable_id data-direction-id=timetable.direction_id data-route-id=timetable.route_ids.join('_'))
         if config.showRouteTitle
           h2.text-xl= `${timetable.timetable_label} | ${timetable.dayListLong}`
             each note in getNotesForTimetableLabel(timetable.notes)

package/www/docs/configuration.md

@@ -490,7 +490,7 @@ The default trip-sorting algorithm is `common`.
 
 ### sqlitePath
 
-{String} A path to an SQLite database. Optional, defaults to using an in-memory database with a value of `:memory:`. If you want the data imported to persist, you need to specify a value for `sqlitePath`
+{String} A path to an SQLite database. Optional, defaults to using an in-memory database with a value of `:memory:`. If you want the data imported to persist, you need to specify a value for `sqlitePath`. Supports tilde as part of the path, like `~/Documents/gtfs`.
 
 ```
     "sqlitePath": "/tmp/gtfs"

package/www/docs/quick-start.md

@@ -29,7 +29,6 @@ Skips importing GTFS into SQLite. Useful if you are rerunning with an unchanged
 
     gtfs-to-html --skipImport
 
-
 ### 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:
@@ -44,17 +43,17 @@ You can use both [`docker`](https://docker.com) and [`docker-compose`](https://d
 
 A `Dockerfile` is available in the `docker` directory.
 
-* Create a `config.json` file and save in the same directory as your `Dockerfile`. You can use `config-sample.json` from the project root as a starting point.
+- Create a `config.json` file and save in the same directory as your `Dockerfile`. You can use `config-sample.json` from the project root as a starting point. For Docker usage, remove any `sqlitePath` and `templatePath` values from the config.json.
 
-* Build the docker image:
+- Build the docker image:
 
         docker build -t gtfs-to-html .
 
-* Run the docker image:
+- Run the docker image:
 
         docker run gtfs-to-html
 
-* Copy the generated HTML out of the docker container
+- Copy the generated HTML out of the docker container
 
         // Figure out what your container ID is
         docker container ls -a
@@ -69,17 +68,16 @@ A `Dockerfile` is available in the `docker` directory.
 
 Docker compose is used for multi-container Docker applications. In this context, it is just a convenient way to manage volumes. This allows (_i_) to get the generated HTML out of the docker container without explicitly copying with `docker cp`, and (_ii_) to tweak and run a new configuration without rebuilding the container from scratch.
 
-* Create a `config.json` file and save in the same directory as your `Dockerfile` and `docker-compose.yml`;
+- Create a `config.json` file and save in the same directory as your `Dockerfile` and `docker-compose.yml`;
 
-* build and run the container:
+- build and run the container:
 
         docker-compose up
 
-* the generated HTML will be available in the folder `html` next to docker files.
+- the generated HTML will be available in the folder `html` next to docker files.
 
 Do you want to change something? Just delete the old HTML, change your `config.json`, and finally run `docker-compose up` again.
 
-
 ## Usage as a node module
 
 If you are using this as a node module as part of an application, you can include it in your project's `package.json` file.
@@ -87,22 +85,25 @@ If you are using this as a node module as part of an application, you can includ
 ### Code example
 
 ```javascript
-    import gtfsToHtml from 'gtfs-to-html';
-    import { readFile } from 'fs/promises';
-    const config = JSON.parse(await readFile(new URL('./config.json', import.meta.url)));
-
-    gtfsToHtml(config)
-    .then(() => {
-      console.log('HTML Generation Successful');
-      process.exit();
-    })
-    .catch(err => {
-      console.error(err);
-      process.exit(1);
-    });
+import gtfsToHtml from 'gtfs-to-html';
+import { readFile } from 'fs/promises';
+const config = JSON.parse(
+  await readFile(new URL('./config.json', import.meta.url))
+);
+
+gtfsToHtml(config)
+  .then(() => {
+    console.log('HTML Generation Successful');
+    process.exit();
+  })
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
 ```
 
 ### Example Application
+
 An example Express application that uses `gtfs-to-html` is included in the `app` folder. After an initial run of `gtfs-to-html`, the GTFS data will be downloaded and loaded into SQLite.
 
 You can view an individual route HTML on demand by running the included Express app:
@@ -115,17 +116,16 @@ By default, `gtfs-to-html` will look for a `config.json` file in the project roo
 
 Once running, you can view the HTML in your browser at [localhost:3000](http://localhost:3000)
 
-
 ## Usage as a hosted web app
 
 A [hosted version of GTFS-to-HTML as a service](https://run.gtfstohtml.com) allows you to use it entirely within your browser - no downloads or command line necessary.
 
 It provides:
 
-* a web-based interface for finding GTFS feeds or ability to enter your own URL
-* support for adding [custom configuration](/docs/configuration) as JSON
-* creation of HTML timetables as a downloadable .zip file
-* a preview of all timetables generated directly in your browser
+- a web-based interface for finding GTFS feeds or ability to enter your own URL
+- support for adding [custom configuration](/docs/configuration) as JSON
+- creation of HTML timetables as a downloadable .zip file
+- a preview of all timetables generated directly in your browser
 
 [run.gtfstohtml.com](https://run.gtfstohtml.com)
 
@@ -136,8 +136,8 @@ Currently, it is limited to relatively small GTFS files and doesn't offer suppor
 ### SQLite3 unable to be installed with `Failed to exec install script`
 
 For an error like:
-```lifecycle sqlite3@5.0.0~install: Failed to exec install script```
+`lifecycle sqlite3@5.0.0~install: Failed to exec install script`
 
 Try installing `gtfs-to-html` using the following flags:
 
-```npm install --unsafe-perm --allow-root -g```
+`npm install --unsafe-perm --allow-root -g`

package/www/docs/related-libraries.md

@@ -33,3 +33,8 @@ The [GTFS Text-to-Speech Tester](https://github.com/BlinkTagInc/node-gtfs-tts) i
 
 [`https://github.com/BlinkTagInc/node-gtfs-tts`](https://github.com/BlinkTagInc/node-gtfs-tts)
 
+## `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)

package/www/package.json

@@ -9,11 +9,11 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.18",
-    "@docusaurus/preset-classic": "^2.0.0-beta.18",
-    "clsx": "^1.1.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@docusaurus/core": "^2.0.0-rc.1",
+    "@docusaurus/preset-classic": "^2.0.0-rc.1",
+    "clsx": "^1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "browserslist": {
     "production": [

package/www/src/pages/index.js

@@ -7,7 +7,6 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import CodeBlock from '@theme/CodeBlock';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
-import { hsl } from 'chalk';
 
 const features = [
   {
@@ -15,28 +14,32 @@ const features = [
     imageUrl: 'img/undraw_proud_coder.svg',
     description: (
       <>
-        Most transit agencies have schedule data in GTFS format but need to show each route's schedule to users on a website.
+        Most transit agencies have schedule data in GTFS format but need to show
+        each route's schedule to users on a website.
       </>
-    )
+    ),
   },
   {
     title: <>What?</>,
     imageUrl: 'img/undraw_spreadsheets.svg',
     description: (
       <>
-        This tool automates the process of creating nicely formatted HTML timetables for inclusion on a transit agency website.
+        This tool automates the process of creating nicely formatted HTML
+        timetables for inclusion on a transit agency website.
       </>
-    )
+    ),
   },
   {
     title: <>Automate schedule changes</>,
     imageUrl: 'img/undraw_happy_music.svg',
     description: (
       <>
-        Automating timetable creation means that timetables can be kept up to date and accurate when schedule changes happen and the likelihood of errors is reduced.
+        Automating timetable creation means that timetables can be kept up to
+        date and accurate when schedule changes happen and the likelihood of
+        errors is reduced.
       </>
-    )
-  }
+    ),
+  },
 ];
 
 function Feature({ imageUrl, title, description }) {
@@ -60,25 +63,35 @@ function Home() {
   return (
     <Layout
       title="GTFS-to-HTML"
-      description="GTFS-to-HTML creates human-readable, user-friendly transit timetables in HTML format directly from GTFS transit data.">
+      description="GTFS-to-HTML creates human-readable, user-friendly transit timetables in HTML format directly from GTFS transit data."
+    >
       <header className={clsx('hero hero--dark', styles.heroBanner)}>
         <div className="container">
           <div className="row">
             <div className="col col--4">
-              <img src="/img/gtfs-to-html-logo.svg" style={{ maxWidth: '150px' }} alt="" />
+              <img
+                src="/img/gtfs-to-html-logo.svg"
+                style={{ maxWidth: '150px' }}
+                alt=""
+              />
             </div>
 
             <div className="col col--8">
               <h1 className="hero__title">{siteConfig.title}</h1>
               <p className="hero__subtitle">{siteConfig.tagline}</p>
-              <img alt="npm" src="https://img.shields.io/npm/v/gtfs-to-html?color=%2325c2a0&amp;label=stable&amp;style=for-the-badge" className="margin-bottom--sm" />
+              <img
+                alt="npm"
+                src="https://img.shields.io/npm/v/gtfs-to-html?color=%2325c2a0&amp;label=stable&amp;style=for-the-badge"
+                className="margin-bottom--sm"
+              />
               <div className={styles.buttons}>
                 <Link
                   className={clsx(
                     'button button--outline button--secondary button--lg',
                     styles.heroButton
                   )}
-                  to={useBaseUrl('docs/')}>
+                  to={useBaseUrl('docs/')}
+                >
                   Get Started
                 </Link>
               </div>
@@ -99,19 +112,44 @@ function Home() {
           </section>
         )}
 
-        <section style={{backgroundColor: 'hsl(0, 0%, 85%)'}} className="padding--lg">
+        <section
+          style={{ backgroundColor: 'hsl(0, 0%, 85%)' }}
+          className="padding--lg"
+        >
           <div className="container">
             <div className="row">
               <div className="col"></div>
               <div className="col">
                 <div className="avatar avatar--vertical margin-bottom--sm">
                   <div className="avatar__photo avatar__photo--xl">
-                    <img src="https://avatars.githubusercontent.com/u/46612183?v=4" alt="Brody" width="200" height="200" style={{width: '100%', height: 'auto', maxWidth: '100%', marginBottom: '-4px'}} /></div>
-                  <div className="avatar__intro padding-top--sm"><div className="avatar__name">Brody</div>
-                    <small className="avatar__subtitle"><a href="https://github.com/transcollines">Transcollines</a></small>
+                    <img
+                      src="https://avatars.githubusercontent.com/u/46612183?v=4"
+                      alt="Brody"
+                      width="200"
+                      height="200"
+                      style={{
+                        width: '100%',
+                        height: 'auto',
+                        maxWidth: '100%',
+                        marginBottom: '-4px',
+                      }}
+                    />
+                  </div>
+                  <div className="avatar__intro padding-top--sm">
+                    <div className="avatar__name">Brody</div>
+                    <small className="avatar__subtitle">
+                      <a href="https://github.com/transcollines">
+                        Transcollines
+                      </a>
+                    </small>
                   </div>
                 </div>
-                <p className="text--center text--italic padding-horiz--md">It's been a huge success. Not only do the timetables look fantastic, but I've had customer service agents tell me the interactive timetables are a total game changer and they make their jobs way easier.</p>
+                <p className="text--center text--italic padding-horiz--md">
+                  It's been a huge success. Not only do the timetables look
+                  fantastic, but I've had customer service agents tell me the
+                  interactive timetables are a total game changer and they make
+                  their jobs way easier.
+                </p>
               </div>
               <div className="col"></div>
             </div>