jlord · diegohack79 · Dec 21, 2025 · Dec 21, 2025
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,52 @@
+# Sheetsee.js Copilot Instructions
+
+## Project Overview
+
+Sheetsee.js is a client-side JavaScript library for connecting Google Spreadsheets to websites and visualizing data with tables and maps. It integrates with Tabletop.js for data fetching, Mustache.js for templating, and Leaflet.js for mapping.
+
+This repository contains the documentation site and a pre-compiled full version of sheetsee.js. Core functionality lives in separate repositories (sheetsee-core, sheetsee-tables, sheetsee-maps).
+
+## Architecture
+
+- **Data Flow**: Tabletop.js fetches Google Sheets → Sheetsee processes data → Renders via Mustache templates
+- **Components**: Core data utilities + optional tables (sortable/pagination/search) + maps (Leaflet-based)
+- **Build System**: Custom CLI tool (`sheetsee`) for building minimal versions including only needed components
+- **Module Format**: Pre-compiled library uses UMD (Universal Module Definition) for browser compatibility
+
+## Key Patterns
+
+- **Initialization**: Use `Tabletop.init({key: URL, callback: yourFunction, simpleSheet: true})` in DOMContentLoaded
+- **Templates**: Place Mustache templates in `<script id="divId_template" type="text/html">` tags
+- **Options Objects**: Pass configuration as objects (e.g., `Sheetsee.makeTable(options)`, `Sheetsee.loadMap(options)`)
+- **Table Options**: Include `data`, `pagination`, `tableDiv`, `filterDiv` for full functionality
+- **Map Options**: Include `data`, `mapDiv`, `geoJSONincludes`, `template` for popups
+- **Data Structure**: Spreadsheet data arrives as array of objects, accessed via `rows` in templates
+
+## Development Workflows
+
+- **Build Docs**: `npm run build` - Converts `/docs/*.md` to HTML using marked + mustache templating with Handlebars layout
+- **Clear Site**: `npm run clear` - Cleans generated HTML files (preserves hand-crafted demos)
+- **Custom Builds**: Use global `sheetsee` CLI: `sheetsee -t --save` (tables only), `sheetsee -m --save` (maps only)
+- **External Dependencies**: Always include Tabletop.js CDN, Leaflet CSS/JS for maps, sheetsee.js, and sss.css
+
+## File Structure
+
+- `/docs/` - Markdown documentation (edit these, not generated HTML)
+- `/demos/` - Working examples showing integration patterns (see `demo-table.html`, `demo-map.html`, `demo-music.html`)
+- `/js/sheetsee.js` - Pre-compiled full library (UMD module, ~15KB minified)
+- `/scripts/buildpage.js` - Doc generation script using glob/marked/mustache
+- `/scripts/template.hbs` - Handlebars template for HTML page layout
+
+## Conventions
+
+- Issues/PRs for JS code go to component repos (sheetsee-core, sheetsee-tables, sheetsee-maps)
+- This repo is for documentation and site issues only
+- Templates use `{{variable}}` syntax, data passed as `rows` array for tables
+- Map data expects lat/lng columns for point mapping
+- Demo pages include full working examples with CDN dependencies and inline scripts
+
+## Examples
+
+- Table: `Sheetsee.makeTable({data: data, pagination: 10, tableDiv: "#table", filterDiv: "#filter"})`
+- Map: `Sheetsee.loadMap({data: data, mapDiv: "map", geoJSONincludes: ["name"], template: popupHTML})`
+- Template: `<script id="table_template" type="text/html"><table>{{#rows}}<tr><td>{{column}}</td></tr>{{/rows}}</table></script>`
diff --git a/demos/demo-music.html b/demos/demo-music.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Music Assistant Demo</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
+    <link rel="shortcut icon" href="../favicon.png">
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/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>
+    #Pagination {border-top: 4px solid #CCF4FF; margin: 10px 0px; padding-top: 10px; display: inline-block;}
+    #Pagination a {cursor: pointer;}
+    .no-pag {color: #acacac; border: none;}
+    .no-pag:hover {color: #acacac;}
+    input {border: none; border-bottom: 1px solid #333;margin: 10px 0px; width: 200px; font-size: 16px; padding-bottom: 6px;}
+    .tHeader {padding: 8px; cursor: pointer; text-align: left;}
+    .music-player {margin: 20px 0; padding: 10px; background: #f5f5f5; border-radius: 5px;}
+    .play-button {background: #CCF4FF; border: none; padding: 5px 10px; cursor: pointer; border-radius: 3px;}
+  </style>
+  <body>
+    <div class="container">
+      <h1>Music Playlist Assistant</h1>
+      <p><em><a href="https://docs.google.com/spreadsheets/d/1EXAMPLE_KEY/edit" target="_blank">Sample Music Spreadsheet</a></em></p>
+      <input id="musicTableFilter" type="text" placeholder="filter by artist, song, genre..."></input>
+      <a class="clear">Clear</a>
+      <div id="musicTable">Loading playlist...</div>
+      <div class="music-player">
+        <h3>Now Playing</h3>
+        <div id="now-playing">Select a song to play</div>
+        <button class="play-button" id="play-button">Play</button>
+      </div>
+      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-tables.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/templates.html">Templates</a></li>
+          <li><a href="../docs/tips.html">Tips!</a></li>
+        </ul>
+        <h4>Demos</h4>
+        <ul>
+          <li><a href="./demo-table.html">Table Demo</a></li>
+          <li><a href="./demo-map.html">Map Demo</a></li>
+          <li><a href="./demo-music.html">Music Assistant 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>
+        </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><a class="home-link" href="../index.html">Home</a></h4>
+      </footer>
+    </div>
+
+    <script id="musicTable_template" type="text/html">
+      <table>
+        <tr><th class="tHeader">Artist</th><th class="tHeader">Song</th><th class="tHeader">Genre</th><th class="tHeader">Year</th><th class="tHeader">Duration</th><th>Play</th></tr>
+          {{#rows}}
+            <tr data-song="{{Song}}" data-artist="{{Artist}}">
+              <td>{{Artist}}</td>
+              <td>{{Song}}</td>
+              <td>{{Genre}}</td>
+              <td>{{Year}}</td>
+              <td>{{Duration}}</td>
+              <td><button class="play-button" onclick="selectSong('{{Song}}', '{{Artist}}')">▶</button></td>
+            </tr>
+          {{/rows}}
+      </table>
+    </script>
+
+    <script type="text/javascript">
+      let currentSong = null;
+
+      document.addEventListener('DOMContentLoaded', function() {
+        // Example spreadsheet key - replace with actual music data spreadsheet
+        var URL = "1EXAMPLE_KEY_FOR_MUSIC_DATA"
+        Tabletop.init({key: URL, callback: showPlaylist, simpleSheet: true})
+      })
+
+      function showPlaylist (data) {
+        var tableOptions = {
+          "data": data,
+          "pagination": 15,
+          "tableDiv": "#musicTable",
+          "filterDiv": "#musicTableFilter"
+        }
+        Sheetsee.makeTable(tableOptions)
+        Sheetsee.initiateTableFilter(tableOptions)
+      }
+
+      function selectSong(song, artist) {
+        currentSong = {song: song, artist: artist};
+        document.getElementById('now-playing').textContent = `${song} by ${artist}`;
+        document.getElementById('play-button').style.display = 'inline-block';
+      }
+
+      document.getElementById('play-button').addEventListener('click', function() {
+        if (currentSong) {
+          alert(`Playing: ${currentSong.song} by ${currentSong.artist}\n\n(In a real implementation, this would integrate with a music API or player)`);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -57,7 +57,7 @@ <h2 id="modules">Modules</h2>
 <div class="new-news">New News!</div>
 
 <h2 id="get-your-spreadsheet-as-json-or-try-sheetsee-with-glitch-">Get your Spreadsheet as JSON or Try Sheetsee with Glitch!</h2>
-<p>The <a href="https://glitch.com/~sheetseetemplate">glitch.com/~sheetseetemplate</a> site will give you an endpoint to use that will return your spreadsheet to you as JSON. The <a href="https://sheetsee.glitch.me">sheetsee.glitch.me</a> site provides template to get started with Sheetsee; it&#39;s already set up with a server so that your data is backed up.</p>
+<p>The <a href="https://spreadsheet.glitch.me">spreadsheet.glitch.me</a> site will give you an endpoint to use that will return your spreadsheet to you as JSON. The <a href="https://sheetseetemplate.glitch.me">sheetseetemplate.glitch.me</a> site provides template to get started with Sheetsee; it&#39;s already set up with a server so that your data is backed up.</p>
 <h3 id="or-fork-a-site-">Or Fork a Site!</h3>
 <p>There are site templates hooked up to Sheetsee that are ready to be forked on GitHub and used by you, check out the <a href="http://jlord.us/forkngo">Fork-n-go site</a>.</p>
 <h2 id="sheetsee-updates">Sheetsee Updates</h2>
@@ -89,6 +89,12 @@ <h2 id="resources-documentation">Resources &amp; Documentation</h2>
 <td><a href="./docs/sheetsee-tables.html">Sheetsee-tables</a></td>
 </tr>
 <tr>
+<td></td>
+<td></td>
+<td><a href="./demos/demo-music.html">Music Assistant Demo</a></td>
+<td></td>
+</tr>
+<tr>
 <td><a href="./docs/basics.html">Basics</a></td>
 <td></td>
 <td></td>
@@ -114,6 +120,7 @@ <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-music.html">Music Assistant Demo</a></li>
         </ul>
         <h4 id="use">Use</h4>
         <ul>

diff --git a/package-lock.json b/package-lock.json