static site generatin

buildpage.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+var glob = require('glob')
+var fs = require('fs')
+var marked = require('marked')
+var hbs = require('handlebars')
+var mkdirp = require('mkdirp')
+var path = require('path')
+
+glob("docs/*.md", function (err, files) {
+  if (err) return console.log(err)
+  var filenames = files.map(function(name) {
+     return path.basename(name)
+  })
+  filenames.forEach(function (file) {
+    var name = file.split('.md')[0]
+    var filePath = "./docs/"
+    var content = fs.readFileSync(filePath + file).toString()
+    var html = marked(content)
+    applyTemplate(html, name)
+  })
+})
+
+function applyTemplate(html, name) {
+  var content = {content: html}
+  var file = "template.hbs"
+  var rawTemplate =  fs.readFileSync(file).toString()
+  var template = hbs.compile(rawTemplate)
+  var page = template(content)
+  writeFile(page, name) 
+}
+
+function writeFile(page, name) {
+  mkdirp('./site/docs', function (err) {
+    if (err) return console.error(err)
+    fs.writeFileSync('./site/docs/' + name + '.html' , page)  
+  })
+}

docs/tips.md

@@ -1 +1,33 @@
-**coming soon!**
+**coming soon!**
+
+## Fork-n-Go
+
+Projects (repositories)
+
+## Query Strings
+
+If your spreadsheet contains address information, using templates (Sheetsee.js uses a form of Mustache), you can embed those elements into a query string (aka a search URL) like Google Maps URL or Yelp. If you search for a location in Google Maps, you'll notice it creates a URL for that search.
+
+So, if you have information in your spreadsheet that would go inside a query string, make a template for inserting them into a link on your page.
+
+The basic elements are: a spreadsheet with address info + HTML template to create the query string.
+
+The Sheetsee [Hack-Spots](jlord.github.io/hack-spots) is an does such a thing. Here is the spreadsheet, with address information
+
+![img](http://jlord.s3.amazonaws.com/wp-content/uploads/Screen-Shot-2013-09-15-at-6.49.19-PM.png)
+
+In the HTML template for the table on the [Hack-Spots](jlord.github.io/hack-spots) page, the button’s links look like this:
+
+```HTML
+<a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a>
+<a class="button" href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a>
+```
+Here is the exact line of code on GitHub.
+
+We’re inserting the address, city, and state details from the spreadsheet into the structure of a query string for Google maps and Yelp. You can figure out the query string of a service by just using it (type in an address in Google Maps) and looking at the resulting URL.
+
+With a some CSS and such, the resulting website has a table with the hack spots and a button for viewing in Google Maps or Yelp:
+
+![img](http://jlord.s3.amazonaws.com/wp-content/uploads/Screen-Shot-2013-09-15-at-6.43.54-PM.png)
+
+When the page builds, it creates the correct link for each row. When someone clicks on the buttons it takes them directly to the Google Map search result for that address. BAM!

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "sheetsee.js",
+  "version": "0.0.0",
+  "description": "sheetsee.js documentation",
+  "main": "buildpage.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jlord/sheetsee.js.git"
+  },
+  "keywords": [
+    "spreadsheet",
+    "data",
+    "visualize",
+    "google"
+  ],
+  "author": "jlord",
+  "license": "BSD-2-Clause",
+  "bugs": {
+    "url": "https://github.com/jlord/sheetsee.js/issues"
+  },
+  "dependencies": {
+    "glob": "~3.2.8",
+    "marked": "~0.3.1",
+    "handlebars": "~1.3.0",
+    "mkdirp": "~0.3.5",
+    "path": "~0.4.9"
+  }
+}

site/docs/about.html

@@ -0,0 +1,33 @@
+I love template.
+<p>More about Sheetsee&#39;s development and the libraries it&#39;s built on.</p>
+<h2 id="in-the-beginning">In the Beginning</h2>
+<p>Sheetsee.js began as a part of my <a href="">Code for America</a> 2012 Fellowship project, <a href="">See Penny Work</a>. The idea and original code was to enable cities to easily publish and maintain themselves their budget data. The original sheetsee.js was built into Wordpress templates so that with the See Penny Work template, you could create pages that you only had to name and they would be populated with maps, charts and tables based on the page name corelating with a project in the spreadsheet.</p>
+<p>In early 2013, after the CfA Fellowship, I recieved a grant from Mozilla Open News to pull out the sheetsee.js bits and make it a standalone open source library. That brought us to version 2.</p>
+<p>The present version makes the project modular, customizable and with more maping and table features. View the <a href="">changelog</a> for a timeline of features and states.</p>
+<h2 id="built-ontop-of-tabletop-js">Built ontop of Tabletop.js</h2>
+<p>Sheetsee would not exist were it not for <a href="">tabletop.js</a> a library built in <strong><em> by </em></strong> that handles the messy interactions with the Google Spreadsheets API for you and returns a lovely JSON of your data. Every instance of Sheetsee begins with running tabletop.js.</p>
+<h3 id="sheetsee-js-mapbox-js-leaflet-js-d3-js">Sheetsee.js + Mapbox.js + Leaflet.js + d3.js</h3>
+<p>Once you&#39;ve got the data, the meat of Sheetsee comes into play. You can now decide if you want to map, chart or display your data in a table. Sheetsee&#39;s table module, sheetsee-tables, comes with sorting, filtering and pagination. Sheetsee-maps is built ontop of Leaflet.js and Mapbox.js and allows you to customize colors and popups of points, lines, polygons or multipolygons. Finally, Sheetee-charts comes with three basic <a href="">d3.js</a> charts: bar, circle and line. It is difficult to make a chart that can suit many types of data, but it is easy to choose your own d3 chart and plug it in to sheetsee. Documentation for creating a d3 module is <a href="">here</a>.</p>
+<h2 id="hacked-on-openly">Hacked on Openly</h2>
+<ul>
+<li>Sheetsee.js is open source software with a <a href="docs/license.md">BSD license</a>.</li>
+<li>Sheetsee.js is built and maintained by <a href="http://www.github.com/jlord">jlord</a> (<a href="http://www.twitter.com/jllord">twitter</a>) with support from <a href="">contributors</a> and a lot of support and knowledge passed on by <a href="">Max Ogden</a>.</li>
+</ul>
+<h2 id="contact">Contact</h2>
+<ul>
+<li>File a <a href="">new issue</a> for ideas and bug reports.</li>
+<li>If your issue falls specifically with one of the modules, you can file it on its particular repo:<ul>
+<li><a href="http://www.github.com/jlord/sheetsee">sheetsee</a></li>
+<li><a href="http://www.github.com/jlord/sheetsee-tables">sheetsee-tables</a></li>
+<li><a href="http://www.github.com/jlord/sheetsee-maps">sheetsee-maps</a></li>
+<li><a href="http://www.github.com/jlord/sheetsee-charts">sheetsee-charts</a></li>
+</ul>
+</li>
+<li><a href="http://www.twitter.com/jllord">jllord</a> on Twitter.</li>
+</ul>
+<h2 id="big-time-thanks">Big Time Thanks</h2>
+<p>Thanks to <a href="http://www.codeforamerica.org">Code for America</a> for providing the platform me to build the first version of sheetsee.js for Macon, Georgia.</p>
+<p>Thanks to <a href="http://www.twitter.com/dansinker">Dan Sinker</a> at <a href="http://www.mozillaopennews.org/">Open News</a> for having faith and getting things together to make this Code Sprint happen and thanks to <a href="https://twitter.com/whatsnewmedia">Matt Green</a> at WBEZ for being a willing partner.</p>
+<p>Thanks to <a href="http://www.twitter.com/maxogden">Max Ogden</a> for emotional support, teaching me JavaScript and working on the harder parts of Sheetsee.js - especially for making <a href="https://npmjs.org/tabletop">Tabletop.js for Node.js</a>.</p>
+<p>Thanks to all the authors and contributors to Tabletop.js, Mapbox.js, Leaflet.js, jQuery, ICanHas.js and d3.js. Thanks to Google and the Internet for existing and to all those who&#39;ve written tutorials or asked or answered a question on StackOverflow.</p>
+<p>Thanks to Mom and Dad for getting a computer in 1996 and the mIRC scripts I started writing that I suppose would eventually lead me here.</p>

site/docs/basics.html

@@ -0,0 +1,61 @@
+I love template.
+<h2 id="why-use-spreadsheets-">Why Use Spreadsheets?</h2>
+<h2 id="why-not-use-spreadsheets-">Why Not Use Spreadsheets?</h2>
+<h3 id="css">CSS</h3>
+<p>Sheetsee.js comes with a bare minimum stylesheet. This way you can customize your site to look the way you want to it or to match an existing site&#39;s design.</p>
+<h3 id="client-side-or-server-side">Client-side or Server-side</h3>
+<p>Sheetsee.js comes in two flavors, <a href="">client-side</a> and <a href="">server-side</a>. The client-side is the most approachable and straightforward, you just include sheetsee.js and the dependencies on your page and use sheetsee.js as normal.</p>
+<p>The server-side version is built with <a href="http://www.nodejs.org">Node.js</a> and you&#39;ll need to understand Node and be publishing to a server that runs Node.js apps. This version saves the data on the server so that the browser doesn&#39;t have to fetch from Google at every request, which can sometimes be slow. You can set when the cache expires. It also allows for offline development, huzzah!</p>
+<h2 id="the-short-sweet">The Short &amp; Sweet</h2>
+<ol>
+<li>Link to Sheetsee.js and dependencies in your HTML header.</li>
+<li>Create a place holder <code>&lt;div&gt;</code> in your HTML for any chart, map or table you want to have.</li>
+<li>Create templates for tables in <code>&lt;script&gt;</code> tags.</li>
+<li>Create a script tag that waits for the document to load and then executes any of the map, chart or tables you&#39;ve specified in it.</li>
+<li>Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information everytime they load the page.</li>
+</ol>
+<h2 id="bare-minimum-setup">Bare Minimum Setup</h2>
+<p>Ignoring some HTML things to conserve space, you get the point. This gives you a page with a map of your spreadsheets points.</p>
+<pre><code>&lt;html&gt;
+    &lt;head&gt;
+        &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js&quot;&gt;&lt;/script&gt;
+        &lt;script type=&quot;text/javascript&quot; src=&#39;dist/sheetsee.full.js&#39;&gt;&lt;/script&gt;
+        &lt;link href=&#39;http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css&#39; rel=&#39;stylesheet&#39; /&gt;
+    &lt;/head&gt;
+    &lt;style&gt; #map {height: 600px; width: 600px;} &lt;/style&gt;
+    &lt;body&gt;
+    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
+    &lt;script&gt;
+        var geoJSON = Sheetsee.createGeoJSON(gData, featureElements)
+        var map = Sheetsee.loadMap(&quot;map&quot;)
+        Sheetsee.addTileLayer(map, &#39;examples.map-20v6611k&#39;)
+        var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
+    &lt;/script&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</code></pre><h2 id="getting-started">Getting Started</h2>
+<p>This bit is the same for both client-side and server-side versions.</p>
+<h3 id="your-data">Your Data</h3>
+<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/spreadsheettodata.png" alt="sheetsee"></p>
+<p>Your Google Spreadsheet should be set up with row one as your column headers. Row two and beyond should be your data.  Each header and row becomes an oject in the final array that Tabletop.js delivers of your data.</p>
+<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/nonos.png" alt="sheetsee"></p>
+<p>There shouldn&#39;t be any breaks or horizontal organization in the spreadsheet. But, feel free to format the style of your spreadsheet as you wish; borders, fonts and colors and such do not transfer or affect your data exporting.</p>
+<pre><code>[{&quot;name&quot;:&quot;Coco&quot;,&quot;breed&quot;:&quot;Teacup Maltese&quot;,&quot;kind&quot;:&quot;Dog&quot;,&quot;cuddlability&quot;:&quot;5&quot;,&quot;lat&quot;:&quot;37.74832&quot;,&quot;long&quot;:&quot;-122.402158&quot;,&quot;picurl&quot;:&quot;http://distilleryimage8.s3.amazonaws.com/98580826813011e2bbe622000a9f1270_7.jpg&quot;,&quot;hexcolor&quot;:&quot;#ECECEC&quot;,&quot;rowNumber&quot;:1}...]
+</code></pre><h4 id="hexcolor">Hexcolor</h4>
+<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/hexcolors.png" alt="sheetsee"></p>
+<p>You must add a column to your spreadsheet with the heading <em>hexcolor</em> (case insensitive). The maps, charts and such use colors and this is the easiest way to standardize that. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This <a href="http://color.hailpixel.com/">color picker</a> by <a href="https://twitter.com/hailpixel">Devin Hunt</a> is really nice. #Funtip: Coloring the background of the cell it&#39;s hexcolor brings delight! </p>
+<h4 id="geocoding">Geocoding</h4>
+<p>If you intend to map your data and only have addresses you&#39;ll need to geocode the addresses into lat/long coordinates. Mapbox built a <a href="http://mapbox.com/tilemill/docs/guides/google-docs/#geocoding">plugin</a>
+ that does this for you in Google Docs. You can also use websites like <a href="http://www.latlong.net/">latlong.net</a> to get the coordinates and paste them into rows with column headers <em>lat</em> and <em>long</em>.</p>
+<blockquote>
+<p>image of lat and long column headers</p>
+</blockquote>
+<h4 id="publishing-your-spreadsheet">Publishing Your Spreadsheet</h4>
+<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/publish.png" alt="sheetsee"></p>
+<p>You need to do this in order to generate a unique key for your spreadsheet, which Tabletop.js will use to get your spreadsheet data. In your Google Spreadsheet, click <em>File</em> &gt; <em>Publish to the Web</em>. Then in the next window click <em>Start Publishing</em>; it will then turn into a <em>Stop Publishing</em> button.</p>
+<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/key.png" alt="sheetsee"></p>
+<p>You should have an address in a box at the bottom, your key is the portion between the = and the &amp;. You&#39;ll retrieve this later when you hook up your site to the spreadsheet.</p>
+<h3 id="your-website">Your Website</h3>
+<p>Before you get started with Sheetsee.js you should plan out your website. Design it, create the basic markup and stylesheet.</p>
+<p>For now, create empty <code>div</code> placeholders for the map, chart and tables you plan on including.</p>

site/docs/building.html

@@ -0,0 +1,18 @@
+I love template.
+<h1 id="just-right">Just Right</h1>
+<p>You can customize your sheetsee build with just the parts you want to use. If you want to just use the full version, you can grab it here at <a href="">github.com/jlord/sheetsee.js</a>.</p>
+<p><strong>To build your sheetsee you&#39;ll need <a href="http://www.nodejs.org">Node.js</a> and <a href="http://www.npmjs.org">NPM</a> on your computer and a command line</strong></p>
+<h2 id="install-sheetsee-from-npm">Install sheetsee from NPM</h2>
+<p>The sheetsee module contains the basic sorting, organizing data functions and the script for building on the other modules. Create a folder for you new project and <code>cd</code> into it. Then install <code>sheetsee</code>.</p>
+<pre><code class="lang-bash">cd myNewProject
+npm install sheetsee
+</code></pre>
+<p>Here are the options for the different modules. If you want save the generated file as <em>sheetsee.js</em> then add the <code>save</code> option.</p>
+<ul>
+<li><code>-m</code> or <code>-maps</code> for maps</li>
+<li><code>-t</code> or <code>-tables</code> for tables</li>
+<li><code>-c</code> or <code>-charts</code> for charts</li>
+<li><code>--save</code> to write out the file*</li>
+</ul>
+<p><em>* defaults to standardout on your console which you can</em> <code>| pbcopy</code></p>
+<p>So for instance, <code>sheetsee -m -t --save</code> will build you a sheetsee with the basic <strong>data</strong> functions, the <strong>map</strong> and <strong>tables</strong> sections built in and save it as a file named <strong>sheetsee.js</strong>.</p>

site/docs/changelog.html

@@ -0,0 +1,19 @@
+I love template.
+<h3 id="sheetsee-v3">Sheetsee v3</h3>
+<h2 id="august-13-2013">August 13, 2013</h2>
+<h3 id="charting-intake">Charting Intake</h3>
+<p>D3 charts need an array of objects, and something to chart: the thing itself (aka labels) and the corresponding value (aka units). Your data usually contains more than D3 needs to make the chart, so you have to tell it what to chart from your data to chart.</p>
+<p>Previously Sheetsee required you pass your data through a function, <code>addUnitsAndLabels()</code> which took in your data and the things you wanted to chart, reformatted your data for you so that you could pass it into one of the d3 charts. This is one more step than actually needs to happen.</p>
+<p>Now Sheetsee just asks for what you want your <em>labels</em> and <em>units</em> to be in the options you give it when calling the chart function. It then sorts the data correctly on the inside of the chart function. Yay, easier!</p>
+<pre><code class="lang-javascript">var options = {
+  labels: &quot;name&quot;,
+  units: &quot;cuddleability&quot;,
+  m: [60, 60, 30, 150],
+  w: 600, h: 400,
+  div: &quot;#barChart&quot;,
+  xaxis: &quot;no. of pennies&quot;,
+  hiColor: &quot;#FF317D&quot;
+}
+</code></pre>
+<p>Thanks @maxogden for the help with this.</p>
+<h3 id="started-doing-this-changelong-pretty-late-in-the-game-">Started doing this changelong pretty late in the game.</h3>

site/docs/custom-charts.html

@@ -0,0 +1,10 @@
+I love template.
+<h1 id="custom-charts">Custom Charts</h1>
+<p>It&#39;s easy to take a d3 chart of your own and use it with Sheetsee. If you make it into a module, anyone can use your chart, too!</p>
+<p>Sheetsee charts currently work by taking in some options, like so:</p>
+<pre><code class="lang-javascript">var pieOptions = {labels: &quot;name&quot;, units: &quot;units&quot;, m: [80, 80, 80, 80], w: 600, h: 400, div: &quot;#pieChart&quot;, hiColor: &quot;#14ECC8&quot;}
+</code></pre>
+<p>The <em>labels</em> represent the, the actual thing you&#39;re charting and <em>units</em> are how many of those things. Margin, width and height are <em>m, w, h</em> and the div to build your chart in is <em>div</em>. Finally, you can supply a highlight color if you want.</p>
+<p>So, your chart could take the same options, but map them into your d3 code with the correct variables. For instance if what sheetsee calls <em>labels</em> you call <em>itemID</em> you just add at the top of your code:</p>
+<pre><code class="lang-javascript">labels = itemID
+</code></pre>

site/docs/fork-n-go.html

@@ -0,0 +1,12 @@
+I love template.
+<h1 id="fork-n-go">Fork-n-Go</h1>
+<p>A Fork-n-Go project is a project on GitHub that in a few clicks and starting with a fork, gives you a live website that you control with an easy to swap-for-your-own Google Spreadsheet database.</p>
+<p>To awesome things that make this possible: Forking and GitHub Pages.</p>
+<p>On GitHub, a fork is a full copy of a repository that you can manage and edit. It&#39;s done with the click of a button.</p>
+<p>GitHub Pages is the hosting service that GitHub provides free to all users, organizations <em>and</em> repositories. This means everyone of these entities or project can have it&#39;s own website at a predictable domain:</p>
+<p>ORGS: orgname.github.io
+USER: username.github.io
+REPOSITORY: username.github.io/repositoryname</p>
+<p>To have a website for a repository all you need is a branch named <code>gh-pages</code>. GitHub will then look in that branch for web files and serve them up at the address.</p>
+<p>What all of this means sheetsee projects, hosted on gh-pages branches on GitHub can easily be forked and connected to your spreadsheet giving you a live website really easily.</p>
+<p>I think this is really exciting because I can imagine a world of these types of sites as templates.</p>