@dagilleland/article-website

Article Website

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

Usage

• 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': 'https://npmcdn.com/@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="GoodSoil.github.io" rootPath="/Programming-0101" bugReportUrl="https://github.com/GoodSoil/Programming-0101/issues/new"></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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" />

Customizing Layout Styles

TBA

About.json Format

Sample:

{
    "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" }
    ]
}

home.html

Sample:

<!-- This page assumes it is in a Bootstrap 3.x site -->

<header class="jumbotron">
  <h1>Main Home Page</h1>
  <p>Some info...</p>
</header>
<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>
</div>

404-message.html

Sample:

<h1>404</h1>
<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

Sample:

<article>
  <header>
    <img src='http://lorempixel.com/900/200/nature/8' />
    <h1>Styling Your Course Notes</h1>
    <p></p>
  </header>
  <section>
    <h2>Bootstrap 3</h2>
    <p></p>
  </section>
</article>