closing up on release

victorjonsson · Apr 12, 2014 · 0ab2f26 · 0ab2f26
1 parent e9a2833
commit 0ab2f26
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,21 @@
 # One-Page Generator
 
-OPgen is a small command line tool that can generate one-page websites (flat file). Organize your pages in separate files and **OPgen** will collect their content and insert them in your template (_index.html).
+OPgen is a small command line tool that can generate one-page websites (flat file). Organize your pages in separate
+files and **OPgen** will collect their content and insert them in your template (index.mustache).
 
 **Example:**<br />http://formvalidator.net/
 
 ## Setup
 
 1. Clone this project where suiteable on your server.
 2. Run `$ pip install pystache`.
-3. That's it! Add your own pages to the pages directory and generate the website by calling `$ python generator.py` in your console. Use the flag `-w` if you want **OPgen** to automatically generate the website when you make an edit to your project.
+3. That's it! Add your own pages to the pages directory and generate the website by calling `$ python generator.py` in your console.
+Use the flag `-w` if you want **OPgen** to automatically generate the website when you make an edit to your project.
 
 ## CLI
 
 ```
-Usage: generator.py [<flags>]
+Usage: python generator.py [<flags>]
 
 Options:
   -h, --help           show this help message and exit
@@ -23,3 +25,25 @@ Options:
   -w, --watch          Start monitoring file changes and generate the one-page
                        html file on the fly
 ```
+
+
+## jQuery Events
+
+Use the event `pageChange` to detect when the visitor has navigated to a new page
+
+```js
+$(window).on('pageChange', function(evt, page, args, section) {
+    // new page is entered
+});
+```
+
+The application will change to a "mobile" state when the window width is lower than 400px. Use the event `viewModeChange` to
+detect when this happens.
+
+```js
+$(window).on('viewModeChange', function(evt, newMode) {
+  // new mode will be either 'mobile' or 'desktop'
+});
+```
+
+Set the js variable `preventViewModeChange` to false if you want to prevent the view-mode change entirely.
diff --git a/index.mustache b/index.mustache
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
-    <title>My one-page-flat-file website</title>
     <meta charset="UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+    <title>My one-page-flat-file website</title>
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Abel" type="text/css"/>
     <link rel="stylesheet" href="static/style/main.css" type="text/css"/>
 </head>
@@ -32,25 +32,26 @@
 <div class="page-container">
 
     <div class="row-fluid" id="content">
-        <div class="span9">
-            {{#pages}}
-                <div class="page {{slug}}" id="{{slug}}">
-                    {{{content}}}
-                </div>
-            {{/pages}}
-        </div>
-        <div class="span3">
+        <div class="span3" id="side-col">
             <ul class="nav nav-list well" id="submenu-container">
                 {{#pages}}
                     {{#menu}}
                         {{#header}}
                             <li class="nav-header">{{header}}</li>
                         {{/header}}
                         <li>
-                            <a href="#{{slug}}">{{label}}</a>
+                            {{#has_sections}}
+                                <a href="#{{slug}}" class="menu-link">
+                                    {{label}}
+                                    <span class="arr">&#9660;</span>
+                                </a>
+                            {{/has_sections}}
+                            {{^has_sections}}
+                                <a href="#{{slug}}">{{label}}</a>
+                            {{/has_sections}}
                         </li>
                         {{#has_sections}}
-                            <li>
+                            <li class="submenu {{slug}}">
                                 <ul>
                                     {{#sections}}
                                         <li><a href="#{{slug}}">{{label}}</a></li>
@@ -62,6 +63,13 @@
                 {{/pages}}
             </ul>
         </div>
+        <div class="span9" id="main-col">
+            {{#pages}}
+            <div class="page {{slug}}" id="{{slug}}">
+                {{{content}}}
+            </div>
+            {{/pages}}
+        </div>
     </div>
 
     <footer id="footer">
@@ -73,7 +81,7 @@
 </div>
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script src="static/script/main.js"></script>
+<script src="static/script/main.min.js"></script>
 
 </body>
 </html>
diff --git a/pages/page2.html b/pages/page2.html
@@ -1,4 +1,4 @@
-<page-ref label="Second page" slug="cli" header="Header label" index="2" />
+<page-ref label="Second page" slug="second-page" header="Header label" index="2" />
 
 <h1>Lorem te ipsum</h1>
 

diff --git a/static/script/main.min.js b/static/script/main.min.js