artserve 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee35cbcad011ec2401a4f4f2721085fb446f59a90b4bd8d44639fa9664fc1aa3
-  data.tar.gz: c463a6104dce4ce3fcc4ddbd15ad3aeb9e49337c8da0f02e89e26b3e63bb078d
+  metadata.gz: 60a1c24aca28429732b6b6b90a2008b3abd8d56e5e7849175c7a16701b7dbdbf
+  data.tar.gz: f8c745e129b3d4b421f5681056b5dd6d8507244ef69c5f40cdee56a0e4ae4b05
 SHA512:
-  metadata.gz: a2b2d6e2bd48a9a8a6cc8eebc8d480462917fe1e677172077f55f94851537f1a28f47f3e356f39edf8a66117609744c87dd69576038359ec3ddd88887d420d43
-  data.tar.gz: ca5a7940eeaac3a47baa5213090dc67f5acfdf8ca8204b3ea0594d4a0617fa19d2ebe0578a824c54f3d0a680529a9b391a3dbec66a5ff4521ab139793414e78d
+  metadata.gz: a48553cf45dff026e510acfa29aaa7af1d10623807233ca10a2bc1b5cb3b0ff9320c30194b0efce64d20df7ec27cb39ec6da9e08c2277b8e0b471ec9b619ab7d
+  data.tar.gz: 6bc157bfdab797976939144dde837de49aa98d9b3dfb9c0ad180f33e1ae44986981e184715bb8841c1f4ea361b4904f5ac2208346d963eff8fefe1f5a7f3402b

data/Manifest.txt

@@ -4,6 +4,7 @@ README.md
 Rakefile
 bin/artserve
 lib/artserve.rb
+lib/artserve/public/artbase.js
 lib/artserve/public/style.css
 lib/artserve/service.rb
 lib/artserve/version.rb

data/README.md

@@ -1,7 +1,7 @@
 #  Artserve
 
 
-artserve - serve up single-file SQLite artbase dbs to query metadata and images with SQL and more"
+artserve - serve up single-file SQLite artbase dbs to query metadata and images with SQL and more
 
 
 * home  :: [github.com/pixelartexchange/artbase](https://github.com/pixelartexchange/artbase)
@@ -13,7 +13,36 @@ artserve - serve up single-file SQLite artbase dbs to query metadata and images
 
 ## Command-Line Tool
 
-To be done
+Use the command line tool named - surprise, surpirse - `artserve`
+to run a zero-config / out-of-the-box artbase server that lets
+you query entire collections in single sqlite database (metadata & images) with a "serverless" web page.
+Type:
+
+    $ artserve        # defaults to ./artbase.db
+
+That will start-up a (local loopback) web server  running on port 3000.
+Open-up up the index page in your browser to get started e.g. <http://localhost:3000/>.
+
+That's it.
+
+
+
+**`artbase.db` Options**
+
+If you pass in a directory to artserve
+the machinery will look for an `artbase.db` in the directory e.g.
+
+    $ artserve moonbirds    # defaults to ./moonbirds/artbase.db
+    $ artserve goblintown   # defaults to ./goblintown/artbase.db
+    # ...
+
+If you pass in a file to artserve
+the machinery will use the bespoke name & path to look for the sqlite database e.g.
+
+    $ artserve punkbase.db
+    $ artserve moonbirdbase.db
+    # ...
+
 
 
 

data/lib/artserve/public/artbase.js

@@ -0,0 +1,160 @@
+
+
+// Load a script from given `url`
+function loadScript(url) {
+  return new Promise(function (resolve, reject) {
+      const script = document.createElement('script');
+      script.src = url;
+
+      script.addEventListener('load', function () {
+          // The script is loaded completely
+          resolve(true);
+      });
+
+      document.head.appendChild(script);
+  });
+}
+
+
+
+
+class Artbase {
+
+
+  async init( options={} ) {
+
+    const DEFAULTS = {
+      database: "artbase.db",
+    };
+
+    this.settings = Object.assign( {}, DEFAULTS, options );
+
+    console.log( "options:" );
+    console.log( options );
+    console.log( "settings:" );
+    console.log( this.settings );
+
+
+    // todo/fix:
+    //   bundle "offline" with artserve - why? why not?
+
+    console.log( "fetching sql.js..." );
+    await loadScript( 'https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.js' );
+    console.log( "done fetching sql.js" );
+
+
+    const sqlPromise = initSqlJs({
+      locateFile: file => "https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.wasm"
+    });
+
+
+    const dataPromise = fetch( this.settings.database ).then(res => res.arrayBuffer());
+    const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
+    this.db = new SQL.Database(new Uint8Array(buf));
+  }
+
+
+
+   _build_query() {
+    // get select query as string
+    let select = document.querySelector("#select").value
+    if (select.length === 0) {
+      select = "*"
+    } else {
+      if (select !== "*") {
+        if (!/.*image.*/.test(select)) {
+          select = select + ", image"
+        }
+        if (!/.*id.*/.test(select)) {
+          select = select + ", id"
+        }
+      }
+    }
+    let where = document.querySelector("#where").value
+    let limit = parseInt(document.querySelector("#limit").value)
+
+    let sql = `SELECT ${select} FROM metadata`
+    if (where.length > 0) {
+      sql += ` WHERE ${where}`
+    }
+    if (limit > 0) {
+      sql += ` LIMIT ${limit}`
+    } else {
+      sql += " LIMIT 200"
+    }
+
+    return sql
+  }
+
+
+  _build_records( result ) {
+    let records = []
+
+    if( result.length !== 0) {
+      let columns = []
+
+      for(let column of result[0].columns) {
+        columns.push(column)
+      }
+
+      for(let i=0; i<result[0].values.length; i++) {
+        let values = result[0].values[i];
+        let o = { attributes: {} }
+        for(let j=0; j<columns.length; j++) {
+          let column = columns[j]
+          // add id to "hidden" system properties / attributes - why? why not?
+          if (["id",
+               "image",
+               "created_at",
+               "updated_at" ].includes(column)) {
+            o[column] = values[j]
+          } else {
+            // only add non-null attributes - why? why not?
+            if( values[j] != null )
+               o.attributes[column] = values[j]
+          }
+        }
+        records.push(o)
+      }
+  }
+  return records
+}
+
+
+  // change to update() or such - why? why not?
+  next() {
+    const sql = this._build_query()
+    const result = this.db.exec( sql )
+    const records = this._build_records( result )
+
+    let html = ""
+    if (records.length === 0) {
+      html = "No results"
+    } else {
+      console.log(records)
+      html = records.map((rec) => {
+        let attributes = rec.attributes
+        let keys = Object.keys(attributes)
+        // note: use "" for attribute quotes
+        //         to allow single-quotes in values e.g. Wizard's Hat etc.
+        let table = keys.map((key) => {
+          return `<tr class="row" data-key="${key}"
+                                  data-val="${attributes[key]}">
+                        <td>${key}</td>
+                        <td>${attributes[key]}</td>
+                  </tr>`
+        }).join("")
+
+        let img = rec.image
+
+        return `<div class="item">
+     <img src="${img}">
+  <table>${table}</table>
+  </div>`
+      }).join("")
+    }
+
+    document.querySelector(".container").innerHTML = html
+  }
+}
+

data/lib/artserve/public/style.css

@@ -1,18 +1,137 @@
 body {
   font-family: sans-serif;
-  color: #333333;
- }
-
- a, a:visited {
+  margin: 0;
+  background: rgba(0,0,255,0.04);
+}
+nav {
+  text-align: center;
+  padding: 40px 0 20px 0;
+  color: black;
+  opacity: 0.9;
+}
+.sub {
+  font-size: 14px;
+}
+input[type=text] {
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.1);
+}
+textarea {
+  width: 100%;
+  height: 50px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.1);
+  padding: 5px;
+  box-sizing: border-box;
+}
+nav a {
+  font-family:  sans-serif;
+  /*
+  letter-spacing: -3px;
+  */
   text-decoration: none;
-  /* color: maroon; */
- }
+  font-size: 40px;
+  font-weight: bold;
+  display: inline-block;
+  margin: 10px;
+  color: black;
+}
+nav td:nth-child(1) {
+  width: 100px;
+  font-weight: bold;
+  text-align: right;
+  vertical-align: middle;
+}
+nav table {
+  max-width: 800px;
+  margin: 0 auto;
+  width: 90%;
+}
+nav td {
+  background: none;
+  color: black;
+}
+
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 20px 0;
+}
+.item {
+  width: 200px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.item img {
+  width: 100%;
+  image-rendering: pixelated;
+  /* to phunk or not phunk? */
+ /* transform: scale(-1,1); */
+}
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0;
+}
+td {
+  background: white;
+  vertical-align: top;
+  word-wrap:break-word;
+  padding: 7px;
+  box-sizing: border-box;
+  font-size: 13px;
+  cursor: pointer;
+}
+.container td:nth-child(1) {
+  font-weight: bold;
+}
+.container td {
+  border-bottom: 2px solid rgba(0,0,255,0.04);
+}
+.container tr:hover td {
+  background: lavender;
+}
+
 
- a:hover {
-  text-decoration: underline;
-  /* color: maroon; */
- }
 
+#query {
+  margin-top: 5px;
+  background: royalblue;
+  cursor: pointer;
+  padding: 10px;
+  max-width: 800px;
+  width: 90%;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 4px;
+  border:none;
+  font-size: 20px;
+  font-family: sans-serif;
+}
+.btn {
+  font-family: sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  letter-spacing: 0;
+  background: rgba(0,0,0,0.9);
+  color: white;
+  padding: 5px 10px;
+  margin: 20px 0;
+  border-radius: 2px;
+}
+
+.loader {
+  padding: 100px;
+  font-size: 14px;
+  opacity: 0.9;
+  font-weight: bold;
+  text-transform: uppercase;
+}
 
 
 /** version block **********/

data/lib/artserve/service.rb

@@ -1,7 +1,19 @@
 
 # todo/check: find a better name?
 class Artserve < Sinatra::Base
+
+  get '/artbase.db' do
+    path = settings.artbase
+    puts "  serving sqlite database as (binary) blob >#{path}<..."
+    headers( 'Content-Type' => "application/octet-stream" )
+
+    blob = File.open( path, 'rb' ) { |f| f.read }
+    puts "     #{blob.size} byte(s)"
+    blob
+  end
+
   get '/' do
     erb :index
   end
+
 end    # class ProfilepicService

data/lib/artserve/version.rb

@@ -3,8 +3,8 @@ module Artbase
   module Module
 module Artserve
   MAJOR = 0
-  MINOR = 0
-  PATCH = 1
+  MINOR = 1
+  PATCH = 0
   VERSION = [MAJOR,MINOR,PATCH].join('.')
 
   def self.version

data/lib/artserve/views/index.erb

@@ -1,6 +1,75 @@
 
 
-<h1>Artserve</h1>
 
-<p>Hello.
-</p>
+<nav>
+<a href="/"><%= settings.artbase %></a>
+<div class='sub'>Yes, you can!  Query the entire
+   art collection (metadata & images)
+  in a single sqlite database (file)
+  with a "serverless" web page.
+</div>
+<div>
+  <a class='btn' href="/artbase.db">Download</a>
+  <a class='btn' href="https://old.reddit.com/r/DIYPunkArt/">Questions? Comments?</a>
+</div>
+<table>
+  <tr>
+    <td>SELECT</td>
+    <td><input id='select' type='text' placeholder='select columns' value='*'></td>
+  </tr>
+  <tr>
+    <td>FROM</td>
+    <td>metadata</td>
+  </tr>
+  <tr>
+    <td>WHERE</td>
+    <td><textarea id='where' placeholder='where condition'></textarea></td>
+  </tr>
+  <tr>
+    <td>LIMIT</td>
+    <td><input id='limit' type='text' placeholder='limmit' value=200></td>
+  </tr>
+</table>
+<button id='query'>Query</button>
+</nav>
+
+
+<div class='container'>
+<div class='loader'>
+  <div class='loading dots'></div>
+  <br>
+  <div>Loading ...</div>
+</div>
+</div>
+
+
+
+
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const artbase = new Artbase()
+  await artbase.init()
+
+  artbase.next()
+
+
+  document.querySelector("#query").addEventListener("click", () => {
+    artbase.next()
+  })
+
+  document.querySelector(".container").addEventListener("click", (e) => {
+    let target = (e.target.className === "row" ? e.target : (e.target.closest(".row") ? e.target.closest(".row") : null))
+    if (target) {
+      let key = target.getAttribute('data-key')
+      let val = target.getAttribute('data-val')
+      let where = document.querySelector("#where").value
+      if (where.trim().length > 0) {
+        document.querySelector("#where").value = `${where} AND\n${key} = "${val}"`
+      } else {
+        document.querySelector("#where").value = `${key} = "${val}"`
+      }
+      artbase.next()
+    }
+  })
+})
+</script>

data/lib/artserve/views/layout.erb

@@ -3,9 +3,10 @@
 <head>
   <meta charset='utf-8'>
 
-  <title>Artserve</title>
+  <title>Artbase</title>
 
   <link href="<%= url('/style.css') %>" rel='stylesheet'>
+  <script src="/artbase.js"></script>
 </head>
 <body>
 

data/lib/artserve.rb

@@ -10,9 +10,22 @@ require_relative 'artserve/service'
 
 
 
-class Artserve
-  def self.main
-     puts 'hello from main'
+class Artserve     ## note: Artserve is Sinatra::Base
+  def self.main( argv=ARGV )
+     puts 'hello from main with args:'
+     pp argv
+
+     path = argv[0] || './artbase.db'
+
+     ## if passed in a directory, auto-add /artbase.db for now - why? why not
+     path += "/artbase.db"  if Dir.exist?( path )
+
+
+     puts "  using database: >#{path}<"
+
+     ## note: let's you use  latter settings.artbase (resulting in path)
+     self.set( :artbase, path )
+
 
   #####
   # fix/todo:

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: artserve
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Gerald Bauer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-19 00:00:00.000000000 Z
+date: 2022-09-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -89,6 +89,7 @@ files:
 - Rakefile
 - bin/artserve
 - lib/artserve.rb
+- lib/artserve/public/artbase.js
 - lib/artserve/public/style.css
 - lib/artserve/service.rb
 - lib/artserve/version.rb