working on documentation

buildpage.js

@@ -12,6 +12,14 @@ cpr('./demos', './site/demos', function(err, files) {
   if (err) return console.log(err)
 })
 
+fs.readFile('./newReadme.md', function(err, file) {
+  if (err) return console.log(err)
+  var name = "index"
+  var content = file.toString()
+  var html = marked(content)
+  applyTemplate(html, name)
+})
+
 glob("docs/*.md", function (err, files) {
   if (err) return console.log(err)
   var filenames = files.map(function(name) {
@@ -36,6 +44,9 @@ function applyTemplate(html, name) {
 }
 
 function writeFile(page, name) {
+  if (name === "index") {
+    fs.writeFileSync('./site/' + name + '.html' , page)  
+  }
   mkdirp('./site/docs', function (err) {
     if (err) return console.error(err)
     fs.writeFileSync('./site/docs/' + name + '.html' , page)  

newReamde.md

@@ -0,0 +1,59 @@
+
+![sheetseeimg](https://raw.github.com/jlord/sheetsee-cache/master/img/sheetsee-03.png)
+
+# Sheetsee.js
+
+**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).
+
+## 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).
+
+
+| 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) |
+
+
+## Making Things
+
+What can you make with **Sheetsee.js**? Lost of things, here are some examples: 
+
+- [Hack-Spots](http://jlord.github.io/hack-spots)
+- [Combine with IFTTT](http://jlord.us/instagram/)
+
+## Demos & Templates
+
+Demos pages for the documentation.
+
+- [Table Demo](/demos/demo-table.html)
+- [Map Demo](/demos/demo-map.html)
+- [Chart Demo](/demos/demo-chart.html)
+- [Basic Template](/demos/template.html)
+
+## Documentation
+
+More resources on using Sheetsee.js:
+
+#### Getting Started
+
+- [About Sheetsee.js](docs/about.md)
+- [Building Sheetsee](docs/building.md)
+
+#### Ideas
+
+- [Fork-n-Go](docs/fork-n-go.md)
+- [Tips!](docs/tips.md)
+
+#### Use
+
+- [Sheetsee](docs/sheetsee.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)

site/assets/style.css

@@ -1,3 +1,106 @@
 body {background: #ff00ff;}
-.container {max-width: 900px; margin: 0 auto;}
-img {width: 100%;}
+.container {max-width: 800px; margin: 0 auto; overflow: auto;}
+img {width: 100%;}
+
+
+table {border-spacing: 0;}
+tbody tr:nth-child(odd) {background-color: #f3f3f3;}
+td {min-width: 140px; vertical-align: top; padding: 8px;}
+tr {height: 50px;}
+ul {text-indent: 0; margin: 0; padding-left: 18px;}
+ul li {padding-bottom: 6px;}
+
+.half {max-width: 50%; display: inline-block; vertical-align: top;}
+.half:nth-child(odd) {padding-left: 20px;}
+
+  /* General */
+
+  /* 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; }
+  h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif;}
+  h2 {margin-top: 82px;}
+
+  h3.functionH {margin-left: -14px; margin-top: 52px; border-top: 3px solid #47CCFC; border-left: 3px solid #47CCFC; border-right: 3px solid #47CCFC; padding-left: 14px; padding-top: 9px; }
+  img {width: 100%;} 
+
+  p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;}
+  p a:visted {color: #ff00ff;}
+  a:hover {color: #47CCFC;}
+  a:visited {color: #333;}
+  small {padding: 10px 0px;}
+  p, ol {line-height: 24px;}
+
+  pre {word-wrap: break-word; padding: 14px; background: #F0F0F0;}
+  code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; font-size: 13px; color: #636363; font-weight: normal;}
+
+  /* funsies */
+  ::selection {background: #44FFB4;}
+  ::-moz-selection {background: #44FFB4;}
+
+  img.petThumbs {height: 80px; width: 80px; border-radius: 1000px;}
+
+  .button {padding: 5px 4px; background-color: #fff; font-size: 10px;}
+
+  #menu {color: #fff; padding: 20px; float: left; position: fixed; left: 40px; top: 40px; max-width: 300px; font-family: Helvetica, Arial, sans-serif; font-size: 14px;}
+  #menu ul {list-style: none; margin: 0px; padding: 0px;}
+  #menu li {line-height: 34px;}
+  #menu li a {padding: 4px 8px; background-color: #F0F0F0; text-decoration: none; border: none;}
+  #menu li a.a2 {background-color: #CCF4FF;}
+  #menu li a:hover {background-color: #e7e7e7; color: #333;}
+
+  #wrapper {margin: 0px auto; max-width: 800px; padding-top: 40px;}
+
+  /* Examples */
+  .ssExample {margin: 20px -28px; background-color: #CCF4FF; padding: 20px 28px; background-color: #CCF4FF; border: 8px solid #47CCFC; margin-top: 44px; padding-top: 0px; overflow: auto;}
+  .ssExample li {padding: 2px 0px;}
+  .ssExample h2 {margin-top: inherit;}
+
+  /* Table */
+  .ssExample table {min-width: 600px;}
+  .tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px;}
+
+  /* Map Popup Style */
+  .leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto;}
+
+  /* Most Cuddleable Template */
+  #mostCuddle img.most {max-width: 400px; border-radius: 9999px; margin-top: 34px;}
+  #mostCuddle {text-align: center;}
+  #mostCuddle table {width: auto;}
+  #mostCuddle li {padding: 10px 0px; font-size: 18px; display: inline-block;}
+  .boxText {background-color: #47CCFC; padding: 4px 8px; font-family: Helvetica, Arial, sans-serif;}
+
+  /* Bar Chart */
+  #dogBar.labels text {text-align: right;}
+  #dogBar.bar .labels text {fill: #333;}
+  #dogBar.bar rect {fill: #e6e6e6;}
+  #dogBar.axis {shape-rendering: crispEdges;}
+  #dogBar .x.axis line {stroke: #CCF4FF; /*stroke-opacity: .2;*/ fill: none;}
+  #dogBar.x.axis path {fill: none;}
+  #dogBar.x.axis text {fill: #333;}
+  #dogBar.xLabel {font-family: sans-serif; font-size: 9px;}
+
+  /* Line Chart */
+  #dogLine.axis {shape-rendering: crispEdges;}
+  #dogLine.x.axis .minor, #dogLine.y.axis .minor {stroke-opacity: .5;}
+  #dogLine.x.axis {stroke-opacity: 1;}
+  #dogLine.y.axis line, #dogLine.y.axis path, #dogLine.x.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
+  #dogLine .x.axis line {stroke: #acacac; stroke-opacity: .75;}
+  .bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
+  path.chartLine {stroke: #14ECC8; stroke-width: 3; fill: none;}
+  div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
+  circle {fill: #fff;}
+
+  /* Pie Chart */
+  .arc path { stroke: #fff;}
+
+  /* Responsive Town */
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {
+    body {padding-bottom: 50px;}
+    #wrapper {max-width: 100%; padding-top: 20px;}
+    #menu {color: #fff; padding: 0px; float: none; position: relative; left: auto; top: auto; max-width: 100%; font-family: Helvetica, Arial, sans-serif;}
+    #menu li {display: inline-block;}
+    h3.functionH {margin: 0px; border-top: 5px solid #47CCFC; border-left: 0px; border-right: 0px; padding-top: 9px; word-wrap: break-word; padding-left: 0px;}
+    ul {padding-left: 20px;}
+  }

site/demos/demo-chart.html

@@ -3,7 +3,7 @@
     <title>Sheetsee Chart Demo</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-    <script type="text/javascript" src='../../js/sheetsee.js'></script>
+    <script type="text/javascript" src='../js/sheetsee.js'></script>
     <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

site/demos/demo-map.html

@@ -3,7 +3,7 @@
     <title>Sheetsee Maps Demo</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-    <script type="text/javascript" src='../../js/sheetsee.js'></script>
+    <script type="text/javascript" src='../js/sheetsee.js'></script>
     <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

site/demos/demo-table.html

@@ -3,7 +3,7 @@
     <title>Sheetsee Table Demo</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-    <script type="text/javascript" src='../../js/sheetsee.js'></script>
+    <script type="text/javascript" src='../js/sheetsee.js'></script>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <!--     <link rel="stylesheet" type="text/css" href="css/style.css"> -->

site/demos/demo.html

@@ -3,7 +3,7 @@
     <title>Yo, yo, yo!</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-    <script type="text/javascript" src='../../js/sheetsee.js'></script>
+    <script type="text/javascript" src='dist/sheetsee.js'></script>
     <link rel="shortcut icon" href="https://raw.github.com/jllord/sheetsee-cache/master/favico.png"/>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>