1
Mouchak
2
=======
3
4
A Javascript framework for building single page websites or web apps.
5
6
It takes the content of the website as a JSON. The JSON file can contain
7
text or multimedia content(images, audio, video).
8
9
Mouchak can also load external JS/CSS files through the JSON. This gives the website to load
10
plugins to enhance/customize the website either through JS or CSS.
11
12
13
How to use it
14
=============
15
16
Either download this codebase or git clone the repo.
17
18
Once you have downloaded or cloned the repo, load the index.html file in your browser.
19
This loads the example content from example.json.
20
21
Use the index.html file as the boilerplate file of your index.html file.
22
Modify the code in the script tag, which loads the example.json, and change
23
the URL to point to your JSON file.
24
Remember the JSON files is loaded in the client side. Hence your JSON file should
25
be from the same domain where this app is loaded.
26
See cross-domain policies for details.
27
28
The global object for this framework is exposed as the variable M. This can be
29
inspected in the console.
30
31
The M.filterTags() method takes an array of strings representing the tags to filter.
32
It returns an array of the content objects with the matched tags.
33
34
35
How it works
36
============
37
38
It takes the content of the site in the form of JSON. The JSON should describe the content
39
(in terms of type like text, audio or image) and also provide the content (in case of text
40
the content is as it is, in case images urls are given). The JSON should also describe the
41
content semantically by giving it tags.
42
More details about the JSON format in example.json file.
43
44
The framework provides an easy way to pull up related content by just specifying the tags.
45
46
Backbone models are used to model the content. Different content has different types.
47
Again all types are derived from one base type.
48
Each model has a corresponding view as well. The views manage how the content are rendered.
49
50
Each page is made of multiple content (content objects).
51
Pages are also modeled in Backbone models and their view is managed via Backbone views.
52
53
The framework also use Backbone router to handle client side routing.
54
55
56
What it uses
57
============
58
59
Mouchak uses HTML5 Boilerplate and Bootstrap project as a boilerplate code for the website.
60
Mouchak also leverages powerful libraries like Backbone.js and Underscore.js to manage and render
61
content. This gives more flexibility to the content of the website.
62
63
The main code resides in js/mouchak.js. The HTML markup it uses is in index.html.
64
65
Javascript libary files are in js/lib. We use backbone.js, underscore.js and jquery in this
66
framework.
67
68
Boilerplate code/files:
69
404.html - error template
70
crossdomain.xml - cross-domain policies to be obeyed by the client
71
css/bootstrap.css - boilerplate css
72
css/normalize.css - boilerplate css
73
css/main.css - boilerplate css
74
humans.txt - write your own credits
75
img/ - directory for images
76
robots.txt - crawl spider rules
77
78
79
Support
80
=======
81
82
Email to rayanon at janastu dot org for any kind of feedback.
83
84
85
Issues
86
======
87
88
Report issues at http://bugzilla.pantoto.org/bugzilla3/