nicholasbracey / ca-frontend-renders

Starting point for implementing frontend modules from Amplience Content Authoring app.

Content Authoring Accelerators

This repository is intended as an accelerated starting point for implementing Amplience Content Authoring; it contains commonly used content types and the front end render templates required to display them.

Table of Contents

• Quick Start
• Demo
• Content Packages
• Generated Builds
• Dependencies
  • Helper scripts
  • 3rd-party libs
• Building minified and concatenated files
• Usage
  • Development
  • Tests
  • Bug / Feature Request

Quick Start

# Install dependencies 
$ npm install

# Build project
$ gulp

Open page with desired render, e.g. localhost:9100/dist/renders/image/index.html

Demo

http://demo.amplience.com/cademo/homepage/

Content Packages

Commonly used content types have been split up into separate packages. Individual packages can be found in src/renders, here you can edit any render templates or styling prior to running a build. You will also find everything necessary to set up the content types within your Amplience account and to display the resulting content. Each package has its own readme which will walk you through the necessary steps.

Generated Builds

Built renders are located in dist/renders folder. Here you can find unminified and minified css, uncompiled and precompiled handlebars templates, JSON content types for the Content Authoring app, README's, and the visualisation html page. The libs folder contains js dependencies for the render. Most of the files in the libs folder are taken from the dist/reusable folder, described below.

Dependencies

All JS dependencies for renders can be found in the dist/reusable folder. JS dependencies are composed of helper scripts and 3d party libs.

Helper scripts

Helper scripts can be found in src/reusable/js folder. Below is the list of scripts and their description:

• renderTypes.js contains ID's for all Content types, and can be found in the Content Authoring app. This file is needed when one render is composed of several others nested within it.
• utils.js is needed to make AJAX requests to retrieve render data. It also has several methods to troubleshoot the renders.
• hanldebars_helpers.js is used to declare various handlebars helpers, to solve different tasks for handlebars templates.

3rd-party libs

All 3d-party libs are pulled as npm dependencies and can be found in package.json

• handlebars.min.js is the handlebars templates library.
• cms-javascript-sdk.min.js is used to format the requested JSON content. Example usage:

amp.inlineContent(JSON.parse(data));

• showdown.min.js is used to parse text with markdown and convert it into semantic html.
• lory.js is a slider library and is used for slider renders.

Building minified and concatenated files

# Install dependencies 
$ npm install

# Build minified project
$ gulp buildAllMin

This will build minified and concatenated files for all renders.

Usage

Development

Want to contribute? Great! To fix a bug or enhance an existing module, follow these steps:

• Fork the repo
• Create a new branch on your fork (git checkout -b feature/improve-feature)
• Make the appropriate changes in the files
• Add changes to reflect the changes made
• Commit your changes (git commit -am 'Improve feature')
• Push to the branch (git push origin improve-feature)
• Create a Pull Request to the develop branch

Tests

$ npm run test

Bug / Feature Request

If you find a bug, kindly open an issue here by including your steps to reproduce and the expected result. If you’d like to request a new function, feel free to do so by opening an issue here