add site dir, fix rel link to demos

.gitignore

@@ -0,0 +1 @@
+node_modules

site/assets/sss.css

@@ -0,0 +1,25 @@
+/* General */
+
+body {margin: 0px auto;}
+a {color: #333;}
+input:focus {outline: none;}
+
+/* Table */
+
+table {text-align: left; width: 100%}
+th {padding: 10px 0px;}
+td, text {padding: 3px 20px 3px 0px; font-size: 14px;}
+.noMatches {margin-left: 20px; font-size: 11px; font-style: italic; visibility: hidden;}
+
+/* Line Chart */
+
+.axis {shape-rendering: crispEdges;}
+.x.axis .minor, .y.axis .minor {stroke-opacity: .5;}
+.x.axis {stroke-opacity: 1;}
+.y.axis line, .y.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
+.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
+path.chartLine {stroke: #333; 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: #e6e6e6;}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {}

site/assets/style.css

@@ -0,0 +1,51 @@
+.container {max-width: 800px; margin: 0 auto; overflow: auto;}
+
+h3 {padding-top: 18px;}
+h1 {font-size: 36px;}
+
+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, ol {text-indent: 0; margin: 0; padding-left: 20px;}
+ul li {padding-bottom: 6px; line-height: 22px;}
+
+footer {padding-top: 20px; margin-top: 60px; border-top: 1px solid #CCF4FF;  -webkit-column-count: 6; column-count: 6; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-count: 6; -moz-column-gap: 20px; height: 125px;}
+footer ul {list-style: none; padding-left: 0px; font-family: Libre Baskerville, Baskerville, Georgia, serif;}
+footer li {line-height: inherit; font-size: 10px;}
+footer h4 {font-size: 10px; -webkit-column-break-before: always; break-before: always; -moz-column-break-before: always; }
+footer h4 {margin-top: 0px;}
+footer a {border: none;}
+
+.half {max-width: 50%; display: inline-block; vertical-align: top;}
+.half:nth-child(odd) {padding-left: 20px;}
+
+/* older css */
+
+body {font-family: Libre Baskerville, Baskerville, Georgia, serif; font-size: 14px; background: #fff; color: #333;  border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; }
+h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif;}
+h2 {margin-top: 40px;}
+
+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:active {color: #47CCFC;}
+/*a:visited {color: #333;}*/
+small {padding: 10px 0px;}
+p, ol {line-height: 24px;}
+
+pre {word-wrap: break-word; padding: 6px; background: #f0f0f0;}
+code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; background: #f0f0f0; color: #636363; font-weight: normal;}
+
+/* funsies */
+::selection {background: #44FFB4;}
+::-moz-selection {background: #44FFB4;}
+
+/* Table */
+.ssExample table {min-width: 600px;}
+.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px; cursor: hand;}
+
+/* Map Popup Style */
+.leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto;}

site/assets/styles/atelier-forest.light.css

@@ -0,0 +1,93 @@
+/* Base16 Atelier Forest Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */ 
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+/* https://github.com/jmblog/color-themes-for-highlightjs */
+
+/* Atelier Forest Light Comment */
+.hljs-comment,
+.hljs-title {
+  color: #766e6b;
+}
+
+/* Atelier Forest Light Red */
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.ruby .hljs-constant,
+.xml .hljs-tag .hljs-title,
+.xml .hljs-pi,
+.xml .hljs-doctype,
+.html .hljs-doctype,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo {
+  color: #f22c40;
+}
+
+/* Atelier Forest Light Orange */
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
+  color: #df5320;
+}
+
+/* Atelier Forest Light Yellow */
+.hljs-ruby .hljs-class .hljs-title,
+.css .hljs-rules .hljs-attribute {
+  color: #d5911a;
+}
+
+/* Atelier Forest Light Green */
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.ruby .hljs-symbol,
+.xml .hljs-cdata {
+  color: #5ab738;
+}
+
+/* Atelier Forest Light Aqua */
+.css .hljs-hexcolor {
+  color: #00ad9c;
+}
+
+/* Atelier Forest Light Blue */
+.hljs-function,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-function .hljs-title,
+.ruby .hljs-title .hljs-keyword,
+.perl .hljs-sub,
+.javascript .hljs-title,
+.coffeescript .hljs-title {
+  color: #407ee7;
+}
+
+/* Atelier Forest Light Purple */
+.hljs-keyword,
+.javascript .hljs-function {
+  color: #6666ea;
+}
+
+.hljs {
+  display: block;
+  background: #f1efee;
+  color: #68615e;
+  padding: 0.5em;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+  opacity: 0.5;
+}

site/demos/demo-chart.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Chart Demo</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' 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>
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
+  </head>
+
+  <style>
+    p {font-family: Baskerville, Libre Baskerville, Georgia, serif;}
+    #pennies.axis {shape-rendering: crispEdges;}
+    #pennies.x.axis .minor, #pennies.y.axis .minor {stroke-opacity: .5;}
+    #pennies.x.axis {stroke-opacity: 1;}
+    #pennies.y.axis line, #pennies.y.axis path, #pennies.x.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
+    #pennies .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;}
+    #pennies div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none; font-family: Helvetica, Arial, sans-serif;}
+    circle {fill: #fff; cursor: pointer;}
+    path.domain {fill: #CCF4FF;}
+  </style>
+
+<body>
+  <div class="container">
+    <h1>Pennies by State</h1>
+    <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em></p>
+    <div id="pennies"></div>
+    <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-charts.html">View Documentation</a></em></p>
+
+    <footer>
+      <h4 id="getting-started">Getting Started</h4>
+      <ul>
+        <li><a href="../docs/about.html">About Sheetsee</a></li>
+        <li><a href="../docs/building.html">Building Sheetsee</a></li>
+        <li><a href="../docs/basics.html">Basics</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>
+        <li><a href="../docs/custom-charts.html">Custom charts</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>
+      </ul>
+      <h4 id="use">Use</h4>
+      <ul>
+        <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
+        <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
+        <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
+        <li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
+      </ul>
+      <h4 id="use">Contact</h4>
+      <ul>
+        <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+        <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
+      </ul>
+      <h4 id="home"><a href="/">Home</a></h4>
+    </footer>
+  </div>
+
+  <script type="text/javascript">
+   document.addEventListener('DOMContentLoaded', function() {
+   	var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+  		Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
+  	})
+
+    function showInfo(data) {
+      var cali = Sheetsee.getOccurance(data, "state")
+      var colors = ['#ff00ff', '#acacac']
+      var caliData = Sheetsee.makeColorArrayOfObject(cali, colors)
+      var lineOptions = { units: "units",
+                          labels: "undefined",
+                          m: [80, 100, 120, 100],
+                          w: 800, h: 400,
+                          div: "#pennies",
+                          yaxis: "pennies",
+                          hiColor: "#E4EB29"
+                        }
+      Sheetsee.d3LineChart(caliData, lineOptions)
+    }
+  </script>
+
+  </body>
+</html>

site/demos/demo-map.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Maps Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' 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>
+    <link rel='stylesheet' type='text/css' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
+  </head>
+  <style>
+    #map {max-width: 800px; height: 500px;}
+    .leaflet-popup-content li {list-style:none;}
+    .leaflet-popup-content {width: 102px;}
+    .leaflet-popup-content img {width: 100px;}
+    a {border: none;}
+  </style>
+  <body>
+    <div class="container">
+      <h1>All Pennies  Map</h1>
+      <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
+      <div id="map"></div>
+      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
+
+      <footer>
+        <h4 id="getting-started">Getting Started</h4>
+        <ul>
+          <li><a href="../docs/about.html">About Sheetsee</a></li>
+          <li><a href="../docs/building.html">Building Sheetsee</a></li>
+          <li><a href="../docs/basics.html">Basics</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>
+          <li><a href="../docs/custom-charts.html">Custom charts</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>
+        </ul>
+        <h4 id="use">Use</h4>
+        <ul>
+          <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
+          <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
+          <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
+          <li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
+        </ul>
+        <h4 id="use">Contact</h4>
+        <ul>
+          <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
+          <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
+        </ul>
+        <h4 id="home"><a href="/">Home</a></h4>
+      </footer>
+
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function() {
+        var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+        Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
+      })
+
+      function showInfo(data) {
+        var optionsJSON = ["placename", "photo-url"]
+        var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
+                     + "<img src='{{photo-url}}'></a></li>"
+                     + "<li><h4>{{placename}}</h4></li></ul>"
+        var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
+        var map = Sheetsee.loadMap("map")
+        Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
+        var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
+      }
+    </script>
+  </body>
+</html>