Second Harp example

Second example uses EJS instead of Jade

harpsite_ejs/.gitignore

@@ -0,0 +1 @@
+.DS_Store

harpsite_ejs/README.md

@@ -0,0 +1,178 @@
+# Harp’s Blog Boilerplate
+
+_This is a boilerplate to use with the [Harp Platform](http://harp.io/) and/or the [Harp Server](http://harpjs.com/) (a static web server with built-in pre-processing build with NodeJS)_
+
+## Index
+
+- [How to use it?](#how-to-use-it)
+    - [On your own computer](#on-your-own-computer)
+    - [On the Harp Platform](#on-the-harp-platform)
+- [Controlling your content](#controlling-your-content)
+- [Adding new posts](#adding-new-posts)
+- [Adding new pages](#adding-new-pages)
+- [Migrating from different platforms](#migrating-from-different-platforms)
+    - [WordPress](#wordpress)
+    - [Tumblr](#tumblr)
+- [TODOs](#todos)
+- [Support](#support)
+- [License](#license)
+
+---
+
+## How to use it?
+
+### On your own computer
+
+1. [Install Harp Server](http://harpjs.com/docs/environment/install) on your computer
+2. Open your terminal and start a new project:
+
+````
+$ git clone git@github.com:harp-boilerplates/hb-blog.git my-blog
+$ cd my-blog
+$ harp server -p 9966
+````
+
+Go to [http://localhost:9966](http://localhost:9966/) from your browser to see your website.
+
+### On the Harp Platform
+
+1. Login to the [Harp Platform](http://harp.io/)
+2. Create a new application
+3. Choose __Blog Boilerplate__ as your starting point
+4. Start your application
+5. Open and edit the files in your Dropbox
+
+## Controlling your content
+
+Harp brings you back to the basics of the web. Always keep in mind that your directory structure and file names are your URL paths.
+
+Creating a new page is as simple as creating a new file and writing content in it.
+
+### `public/posts`
+
+This is where your posts and their content live.
+
+### `public/_layout.jade`
+
+The layout of your site, including header, footer and sidebar. External scripts or stylesheets are included in this file. Global elements belong here as well (i.e.: header, nav, sidebar, etc.)
+
+### `public/index.jade`
+
+This is the default page when you visit your domain (i.e.: `http://localhost:9966/`). Here we build the loop that goes through your posts and shows them in the front page.
+
+### `public/assets/css/app.less`
+
+This is the place where your blog CSS should live.
+
+## Adding new posts
+
+__1__. Create a new file (`.jade`, `.ejs`, `.html` or `.md`) in the `public/posts/` directory
+
+````
+$ touch public/posts/kittens.html
+````
+
+__2__. Enter your post content in the file you just created:
+
+_public/posts/kittens.html:_
+
+````
+<h1><a href="/posts/kittens">I love kittens!</a></h1>
+<p>This is my first post using Harp!</p>
+````
+
+__3__. Open `public/posts/_data.json` and add your new post data:
+
+````
+{
+  ...                        <-- other blog posts
+  "kittens": {               <-- post slug (file name without extension)
+    "title": "Cute Kittens"  <-- post title
+  }
+  ...                        <-- other blog posts
+}
+````
+
+## Adding new pages
+
+__1__. Create a new file inside the `public` directory:
+
+````
+$ touch public/about.html
+````
+
+__2__. Enter the page content in the newly created file
+
+_public/about.html:_
+
+````
+<h1>About me</h1>
+<p>I love fotoshapz and taking pictures of foods</p>
+````
+
+__3__. Your can now access your page in your browser. I.e.: `http://localhost:9966/about`
+
+## Migrating from a WordPress blog
+
+If you’re planning to move your WordPress site to Harp, I’d recommend cloning it using wget or curl:
+
+This one-line terminal command will create a static replica of __yourwebsite.com__ in your computer, it’ll fix all the links to work locally and download all the necessary assets (images, javascript, css and other files):
+
+```
+$ wget --recursive --no-clobber --page-requisites --html-extension --convert-links yourwebsite.com
+```
+
+## Enabling/Disabling Comments
+
+This blog boilerplate makes it really easy to enable your visitors to leave comments on your blog posts.
+
+Open the `/harp.json` file and look for the disqus section. It should look something like this:
+
+```
+...
+"disqus": {
+  "enabled": false,
+  "shortname": ""
+}
+...
+```
+
+In the disqus configuration there are two configurable keys:
+
+`enabled`: can be `true` or `false`. Make it true to display comments and false to disable them. Make sure the value is not wrapped in quotes like this `"false"`, otherwise it will still show the comments.
+
+`shortname`: this is your shortname assigned by Disqus. [Signup for Disqus](https://disqus.com/admin/signup/) and get your own shortname, then enter it as a string (with wrapping double quotes) as the shortname value.
+
+This is what it looks like when it’s enabled:
+
+```
+...
+"disqus": {
+  "enabled": true,
+  "shortname": "jorgepedret"
+}
+...
+```
+
+## Enabling/Disabling Sitemap.xml
+
+Open the `/harp.json` file and look for the sitemap section:
+
+```
+...
+"sitemap": {
+  "enabled": true,
+  "changefreq": "daily"
+}
+...
+```
+
+Change "changefreq" to fit your blog needs. The result will be live in /sitemap.xml
+
+## Support
+
+Please [create an issue](https://github.com/harp-boilerplates/hb-blog/issues) on github’s bug tracker. Feedback and bug reports are greatly appreciated.
+
+## License
+
+MIT

harpsite_ejs/harp.json

@@ -0,0 +1,18 @@
+{
+  "domains": [""],
+  "globals": {
+    "site_title": "Adventure Time!",
+    "site_url": "http://example.com",
+    "email": "brian.rinaldi@gmail.com",
+    "banner": "/assets/images/about.jpg",
+    "description": "Adventure Time is an American animated television series created by Pendleton Ward for Cartoon Network. The series follows the adventures of Finn, a human boy, and his best friend and adoptive brother Jake, a dog with magical powers to change shape and grow and shrink at will. Finn and Jake live in the post-apocalyptic Land of Ooo. Along the way, they interact with the other main characters of the show: Princess Bubblegum, The Ice King, and Marceline the Vampire Queen.",
+    "disqus": {
+      "enabled": false,
+      "shortname": ""
+    },
+    "sitemap": {
+      "enabled": false,
+      "changefreq": "daily"
+    }
+  }
+}

harpsite_ejs/public/404.ejs

@@ -0,0 +1 @@
+<h1>404</h1>

harpsite_ejs/public/_data.json

@@ -0,0 +1,37 @@
+{
+	"rss": {
+		"layout": false
+	},
+    "characters": [
+      {
+        "description": "Finn is a 15-year-old human. He is roughly five feet tall and is missing several teeth due to his habit of biting trees and rocks among other things.",
+        "image": "/assets/images/finn.jpg",
+        "name": "Finn the Human"
+      },
+      {
+        "description": "Jake can morph into all sorts of fantastic shapes with his powers, but typically takes the form of an average sized yellow-orange bulldog.",
+        "image": "/assets/images/jake.jpg",
+        "name": "Jake the Dog"
+      },
+      {
+        "description": "Princess Bubblegum loves (most of) her subjects and defends them tirelessly when trouble brews and is perhaps the most intelligent person in the Land of Ooo.",
+        "image": "/assets/images/bubblegum.jpg",
+        "name": "Princess Bubblegum"
+      },
+      {
+        "description": "Ice King, formerly Simon Petrikov, is a blue-skinned, elderly man with unusually pointy fingers, pointy toes, sharp teeth, and a long, goblin-like nose.",
+        "image": "/assets/images/iceking.jpg",
+        "name": "Ice King"
+      },
+      {
+        "description": "Lumpy Space Princess (LSP) acts like a bratty, apathetic, sassy, attention-seeking and willfully ignorant teenager, often texting on her phone.",
+        "image": "/assets/images/lsp.jpg",
+        "name": "Lumpy Space Princess"
+      },
+      {
+        "description": "Marceline is over a thousand years old. Centuries of wandering the Land of Ooo have made her a fearless daredevil and a a lover of all things exotic.",
+        "image": "/assets/images/marceline.jpg",
+        "name": "Marceline"
+      }
+    ]
+}

harpsite_ejs/public/_layout.ejs

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+  <%- partial("_partials/head") %>
+
+  <body>
+
+    <%- partial("_partials/header") %>
+
+    <!-- Main -->
+    <div id="main-wrapper">
+        <div class="container">
+        <%- yield %>
+        </div>
+    </div>
+
+    <%- partial("_partials/footer") %>
+
+  </body>
+
+</html>

harpsite_ejs/public/_partials/footer.ejs

@@ -0,0 +1,64 @@
+<%
+function prettyMonth(dateString){
+    var date = new Date(dateString);
+    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
+    var m = monthNames[date.getMonth()];
+    return m;
+}
+
+function prettyDay(dateString){
+    var date = new Date(dateString);
+    var d = date.getDate();
+    return d;
+} %>
+
+<!-- Footer -->
+<div id="footer-wrapper">
+    <section id="footer" class="container">
+        <div class="row">
+            <div class="8u">
+                <section>
+                    <header>
+                        <h2>More Episodes</h2>
+                    </header>
+                    <ul class="dates">
+                    <% 
+                    var i = 0;
+                    for(var slug in public.posts._data){
+                        i++;
+                        if (i >=3) {
+                    %>
+                        <li>
+                            <span class="date"><%- prettyMonth(public.posts._data[slug].date) %> <strong><%- prettyDay(public.posts._data[slug].date) %></strong></span>
+                            <h3><a href="/posts/<%- slug %>"><%- public.posts._data[slug].title %></a></h3>
+                            <p><%- public.posts._data[slug].shortdesc %></p>
+                        </li>
+                    <%  }
+                    }; %>
+                    </ul>
+                </section>
+            </div>
+            <div class="4u">
+                <section>
+                    <header>
+                        <h2>What's this all about?</h2>
+                    </header>
+                    <a href="#" class="image featured"><img src="<%- banner %>" alt="" /></a>
+                    <p><%- description %></p>
+                </section>
+            </div>
+        </div>
+        <div class="row">
+            <div class="12u">
+
+                <!-- Copyright -->
+                    <div id="copyright">
+                        <ul class="links">
+                            <li>&copy; <%= site_title %>. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+                        </ul>
+                    </div>
+
+            </div>
+        </div>
+    </section>
+</div>

harpsite_ejs/public/_partials/head.ejs

@@ -0,0 +1,17 @@
+<head>
+    <title><%- site_title %></title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="description" content="<%- description %>" />
+
+    <meta name="keywords" content="adventure time,cartoon network,cartoons,finn,jake,princess bubblegum" />
+    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
+    <script src="/assets/js/jquery.min.js"></script>
+    <script src="/assets/js/skel.min.js"></script>
+    <script src="/assets/js/skel-layers.min.js"></script>
+    <script src="/assets/js/init.js"></script>
+    <link rel="stylesheet" href="/assets/css/skel.css" />
+    <link rel="stylesheet" href="/assets/css/style.css" />
+    <link rel="stylesheet" href="/assets/css/style-desktop.css" />
+    <!--[if lte IE 8]><link rel="stylesheet" href="/assets/css/ie/v8.css" /><![endif]-->
+  <link rel="alternate" type="application/rss+xml" title="<%- site_title %>" href="/rss.xml" />
+</head>

harpsite_ejs/public/_partials/header.ejs

@@ -0,0 +1,19 @@
+<!-- Header -->
+<div id="header-wrapper">
+    <div id="header">
+
+        <!-- Logo -->
+            <h1><a href="/"><%- site_title %></a></h1>
+
+        <% if (current.source=='index') { %>
+        <!-- Banner -->
+            <section id="banner">
+                <header>
+                    <h2>Explore the Land of Ooo...</h2>
+                    <p>...and its many kingdoms!</p>
+                </header>
+            </section>
+        <% } %>
+
+    </div>
+</div>