Catapult

We introduce to you a tiny client side framework for micro site.

Author: makekings.net

Current Version: 1.0.0 download catapult-min-1.0.0.js

Visit the Docs page for more info

The problem

When you create a micro site for you bio or your git repository or even for a client who wants something simple you are wandering:

How can i split the views ?

how can i create the routers ?

You realize that you cannot do it on client side only so you set up a hole apache2 with mysql server and use CMS, just for a 5 page site.

It's good to use wordpress, drupal or something else but you lose money and speed which this this not good.

The solution

Catapult has the following features that help you to do build a site:

• Mange your the routes
• Load other HTML files
• Passing variables from javascript to view
• Control your views with handlebars

Catapult works on client side only so you don't need to install nothing

How to start (step by step)

1. download the git repository.

   $ git clone https://github.com/makekings/catapult you can find the file /bin folder

   or

   download the last version from here

2. insert the handlebars script in your index file before the catapult.

      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
      <script src="./js/catapult.js"></script>

3. create two html files with any content in

   • ./views/home.html
   • ./views/about.html

4. Add the following div in you index.html body

      <div id="catapult"></div>

5. initialize the routers

   Catapult.router.routesSetup([
       {
           hash: "#/",
           handler: function(route, load){
               load(
                   {/* pass params to view */},
                   function(){
                       console.log("home page is loaded");
                   }
               )
           },
           file: "./views/home.html"
       },
       {
           hash: "#/about",
           handler: function(route, load){
               load(
                  {/* pass params to view */},
                   function(){
                       console.log("about page is loaded")
                   }
               )
   
   
           },
           file: "./views/about.html"
       }
   
   ]);

6. You are ready just change the url from #/ to #/about to see the changes or you can add this tiny menu in your index.html

      <ul>
          <li><a href="#/">Home</a></li>
          <li><a href="#/about">About</a></li>
      </ul>