Static site improvements (remoteintech#467)

* Improve logging messages

* Make local development easier; improve docs

* Combine page-specific CSS files into one

This file is small, and later it will also contain styles that need to
apply to the whole site.

* Add "Edit this page on GitHub" links

* Remove an unneeded element

* Assign table cell classes during parsing

This way it will work with JavaScript disabled too.

* Match font weights with other styles

* Always show hovered links in gray

Before this change, already-visited links would stay red on hover.

* Minor CSS tweaks

* In main table, show company names in bold

* Add mobile styles for companies table

* Remove a couple more empty profile sections

bin/build-site.js

@@ -95,11 +95,20 @@ function copyAssetToBuild( filename, content = null ) {
 	return '/assets/' + destFilename;
 }
 
+/**
+ * Return a URL to edit a page on GitHub.
+ */
+function githubEditUrl( filename ) {
+	return (
+		'https://github.com/remoteintech/remote-jobs/edit/master/'
+		+ filename
+	);
+}
+
 /**
  * Write a page's contents to an HTML file.
  */
 function writePage( filename, pageContent ) {
-	console.log( 'Writing page "%s"', filename );
 	filename = path.join( siteBuildPath, filename );
 	if ( ! fs.existsSync( path.dirname( filename ) ) ) {
 		fs.mkdirSync( path.dirname( filename ) );
@@ -183,6 +192,8 @@ async function buildSite() {
 		url: copyAssetToBuild( 'wpcom-blog-styles.css', wpcomStylesheetContent ),
 	}, {
 		url: '//fonts.googleapis.com/css?family=Source+Sans+Pro:r%7CSource+Sans+Pro:r,i,b,bi&subset=latin,latin-ext,latin,latin-ext',
+	}, {
+		url: copyAssetToBuild( 'site.css' ),
 	} ];
 	const scripts = [];
 	if ( wpcomEmojiScript ) {
@@ -192,46 +203,51 @@ async function buildSite() {
 	}
 
 	// Set up styles/scripts for specific pages
-	const indexStylesheets = [ {
-		url: copyAssetToBuild( 'companies-table.css' ),
-	} ];
 	const indexScripts = [ {
 		url: '//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js',
 	}, {
 		url: copyAssetToBuild( 'companies-table.js' ),
 	} ];
-	const profileStylesheets = [ {
-		url: copyAssetToBuild( 'company-profile.css' ),
-	} ];
 
 	// Generate the index.html file from the main README
 	// TODO: Build this page and its table dynamically; more filters
 	const readmeTemplate = swig.compileFile(
 		path.join( sitePath, 'templates', 'index.html' )
 	);
+	console.log( 'Writing main page' );
 	writePage( 'index.html', readmeTemplate( {
-		stylesheets: stylesheets.concat( indexStylesheets ),
+		stylesheets,
 		scripts: scripts.concat( indexScripts ),
 		pageContent: data.readmeContent,
+		editUrl: githubEditUrl( 'README.md' ),
 	} ) );
 
 	// Generate the page for each company
 	const companyTemplate = swig.compileFile(
 		path.join( sitePath, 'templates', 'company.html' )
 	);
-	data.companies.forEach( company => {
+	process.stdout.write( 'Writing company pages..' );
+	data.companies.forEach( ( company, i ) => {
 		const dirname = company.linkedFilename.replace( /\.md$/, '' );
 		const missingHeadings = Object.keys( headingPropertyNames )
 			.filter( h => ! company.profileContent[ h ] );
 
 		writePage( path.join( dirname, 'index.html' ), companyTemplate( {
-			stylesheets: stylesheets.concat( profileStylesheets ),
+			stylesheets,
 			scripts,
 			company,
 			headingPropertyNames,
 			missingHeadings,
+			editUrl: githubEditUrl( 'company-profiles/' + company.linkedFilename ),
 		} ) );
+
+		if ( i % 10 === 0 ) {
+			process.stdout.write( '.' );
+		}
 	} );
+
+	console.log();
+	console.log( 'Site files are ready in "site/build/"' );
 }
 
 buildSite();

bin/serve-site.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+const { spawnSync } = require( 'child_process' );
+const path = require( 'path' );
+
+// Build the static site
+const result = spawnSync( process.execPath, [
+	path.join( __dirname, 'build-site.js' ),
+], { stdio: 'inherit' } );
+if ( result.error ) {
+	throw result.error;
+}
+if ( result.status > 0 ) {
+	process.exit( result.status );
+}
+
+// Serve the static site locally
+process.argv.splice( 2, 0, path.join( __dirname, '..', 'site', 'build' ) );
+require( 'http-server/bin/http-server' );

company-profiles/the-wirecutter.md

@@ -8,10 +8,6 @@ need—tableware or TV or air purifier—we make shopping for it easy by telling
 you the best one to get. The site was founded in September 2011 and was
 acquired by The New York Times Company in October 2016.
 
-## Company size
-
-(TODO)
-
 ## Remote status
 
 Some employees work full-time from our office in New York City and some work
@@ -21,10 +17,6 @@ remotely from other parts of the US.
 
 United States.
 
-## Company technologies
-
-(TODO)
-
 ## Office locations
 
 New York City

lib/index.js

@@ -224,6 +224,11 @@ exports.parseFromDirectory = contentPath => {
 			);
 		}
 
+		// Set classes on table cells
+		$td.eq( 0 ).attr( 'class', 'company-name' );
+		$td.eq( 1 ).attr( 'class', 'company-website' );
+		$td.eq( 2 ).attr( 'class', 'company-region' );
+
 		// Rewrite company profile link to the correct URL for the static site
 		if ( $profileLink.length ) {
 			$profileLink.attr(

package.json

@@ -3,7 +3,14 @@
     "validate": "bin/validate.js",
     "test": "mocha",
     "build": "bin/build-site.js",
-    "serve": "http-server site/build/"
+    "serve": "http-server site/build/",
+    "start": "bin/serve-site.js"
+  },
+  "nodemonConfig": {
+    "ext": "js,md,html,css",
+    "ignore": [
+      "site/build/"
+    ]
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.2",

site/README.md

@@ -1,5 +1,7 @@
 # Static site generator
 
+## Overview
+
 This folder contains the template files needed to generate the static site for
 this repo ( https://remoteintech.company/ ).
 
@@ -17,10 +19,26 @@ the site builder code uses
 [`swig`](https://github.com/node-swig/swig-templates)
 as an HTML templating engine.
 
-To develop against the site locally, you can run this command:
+## Development
+
+If you submit any changes as a pull request, GitHub and Netlify will
+automatically validate, build, and deploy a preview of the site for you.
+
+For longer-running or more complicated changes, though, it can be useful to run
+the site locally.  To make this work, you should be using the version of
+Node.js specified in the `.nvmrc` file.  Other versions may work but have not
+been tested.
+
+Run `npm install` to install dependencies.
+
+Then run `npm start` to build and serve the site locally.
+
+You can also use `nodemon` to automatically rebuild and reload the site when
+you make changes:
 
 ```sh
-npm run build && npm run server
+npm install -g nodemon
+nodemon bin/serve-site.js
 ```
 
 If you just want the data structure used to build the site, you can do this:

site/assets/companies-table.js

@@ -12,15 +12,6 @@ function setupFilters() {
 	var tbody = table.querySelector( 'tbody' );
 	tbody.setAttribute( 'class', 'list' );
 
-	var bodyRows = Array.prototype.slice.call( tbody.querySelectorAll( 'tr' ) );
-
-	bodyRows.forEach( function( tr ) {
-		var tds = tr.querySelectorAll( 'td' );
-		tds[ 0 ].setAttribute( 'class', 'company-name' );
-		tds[ 1 ].setAttribute( 'class', 'company-website' );
-		tds[ 2 ].setAttribute( 'class', 'company-region' );
-	} );
-
 	var filterInput = document.createElement( 'input' );
 	filterInput.type = 'text';
 	filterInput.placeholder = 'Filter Companies';
@@ -50,7 +41,10 @@ function setupFilters() {
 		}
 	);
 
-	table.setAttribute( 'class', 'has-filter' );
+	document.body.setAttribute(
+		'class',
+		document.body.getAttribute( 'class' ) + ' filters-enabled'
+	);
 }
 
 document.addEventListener( 'DOMContentLoaded', function( event ) {