From b24f80e496c9d31b62164f7b7bdbccfb3559eedd Mon Sep 17 00:00:00 2001
From: Marcell Mars <ki.ber@kom.uni.st>
Date: Tue, 8 Jun 2021 12:39:07 +0200
Subject: [PATCH] folding unfolding frontmatter..

---
 public/global.css       |  69 +++++----
 src/App.svelte          | 305 ++++++++++++++++++++++++----------------
 src/SpCandidates.svelte |  59 ++++----
 src/SpKeys.svelte       |  77 ++++++----
 src/SpTiers.svelte      |  77 ++++++----
 src/SpTitle.svelte      |   8 +-
 src/main.js             |   2 +-
 7 files changed, 361 insertions(+), 236 deletions(-)

diff --git a/public/global.css b/public/global.css
index 1281d60..9d45d88 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,66 +1,66 @@
 html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  color: #333;
+  margin: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 a {
-	color: rgb(0,100,200);
-	text-decoration: none;
+  color: rgb(0,100,200);
+  text-decoration: none;
 }
 
 a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 a:visited {
-	color: rgb(0,80,160);
+  color: rgb(0,80,160);
 }
 
 input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-padding: 0.4em 0;
+  padding: 0.4em;
+  margin: 0 0 0.5em 0;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 2px;
 }
 
 input:disabled {
-	color: #ccc;
+  color: #ccc;
 }
 
 button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
+  color: #333;
+  background-color: #f4f4f4;
+  outline: none;
 }
 
 button:disabled {
-	color: #999;
+  color: #999;
 }
 
 button:not(:disabled):active {
-	background-color: #ddd;
+  background-color: #ddd;
 }
 
 button:focus {
-	border-color: #666;
+  border-color: #666;
 }
 
 /* custom part */
 
-form {
+.formgrid {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 1rem;
@@ -145,4 +145,17 @@ select {
   margin-top: 0.5rem;
 }
 
+.fmHidden {
+  display: none;
+}
 
+.fmShown {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 1rem;
+}
+
+.togglefold {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/src/App.svelte b/src/App.svelte
index b266a99..a4043bb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,136 +1,203 @@
 <script>
- import SpTitle from './SpTitle.svelte'
- import SpTiers from './SpTiers.svelte'
- import SpKeys from './SpKeys.svelte'
- import SpCandidates from './SpCandidates.svelte'
- import { onMount } from 'svelte';
- let v = "loading...";
- let relpath = "";
- let relpermalink = "";
- let protocol = "";
- let title = "Foo bar";
+  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 { onMount } from "svelte";
+  let v = "loading...";
+  let relpath = "";
+  let relpermalink = "";
+  let protocol = "";
+  let title = "Foo bar";
+  let hases = [];
+  let hasesCandidates = [];
+  let frontmatter = {};
+  frontmatter["triad"] = [];
+  frontmatter["ascriptions"] = [];
+  frontmatter["notsand"] = [];
 
- let hases = [];
- let hasesCandidates = [];
- let frontmatter = {}
- frontmatter['triad'] = [];
- frontmatter['ascriptions'] = [];
-
- function keyUp(e) {
-   if (e.key == "Escape") {
-     window.history.back()
-   }
- }
- 
-  function diffArrr(arr, arrr) {
-    let diff = new Set(arr)
-    for (let e of arrr) {
-        diff.delete(e)
+  function keyUp(e) {
+    if (e.key == "Escape") {
+      window.history.back();
     }
-   return Array.from(diff)
- }
+  }
 
- function newHasTiers(arrgs) {
-   let [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
-   frontmatter[fmKeyType][index] = {'fmKey': newFmKey, 'tiers': [], 'candidates': METASP[newFmKey].tiers}
-   hasesCandidates = [...hasesCandidates, oldFmKey];
-   hasesCandidates = hasesCandidates.filter(h => h != newFmKey);
- }
- 
- function loadHugoPageMetadata() {
-   var el = document.createElement('script');
-   el.onload = ()=> {
-     v = repo.content;
-     if (v.startsWith("\n")) {
-       v = v.substring(1)
-     }
+  function diffArrr(arr, arrr) {
+    let diff = new Set(arr);
+    for (let e of arrr) {
+      diff.delete(e);
+    }
+    return Array.from(diff);
+  }
 
-     relpath = repo.path;
-     relpermalink = repo.relpermalink
-     protocol = document.location.protocol.substring(0,4)
-     hases = Object.keys(METASP)
-     Object.entries(repo.frontmatter).forEach(([fmKey,fmValue]) =>
-       {
-         let fmKeyType = ''
-         if (fmKey.toLowerCase().startsWith("has_")) {
-           if (hases.includes(fmKey.substr(4))) {
-             fmKeyType = 'triad'
-             fmKey = fmKey.substr(4)
-           }
-         } else if (hases.includes(fmKey.toLowerCase())) {
-           fmKeyType = 'ascriptions'
-         } else {
-           fmKeyType = 'notSandpoints'
-         }
+  function newHasTiers(arrgs) {
+    let [fmKeyType, index, oldFmKey, newFmKey] = arrgs.detail;
+    frontmatter[fmKeyType][index] = {
+      fmKey: newFmKey,
+      tiers: [],
+      candidates: METASP[newFmKey].tiers,
+    };
+    hasesCandidates = [...hasesCandidates, oldFmKey];
+    hasesCandidates = hasesCandidates.filter((h) => h != newFmKey);
+  }
 
-         if (['triad', 'ascriptions'].includes(fmKeyType)) {
-           if (Array.isArray(fmValue)) {
-             let tiers = []
-             let candidates = []
-             METASP[fmKey].tiers.forEach(t => {
-               if (fmValue.includes(t.file)) {
-                 tiers.push(t)
-               } else {
-                 candidates.push(t)
-               }
-             })        
-             frontmatter[fmKeyType].push({'fmKey': fmKey, 'tiers': tiers, 'candidates': candidates})
-           }
-         }
-       }
-     )
-     hasesCandidates = diffArrr(hases, [...frontmatter['triad'].map(t => { return t.fmKey }), ...frontmatter['ascriptions'].map(t => { return t.fmKey })])
+  function loadHugoPageMetadata() {
+    var el = document.createElement("script");
+    el.onload = () => {
+      v = repo.content;
+      if (v.startsWith("\n")) {
+        v = v.substring(1);
+      }
 
-     let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
-     title = repo.frontmatter[tkey]
-   }
-   el.src = `../js/repo/${location.hash.substring(1)}.js`
-   document.body.appendChild(el)
- }
- 
- function addToCandidatesRemoveFromTiers(arrgs) {
-   let [fmKeyType, index, fmKey, tier] = arrgs.detail;
-   frontmatter[fmKeyType][index]['fmKey'] = fmKey;
-   frontmatter[fmKeyType][index]['tiers'] = frontmatter[fmKeyType][index]['tiers'].filter(t => t !== tier);
-   frontmatter[fmKeyType][index]['candidates'] = [...frontmatter[fmKeyType][index]['candidates'], tier]
- }
+      relpath = repo.path;
+      relpermalink = repo.relpermalink;
+      protocol = document.location.protocol.substring(0, 4);
+      hases = Object.keys(METASP);
+      Object.entries(repo.frontmatter).forEach(([fmKey, fmValue]) => {
+        let fmKeyType = "";
+        if (fmKey.toLowerCase().startsWith("has_")) {
+          if (hases.includes(fmKey.substr(4))) {
+            fmKeyType = "triad";
+            fmKey = fmKey.substr(4);
+          }
+        } else if (hases.includes(fmKey.toLowerCase())) {
+          fmKeyType = "ascriptions";
+        } else if (["abstract", "keywords"].includes(fmKey.toLowerCase())) {
+          fmKeyType = "journal";
+        } else {
+          fmKeyType = "notsand";
+        }
 
- function addToTiersRemoveFromCandidates(arrgs) {
-   let [fmKeyType, index, fmKey, value] = arrgs.detail;
-   const tier = frontmatter[fmKeyType][index]['candidates'].filter(t => t.file == value)
-   if (tier.length > 0) {
-     frontmatter[fmKeyType][index]['tiers'] = [...frontmatter[fmKeyType][index]['tiers'], tier[0]]
-     frontmatter[fmKeyType][index]['candidates'] = frontmatter[fmKeyType][index]['candidates'].filter(t=> t != tier[0])
-   }
- }
- 
- onMount(()=> {loadHugoPageMetadata()})
+        if (["triad", "ascriptions"].includes(fmKeyType)) {
+          if (Array.isArray(fmValue)) {
+            let tiers = [];
+            let candidates = [];
+            METASP[fmKey].tiers.forEach((t) => {
+              if (fmValue.includes(t.file)) {
+                tiers.push(t);
+              } else {
+                candidates.push(t);
+              }
+            });
+            frontmatter[fmKeyType].push({
+              fmKey: fmKey,
+              tiers: tiers,
+              candidates: candidates,
+            });
+          }
+        } else if (fmKeyType == "journal") {
+          frontmatter["journal"] || (frontmatter["journal"] = []);
+          frontmatter[fmKeyType].push({ fmKey: fmKey, fmValue: JSON.stringify(fmValue) });
+        }
+      });
+      hasesCandidates = diffArrr(hases, [
+        ...frontmatter["triad"].map((t) => {
+          return t.fmKey;
+        }),
+        ...frontmatter["ascriptions"].map((t) => {
+          return t.fmKey;
+        }),
+      ]);
+
+      let tkey = Object.keys(repo.frontmatter).filter((t) => t.toLowerCase() == "title")[0];
+      title = repo.frontmatter[tkey];
+    };
+    el.src = `../js/repo/${location.hash.substring(1)}.js`;
+    document.body.appendChild(el);
+  }
+
+  function addToCandidatesRemoveFromTiers(arrgs) {
+    let [fmKeyType, index, fmKey, tier] = arrgs.detail;
+    frontmatter[fmKeyType][index]["fmKey"] = fmKey;
+    frontmatter[fmKeyType][index]["tiers"] = frontmatter[fmKeyType][index]["tiers"].filter(
+      (t) => t !== tier
+    );
+    frontmatter[fmKeyType][index]["candidates"] = [...frontmatter[fmKeyType][index]["candidates"], tier];
+  }
+
+  function addToTiersRemoveFromCandidates(arrgs) {
+    let [fmKeyType, index, , value] = arrgs.detail;
+    const tier = frontmatter[fmKeyType][index]["candidates"].filter((t) => t.file == value);
+    if (tier.length > 0) {
+      frontmatter[fmKeyType][index]["tiers"] = [...frontmatter[fmKeyType][index]["tiers"], tier[0]];
+      frontmatter[fmKeyType][index]["candidates"] = frontmatter[fmKeyType][index]["candidates"].filter(
+        (t) => t != tier[0]
+      );
+    }
+  }
+
+  function toggleFold() {
+    let e = document.getElementById("frontmatter");
+    if (e && e.classList.contains("fmHidden")) {
+      e.classList.remove("fmHidden");
+      e.classList.add("fmShown");
+    } else if (e && e.classList.contains("fmShown")) {
+      e.classList.remove("fmShown");
+      e.classList.add("fmHidden");
+    }
+  }
+
+  onMount(() => {
+    loadHugoPageMetadata();
+    console.dir(frontmatter);
+  });
 </script>
 
-<svelte:window on:keyup={keyUp}/>
+<svelte:window on:keyup={keyUp} />
 <main id="sandpoints">
   <form>
-    <SpTitle relpath={relpath} title={title} />
-    {#each Object.entries(frontmatter) as fmItems}
-      {#if ['ascriptions', 'triad'].includes(fmItems[0])}
+    <div class="formgrid">
+      <SpTitle {relpath} {title} />
+    </div>
+    <div on:click={toggleFold} class="togglefold">[fold/unfold frontmatter]</div>
+    <span id="frontmatter" class="fmHidden">
+      {#each Object.entries(frontmatter) as fmItems}
         {#each fmItems[1] as fmItem, i}
-          <SpKeys index={i} fmKeyType={fmItems[0]} fmItem={fmItem} hases={hases} hasesCandidates={hasesCandidates} on:hasTiersSelected={newHasTiers}  />
-          <SpTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
-          <SpCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} index={i} fmKeyType={fmItems[0]} fmItem={fmItem} />
+          {#if ["ascriptions", "triad"].includes(fmItems[0])}
+            <SpKeys
+              index={i}
+              fmKeyType={fmItems[0]}
+              {fmItem}
+              {hases}
+              {hasesCandidates}
+              on:hasTiersSelected={newHasTiers}
+            />
+            <SpTiers
+              on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers}
+              index={i}
+              fmKeyType={fmItems[0]}
+              {fmItem}
+            />
+            <SpCandidates
+              on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates}
+              index={i}
+              fmKeyType={fmItems[0]}
+              {fmItem}
+            />
+          {:else if fmItems[0] == "journal"}
+            <label for={fmItem.fmKey}>{fmItem.fmKey}:</label>
+            <input type="text" name="journal.fmKey" value={fmItem.fmValue} />
+          {/if}
         {/each}
+      {/each}
+    </span>
+    <div class="formgrid">
+      <label for="content">Content:</label>
+      <textarea
+        bind:value={v}
+        oninput="this.style.height = '';this.style.height = this.scrollHeight + 3 + 'px'"
+      />
+      {#if document.location.protocol.substring(0, 4) != "file"}
+        <label for="publish">Publish</label>
+        <input type="checkbox" id="publish" name="publish" />
       {/if}
-    {/each}
-    <label for="content">Content:</label>
-    <textarea bind:value={v} oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'></textarea>
-    {#if document.location.protocol.substring(0,4) != "file"}
-      <label for="publish">Publish</label>
-      <input type="checkbox" id="publish" name="publish" />
-    {/if}
-    <label for="offline">Offline</label>
-    <input type="checkbox" id="offline" name="offline" />
-    <input type="hidden" name="relpermalink" bind:value={relpermalink} />
-    <input type="hidden" name="relpath" bind:value={relpath} />
-    <input type="hidden" name="protocol" bind:value={protocol} />
-    <button id="sandpointsButton">COMMIT/SAVE</button>
+      <label for="offline">Offline</label>
+      <input type="checkbox" id="offline" name="offline" />
+      <input type="hidden" name="relpermalink" bind:value={relpermalink} />
+      <input type="hidden" name="relpath" bind:value={relpath} />
+      <input type="hidden" name="protocol" bind:value={protocol} />
+      <button id="sandpointsButton">COMMIT/SAVE</button>
+    </div>
   </form>
 </main>
diff --git a/src/SpCandidates.svelte b/src/SpCandidates.svelte
index 0816a8a..61e50ce 100644
--- a/src/SpCandidates.svelte
+++ b/src/SpCandidates.svelte
@@ -1,31 +1,42 @@
 <script>
- import { createEventDispatcher } from 'svelte';
- import { afterUpdate } from 'svelte';
- export let index;
- export let fmItem;
- export let fmKeyType;
+    import { createEventDispatcher } from "svelte";
+    import { afterUpdate } from "svelte";
+    export let index;
+    export let fmItem;
+    export let fmKeyType;
 
- export let value;
- const dispatch = createEventDispatcher();
+    export let value;
+    const dispatch = createEventDispatcher();
 
- afterUpdate(() => {
-   let addnew = document.getElementById('addnew')
-   if (addnew) {
-     addnew.selected = 'selected';
-   }
- });
- 
- $: {
-   dispatch("addToTiersRemoveFromCandidates", [fmKeyType, index, fmItem.fmKey, value])
-   value = 1;
- }
+    afterUpdate(() => {
+        let addnew = document.getElementById("addnew");
+        if (addnew) {
+            addnew.selected = "selected";
+        }
+    });
+
+    $: {
+        dispatch("addToTiersRemoveFromCandidates", [
+            fmKeyType,
+            index,
+            fmItem.fmKey,
+            value,
+        ]);
+        value = 1;
+    }
 </script>
 
 {#if fmItem.candidates && fmItem.candidates.length > 0}
-<select class="selecttier" bind:value>
-  <option id="addnew" value="1" disabled selected>Add new...</option>
-  {#each fmItem.candidates as tier (tier.file)}
-    <option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
-  {/each}
-</select>
+    <select class="selecttier" bind:value>
+        <option id="addnew" value="1" disabled selected>Add new...</option>
+        {#each fmItem.candidates as tier (tier.file)}
+            <option title={tier.title} value={tier.file}
+                >{tier.file}
+                {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(
+                        0,
+                        68
+                    ) + "…"}){/if}</option
+            >
+        {/each}
+    </select>
 {/if}
diff --git a/src/SpKeys.svelte b/src/SpKeys.svelte
index ca2d74e..d61a708 100644
--- a/src/SpKeys.svelte
+++ b/src/SpKeys.svelte
@@ -1,36 +1,55 @@
 <script>
- import { createEventDispatcher } from 'svelte';
- import { onMount } from 'svelte';
- export let fmItem;
- export let fmKeyType;
- export let index;
- export let hases;
- export let hasesCandidates;
- let value;
- const dispatch = createEventDispatcher();
+    import { createEventDispatcher } from "svelte";
+    import { onMount } from "svelte";
+    export let fmItem;
+    export let fmKeyType;
+    export let index;
+    export let hases;
+    export let hasesCandidates;
+    let value;
+    const dispatch = createEventDispatcher();
 
- 
- function optselName(has) {
-   return `_${has}_${fmKeyType}`
- }
-
- onMount(()=> {
-   const selectEvent = document.getElementById(`${fmKeyType}_${fmItem.fmKey}`)
-   if (selectEvent) {
-     selectEvent.addEventListener('change', (e) => {
-       dispatch("hasTiersSelected", [fmKeyType, index, fmItem.fmKey, e.target.value.split("_")[1]]);})
-   }
- })
+    function optselName(has) {
+        return `_${has}_${fmKeyType}`;
+    }
 
+    onMount(() => {
+        const selectEvent = document.getElementById(
+            `${fmKeyType}_${fmItem.fmKey}`
+        );
+        if (selectEvent) {
+            selectEvent.addEventListener("change", (e) => {
+                dispatch("hasTiersSelected", [
+                    fmKeyType,
+                    index,
+                    fmItem.fmKey,
+                    e.target.value.split("_")[1],
+                ]);
+            });
+        }
+    });
 </script>
 
 <select id="{fmKeyType}_{fmItem.fmKey}" bind:value>
-  {#each hases as has}
-    {#if has == fmItem.fmKey}
-      <option id="{optselName(has)}" class="hasoption" selected title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
-    {/if}
-  {/each}
-  {#each hasesCandidates as has}
-      <option id="{optselName(has)}" class="hasoption" title="{has}" value={optselName(has)}>{'triad' == fmKeyType ? "Has ":""}{has}:</option>
-  {/each}
+    {#each hases as has}
+        {#if has == fmItem.fmKey}
+            <option
+                id={optselName(has)}
+                class="hasoption"
+                selected
+                title={has}
+                value={optselName(has)}
+                >{"triad" == fmKeyType ? "Has " : ""}{has}:</option
+            >
+        {/if}
+    {/each}
+    {#each hasesCandidates as has}
+        <option
+            id={optselName(has)}
+            class="hasoption"
+            title={has}
+            value={optselName(has)}
+            >{"triad" == fmKeyType ? "Has " : ""}{has}:</option
+        >
+    {/each}
 </select>
diff --git a/src/SpTiers.svelte b/src/SpTiers.svelte
index 248d28b..402d949 100644
--- a/src/SpTiers.svelte
+++ b/src/SpTiers.svelte
@@ -1,39 +1,54 @@
 <script>
- import { createEventDispatcher } from 'svelte';
- export let index;
- export let fmItem;
- export let fmKeyType;
- const dispatch = createEventDispatcher();
- 
- function removeTier(tier) {
-   dispatch("addToCandidatesRemoveFromTiers", [fmKeyType, index, fmItem.fmKey, tier])
- }
+  import { createEventDispatcher } from "svelte";
+  export let index;
+  export let fmItem;
+  export let fmKeyType;
+  const dispatch = createEventDispatcher();
 
- function swapTier(tier, n) {
-   fmItem.tiers.some((t, i)=> {
-     if (t==tier) {
-       fmItem.tiers[i] = fmItem.tiers[i+n]
-       fmItem.tiers[i+n] = tier
-       return true
-     }
-   })
- }
+  function removeTier(tier) {
+    dispatch("addToCandidatesRemoveFromTiers", [fmKeyType, index, fmItem.fmKey, tier]);
+  }
 
+  function swapTier(tier, n) {
+    fmItem.tiers.some((t, i) => {
+      if (t == tier) {
+        fmItem.tiers[i] = fmItem.tiers[i + n];
+        fmItem.tiers[i + n] = tier;
+        return true;
+      }
+    });
+  }
 </script>
 
-{#if fmItem.tiers && fmItem.tiers.length >0}
+{#if fmItem.tiers && fmItem.tiers.length > 0}
   <div class="tierbox">
-  {#each fmItem.tiers as tier, i (tier.file)}
-    <div class="tierline">
-      <div class="filetitle">
-        <input readonly type="text" name="{'triad' == fmKeyType ? "has_":"" }{fmItem.fmKey}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
+    {#each fmItem.tiers as tier, i (tier.file)}
+      <div class="tierline">
+        <div class="filetitle">
+          <input
+            readonly
+            type="text"
+            name="{'triad' == fmKeyType ? 'has_' : ''}{fmItem.fmKey}[]"
+            class="hasinput"
+            value={tier.file}
+          /><span class="tiertitle">({tier.title})</span>
+        </div>
+        <div class="buttons">
+          <button
+            type="button"
+            class="buttondown"
+            on:click={swapTier(tier, 1)}
+            disabled={i + 1 == fmItem.tiers.length ? true : false}>⇓</button
+          >
+          <button
+            type="button"
+            class="buttonup"
+            on:click={swapTier(tier, -1)}
+            disabled={i == 0 ? true : false}>⇑</button
+          >
+          <button type="button" on:click={removeTier(tier)}>×</button>
+        </div>
       </div>
-      <div class="buttons">
-        <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == fmItem.tiers.length ? true:false}>⇓</button>
-        <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0  ? true:false}>⇑</button>
-        <button type="button" on:click="{removeTier(tier)}">×</button>
-      </div>
-    </div>
-  {/each}
-</div>
+    {/each}
+  </div>
 {/if}
diff --git a/src/SpTitle.svelte b/src/SpTitle.svelte
index a11b4c2..5fc33d8 100644
--- a/src/SpTitle.svelte
+++ b/src/SpTitle.svelte
@@ -1,9 +1,9 @@
 <script>
- export let title;
- export let relpath;
+    export let title;
+    export let relpath;
 </script>
 
 <label for="relpath">File path:</label>
-<input type="text" name="relpath" value="{relpath}">
+<input type="text" name="relpath" value={relpath} />
 <label for="title">Title:</label>
-<input type="text" name="title" value="{title}">
+<input type="text" name="title" value={title} />
diff --git a/src/main.js b/src/main.js
index d6cacbb..e7e7816 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,4 +7,4 @@ const app = new App({
 	}
 });
 
-export default app;
\ No newline at end of file
+export default app;