This package helps jump start special Tribune features and series that are built outside the regular CMS. It's Tribune-centric, but easy to update and transform to fit your needs. If you're working on a graphic, use the News Apps Graphic Kit. It is similar to the App Kit, but comes with NPR's pym.js to help you embed with a responsive <iframe>
.
- Live reloading and viewing powered by BrowserSync
- Compiling of Sass/SCSS with Ruby Sass
- CSS prefixing with autoprefixer
- CSS sourcemaps with gulp-sourcemaps
- CSS compression with csso
- JavaScript linting with jshint
- JavaScript compression with uglifyjs
- Template compiling with nunjucks
- Image compression with gulp-imagemin
- Asset revisioning with gulp-rev and gulp-rev-replace
Run this command in your project's folder:
curl -fsSL https://github.com/texastribune/newsapps-app-kit/archive/master.tar.gz | tar -xz --strip-components=1
Next, npm install
.
If this is your first time to ever use the kit, you need to authorize your computer: npm run spreadsheet/authorize
Add your Google sheet's ID to the config.json
, and override any sheets that need to be processed differently. (keyvalue
or objectlist
)
Now get to work!
Run the following command to start the development server:
gulp serve
Then visit http://localhost:3000 to see your work.
To use the commands to deploy your project to Amazon S3, you'll need to add a profile to your ~/.aws/config. It should look something like this:
[profile newsapps]
aws_access_key_id=YOUR_UNIQUE_ID
aws_secret_access_key=YOUR_SECRET_ACCESS_KEY
Run these commands to build and deploy:
gulp
npm run deploy
The project will deploy using the S3 bucket and slug found in your package.json
.
The graphics kit comes with an empty app/assets folder for you to store images, fonts and data files. The kit works best if you add these files to app/assets/images, app/assets/fonts and app/assets/data. These files will automatically be ignored by git hub, if added to the proper folders, to prevent a storage overload and to keep files locally that may have sensitive information in an open source project.
npm run spreadsheet/authorize
Allows your computer to interact with the scraper. Only needs to be done once. Any future uses of the graphic kit can skip this.
npm run spreadsheet/fetch
Pulls down the project's spreadsheet and processes it into the data.json
file.
npm run spreadsheet/edit
Opens the project's spreadsheet in your browser.
npm run deploy
Deploys the project.
npm run assets/push
Pushes the raw assets to the S3 bucket.
npm run assets/pull
Pulls the raw assets down to the local environment.