node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


Article Website

This package has the framework for a simple Angular 2 rc6 website with Bootstrap 3 styling. Currently at version 0.0.4.


  • Import the package via npm npm install --save @dagilleland/article-website @dagilleland/angular2-code-quote prismjs
  • Modify your systemjs.config.js to include the following
    • Include the following line in the map: '@dagilleland': '',
    • Include the following line in the packages: '@dagilleland': { defaultExtension: 'js' },
  • Add the ArticleWebsiteModule and LayoutConfigService to your main application module
    • import { ArticleWebsiteModule, LayoutConfigService } from '@dagilleland/article-website/index';
    • Inside of the @NgModule decoration,
      • add ArticleWebsiteModule to the array of imports along with HttpModule from @angular/http
      • add LayoutConfigService to the array of providers
  • Add the <site-layout><site-layout> component to your main application component's template
    • e.g.: <site-layout domainUrl="" rootPath="/Programming-0101" bugReportUrl=""></site-layout>
  • Add an html file to the root of the site called 404-message.html
  • Add an html file to the root of the site called home.html
  • Add a file called about.json in a folder called docs
  • In your index.html, do the following:
    • Set your <base href='/'> in the head portion
    • Include references to the Bootstrap CSS files. e.g.:
<!-- Bootstrap 3 -->
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="" />

Customizing Layout Styles


About.json Format


    "area": [
        {"id": 1, "title": "Getting Started"},
        {"id": 2, "title": "About"}
    "pages": [
        { "id": "1-aa", "areaId": 1, "version": "draft", "title": "Setup", "tooltip": "Getting Started - The Setup Phase", "docPath": "docs/setup/index.html" },
        { "id": "1-ab", "areaId": 1, "version": "draft", "title": "Styling", "tooltip": "Customizing the Site Styles", "docPath": "docs/setup/styling.html" },
        { "id": "2-aa", "areaId": 2, "version": "draft", "title": "About", "tooltip": "Overview of this template", "docPath": "docs/about/index.html" },
        { "id": "2-ab", "areaId": 2, "version": "draft", "title": "Colophon", "tooltip": "Customizing the Site Styles", "docPath": "docs/about/colophon.html" }



<!-- This page assumes it is in a Bootstrap 3.x site -->
<header class="jumbotron">
  <h1>Main Home Page</h1>
  <p>Some info...</p>
<div class="row">
  <div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, eius. Aliquam eaque cum laudantium fugit necessitatibus, unde a debitis saepe et nisi dicta voluptatibus, rerum assumenda, officiis, iusto similique dolorum.</div>



<p>The page/content you are looking for cannot be found.</p>

Hosting as a GitHub Pages Site

tba - basically, use npmcdn instead of referencing node_modules....

Authoring Articles/docs


    <img src='' />
    <h1>Styling Your Course Notes</h1>
    <h2>Bootstrap 3</h2>