initial commit

JCB-K · Apr 12, 2012 · cb18047 · cb18047
commit cb18047
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,20 @@
+Copyright (c) 2012 Jacob Klapwijk, http://jcbk.me/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.mdown b/README.mdown
@@ -0,0 +1,78 @@
+# Singlepage-Jekyll
+
+A simple Jekyll plugin to make content load dynamically using pagify.js.
+
+## Description
+
+Pagify.js is a great jQuery plugin to make simple one-page websites, with content loading dynamically. The only problem with it is that you have to define every page you want to load manually. This is fine for a static page, but it get's in the way when you're hosting a website with regularly updated content. This plugin aims to solve that. 
+
+It generates a JSON file of all your pages, which you can pass to pagify.js.
+
+## Usage
+
+### Files
+
+Place "singlepage-jekyll.rb" and "root" in _includes, and jquery-min.js and pagify.js in your website root. Install ruby-json:
+
+```
+gem install ruby
+```
+
+### Setup
+
+Create a layout in _layouts, such as default.html. Load Pagify and jQuery:
+
+``` html
+<script src="jquery.min.js" type="text/javascript"></script>
+<script src="pagify.js" type="text/javascript"></script>
+```
+
+Then go on and add the following:
+
+```html
+<body>
+{% include root %}
+{{ content }}
+</body>
+```
+
+Create a page with the layout default. Create a div that will contain page content:
+
+``` html
+<div id='page_holder' />
+```
+
+Call __pagify__ on the aforementioned div and pass in options. _The only required option is `pages`._
+
+``` js
+$.getJSON('html.json', function(data) {
+   $('#page_holder').pagify({ 
+       pages: data, 
+       default: 'home'
+   }); 
+});
+```
+
+Link to other pages by linking to hashes of their page names:
+
+``` html
+<a href='#contact'>Contact</a>
+<a href='#about'>About</a>
+```
+Or like this:
+
+```html
+{% for post in site.posts %}
+<a href="#{{ post.id }}">{{ post.title }}</a>
+{% endfor %}
+```
+
+All the pages you want to call don't need a layout, as their content will just be loaded within a div on the page. To learn more about the options of pagify.js, check out [it's Github page](http://github.com/cmPolis/Pagify).
+
+### Everything else
+
+This is just a first version. Feel free to improve and send a pull request.
+
+Made by [Jacob Klapwijk](http://jcbk.me).
+
+MIT licensed.
diff --git a/jquery.min.js b/jquery.min.js
diff --git a/pagify.js b/pagify.js
@@ -0,0 +1,78 @@
+/*
+ * Pagify - A jquery plugin for effortlessly creating single page web sites.
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright (c) 2011, Chris Polis
+ */
+
+(function($) {
+  $.fn.pagify = function(options) {
+    var self = this;
+
+    this.defaults = {
+      'pages': [],
+      'default': null,
+      'animation': 'show',
+      'animationSpeed': 'normal',
+      'animationOut': 'hide',
+      'animationOutSpeed': 0,
+      'onChange': function (page) {},
+      'cache': false
+    };
+    this.settings = $.extend({}, this.defaults, options);
+
+    // Run after loading if caching, otherwise run immediately
+    var runAfterLoading = function() {
+      self.switchPage = function(page) {
+        // Page is selected from: passed in value, window.location, default
+        if(!page) {
+          page = window.location.hash.replace('#','') || self.settings['default'];
+        }
+
+        if(self.settings.cache) {
+          // Load page content from cache
+          $(self)[self.settings.animationOut](self.settings.animationOutSpeed, function() {
+            $(self).html(self.pages[page])[self.settings.animation](self.settings.animationSpeed);
+          })
+          self.settings.onChange(page);
+        }
+        else {
+          // Fetch page content
+          $.get(page+'.html', function(content) {
+            $(self)[self.settings.animationOut](self.settings.animationOutSpeed, function() {
+              $(self).html(content)[self.settings.animation](self.settings.animationSpeed);
+            })
+            self.settings.onChange(page);
+          }, 'text');
+        }
+      }
+
+      // Respond to hash changes
+      $(window).bind('hashchange', function() {
+        self.switchPage();
+      });
+
+      // Load initial page - current hash or default page
+      if(window.location.hash) self.switchPage();
+      else if(self.settings['default']) self.switchPage(self.settings['default']);
+    };
+
+    // Cache pages
+    if(self.settings.cache) {
+      self.pages = {};
+      var pageLoads = self.settings.pages.length;
+      $.each(self.settings.pages, function(ndx, page) {
+        $.get(page+'.html', function(content) {
+          self.pages[page] = content;
+          pageLoads--;
+          //alert(pageLoads);
+          if(!pageLoads) runAfterLoading();
+        }, 'text');
+      });
+    } 
+    else runAfterLoading();
+  };
+
+})(jQuery);
diff --git a/root b/root
@@ -0,0 +1 @@
+{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}
diff --git a/singlepage-jekyll.rb b/singlepage-jekyll.rb
@@ -0,0 +1,13 @@
+#!/usr/bin/env ruby
+
+require 'rubygems'
+require 'json'
+
+files = Dir.chdir('../_site') do
+  Dir.glob('**/*.html').map{ |f| f.chomp('.html') }
+end
+
+File.open("../_site/html.json","w") do |f|
+f.write(files.to_json)
+end
+