working on them docs

buildpage.js

@@ -12,11 +12,11 @@ cpr('./demos', './site/demos', function(err, files) {
   if (err) return console.log(err)
 })
 
-fs.readFile('./newReadme.md', function(err, file) {
+fs.readFile('new-readme.md', function(err, file) {
   if (err) return console.log(err)
   var name = "index"
   var content = file.toString()
-  var html = marked(content)
+  var html = changeExtensions(marked(content))
   applyTemplate(html, name)
 })
 
@@ -29,13 +29,20 @@ glob("docs/*.md", function (err, files) {
     var name = file.split('.md')[0]
     var filePath = "./docs/"
     var content = fs.readFileSync(filePath + file).toString()
-    var html = marked(content)
+    var html = changeExtensions(marked(content))
     applyTemplate(html, name)
   })
 })
 
 function applyTemplate(html, name) {
   var content = {content: html}
+  if (name === "index") {
+    content.rootstyle = ""
+    content.rootdoc = "docs"
+  } else {
+     content.rootstyle = ".."
+     content.rootdoc = ""
+  }
   var file = "template.hbs"
   var rawTemplate =  fs.readFileSync(file).toString()
   var template = hbs.compile(rawTemplate)
@@ -45,11 +52,20 @@ function applyTemplate(html, name) {
 
 function writeFile(page, name) {
   if (name === "index") {
-    fs.writeFileSync('./site/' + name + '.html' , page)  
+    return fs.writeFileSync('./site/' + name + '.html' , page)  
   }
   mkdirp('./site/docs', function (err) {
     if (err) return console.error(err)
     fs.writeFileSync('./site/docs/' + name + '.html' , page)  
   })
 }
 
+function changeExtensions(html, name) {
+  if (name === "index") {
+    html = html.replace('/\./\.\/', '')
+  }
+  var re = /.md$/
+  var newHtml = html.replace(/\.md/g, '.html')
+  return newHtml
+}
+

docs/sheetsee-charts.md

@@ -1,14 +1,14 @@
-# sheetsee-charts
+# Sheetsee-charts
 
-Sheetsee provides three d3 chart options to use with your spreadsheet data: a bar chart, line chart and pie graph. You can also plug in your own custom d3 chart to sheetsee, read about that [here](custom-charts.md).
+Sheetsee provides three d3 chart options to use with your spreadsheet data: a bar chart, line chart and pie graph. See a [demo](demos/demo-chart.html). You can also plug in your own custom d3 chart to sheetsee, read about that [here](custom-charts.md).
 
 ## Make a Chart
 
-Sheetsee.js comes with a d3.js bar, pie and line chart. Each requires your data be an _array of objects_, formatted to contain "label" and "units" keys. See the section above on Your Data to learn about formatting.
+Sheetsee.js comes with a d3.js bar, pie and line chart. Each requires your data be an _array of objects_, with objects containing "label" and "units" key/value pairs. See the section above on Your Data to learn about formatting.
 
-You'll have to experiement with the charts to find the correct size your `<div>` will need to be to hold the chart with your data in it nicely.
+Experiment with the charts to find the correct size your `<div>` will need to be to hold the chart with your data in it nicely.
 
-You can also make your own d3 chart in a separate .js file, link to that and pass your data on to it. I'd love to see people building some other charts that will work with Sheetsee.
+You can also make your own d3 chart in a separate .js file, link to that and pass your data on to it. Information [here](docs/custom-charts.md) on using your own chart.
 
 ### Bar Chart
 
@@ -21,7 +21,7 @@ To create a bar chart you'll need to add a placeholder `<div>` in your HTML with
 In your CSS, give it dimensions.
 
 ```CSS
-#barChart {height: 400px; max-width: 600px; background: #F8CDCD;}
+barChart {height: 400px; max-width: 600px; background: #F8CDCD;}
 ```
 
 In a `<script>` tag set up your options.

docs/sheetsee.md → docs/sheetsee-core.md

@@ -1,6 +1,6 @@
-# sheetsee
+# Sheetsee-core
 
-This is the core module to create a sheetsee.js library. It contains the functions for building your custom file as well as the basic data manipulation functions.
+This is the core module for creating a sheetsee.js bundle. It contains the functions for building your custom file as well as the basic data manipulation functions, it's automatically built into bundles. 
 
 ## Working With Your Data
 

docs/sheetsee-maps.md

@@ -1,18 +1,18 @@
-# sheetsee-maps
+# Sheetsee-maps
 
-Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps of your points, polygons, lines or multipolygons (all coordinate based).
+Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps of your points, polygons, lines or multipolygons (all coordinate based). See a map [demo](/demos/demo-map.html).
 
 You'll create a placeholder `<div>` in your HTML and fire up a map from within `<script>` tags.
 
-#### Your HTML Placeholder `<div>`
+## Your HTML Placeholder `<div>`
 
 Create an empty `<div>` in your HTML, with an id (name).
 
 ```HTML
 <div id="map"></div>
 ```
 
-#### Your `<script>` Functions
+## Your `<script>` Functions
 
 Next you'll need to create geoJSON out of your data so that it can be mapped.
 

docs/sheetsee-tables.md

@@ -1,28 +1,28 @@
-# sheetsee-tables
+# Sheetsee-tables
 
-With this module you can create tables of your data that are sortable, searchable and paginate-able.
+With this module you can create tables of your data that are sortable, searchable and paginate-able. See the [demo](/demo/sheetsee-tables.md).
 
-You'll need a `<div>` in your html, a `<script>` mustache template and a `<script>` that intitiates the table.
+You'll need a placeholder `<div>` in your html, a `<script>` mustache template and a `<script>` that initiates the table.
 
-#### Your HTML Placeholder `<div>`
+## Your HTML Placeholder `<div>`
 
 This is as simple as an empty `<div>` with an id. This id should match the script template id in the next section.
 
 ```HTML
 <div id="siteTable"></div>
 ```
 
-#### Your `<script>` Template
+## Your `<script>` Template
 
 Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you!
 
-##### Sorting
+### Sorting
 
-If you want users to be able to click on headers and sort that column, your template must include table headers with the class _tHeader_.
+If you want users to be able to click on headers and sort that column, your template must include table headers with the class `theader`.
 
 *Example*
 
-_The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase and remember spaces are omitted, so "Place Name" will become "placename"._
+_The variables inside the {{}} must match the column headers in your spreadsheet. They should be lowercase and remember spaces are omitted, so "Place Name" will become "placename"._
 
 ```HTML
 <script id="siteTable" type="text/html">
@@ -68,13 +68,26 @@ Sheetsee.makeTable(gData, "#siteTable", 10)
 
 If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, at the bottom of your table it will add this for naviagtion, which you can style in your CSS:
 
+HTML:
+
 ```HTML
 <div id='Pagination' currentPage class='table-pagination'>
   Showing page currentPage of totalPages
   <a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>
 </div>
 ```
 
+CSS:
+
+```CSS
+<style>
+  body {font-family: Helvetica Neue; }
+  #Pagination {background: #eee;}
+  .pagination-next, .pagination-pre {cursor: hand;}
+  .no-pag {color: #acacac;}
+</style>
+```
+
 ## Table Filter/Search
 
 If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an ide and if you want, placeholder text:

newReamde.md → new-readme.md

@@ -5,19 +5,19 @@
 
 **Sheetsee.js** is a library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts.
 
-Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. Read more about using spreadsheets for databases [here](/docs/basics).
+Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. Read more about using spreadsheets for databases [here](/docs/basics.md).
 
 ## Modules
 
-Each of **sheetsee.js**'s features are divided into modules. Use just the parts you need (see docs on [building](/docs/building)). If you don't want to build your own, you can just use the full library which includes all modules, it's [here on GitHub](http://www.github.com/sheetsee.js).
+Each of **sheetsee.js**'s features are divided into modules. Use just the parts you need (see docs on [building](/docs/building.md)). If you don't want to build your own, you can just use the full library which includes all modules, it's [here on GitHub](http://www.github.com/jlord/sheetsee.js).
 
 
 | Module              | Contains                                                                                            | Docs                         |
 | ------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------- |
-| **sheetsee-core**   | **Included in any build**. Gets you started and has the working-with-your-data functions.           | [Doc](/docs/sheetsee-core)   |
-| **sheetsee-tables** | Contains everything you'll need to create a table including sortable columns, pagination and search.| [Doc](/docs/sheetsee-tables) |
-| **sheetsee-maps**   | For making maps with your point, line or polygon spreadsheet data. Built on Mapbox.js.              | [Doc](/docs/sheetsee-maps)   |
-| **sheetsee-charts** | Includes 3 basic d3 charts: bar, line and pie. You can also [use your own](docs/custom-charts).      | [Doc](/docs/sheetsee-charts) |
+| **sheetsee-core**   | **Included in any build**. Gets you started and has the working-with-your-data functions.           | [Doc](/docs/sheetsee-core.md)   |
+| **sheetsee-tables** | Contains everything you'll need to create a table including sortable columns, pagination and search.| [Doc](/docs/sheetsee-tables.md) |
+| **sheetsee-maps**   | For making maps with your point, line or polygon spreadsheet data. Built on Mapbox.js.              | [Doc](/docs/sheetsee-maps.md)   |
+| **sheetsee-charts** | Includes 3 basic d3 charts: bar, line and pie. You can also [use your own](docs/custom-charts.md).      | [Doc](/docs/sheetsee-charts.md) |
 
 
 ## Making Things
@@ -52,8 +52,8 @@ More resources on using Sheetsee.js:
 
 #### Use
 
-- [Sheetsee](docs/sheetsee.md)
+- [Sheetsee-core](docs/sheetsee-core.md)
 - [Sheetsee-tables](docs/sheetsee-tables.md)
 - [Sheetsee-maps](docs/sheetsee-maps.md)
 - [Sheetsee-charts](docs/sheetsee-charts.md)
-- [Custom d3](docs/custom-charts.md)
+- [Custom charts](docs/custom-charts.md)

site/assets/style.css

@@ -1,7 +1,13 @@
 body {background: #ff00ff;}
 .container {max-width: 800px; margin: 0 auto; overflow: auto;}
 img {width: 100%;}
-
+footer {font-size: 10px; padding-top: 20px; margin-top: 60px; border-top: 1px solid #CCF4FF;  -webkit-column-count: 6; -webkit-column-gap: 20px; height: 125px;}
+footer ul {list-style: none; padding-left: 0px;}
+footer h4 {-webkit-column-break-before: always; }
+footer h4 {margin-top: 0px;}
+/*footer h4:first-child {margin-top: 0px;}*/
+h3 {padding-top: 18px;}
+h1 {font-size: 36px;}
 
 table {border-spacing: 0;}
 tbody tr:nth-child(odd) {background-color: #f3f3f3;}
@@ -17,7 +23,7 @@ ul li {padding-bottom: 6px;}
 
   /* Page Specific CSS */
 
-  body {font-family: Merriweather; background: #fff; color: #333; font-size: 100%; border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 200px 20px; font-size: 16px; }
+  body {font-family: Libre Baskerville; background: #fff; color: #333; font-size: 14px; border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 200px 20px; }
   h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif;}
   h2 {margin-top: 82px;}
 

site/docs/about.html

@@ -6,12 +6,13 @@
     <meta name="description" content="sheetsee.js, google, spreadsheet, visualize, data, javascript">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>such site, very sheetsee.js</title>
+    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
     <link rel="shortcut icon" href=""/>
     <link href='../assets/style.css' rel='stylesheet'>
   </head>
   <body>
     <div class="container">
-    <p>More about Sheetsee&#39;s development and the libraries it&#39;s built on.</p>
+      <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>
@@ -22,7 +23,7 @@ <h3 id="sheetsee-js-mapbox-js-leaflet-js-d3-js">Sheetsee.js + Mapbox.js + Leafle
 <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 open source software with a <a href="docs/license.html">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>
@@ -44,6 +45,38 @@ <h2 id="big-time-thanks">Big Time Thanks</h2>
 <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>
 
+
+      <footer>
+        <h4 id="getting-started">Getting Started</h4>
+        <ul>
+        <li><a href="docs/about.html">About Sheetsee.js</a></li>
+        <li><a href="docs/building.html">Building Sheetsee</a></li>
+        </ul>
+        <h4 id="ideas">Ideas</h4>
+        <ul>
+        <li><a href="docs/fork-n-go.html">Fork-n-Go</a></li>
+        <li><a href="docs/tips.html">Tips!</a></li>
+        </ul>
+        <h4>Demos</h4>
+        <ul>
+        <li><a href="/demos/demo-table.html">Table Demo</a></li>
+        <li><a href="/demos/demo-map.html">Map Demo</a></li>
+        <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+        <li><a href="/demos/template.html">Basic Template</a></li>
+        </ul>
+        <h4 id="use">Use</h4>
+        <ul>
+        <li><a href="/sheetsee-core.html">Sheetsee-core</a></li>
+        <li><a href="/sheetsee-tables.html">Sheetsee-tables</a></li>
+        <li><a href="/sheetsee-maps.html">Sheetsee-maps</a></li>
+        <li><a href="/sheetsee-charts.html">Sheetsee-charts</a></li>
+        <li><a href="/custom-charts.html">Custom charts</a></li>
+        </ul>
+        <h4 id="use">Contact</h4>
+        <ul>
+        <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+        </ul>
+      </footer>
     </div>
   </body>
 </html>

site/docs/basics.html

@@ -6,12 +6,13 @@
     <meta name="description" content="sheetsee.js, google, spreadsheet, visualize, data, javascript">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>such site, very sheetsee.js</title>
+    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
     <link rel="shortcut icon" href=""/>
     <link href='../assets/style.css' rel='stylesheet'>
   </head>
   <body>
     <div class="container">
-    <h2 id="why-use-spreadsheets-">Why Use Spreadsheets?</h2>
+      <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>
@@ -72,6 +73,38 @@ <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>
 
+
+      <footer>
+        <h4 id="getting-started">Getting Started</h4>
+        <ul>
+        <li><a href="docs/about.html">About Sheetsee.js</a></li>
+        <li><a href="docs/building.html">Building Sheetsee</a></li>
+        </ul>
+        <h4 id="ideas">Ideas</h4>
+        <ul>
+        <li><a href="docs/fork-n-go.html">Fork-n-Go</a></li>
+        <li><a href="docs/tips.html">Tips!</a></li>
+        </ul>
+        <h4>Demos</h4>
+        <ul>
+        <li><a href="/demos/demo-table.html">Table Demo</a></li>
+        <li><a href="/demos/demo-map.html">Map Demo</a></li>
+        <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+        <li><a href="/demos/template.html">Basic Template</a></li>
+        </ul>
+        <h4 id="use">Use</h4>
+        <ul>
+        <li><a href="/sheetsee-core.html">Sheetsee-core</a></li>
+        <li><a href="/sheetsee-tables.html">Sheetsee-tables</a></li>
+        <li><a href="/sheetsee-maps.html">Sheetsee-maps</a></li>
+        <li><a href="/sheetsee-charts.html">Sheetsee-charts</a></li>
+        <li><a href="/custom-charts.html">Custom charts</a></li>
+        </ul>
+        <h4 id="use">Contact</h4>
+        <ul>
+        <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+        </ul>
+      </footer>
     </div>
   </body>
 </html>