A clean Bootstrap blog theme created by Start Bootstrap
JavaScript HTML CSS PHP
Clone or download
Pull request Compare This branch is 4 commits ahead, 38 commits behind BlackrockDigital:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
components
css
img
js
less
mail
sam
vendor
.gitignore
LICENSE
README.md
about.html
contact.html
gulpfile.js
index.html
package.json
post.html
static.model.js

README.md

xgen.io - A SAM Implementation of the Clean Blog

Clean Blog is a responsive blog theme for Bootstrap created by Start Bootstrap. This theme features a blog homepage, about page, contact page, and an example post page along with a working node.js contact form.

Getting Started

To begin using this template, choose one of the following options to get started:

  • Clone the repo: git clone https://github.com/jdubray/startbootstrap-clean-blog.git
  • Fork the repo

The original code can be found on Start Bootstrap

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

Creator

Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

This version of the project was created by and is maintained by Jean-Jacques Dubray, Founder of xgen.io

SAM Pattern

This sample was modified to illustrate the SAM pattern. The updated sample features a back-end which provides the "model" initial value.

The back-end is a node.js application, located in the ./app/ directory. The blog metadata can be specified in the ./app/data.js file.

The SAM pattern is implemented as a single page application. The structure of the pattern is implemented in the ./sam/ directory:

  • actions.js
  • model.js
  • state.js
  • view.js

This implement is generic and can be reused across project. The pattern is initialized in index.html

// wire the elements of the pattern as a reactive look action->model->state->view
state.init(view,theme, display, components) ;
model.init(state, components, options) ;
actions.init(model.present, options) ;
components.actions.forEach(function(action) {
    actions[action.name] = function(data, present) {
        return action.implementation(data, present, model) ;
    }
}) ;

view.init(model,theme(options))

// wire SAM actions to the global variable a 
a = actions ;

// render initial state
state.representation(model) ;

The display function is in charge of rendering the State representation into the Single Page structure (header, page, footer).

var display = function(representation) {
    preparePage(model) ;
    if (representation.header) { document.getElementById('header-representation').innerHTML = representation.header ; }
    if (representation.page) { document.getElementById('page-representation').innerHTML = representation.page ; }
    if (representation.footer) { document.getElementById('footer-representation').innerHTML = representation.footer ; }
    initElements() ;
    checkBackButton(model) ;
}

A simple page transformation lifecycle is implemented:

  • preparePage (for rendering)
  • render state representation
  • initEments of the page (e.g. datePicker)
  • checkBackButton

The sample is written in ES6 and transpiled at load time with Google Traceur.

To install and run the back-end (assuming you have already installed node.js):

$  cd app/
$  npm install
$  node server-model.js

Open a browser at: http://localhost:5625/html/

The implemenation is designed to work with an atom 2.0 feed and currently configured to fetch the GitHub feed (./config/default.json)

Copyright and License

Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license. Copyright 2016 Jean-Jacques Dubray Code released under the MIT license.