Pacific Regional Council for Early Childhood Development

The web platform of UNICEF's Pacific Regional Council for Early Childhood Development.

How to run this site locally

Development

1. Install Node.js if you don't have it. The version this site uses is specified in the .nvmrc config file at the project root. (A package manager like Node Version Manager or asdf might be helpful.)
2. Run npm install
3. Get the Read-only authentication token from DatoCMS and copy it into an .env file: DATO_API_TOKEN=[paste here]
4. Run npm run setup to pull content from Dato CMS.
5. Run npm start to start a development server and build on code changes
6. Make pull requests to the dev branch

Deployment

The deploy command is npm run build. This site is hosted on Netlify; push or merge your changes to the remote main branch and it will automatically deploy.

Code style

• This site is built on Eleventy, a Node static site generator, using the "Shortcode components" pattern. We are using Nunjucks templates for pages, and Javascript functions for components.
• Client-side Javascript uses Alpine.js.
• The CSS is written in Sass (the Dart version), and follows Cube CSS conventions.
  • Class naming format: .[category prefix]-[partial name]-[variation], e.g. .u-border-top
  • Category prefixes are:
    • c for composition, e.g. .c-bookend
    • u for utility, e.g. .u-padding-top
    • b for block, e.g. .b-button
• Tabs not spaces. There's an .editorconfig file if you use that.

Linters

• Javascript is linted using ESlint, in the Standard style
• CSS is linted using Stylelint
• Config files for linters are in the project root (e.g. .eslintrc.json)

How to duplicate this stack for another site

• Clone Pacific
• Replicate Dato
  • Set up .env file with Dato key (see above)
  • Update content
• Set up Mailchimp
  • Update code in /source/components/MainFooter.js
• Set up Netlify
• Update Albatross url in Dato => Content => Resources => Resources index => Search => Endpoint
• Update package.json
• Update colors
  • /source/stylesheets/tokens/_color.scss
• Update fonts
  • /source/stylesheets/_fonts.scss
  • /source/stylesheets/tokens/_type.scss
• Update logos
  • /source/assets/images/
    • *-logo-icon.svg
    • *-logo-vertical.svg
    • *-logo-horizontal.svg
    • *-logo-horizontal-small.svg
  • /source/layouts/default.njk
  • /source/index.njk
  • /source/components/MainNav.js
• Update favicons using realfavicongenerator.net
  • /source/assets/images/favicons/