This repository contains a number of samples demonstrating the use of various Blackstar CMS clients.

• angular2-seed
• HTML via HTTP
• HTML via the Blackstar CMS JavaScript Client
• .NET (ASP.NET MVC)

The angular2-seed in this repository is a modified version of the Angular teams standard sample for Angular2.

It has been modified to populate the Home page with content sourced from Blackstar CMS.

1. Clone this repo and change to the angular2-seed directory

2. Start the server

   npm start

3. Point a browser at http://localhost:3000

1. Add the Blackstar CMS JavaScript Client

   npm install blackstar-cms-client

2. Add a typescript definition file (blackstar-cms-client.d.ts) for Blackstar CMS JavaScript client (included in the npm package).

3. Remove the hard coded content from home.html and add data-blackstar-name attributes with appropriate names:

   <h3 data-blackstar-name="home-title"></h3>
   <p data-blackstar-name="home-content"></p>

4. Create the content in the Blackstar CMS admin portal

5. Modify the Home component to reference the type definition file and fetch content from Blackstar CMS and bind it to the UI:

   /// <reference path="blackstar-cms-client.d.ts" />
   
   ...
   
   export class Home {
       constructor() {
           var blackstar = new Blackstar.Client('http://demo.blackstarcms.net/', { showEditControls: true });
           blackstar.get({ tags: ['angular2-seed-demo'] }).then(function (chunks) {
               blackstar.bind(chunks);     // bind by matching data-blackstar-name values to chunk names 
           });
       }
   }

Blackstar CMS content is accessed via HTTP, so you don't need to use one of the clients. The sample http-example.html accesses Blackstar CMS using the browsers fetch API. JQuery's AJAX methods would also work well.

javascript-api-example.html sample uses the Blackstar CMS JavaScript client to fetch content and bind it to the user interface.

Blackstar CMS content can be utilized by a server-side MVC framework like Asp.NET (or Ruby on Rails or Django or Express etc).

1. Install the Blackstar CMS .NET client from nuget

   > Install-Package Blackstar

2. Within the MVC controller request the required content (e.g. all content with the 'blackstarpedia' tag).

   public async Task<ActionResult> Index()
   {
       var client = new BlackstarClient("http://demo.blackstarcms.net");
       var content = await client.GetByTagAsync("blackstarpedia");
       return View(HomeModel.FromContentChunks(content));
   }

3. Within the view place the content in the correct locations.

   <h2>@Html.Raw(Model.smallerHeading)</h2>
   

   Note the use of Html.Raw to prevent the content from being escaped.