Samples showing integration of Blackstar CMS with various web application technologies.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
angular2-seed
dotnet
html
.gitignore
readme.md

readme.md

Blackstar CMS Client Samples

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

angular2-seed

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.

Running the Blackstar CMS angular2 demo

  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

Steps used to integrate angular2 and Blackstar CMS

  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 
            });
        }
    }

HTML via HTTP

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.

HTML via the Blackstar CMS JavaScript Client

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

.NET (ASP.NET MVC)

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

Steps used to integrate Asp.NET MVC and Blackstar CMS

  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.