First draft of Publish feature with Stein/GDocs

_about/faq.md

@@ -34,3 +34,4 @@ A bunch of stuff, and we have a running list in the [Issues on GitLab](https://g
 
 * Modules are from [Democratic Mediums](http://democraticmediums.info) (CC-BY)
 * Icons are from [Tabler](https://github.com/tabler/tabler-icons) (MIT License)
+* Database runs on [Stein](https://steinhq.com/) (MIT), using [this Google Doc](https://docs.google.com/spreadsheets/d/12IgsMWZNzPv2nS7ksU6CUozcS6YYwRn9O1iIXKat3V4/edit?usp=sharing)

_config.yml

@@ -40,7 +40,6 @@ collections:
     output: true
 
 
-
 # Exclude from processing.
 # The following items will not be processed, by default.
 # Any item listed under the `exclude:` key here will be automatically added to

_includes/head.html

@@ -11,7 +11,7 @@
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 
-  <!-- Matomo -->
+  <!-- Begin Matomo code -->
   <script type="text/javascript">
   var _paq = window._paq || [];
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@@ -25,6 +25,9 @@
     g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
   </script>
-<!-- End Matomo Code -->
+<!-- End Matomo code -->
+
+<!-- Stein -->
+<script src="https://unpkg.com/stein-js-client"></script>
 
 </head>

_layouts/rule.html

@@ -63,7 +63,7 @@ layout: default
 #rulebox h2 {
     font-family: serif;
 }
-#name {
+#communityname {
     font-weight: bold;
 }
 #editToggle {
@@ -71,9 +71,13 @@ layout: default
   clear: both;
 }
 #toggleDisplayMode {
+    margin: 0 0 10px 0;
+    display: none;
+}
+#publishRule {
   margin: 0 0 10px 0;
 }
-#basicstructure {
+#structure {
   font-size: 1.3em;
 }
 #attribution {
@@ -137,26 +141,26 @@ layout: default
           toggleEditMode(); // turns off editMode
           classDisplayAll("site-nav","none");
           classDisplayAll("post-header","none");
-          classDisplayAll("explanatory","none");
           classDisplayAll("site-footer","none");
           document.getElementById("attribution").style.display = "block";
-          document.getElementById("toggleDisplayMode").innerHTML = "Edit";
+          document.getElementById("toggleDisplayMode").style.display = "inline-block";
+          document.getElementById("publishRule").style.display = "none";
           displayMode = true;
       } else {
           toggleEditMode() // turns on editMode
           classDisplayAll("site-nav","block");
           classDisplayAll("post-header","block");
-          classDisplayAll("explanatory","block");
           classDisplayAll("site-footer","block");
           document.getElementById("attribution").style.display = "none";
-          document.getElementById("toggleDisplayMode").innerHTML = "Display";
+          document.getElementById("toggleDisplayMode").style.display = "none";
+          document.getElementById("publishRule").style.display = "inline-block";
           displayMode = false;
       }
   }
 
   function textOutput() {
       var filename = 'CommunityRule.txt';
-      var content = '# CommunityRule: ' + document.getElementById('name').innerHTML + '\n\n';
+      var content = '# CommunityRule: ' + document.getElementById('communityname').innerHTML + '\n\n';
       var elements = document.getElementsByClassName('output');
       for (var i = 1; i < elements.length; i++) {
           if (elements[i].innerHTML != '') {
@@ -187,17 +191,76 @@ layout: default
       document.getElementById('download').setAttribute('download', fileName);
   }
 
-  // Page loading preferences
-  var editMode = true;
-  window.onload = function() {
-      if ((window.location.href.indexOf("/templates/") != -1) ||
-          (window.location.href.indexOf("/about/") != -1)) {
-          toggleEditMode();
+  // BEGIN Publish tools, via SteinHQ.com
+  // TKTK https://docs.steinhq.com/authentication
+
+  // Publishes existing fields to new page, /create/?rule=[ruleID]
+  // Opens new page in Display mode
+  function publishRule() {
+      var time = new Date();
+      var timestamp = time.getTime();
+      // TKTK: Check if ruleID exists; while yes, replace and repeat
+      var rule = [{
+          ruleID: timestamp,
+          timestamp: time.toISOString(),
+      }];
+      var fields = document.getElementsByClassName("editable");
+      for (var i = 0; i < fields.length; i++) {
+          var key = fields[i].id;
+          var value = fields[i].innerHTML;
+          rule[0][key] = value;
       }
+      const store = new SteinStore(
+          "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
+      );
+      store.append("rules", rule).then(data => {
+          window.open("/create/?r=" + timestamp, "_self", false);
+      });
   }
+
+  // Displays content based on ID
+  function displayRule(ID) {
+      const store = new SteinStore(
+          "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
+      );     
+      store.read("rules", { search: { ruleID: ID } }).then(data => {
+          // only runs when we have the data from Goog:
+          var rule = data[0];
+          var fields = document.getElementsByClassName("editable");
+          for (var i = 0; i < fields.length; i++) {
+              var key = fields[i].id;
+              var value = rule[key];
+              if (typeof value === "undefined") {
+                  value = "";
+              }
+              document.getElementById(key).innerHTML = value;
+          }
+          displayMode = false;
+          toggleDisplayMode();
+          document.title = rule['communityname'] + " / CommunityRule";
+      });
+  }
+  // END Publish tools
   
+  // FINALLY, Page loading
+  var urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.has('r')) {
+      var rID = urlParams.get('r');
+      displayRule(rID);
+  } else {
+      // open in editMode as default
+      var editMode = true;
+      // switch out of editMode in special cases
+      window.onload = function() {
+          if ((window.location.href.indexOf("/templates/") != -1) ||
+              (window.location.href.indexOf("/about/") != -1)) {
+              toggleEditMode();
+          }
+      }
+  }  
 </script>
 
+
 <article class="post">
 
   <header class="post-header">
@@ -219,7 +282,7 @@ layout: default
 
   <span class="question">What is the community’s name?</span>
 
-  <h1 contenteditable="true" class="editable output" id="name">{{ page.community-name }}</h1>
+  <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
 
   <h2 id="basics">
     <img src="{% link assets/tabler_icons/info-circle.svg %}"
@@ -233,19 +296,19 @@ layout: default
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/federation/">federation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/multicameralism/">multicameralism</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ritual/">ritual</a>, <a target="_blank" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a>, <a target="_blank" href="https://democraticmediums.info/mediums/stake_weight/">stake weight</a></span>
     </div>
-    <p contenteditable="true" class="editable output" id="basicstructure">{{ page.structure }}</p>
+    <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
 
     <span class="question">What is the community’s mission?</span>
-    <p contenteditable="true" class="editable output">{{ page.mission }}</p>
+    <p contenteditable="true" class="editable output" id="mission">{{ page.mission }}</p>
 
     <span class="question">What core values does it hold?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/solidarity/">solidarity</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
     </div>
-    <p contenteditable="true" class="editable output">{{ page.values }}</p>
+    <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
   
     <span class="question">What are the basic rights that this Rule guarantees?</span>
-    <p contenteditable="true" class="editable output">{{ page.rights }}</p>
+    <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>
 
   </div><!--hiding section s1-->
 
@@ -262,14 +325,14 @@ layout: default
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
     </div>
 
-    <p contenteditable="true" class="editable output">{{ page.membership }}</p>
+    <p contenteditable="true" class="editable output" id="membership">{{ page.membership }}</p>
   
     <span class="question">How are members suspended or removed?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
     </div>
   
-    <p contenteditable="true" class="editable output">{{ page.removal }}</p>
+    <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
 
   </div><!--hiding section s2-->
   
@@ -285,32 +348,32 @@ layout: default
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/holographic_consensus/">holographic consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/referendum/">referendum</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a></span>
     </div>
-    <p contenteditable="true" class="editable output">{{ page.decision }}</p>
+    <p contenteditable="true" class="editable output" id="decision">{{ page.decision }}</p>
   
     <span class="question">Where do community members deliberate about potential policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/caucus/">caucus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/coalition/">coalition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/debate/">debate</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lobbying/">lobbying</a>, <a target="_blank" href="https://democraticmediums.info/mediums/recess/">recess</a>, <a target="_blank" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
     </div>
-    <p contenteditable="true" class="editable output">{{ page.deliberation }}</p>
+    <p contenteditable="true" class="editable output" id="deliberation">{{ page.deliberation }}</p>
 
     <span class="question">How are policies implemented?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lazy_consensus/">lazy consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a></span>
     </div>
-    <p contenteditable="true" class="editable output">{{ page.implementation }}</p>
+    <p contenteditable="true" class="editable output" id="implementation">{{ page.implementation }}</p>
   
     <span class="question">Who oversees the implementation of policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/judiciary/">jury</a>, <a target="_blank" href="https://democraticmediums.info/mediums/precedent/">precedent</a>, <a target="_blank" href="https://democraticmediums.info/mediums/refusal/">refusal</a>, <a target="_blank" href="https://democraticmediums.info/mediums/rough_consensus/">rough consensus</a></span>
     </div>
-    <p contenteditable="true" class="editable output">{{ page.oversight }}</p>
+    <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
   
     <span class="question">What limits are there on member roles and policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/fact_finding/">fact-finding</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ranked_choice/">ranked choice</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/term_limit/">term limits</a></span>
   </div>
   
-  <p contenteditable="true" class="editable output">{{ page.limits }}</p>
+  <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
 
   </div><!--hiding section s3-->
   
@@ -323,10 +386,10 @@ layout: default
   <div class="section" id="s4" style="display:none">
 
     <span class="question">Where do we maintain our policies and records?</span>
-    <p contenteditable="true" class="editable output">{{ page.records }}</p>
+    <p contenteditable="true" class="editable output" id="records">{{ page.records }}</p>
 
     <span class="question">How can this Rule be modified?</span>
-    <p contenteditable="true" class="editable output">{{ page.modification }}</p>
+    <p contenteditable="true" class="editable output" id="modification">{{ page.modification }}</p>
 
   </div><!--hiding section s4-->
 
@@ -348,9 +411,8 @@ Created with [CommunityRule](http://communityrule.info)
   
   </div><!--#rulebox-->
 
-  <p class="explanatory">When you're finished, use the buttons below to print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future.</p>
-  
-  <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()">Display</button>
+  <button class="pushButton" id="publishRule" onclick="publishRule()">Publish</button>
+  <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()">Edit</button>
   <button class="pushButton" onclick="textOutput()">Markdown</button>
   
 </article>

create.md

@@ -28,4 +28,4 @@ records:
 modification: 
 ---
 
-Use the questions below to create a new rule or [start with a template]({% link templates.md %}).
+Use the questions below to build a rule or [start with a template]({% link templates.md %}).