create sites and apps with HAML, CoffeeScript and Sass on the clientside - status: the concept is something but the project needs a bit of a rewrite :)
JavaScript CoffeeScript Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
coffee
deploy
fivetastic
sass
views
.gitignore
.htaccess
Gemfile
Gemfile.lock
Guardfile
Rakefile
Readme.md
TODO.md
config.ru
favicon.ico
fivetastic.rb
index.html
routes.json

Readme.md

FiveTastic

create sites and apps with HAML, CoffeeScript and Sass on the clientside

the content it's static - you can deploy everywhere!

http://fivetastic.org

Intro:

To start your own site/app with FiveTastic:

  • fork/download fivetastic (forking is good so you can update to the latest version fairly easily)
  • use a standard webserver like apache to host it or follow the following rules to launch a ruby rack server

launch server:

rackup

note: if you don't have rack installed

gem install bundler
bundle install

in the app's folder

then visit http://localhost:9292

Guide:

What to edit:

all the files outside fivetastic folder are your app!

so to edit the template/layout you want to go to:

haml/layout.haml

for the default page:

haml/index.haml

Routes

Routes are defined in routes.json as a JSON hash.

{
  "/":            "index",    # this maps the root url to a page named index
  "/page":        "page",     # standard mapping
  "/category/*":  "category"  # star route, maps all urls starting with '/category/'
}

Libraries:

  • Coffeescript
  • HAML
  • SASS
  • JQuery/Zepto

Features:

  • loads HAML and SASS files asynchronously (ajax)
  • has layout file (reuse html)
  • handles history changes (pushState/onpopstate)
  • integrates editor to develop directly into the browser (CodeMirror editor, the files are saved into the browser's localStorage)
  • host it everywhere! (it's only html and js)
  • supports PHP pages

browsers supported:

  • Chrome
  • Safari 4+
  • FF 3.6+
  • IE 7+

Easy hosting!

It's static! host it everywhere!

You can apache, nginx etc..

note: for apache you need to copy the .htaccess file and have mod_rewrite module enabled

Deploy:

host it on your usual web server (apache, nginx etc) by putting this in your .htaccess or virtualhost

apache:

see .htaccess

nginx:

if (!-e $request_filename) {
  rewrite ^.+$ / break;
}

Cloud9 IDE Integration

To make a fivetastic app and develop it easily online:

  • fork the makevoid/fivetastic repo (should be this one)
  • go into your cloud9 account on http://cloud9ide.com
  • make sure github integration is activated
  • choose the project from the list and clone it
  • open the project
  • in the shell/cli at the bottom of the editor type:
npm install coffeee-script
  • press the '> run' button or 'Run Configurations...' to open the run configurations
  • add a new run configuration
  • choose a name and put "deploy/cloud9.js" as 'File path'
  • press '> run'
  • click on the first url/link appeared in console (should be something like 'http://fivetastic.username.cloud9ide.com')

you should see fivetastic default index page, you can remove the default haml/sass and roll your own!

enjoy!

default folders and files:

/
/assets/
  app.css
  app.js
  imgs
/coffee/
  app.coffee
/haml/
  index.haml
  layout.haml
/sass/
  app.sass
  mixins.sass

vendored files:

coffeescript: http://jashkenas.github.com/coffee-script/extras/coffee-script.js haml: https://github.com/uglyog/clientside-haml-js/tree/master/lib jquery: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Seo support

Use a proxy that matches the user agent and redirects the request to another server that has your content and builds a landing page, this will be a feature of fiveapi.com

TODO:

  • specs + rewrite using better modularity (in progress..)

  • handle 404s

  • relative paths support (to try it without a web server)

  • update codemirror

  • support pushstate in IE8 trough https://github.com/balupton/history.js

  • full router support

  • markdown support

  • rake task to generate RapidWeaver Template

  • update vendored files

  • add mustache support

Contributing:

  • fork the project, make changes
  • run tests in your browser (see specs section below)
  • send me a pull request

things to know

if you make changes to javascript files, run:

rake compile_js

to update vendor/all.js that contains all vendored libs and init.js, all in one file (for coffee files is not needed because they're compiled clientside)

Specs:

setup test environment:

FiveTastic uses jasmine-headless-webkit ruby gem to run js specs, more infos here: http://johnbintz.github.com/jasmine-headless-webkit/

Basically you have to install Qt for osx:

brew install qt

and then :

cd fivetastic
bundle

run specs:

ruby (rspec):

cd fivetastic
time rspec spec/acceptance/fivetastic_spec.rb

js (jasmine):

cd fivetastic
time jasmine-headless-webkit -j spec/jasmine.yml -c