harp · kennethormandy · Jan 21, 2016 · Jan 21, 2016 · Jan 21, 2016 · Jan 21, 2016
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "harpjs.com",
-  "version": "0.0.0",
+  "version": "1.0.0-beta",
   "description": "The website for Harp, the static web server with built-in preprocessing.",
   "homepage": "http://harpjs.com",
   "private": true,
@@ -27,13 +27,28 @@
     "coffeescript"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified…yet! Pull requests on harp/harpjs.com are always appriciated.\"",
-    "start": "harp server",
-    "compile": "harp compile",
-    "deploy": "npm run compile && surge ./www harpjs.com"
+    "test": "mocha",
+    "start": "harp ./",
+    "compile": "harp ./ www",
+    "deploy": "npm run compile && surge ./www next.harpjs.com"
+  },
+  "dependencies": {
+    "basscss-sass": "3.0.0",
+    "fg-loadcss": "0.2.4",
+    "fontfaceobserver": "1.6.3",
+    "normalize.css": "3.0.3",
+    "preprocessor-logos": "git://github.com/chloi/preprocessor-logos.git#73498016cb0750692c9df3f555deb307b5f3fa17",
+    "sine-waves": "git://github.com/isuttell/sine-waves.git#abbb074e269d2fb29fb5dd23ed2a07cce8829367",
+    "smoothscroll": "0.2.2",
+    "utility-opentype": "0.1.3"
   },
   "devDependencies": {
-    "harp": "0.20.0",
-    "surge": "latest"
+    "cssstats": "2.1.2",
+    "harp": "sintaxi/harp#cli-surge-test",
+    "mocha": "2.3.4",
+    "numeral": "1.5.3",
+    "should": "8.1.1",
+    "surge": "latest",
+    "utility-opentype": "0.1.3"
   }
 }
diff --git a/public/404.jade b/public/404.jade
@@ -0,0 +1,11 @@
+h1 404 – Page Not Found
+
+p Page not found, sorry! On the plus side, this 404 page was really easy to make using Harp. Read about it <a href="/docs/development/rules">here</a>.
+
+h1 Search the documentation
+
+p Try searching the full Harp documentation for what you’re after:
+
+p!= partial("_shared/search")
+
+p Review the full <a href="/docs">docs</a>, or <a href="https://twitter.com/harpjs">message us on Twitter</a> about what you’re after.
diff --git a/public/404.md b/public/404.md
diff --git a/public/_ROUTER b/public/_ROUTER
@@ -1 +1,3 @@
-301     /quick-start     /docs/quick-start
+301   /quick-start                     /docs/quick-start
+301   /docs/deployment/harp-platform   /docs/deployment/harp-pro
+301   /recipes                         /docs/recipes
diff --git a/public/_data.json b/public/_data.json
@@ -7,13 +7,20 @@
   },
   "blog": {
     "title": "Blog",
-    "description": "Updates, articles and a focus on the community around Harp, the static web server with built-in preprocessing."
+    "description": "Updates, articles and a focus on the community around Harp, the static web server with built-in preprocessing.",
+    "knockout": false
   },
   "community": {
     "title": "Community",
     "description": "Join the Harp community."
   },
   "sitemap": {
     "layout":false
+  },
+  "identity": {
+    "knockout": false
+  },
+  "pricing": {
+    "knockout":false
   }
 }
diff --git a/public/_layout.jade b/public/_layout.jade
@@ -1,20 +1,46 @@
+- var c = Array.prototype.slice.call(current.path).reverse()
+- var p = public._data[c[current.path.length - 1]] || {}
+
 doctype
 //[if lt IE 8]><html lang="en" class="ie"><![endif]
 //[if gt IE 8]><!
-html(manifest="/auto.appcache" lang="en")
+if environment === 'production'
+  <html manifest="/auto.appcache" lang="en">
+else
+  <html lang="en">
   //<![endif]
   head
     meta(charset="utf-8")
     //- Show specific page title, name, and tagline. If the full title is more than 70 chars, omit the tagline
     title !{ title !== name ? title + ' &ndash; ' : '' }#{ name }#{ (title.length + name.length + tagline.length) >= 70 ? '' : ', ' + tagline.toLowerCase() }
     != partial("_shared/webfonts")
-    link(rel="stylesheet" href="/css/application.css" type="text/css")
+    link(rel="stylesheet" href="/css/index.css" type="text/css")
     //- link(rel="shortcut icon" href="/favicon.ico")
     link(rel="apple-touch-icon" href="apple-touch-icon.png")
 
     link(rel="alternate" type="application/rss+xml" href="/blog/feed.xml" title="#{ name }")
     meta(name="description" content!=description)
     meta(name="author" content="#{ author }")
+
+    meta(name="og:url" content="#{ url }")
+    meta(name="og:title" content="#{ title }")
+    meta(name="og:description" content="#{ description }")
+    meta(name="og:site_name" content="#{ name }")
+    if author || c[current.path.length - 1] === 'docs'
+      meta(name="og:type" content="article")
+      if author.name
+        meta(name="article:author" content="#{ author.name }")
+      if author.twitter
+        meta(name="twitter:creator" content="@#{ author.twitter }")
+    meta(name="twitter:site" content="@#{ service.twitter }")
+    meta(name="twitter:card" content="summary_large_image")
+    if og && og.image
+      meta(name="og:image" content="#{ url }#{ og.image }")
+      meta(name="twitter:image:src" content="#{ url }#{ og.image }")
+    else
+      meta(name="og:image" content="#{ url }/images/og-image.png")
+      meta(name="twitter:image:src" content="#{ url }/images/og-image.png")
+
     meta(name="handheldfriendly" content="true")
     meta(name="mobileoptimized" content="320")
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
@@ -25,20 +51,44 @@ html(manifest="/auto.appcache" lang="en")
     meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
     meta(http-equiv="cleartype" content="on")
 
-  body
-    //- pre= JSON.stringify(current, null, 2)
-    if current.source === 'index' && current.path.length === 1
-      a.github-fork(href="https://github.com/sintaxi/harp")
-        img(src="/images/github-ribbon.png", alt="Star Harp on GitHub")
-    .st-container
-      .st-pusher
+    //-
+      This should get replaces with a post-Browserify partial
+      once Harp can do that (inline pre-compiled files)
+    <script>
+    include ../node_modules/fg-loadcss/loadCSS.js
+    include ./js/core.js
+    </script>
+
+  //- Match overflow scroll background colour to nav
+  body(class="#{ p.knockout === false ? 'bg-white' : 'bg-blue' }")
+    .bg-white
+      if current.path[current.path.length - 1] === 'index'
         //- If it’s an index template, show it.
-        //- If it’s a page in the root, wrap it in _nest.jade
-        //- If it’s a page in a folder, wrap it in that folder’s nest
-        if current.path[current.path.length - 1] === 'index' || current.path[current.path.length - 1] === 'zerty'
-          != yield
-        else if current.path.length === 1
-          != partial("/_nest.jade", { yield: yield })
-        else
-          != partial(current.path[0] + "/_nest.jade", { yield: yield })
-    != partial("_shared/footer")
+        .clearfix!= yield
+      else
+        //- Otherwise, wrap it in _nest.jade
+        != partial("_shared/nav", { "knockout": p.knockout })
+        .container.p2.clearfix
+          if current.path.length === 1
+            != partial("/_nest.jade", { yield: yield })
+          else
+            != partial(current.path[0] + "/_nest.jade", { yield: yield })
+
+      .container.p2.clearfix
+        != partial("_shared/footer")
+
+    script(src="/js/index.js")
+    //- script.
+    //-   !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+    script.
+      //<![CDATA[
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', '#{ service.analytics }', 'harpjs.com');
+      ga('require', 'linkid', 'linkid.js');
+      ga('send', 'pageview');
+      //]]>
+</html>
diff --git a/public/_nest.jade b/public/_nest.jade
@@ -1,7 +1 @@
-!= partial("_shared/nav/nav", { "classes": "jumbotron-knockout" })
-.st-content#st-content
-  != partial("_shared/nav/navbar", { "classes": "jumbotron-knockout" })
-  != partial("_shared/search")
-  .container.st-content-inner
-    article.col-12.col-lg-10
-      != yield
+!= yield
diff --git a/public/_shared/analytics.jade b/public/_shared/analytics.jade
diff --git a/public/_shared/author.jade b/public/_shared/author.jade
@@ -0,0 +1,6 @@
+.clearfix.flex.flex-center.mxn1
+  if author.twitter
+    a.px1.border-none(href="http://twitter.com/#{ author.twitter }")
+      img.circle.center.bg-gray(src="https://avatars.io/twitter/#{ author.twitter }/medium" style="width: 3rem; height: 3rem")
+  .px1
+    span.gray #{ url ? 'External post by' : 'By' } <a href="http://twitter.com/#{ author.twitter }">#{ author.name }</a> on #{ date }
diff --git a/public/_shared/blog-nav.jade b/public/_shared/blog-nav.jade
@@ -0,0 +1,19 @@
+- var blog = []
+for entry, slug in public["blog"]._data
+  if entry.date && entry.published===true && typeof entry.url === 'undefined'
+    - entry.slug = slug
+    - blog.push(public["blog"]._data[slug])
+
+for entry, i in blog.sort(function(a,b){ a = new Date(a.date); b = new Date(b.date); return b>a?-1:b<a?1:0; }).slice(0, postlimit)
+  if entry.slug == current.source
+      //- Previous is one before this array item
+      //- Next is one after
+      //- Variables make it easy to template
+      - prev = blog[i - 1]
+      - next = blog[i + 1]
+      //- The actual links
+      ol.clearfix.mxn2
+        if prev
+          a.border-none.col.col-6.col-left.p2.left-align(href="#{ prev.slug }")= prev.title
+        if next
+          a.border-none.col.col-6.col-right.p2.right-align(href="#{ next.slug }")= next.title
diff --git a/public/_shared/closing.jade b/public/_shared/closing.jade
diff --git a/public/_shared/cse.jade b/public/_shared/cse.jade
diff --git a/public/_shared/footer.jade b/public/_shared/footer.jade
@@ -1,39 +1,35 @@
-footer.footer.container
-    .col-12.col-lg-4.list-group
-      h3.list-group-item Latest Articles
-      - i = 0
-      for article, slug in public.blog._data
-        if article.published == true && !article.url
-          - i++
-          if i <= 5
-            a.list-group-item.list-group-underlined(href="/blog/#{ slug }")
-              != article.title
-              if i == 1
-                span.badge new
+footer.footer.clearfix.py4
 
-    .col-12.col-lg-4.list-group
-      h3.list-group-item Everything Harp
-      a(href="/docs").list-group-item.list-group-underlined Documentation
-      a(href="/docs/quick-start").list-group-item.list-group-underlined Quick Start
-      a(href="/recipes").list-group-item.list-group-underlined Recipes
-      a(href="/community").list-group-item.list-group-underlined Community
-      a(href="/identity").list-group-item.list-group-underlined Identity Guide
-      a(href="/blog").list-group-item.list-group-underlined Blog
+  #nav.is-target.md-is-transparent.col.col-12.md-col-4
+    h3 Everything Harp
+    ol.block.h4.md-h5.list-reset.mxn2
+      li: a.p2.border-none.block(href="/docs") Documentation
+      li: a.p2.border-none.block(href="/docs/quick-start") Quick Start
+      li: a.p2.border-none.block(href="/recipes") Recipes
+      li: a.p2.border-none.block(href="/community") Community
+      li: a.p2.border-none.block(href="/boilerplates") Boilerplates
+      li: a.p2.border-none.block(href="/identity") Identity Guide
+      li: a.p2.border-none.block(href="/blog") Blog
 
-    .col-12.col-lg-4.list-group
-      h3.list-group-item The Harp Newsletter
-      .list-group-item!= partial("../_shared/newsletter")
+  .col.col-12.md-col-4
+    h3 Latest Articles
+    - i = 0
+    for article, slug in public.blog._data
+      if article.published == true && !article.url
+        - i++
+        if i <= 5
+          a.py1.border-none.block(href="/blog/#{ slug }")
+            != article.title
+            if i == 1
+              span.ml1.purple new
 
-      h3.list-group-item Connect with Harp
-      .list-group-item
-        iframe(src="http://ghbtns.com/github-btn.html?user=sintaxi&repo=harp&type=watch&count=true&size=large", allowtransparency="true", frameborder="0", scrolling="0", width="100%", height="30px")
-        a(href="https://twitter.com/HarpWebServer", class="twitter-follow-button", data-show-count="false", data-lang="en", data-size="large") Follow @HarpWebServer
-        a.list-group-item.icon-irc(href="irc://irc.freenode.net/harp") Chat in ##{ service.irc.toLowerCase() } on IRC
 
+  .col.col-12.md-col-4
+    h3 The Harp Newsletter
+    != partial("../_shared/newsletter")
 
-  != partial("nav/nav", { "id": "navigation", "classes": "st-menu--fallback jumbotron" })
-script(src="/js/application.js")
-script(src="/js/prism.js")
-script.
-  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
-!= partial("analytics")
+    h3 Connect with Harp
+    .py1.border-none.block
+      iframe(src="http://ghbtns.com/github-btn.html?user=sintaxi&repo=harp&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="100%" height="30px")
+    a.py1.border-none.block(href="https://twitter.com/HarpWebServer" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="large") Follow @HarpWebServer
+    a.py1.border-none.block(href="irc://irc.freenode.net/harp") Chat in ##{ service.irc.toLowerCase() } on IRC
diff --git a/public/_shared/nav.jade b/public/_shared/nav.jade
@@ -0,0 +1,18 @@
+//- This is the top level nav,
+    ie. Docs, Blog, FAQ, Community, Source,
+    which are all are pulled from the corresponding data.json.
+
+nav.clearfix.relative(role="navigation" class="#{ knockout === false ? 'bg-white' : 'bg-blue' }" style="z-index: 1")
+  .container.flex.flex-center.p1.md-p2.mxn2
+      .flex-auto.px2.flex
+        a.block.left.border-none(href="/" style="max-width: 5.5em")
+          img.block.mx-auto(src="/images/wordmark#{ knockout === false ? '-dark' : '' }.svg" alt="#{ name }" style="height: 2.5em")
+      .h6.md-h5.px2.flex.flex-center(class="#{ knockout === false ? 'gray' : 'teal' }")
+        a.btn.regular.p1.border-none.md-show-inline.flex-auto(href="/docs") Documentation
+        a.btn.regular.p1.border-none.md-show-inline.flex-auto(href="/blog") Blog
+        a.btn.regular.p1.border-none.lg-show-inline.flex-auto(href="/community") Commmunity
+        a.btn.regular.p1.border-none.md-show-inline.flex-auto(href="https://github.com/sintaxi/harp") GitHub
+        a.btn.regular.p1.border-none.md-show-inline.flex-auto(href="/pricing") Pricing        
+        a.btn.p2.border-none.center.inline.col.col-12.md-col-auto.col-right.bg-maroon.rounded.md-ml2(href="/docs/quick-start")
+          span.white Quick Start
+        a.btn.regular.p2.md-p1.border-none.md-hide.inline-block.col-12(href="#nav") More…
diff --git a/public/_shared/nav/nav.jade b/public/_shared/nav/nav.jade