No description, website, or topics provided.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
data
gulp-tasks
src
svg
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
bakeDataFiles.js
curated.txt
gulpfile.js
package.json
report-error.js

README.md

2016-04-06_moments

This project was generated with slush-globeapp. Consult its README for more information.

Please note: do not reproduce Boston Globe logos or fonts without written permission.

Setup

Clone repo and run npm i.

If pulling from google or methode, run the command(s) below to stay up-to-date:

gulp fetch-google and gulp fetch-methode.

To start the local server, run gulp.

How to bake new data

  • Edit data/whitelist.json
  • Run npm run bakeData

Copy

You can pull copy from either Methode or a Google Doc.

Methode

So you want to tussle with Methode huh? You are brave. Fill out config.js like such:

	...
	methode: {
		section: 'Metro',
		story: [{slug: 'BGCOM-apps-test'}]
	}

This pipes text and images from Methode into graphic.hbs and downloads the images locally (at multiple resolutions if desired). If you are using Methode for copy, be sure to add src/html/partials/graphic/graphic.hbs and your methode image directory to the .gitignore file.

Running gulp fetch-methode at any point will pull down the latest.

Methode image options:

imageDirectory

Takes a string. The location of the folder you want to put these images. The default is assets/, so anything entered will be appended to that. The folder must exist before you run the gulp command.

Example:

imageDirectory: 'img'

imageLibrary

Takes a string. The responsive image library you want to use instead of plain old img elements. Possible values include: picturefill, lazy-picturefill, imager. You are responsible for setting up the JavaScript to make them work. (instructions tbd)

Example:

imageLibrary: 'picturefill'

imageSizes

Takes an array of numbers (low to high). Defaults to [1200]. If using a responsive image library, it takes 1 or more values. With lazy-picturefill, make sure the first value is 371.

Example:

imageSizes: [371, 585, 1200, 1920]

Available sizes include: 371, 460, 585, 835, 960, 1200, 1920.

imageClass

Boolean value true or false to give different images from Methode a distinguising class name.

Example:

imageClass: true

You must include a version of picturefill in base-js.hbs (or install via npm if using webpack). If doing lazy load, then also include lazysizes.

Google Doc

Using a shared google doc for all copy for an interactive is recommended. The app uses ArchieML as a micro CMS.

Setup google doc

  • Create a google doc (outside of Globe domain)
  • Publish to web: file -> publish to web
  • Make public: share button -> advanced -> change "private only you can access" to "public on the web"
  • In the address bar, grab the ID
    • ...com/document/d/ 1IiA5a5iCjbjOYvZVgPcjGzMy5PyfCzpPF-LnQdCdFI0 /edit
  • In config.js paste in the ID

If the data is too sensitive or a google doc is overkill, you can update data/copy.json directly.

Running gulp fetch-google at any point will pull down the latest.

Fonts

The only two fonts loaded by default are Miller regular and Benton bold. To load additional fonts you must add info to two places. Follow the current examples in the existing files.

  • src/css/config.styl
  • src/js/utils/misc/setupDefaultApps.js

In main.styl:

set-font('benton-regular')

In *setupDefaultApps.js:

loadFont([
	...
	{ family: 'Benton', suffix: 'regular', weight: 400 },
])

To set a font, simply add the class name to the element following the pattern '.family-style' (ex. .benton-regular)

Available fonts:

  • Benton (regular, bold)
  • Benton-Cond (regular)
  • Benton-Comp (regular)
  • Miller (regular, bold)
  • Miller-Banner (regular, italic)

Teasers

Run gulp fetch-teaser to pull down the teaser information (based on urls in meta.json).

SEO and Analytics

Fill out data/meta.json, the bare minimum needed for seo, analytics, and business.

{
	"title": "Graphic title",
	"author": "Author name",
	"description": "Description of graphic",
	"keywords": "Comma, delimited, for, seo",
	"url": "https://apps.bostonglobe.com/graphics/path/to/graphic",
	"imageUrl": "https://apps.bostonglobe.com/graphics/path/to/image",
	"section": "Metro",
	"sectionUrl": "https://bostonglobe.com/metro",
	"headerColor": "",
	"credits": "",
	"teasers": [],
	"meter": true,
	"socialConnect": true,
	"ads": false
}
  • headerColor (defaults to white): "dark" or "transparent"
  • credits text of who made this
  • teasers: array of urls

Deploy

Step 1: gulp

Step 2: publish assets

  • In Terminal, connect to shell (your username is usually first initial last name): ssh rgoldenberg@shell.boston.com.
  • Navigate to your graphic directory: cd /web/bgapps/html/graphics/[year]/[month]/[graphic-name].
  • Run the command upload * in the root and each subdirectroy. (ex. cd css, then upload * to upload all files in that folder).

Public url

  • https://apps.bostonglobe.com/graphics/[year]/[month]/[graphic-name]
  • A zipped archive is also pushed to apps. It has the full unminified code for the future when gulp and stuff are fossils.