added web server and sync.sh as default starting task to gulpfile

bin/build.py

@@ -92,8 +92,20 @@ def generate_html(book, toc, book_name):
       shutil.rmtree(book_build_d, ignore_errors=True)
    os.mkdir(book_build_d)
 
-   # main markdown book file where all pages will be merge
-   book_md_f = os.path.join(book_build_d,book_name+'.md')
+   #
+   # create main html dom from template
+   template_f = open("templates/main.tpl.html", "r")
+   template_html = template_f.read()
+   template_dom = BeautifulSoup(template_html, 'html.parser')
+   # replace title
+   template_dom.html.head.title.contents[0].replaceWith(book_name)
+   # get story div
+   story_dom = template_dom.find('div', {"id":"my-story"})
+
+   #
+   # loop through pages to convert them to html and add it to main html file
+   book_build_d_pages = os.path.join(book_build_d,'pages')
+   os.mkdir(book_build_d_pages)
 
    for p in toc:
       # print(toc[p]['file'])
@@ -105,45 +117,32 @@ def generate_html(book, toc, book_name):
          continue
       # print('in_f : '+in_f)
 
-      md_f = open(in_f, 'r')
-      with open(book_md_f, 'a') as fp:
-         fp.write(md_f.read())
-
-
-   # generate html with pandoc
-
-   # create the html file name
-   html_f = book_md_f.replace('.md', '.html')
-   # print('out_f : '+out_f)
-
-   # pandoc options
-   # filters = []
-
-   pdoc_args = ['-s',
-                '--mathjax',
-                '--smart',
-                '--css=../../assets/fonts/amiri/amiri.css',
-                '--css=../../assets/css/dist/main.css',
-                '--include-before-body=templates/top.tpl.html',
-                '--include-after-body=templates/bot.tpl.html',
-                '--include-after-body=assets/lib/jquery.min.js',
-                '--include-after-body=assets/js/setup.js',
-                '--include-after-body=assets/js/html2print.js',
-                '--include-after-body=assets/js/script.js',
-                '--include-after-body=templates/end.tpl.html']
-
-   # pandoc command line
-   # print(pypandoc.get_pandoc_version())
-   output = pypandoc.convert_file(book_md_f,
-                            to='html5',
-                            format='md',
-                            extra_args=pdoc_args,
-                           #  filters=filters,
-                            outputfile=html_f)
+      # out_f = os.path.join(book_build_d_pages, toc[p]['file'].replace('/', '-').replace('.md', '.html'))
+      # print('out_f : '+out_f)
+
+      pdoc_args = ['--mathjax',
+                   '--smart']
+
+      output = pypandoc.convert_file(in_f,
+                               to='html5',
+                               format='md',
+                               extra_args=pdoc_args)
+                              #  filters=filters,
+                              #  outputfile=out_f)
+
+      # append html story page to template_dom
+      story_page = BeautifulSoup('<div class="story-page"></div>')
+      story_page.div.append(BeautifulSoup(output))
+      story_dom.append(story_page)
+
+   # create main html file from filled template html dom
+   book_html_f = os.path.join(book_build_d,book_name+'.html')
+   with open(book_html_f, 'w') as fp:
+      fp.write(template_dom.prettify())
 
    book_toc = {
       'label':book_name,
-      'file':html_f
+      'file':book_html_f
    }
 
    global _TOC

gulpfile.js

@@ -6,6 +6,17 @@ var sass = require('gulp-sass');
 var rename = require('gulp-rename');
 var shell = require('gulp-shell')
 var watch = require('gulp-watch');
+var webserver = require('gulp-webserver');
+
+gulp.task('webserver', function() {
+  gulp.src('.')
+    .pipe(webserver({
+      livereload: false,
+      directoryListing: false,
+      open: false,
+      fallback: 'index.html'
+    }));
+});
 
 gulp.task('scss', function () {
   gulp.src('./assets/css/main.scss')
@@ -21,12 +32,17 @@ gulp.task('gui', function () {
     .pipe(gulp.dest('./assets/css/dist'));
 });
 
+gulp.task('sync', shell.task([
+  './bin/sync.sh'
+]));
+
 gulp.task('build', shell.task([
   './bin/build.py'
 ]));
 
+
 // default gulp task
-gulp.task('default', ['scss', 'gui'], function() {
+gulp.task('default', ['webserver', 'sync', 'scss', 'gui', 'build'], function() {
   gulp.watch('./assets/css/**/*.scss', ['scss']);
   gulp.watch('./assets/css/gui.scss', ['gui']);
   gulp.watch(['bin/build.py', './assets/css/**/*.scss', './assets/js/**/*.js', './templates/*.tpl.html'], ['build']);

package.json

@@ -16,6 +16,7 @@
     "gulp-sass": "^2.0.1",
     "gulp-shell": "^0.5.2",
     "gulp-watch": "^4.2.4",
+    "gulp-webserver": "^0.9.1",
     "gulp-wrap": "^0.11.0"
   },
   "dependencies": {}

templates/bot.tpl.html

@@ -1,7 +0,0 @@
-
-  </div>
-  <!-- // my-story -->
-</div>
-<!-- // stories -->
-
-<script type="text/javascript">

templates/end.tpl.html

@@ -1,2 +0,0 @@
-
-</script>

templates/main.tpl.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Html 2 print</title>
+
+    <link rel="stylesheet" href="/assets/fonts/amiri/amiri.css">
+    <link rel="stylesheet" href="/assets/css/dist/main.css">
+
+  </head>
+  <body>
+    <!-- PAGES -->
+    <div id="pages">
+        <div id="master-page" class="paper">
+            <div class="page">
+                <section class="header"></section>
+                <section class="body recipient"></section>
+                <section class="footer"></section>
+            </div>
+        </div>
+    </div>
+    <div id="stories">
+      <div id="my-story">
+
+      </div>
+      <!-- // my-story -->
+    </div>
+    <!-- // stories -->
+
+    <script src="/assets/lib/jquery.min.js" charset="utf-8"></script>
+    <script src="/assets/js/setup.js" charset="utf-8"></script>
+    <script src="/assets/js/html2print.js" charset="utf-8"></script>
+    <script src="/assets/js/script.js" charset="utf-8"></script>
+  </body>
+</html>

templates/top.tpl.html

@@ -1,12 +0,0 @@
-<!-- PAGES -->
-<div id="pages">
-    <div id="master-page" class="paper">
-        <div class="page">
-            <section class="header"></section>
-            <section class="body recipient"></section>
-            <section class="footer"></section>
-        </div>
-    </div>
-</div>
-<div id="stories">
-  <div id="my-story">