the latest changes...

.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+.idea
+*.log
+tmp/
+public/
+
+*.tern-port
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.tsbuildinfo
+.npm
+.eslintcache
+/.dir-locals.el
+/.eslintrc.yml
+/.prettierrc.toml

public/global.css

@@ -64,6 +64,7 @@ button:focus {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 1rem;
+  margin-top: 1rem;
 }
 
 #sandpoints {
@@ -153,9 +154,26 @@ select {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 1rem;
+  padding-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
-.togglefold {
+.fmCollapse, .fmExpand {
-  margin-top: 1rem;
+  padding-top: 0.5rem;
-  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.fmCollapse::before {
+  margin-right: 0.3rem;
+  content: "⇲"; 
+}
+
+.fmExpand::before {
+  margin-right: 0.3rem;
+  content: "⇱";
+}
+
+#fmicon, #frontmatter, input.hasinput {
+  background-color: #ffccbc;
 }

src/App.svelte

@@ -1,9 +1,9 @@
 <script>
   import SpTitle from "./SpTitle.svelte";
-  import SpJournal from "./SpJournal.svelte";
   import SpTiers from "./SpTiers.svelte";
   import SpKeys from "./SpKeys.svelte";
   import SpCandidates from "./SpCandidates.svelte";
+  import SpJournal from "./SpJournal.svelte";
   import { onMount } from "svelte";
   let v = "loading...";
   let relpath = "";
@@ -88,7 +88,13 @@
           }
         } else if (fmKeyType == "journal") {
           frontmatter["journal"] || (frontmatter["journal"] = []);
-          frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: JSON.stringify(fmValue) });
+          if (Array.isArray(fmValue)) {
+            let fmValueArray = [];
+            fmValue.forEach((v) => fmValueArray.push(v));
+            frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: fmValueArray });
+          } else {
+            frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: fmValue });
+          }
         }
       });
       hasesCandidates = diffArrr(hases, [
@@ -136,6 +142,14 @@
       e.classList.remove("fmShown");
       e.classList.add("fmHidden");
     }
+    let i = document.getElementById("fmicon");
+    if (i && i.classList.contains("fmCollapse")) {
+      i.classList.remove("fmCollapse");
+      i.classList.add("fmExpand");
+    } else if (i && i.classList.contains("fmExpand")) {
+      i.classList.remove("fmExpand");
+      i.classList.add("fmCollapse");
+    }
   }
 
   onMount(() => {
@@ -150,7 +164,7 @@
     <div class="formgrid">
       <SpTitle {relpath} {title} />
     </div>
-    <div on:click={toggleFold} class="togglefold">[fold/unfold frontmatter]</div>
+    <div id="fmicon" on:click={toggleFold} class="fmCollapse">Frontmatter</div>
     <span id="frontmatter" class="fmHidden">
       {#each Object.entries(frontmatter) as fmItems}
         {#each fmItems[1] as fmItem, i}
@@ -176,15 +190,15 @@
               {fmItem}
             />
           {:else if fmItems[0] == "journal"}
-            <label for={fmItem.fmKey}>{fmItem.fmKey}:</label>
+            <SpJournal {fmItem} />
-            <input type="text" name="journal.fmKey" value={fmItem.fmValue} />
           {/if}
         {/each}
       {/each}
     </span>
     <div class="formgrid">
-      <label for="content">Content:</label>
+      <label for="pagecontent">Content:</label>
       <textarea
+        id="pagecontent"
         bind:value={v}
         oninput="this.style.height = '';this.style.height = this.scrollHeight + 3 + 'px'"
       />

src/SpJournal.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let fmItem;
+</script>
+
+{#if "abstract" == fmItem.fmKey}
+  <label for="pageabstract">Abstract:</label>
+  <textarea
+    id="pageabstract"
+    bind:value={fmItem.fmValue}
+    oninput="this.style.height = '';this.style.height = this.scrollHeight + 3 + 'px'"
+  />
+{:else if "keywords" == fmItem.fmKey}
+  <label for="keywords">Keywords:</label>
+  <input type="text" name="keywords[j]" value={JSON.stringify(fmItem.fmValue)} />
+{/if}