Commit 899c2c75511d9167407ddd7bcecfb1604cf87bdb
Add README and example json
Intermediate commit to save the current work progress.
Added better README. Added a example.json file. Should make that more
comprehensive.
- README.md 89 --+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
- example.json 42 ++++++++++++++++++++++++++++++++++++++++++
- img/mouchak.jpg 0
- index.html 15 ------+++++++++
- js/framework.js 493 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- js/main.js 1 -
- js/mouchak.js 489 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
| | | | 1 | mouchak | | mouchak |
---|
| | 1 | Mouchak | 2 | ======= | 2 | ======= |
---|
3 | | 3 | |
---|
4 | A framework for building websites. | | A framework for building websites. |
---|
| | 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/ |
---|
| | | | | | 1 | [ |
---|
| | 2 | { |
---|
| | 3 | "name": "index", |
---|
| | 4 | "children": ["Motivation", "The JSON file"], |
---|
| | 5 | "title": "Mouchak", |
---|
| | 6 | "content": [ |
---|
| | 7 | { |
---|
| | 8 | "type": "image", |
---|
| | 9 | "src": "img/mouchak.jpg" |
---|
| | 10 | }, |
---|
| | 11 | { |
---|
| | 12 | "type": "text", |
---|
| | 13 | "title": "What's this?", |
---|
| | 14 | "data": "<p> Mouchak is a Javascript framework for building websites quickly.</p><p>It takes the components and the content of the website in a JSON format. The content in the JSON can be of type text or multimedia like images and videos.</p> It also has the capabilities to load external JS and CSS files to customize the website." |
---|
| | 15 | } |
---|
| | 16 | ] |
---|
| | 17 | }, |
---|
| | 18 | { |
---|
| | 19 | "name": "Motivation", |
---|
| | 20 | "title": "Motivation", |
---|
| | 21 | "children": [], |
---|
| | 22 | "content": [ |
---|
| | 23 | { |
---|
| | 24 | "type": "text", |
---|
| | 25 | "title": "Why Mouchak?", |
---|
| | 26 | "data": "Explanation of why we built this framework..." |
---|
| | 27 | } |
---|
| | 28 | ] |
---|
| | 29 | }, |
---|
| | 30 | { |
---|
| | 31 | "name": "The JSON file", |
---|
| | 32 | "title": "The JSON format", |
---|
| | 33 | "children": [], |
---|
| | 34 | "content": [ |
---|
| | 35 | { |
---|
| | 36 | "type": "text", |
---|
| | 37 | "title": "", |
---|
| | 38 | "data": "{ } Explain the JSON format here.." |
---|
| | 39 | } |
---|
| | 40 | ] |
---|
| | 41 | } |
---|
| | 42 | ] |
---|