@guardian/mobile-apps-article-templates

Templates for articles on both iOS and Android next-gen apps

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
326Jun 10, 2021Feb 19, 2014Minified + gzip package size for @guardian/mobile-apps-article-templates in KB

Readme

Article Templates for Mobile Apps

npm version

Article templates used within the Guardian’s next-generation iOS and Android applications. This repo also contains documentation that describes the components and layouts used across these templates.

Requirements

  • A Mac or Linux computer.
  • NVM.
  • NodeJS. Install using nvm: nvm install v10.17.0. Remember to add nvm use v10.17.0 to your preferred shell startup file.
  • You may need to install npm globally npm install -g npm.
  • It is recommended you restart your shell to ensure changes added the startup file are applied.

Developing

Clone

$ git clone git@github.com:guardian/mobile-apps-article-templates.git

Install

$ cd mobile-apps-article-templates
$ npm install
  • If you get an error on this step regarding lib/node_modules/npm/node_modules/promise-retry/index.js or another module, running npm install -g npm and re-running npm install may fix it.

Running on iOS simulator

  • Checkout the branch you are developing against
  • Run npm run build
  • Checkout the ios-live project
  • Edit the package.json file in the root of ios-live, replacing the version of the @guardian/mobile-apps-article-templates dependency with the relative path of the local templates repo:
    "dependencies": {
      "@guardian/mobile-apps-article-templates": "file:../mobile-apps-article-templates"
    }
    

Running on Android simulator

  • Checkout the branch you are developing against
  • Run npm run build
  • Checkout the android-news-app/ project
  • Edit the package.json file in android-news-app/android-news-app/, replacing the version of the @guardian/mobile-apps-article-templates dependency with the relative path of the local templates repo:
    "dependencies": {
      "@guardian/mobile-apps-article-templates": "../../mobile-apps-article-templates"
    }
    

Building from S3 (iOS or Android)

  • Find the branch you want to test on teamCity
  • Click run to build the branch and upload to s3
  • You can find the s3 package in bundle-url.txt under artifacts

Update your package.json:

"dependencies": {
    "@guardian/mobile-apps-article-templates": "https://s3-eu-west-1.amazonaws.com/builds.gutools.co.uk/guardian-mobile-apps-article-templates-v1.0.190.tgz"
}

NPM scripts

NPM will provide the following services:

  • npm run test runs the JS unit tests from the test/spec/unit/ directory
  • npm run build builds JS/CSS assets, used on CI environment for building assets
  • npm run dev builds JS and CSS (with source maps).

Example templates

These are examples of the main templates used across apps:

Template Article
Article https://www.theguardian.com/cities/2019/may/31/madrid-set-to-end-clean-air-project-in-rightwing-power-switch
Podcast https://www.theguardian.com/news/audio/2019/may/31/trump-coming-to-see-the-queen-but-what-actually-happens-on-a-state-visit-podcast
Video https://www.theguardian.com/global/video/2019/may/17/labours-laura-parker-farage-winning-would-be-uks-worst-legacy
Gallery https://www.theguardian.com/film/gallery/2019/may/30/the-horror-apocalypse-now-unseen-in-pictures
Immersive https://www.theguardian.com/sport/2019/may/31/i-wouldnt-be-the-refugee-id-be-the-girl-who-kicked-ass-how-taekwondo-made-me
Liveblog https://www.theguardian.com/sport/live/2019/may/31/west-indies-v-pakistan-cricket-world-cup-2019-live
Immersive interactive https://www.theguardian.com/us-news/ng-interactive/2019/may/29/chemical-checkout-what-might-be-hiding-in-your-groceries
Photo essay https://www.theguardian.com/society/2019/may/31/amish-on-holiday-sarasota-florida-dina-litovsky-photo-essay
Guardian labs https://www.theguardian.com/the-abcs-of-recruiting-teachers-remotely/2020/may/01/the-new-rules-of-remote-recruiting-how-to-prepare-for-an-online-interview

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.