crappy WIP experimenting with layout

assets/main.js

@@ -214,7 +214,9 @@ class PoemLine extends HTMLDivElement {
       this.querySelector(".linetext").innerText = payload.Text;
       this.querySelector(".linetext").setAttribute("data-source", payload.Source.Name);
       this.originalText = payload.Text;
-      this.querySelector("p[is=source-text]").update(payload.Source);
+      const source = payload.Source
+      const sourceName = source.Name.slice(source.Name.indexOf(' '));
+      this.querySelector(".source").innerText = sourceName;
     });
   }
 }

main.go

@@ -15,6 +15,33 @@ import (
 	_ "github.com/mattn/go-sqlite3"
 )
 
+// TODO multiple backends
+// I've been waffling on the question of whether to support multiple backends.
+// there are two narratives here.
+// NARRATIVE ONE: TRUNKLESS IS AN ART MACHINE BASED ON GUTENBERG
+// Trunkless is specifically about exploring the project gutenberg corpus. It's a massive corpus that depicts a particular era of the English language. This focus means anyone working with it is exploring the same phrase space.
+//
+// Poets wishing for a similar interface that can be used generally should consult $TOOLTHATDOESNOTEXIST for doing digital cutup poetry locally.
+
+// NARRATIVE TWO: TRUNKLESS IS A GENERAL PURPOSE CUTUP POETRY WORKBENCH
+// Embodied in trunkless is a fundamental user interface for making digital cut-up poetry. This interface can support any kind of phrase backend. Because preparing the phrase backends is time and labor consuming, the user-poets cannot add their own; however, they can submit them for addition.
+
+// If I wanted to support multiple backends what would it take?
+// - a backend selector on the web tool -- drop down
+// - extension of schema to include more clear metadata -- specifically a an optional sourceURL
+// - changes to this file to support pairs of (dsn, maxID)s
+//
+// it's not that hard but given that i'm a stopgap for adding new phrase backends it feels like wasted effort.
+
+// what about this narrative? I launch just with gutenberg and see if I hear "wow i want this for other stuff"
+// the thing is, I want it for my stuff. but I consistently don't want a web app. I want a CLI or a controller-based interface. I can sit myself and put time into working on poems from gutenberg and then see if I want to build something totally new or just add new phrase backends.
+
+// no matter what there are improvements to phrasing I want to see before I let anyone see this (even to beta test) so the plan now is:
+
+// ship phraser improvements
+// get a deployment pipeline
+// seek beta feedback
+
 const (
 	dsn   = "phrase.db?cache=shared&mode=r"
 	maxID = 467014991

templates/index.tmpl

@@ -15,7 +15,7 @@ body {
   font-size:125%;
   background-color: black;
   color: white;
-  background-image: url("/bg_dark.gif");
+ /*  background-image: url("/bg_dark.gif");*/
 }
 
 a {
@@ -61,11 +61,50 @@ span.linetext {
       </form>
     </template>
     <template id="linetmpl">
-      <span>
+      <style>
+        div.linetext {
+          font-size: 110%;
+        }
+        div.rightside {
+        }
+        div.source {
+          font-size: 50%;
+          font-style: oblique;
+          padding-left: 10px;
+        }
+        div.cont:hover {
+          background-color: rgba(255,255,255,.05);
+        }
+        .linectrl button {
+          width: 40px;
+          height: 40px;
+        }
+      </style>
+      <div class="cont" style="display: grid; grid-template-columns: 80% 20%">
+        <div class="linetext"></div>
+        <div class="rightside">
+          <div style="display: grid; grid-template-columns: 50% 50%">
+            <div class="linectrl">
+              <div style="display: grid; grid-template-columns: 2em 2em">
+                <div>
+                  <button is="line-pinner">pin</button><button is="line-editor">✎</button>
+                </div>
+                <div>
+                  </button><button>M</button><button is="line-remover">X</button>
+                </div>
+              </div>
+            </div>
+            <div class="source"></div>
+          </div>
+        </div>
+      </div>
+        <!--
+      <span class="linectrl">
         <button is="line-pinner">pin</button><button is="line-editor">✎</button><button is="line-upper">↑</button><button is="line-downer">↓</button><button is="source-shower"></button><button is="line-remover">X</button>
       </span>
       <span class="linetext"></span>
       <p is="source-text"></p>
+        -->
     </template>
     <h1 style="display:block;margin:0">Trunkless</h1>
     <p style="margin-top:0;font-size:80%">