From b313d165c3f9978ef9d2b9e763b4ae07cf3b630e Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Sun, 14 Nov 2021 22:27:22 +1300
Subject: [PATCH 1/6] Add file name template setting

---
 src/fileNameRenderer.ts                       | 26 +++++++++++++++++++
 src/settingsTab/components/Chip.svelte        | 14 ++++++++++
 .../components/FileNameDescription.svelte     | 14 ++++++++++
 src/settingsTab/index.ts                      | 24 +++++++++++++++++
 src/store/settingsStore.ts                    |  6 +++++
 5 files changed, 84 insertions(+)
 create mode 100644 src/fileNameRenderer.ts
 create mode 100644 src/settingsTab/components/Chip.svelte
 create mode 100644 src/settingsTab/components/FileNameDescription.svelte

diff --git a/src/fileNameRenderer.ts b/src/fileNameRenderer.ts
new file mode 100644
index 0000000..7c7c390
--- /dev/null
+++ b/src/fileNameRenderer.ts
@@ -0,0 +1,26 @@
+import nunjucks, { Environment } from 'nunjucks';
+
+const DefaultTemplate = '{{shortTitle}}';
+
+class FileNameRenderer {
+  private nunjucks: Environment;
+
+  constructor() {
+    this.nunjucks = new nunjucks.Environment(null, { autoescape: false });
+  }
+
+  public validate(template: string): boolean {
+    try {
+      this.nunjucks.renderString(template, {});
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  public defaultTemplate(): string {
+    return DefaultTemplate;
+  }
+}
+
+export const fileNameRenderer = new FileNameRenderer();
diff --git a/src/settingsTab/components/Chip.svelte b/src/settingsTab/components/Chip.svelte
new file mode 100644
index 0000000..b080ec5
--- /dev/null
+++ b/src/settingsTab/components/Chip.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let title: string;
+</script>
+
+<div class="kp-chip setting-command-hotkeys">
+  <span class="setting-hotkey">{`{{${title}}}`}</span>
+</div>
+
+<style>
+  .kp-chip {
+    display: inline-flex;
+    color: var(--text-normal);
+  }
+</style>
diff --git a/src/settingsTab/components/FileNameDescription.svelte b/src/settingsTab/components/FileNameDescription.svelte
new file mode 100644
index 0000000..d7b1321
--- /dev/null
+++ b/src/settingsTab/components/FileNameDescription.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Chip from './Chip.svelte';
+</script>
+
+Template to use for creation of file names from a book.
+
+<br />
+
+<span>
+  Available variables:
+  <Chip title={'shortTitle'} />
+  <Chip title={'longTitle'} />
+  <Chip title={'authorTitle'} />
+</span>
diff --git a/src/settingsTab/index.ts b/src/settingsTab/index.ts
index a0da95e..406b23c 100644
--- a/src/settingsTab/index.ts
+++ b/src/settingsTab/index.ts
@@ -7,10 +7,12 @@ import AmazonLogoutModal from '~/components/amazonLogoutModal';
 import type KindlePlugin from '~/.';
 import type FileManager from '~/fileManager';
 import type { AmazonAccountRegion } from '~/models';
+import { fileNameRenderer } from '~/fileNameRenderer';
 import { Renderer } from '~/renderer';
 import { settingsStore } from '~/store';
 import { scrapeLogoutUrl } from '~/scraper';
 import { AmazonRegions } from '~/amazonRegion';
+import FileNameDescription from './components/FileNameDescription.svelte';
 
 const { moment } = window;
 
@@ -36,6 +38,7 @@ export class SettingsTab extends PluginSettingTab {
     this.amazonRegion();
     this.downloadBookMetadata();
     this.syncOnBoot();
+    this.fileNameTemplate();
     this.highlightTemplate();
     this.sponsorMe();
   }
@@ -128,6 +131,27 @@ export class SettingsTab extends PluginSettingTab {
       });
   }
 
+  private fileNameTemplate(): void {
+    const settingEl = new Setting(this.containerEl)
+      .setName('File name template')
+      .addText((text) => {
+        text.inputEl.style.fontSize = '0.8em';
+        text.inputEl.placeholder = fileNameRenderer.defaultTemplate();
+        text.setValue(get(settingsStore).fileNameTemplate).onChange(async (value) => {
+          const isValid = fileNameRenderer.validate(value);
+
+          if (isValid) {
+            console.log('template is valid. saving', value);
+          }
+
+          text.inputEl.style.border = isValid ? '' : '1px solid red';
+        });
+        return text;
+      });
+
+    new FileNameDescription({ target: settingEl.descEl });
+  }
+
   private highlightTemplate(): void {
     new Setting(this.containerEl)
       .setName('Highlight template')
diff --git a/src/store/settingsStore.ts b/src/store/settingsStore.ts
index 940ad30..af3dadf 100644
--- a/src/store/settingsStore.ts
+++ b/src/store/settingsStore.ts
@@ -11,6 +11,7 @@ type Settings = {
   lastSyncMode: SyncMode;
   isLoggedIn: boolean;
   highlightTemplate?: string;
+  fileNameTemplate?: string;
   syncOnBoot: boolean;
   downloadBookMetadata: boolean;
 };
@@ -120,6 +121,10 @@ const createSettingsStore = () => {
     });
   };
 
+  const setFileNameTemplate = (value: string) => {
+    store.update((state) => ({ ...state, fileNameTemplate: value }));
+  };
+
   const setSyncOnBoot = (value: boolean) => {
     store.update((state) => {
       state.syncOnBoot = value;
@@ -149,6 +154,7 @@ const createSettingsStore = () => {
       setHighlightsFolder,
       login,
       logout,
+      setFileNameTemplate,
       setHighlightTemplate,
       setSyncOnBoot,
       setDownloadBookMetadata,

From e5fd179f883ad328f107bd09e2c646cbefefce1e Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Sun, 14 Nov 2021 23:19:33 +1300
Subject: [PATCH 2/6] File name preview component

---
 src/settingsTab/components/Preview.svelte | 39 +++++++++++++++++++++++
 src/settingsTab/index.ts                  | 17 +++++++---
 2 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/settingsTab/components/Preview.svelte

diff --git a/src/settingsTab/components/Preview.svelte b/src/settingsTab/components/Preview.svelte
new file mode 100644
index 0000000..f00815c
--- /dev/null
+++ b/src/settingsTab/components/Preview.svelte
@@ -0,0 +1,39 @@
+<div class="wrapper">
+  <div class="title">Preview</div>
+  <select class="dropdown">
+    <option value="/">Animal Farm (Classics To Go) (George Orwell)</option>
+    <option value="/">An Everyone Culture (Robert Kegan and Lisa Laskow Lahey)</option>
+    <option value="/">The Girl on the Train: A Novel (Paula Hawkins)</option>
+  </select>
+  <div class="preview">File name: <span class="file-name">Animal Farm.md</span></div>
+</div>
+
+<style>
+  .wrapper {
+    border: 1px solid var(--background-modifier-border);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 10px;
+    padding: 5px 10px;
+  }
+
+  .title,
+  .preview {
+    color: var(--text-muted);
+  }
+
+  .preview {
+    margin-top: 4px;
+  }
+
+  .file-name {
+    color: var(--text-normal);
+  }
+
+  .title,
+  .preview,
+  .dropdown {
+    font-size: 0.8em;
+  }
+</style>
diff --git a/src/settingsTab/index.ts b/src/settingsTab/index.ts
index 406b23c..0cf8883 100644
--- a/src/settingsTab/index.ts
+++ b/src/settingsTab/index.ts
@@ -13,6 +13,7 @@ import { settingsStore } from '~/store';
 import { scrapeLogoutUrl } from '~/scraper';
 import { AmazonRegions } from '~/amazonRegion';
 import FileNameDescription from './components/FileNameDescription.svelte';
+import Preview from './components/Preview.svelte';
 
 const { moment } = window;
 
@@ -132,7 +133,7 @@ export class SettingsTab extends PluginSettingTab {
   }
 
   private fileNameTemplate(): void {
-    const settingEl = new Setting(this.containerEl)
+    const setting = new Setting(this.containerEl)
       .setName('File name template')
       .addText((text) => {
         text.inputEl.style.fontSize = '0.8em';
@@ -149,17 +150,23 @@ export class SettingsTab extends PluginSettingTab {
         return text;
       });
 
-    new FileNameDescription({ target: settingEl.descEl });
+    setting.settingEl.style.alignItems = 'normal';
+    setting.controlEl.style.flexDirection = 'column';
+    setting.controlEl.style.alignItems = 'flex-end';
+
+    new FileNameDescription({ target: setting.descEl });
+    new Preview({ target: setting.controlEl });
   }
 
   private highlightTemplate(): void {
-    new Setting(this.containerEl)
+    const setting = new Setting(this.containerEl)
       .setName('Highlight template')
       .setDesc('Template for an individual highlight')
       .addTextArea((text) => {
         text.inputEl.style.width = '100%';
-        text.inputEl.style.height = '450px';
+        text.inputEl.style.height = '200px';
         text.inputEl.style.fontSize = '0.8em';
+        text.inputEl.style.fontFamily = 'var(--font-monospace)';
         text.inputEl.placeholder = this.renderer.defaultHighlightTemplate();
         text.setValue(get(settingsStore).highlightTemplate).onChange(async (value) => {
           const isValid = this.renderer.validate(value);
@@ -172,6 +179,8 @@ export class SettingsTab extends PluginSettingTab {
         });
         return text;
       });
+
+    setting.settingEl.style.alignItems = 'normal';
   }
 
   private downloadBookMetadata(): void {

From e9bd2002b37d0b04c6000c617bb2f0e610c88b32 Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Sun, 14 Nov 2021 23:53:08 +1300
Subject: [PATCH 3/6] Two-way binding of data for Preview component

---
 src/settingsTab/components/Preview.svelte | 21 ++++++++++++++-----
 src/settingsTab/index.ts                  | 25 ++++++++++++++++++++++-
 src/settingsTab/store.ts                  |  3 +++
 3 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 src/settingsTab/store.ts

diff --git a/src/settingsTab/components/Preview.svelte b/src/settingsTab/components/Preview.svelte
index f00815c..ce2011d 100644
--- a/src/settingsTab/components/Preview.svelte
+++ b/src/settingsTab/components/Preview.svelte
@@ -1,11 +1,22 @@
+<script lang="ts">
+  import type { BookDemo } from '../index';
+  import { fileName } from '../store';
+
+  export let books: BookDemo[];
+  let selectedBook = books[0];
+
+  export let onSelect: (book: any) => void;
+  $: onSelect(selectedBook);
+</script>
+
 <div class="wrapper">
   <div class="title">Preview</div>
-  <select class="dropdown">
-    <option value="/">Animal Farm (Classics To Go) (George Orwell)</option>
-    <option value="/">An Everyone Culture (Robert Kegan and Lisa Laskow Lahey)</option>
-    <option value="/">The Girl on the Train: A Novel (Paula Hawkins)</option>
+  <select class="dropdown" bind:value={selectedBook}>
+    {#each books as book}
+      <option value={book}>{book.title} ({book.author})</option>
+    {/each}
   </select>
-  <div class="preview">File name: <span class="file-name">Animal Farm.md</span></div>
+  <div class="preview">File name: <span class="file-name">{$fileName}</span></div>
 </div>
 
 <style>
diff --git a/src/settingsTab/index.ts b/src/settingsTab/index.ts
index 0cf8883..e77bbba 100644
--- a/src/settingsTab/index.ts
+++ b/src/settingsTab/index.ts
@@ -14,9 +14,15 @@ import { scrapeLogoutUrl } from '~/scraper';
 import { AmazonRegions } from '~/amazonRegion';
 import FileNameDescription from './components/FileNameDescription.svelte';
 import Preview from './components/Preview.svelte';
+import { fileName } from './store';
 
 const { moment } = window;
 
+export type BookDemo = {
+  title: string;
+  author: string;
+};
+
 export class SettingsTab extends PluginSettingTab {
   private renderer: Renderer;
 
@@ -141,6 +147,8 @@ export class SettingsTab extends PluginSettingTab {
         text.setValue(get(settingsStore).fileNameTemplate).onChange(async (value) => {
           const isValid = fileNameRenderer.validate(value);
 
+          fileName.set(`You typed: ${value}`);
+
           if (isValid) {
             console.log('template is valid. saving', value);
           }
@@ -154,8 +162,23 @@ export class SettingsTab extends PluginSettingTab {
     setting.controlEl.style.flexDirection = 'column';
     setting.controlEl.style.alignItems = 'flex-end';
 
+    const books: BookDemo[] = [
+      { title: 'Animal Farm (Classics To Go)', author: 'George Orwell' },
+      { title: 'An Everyone Culture', author: 'Robert Kegan and Lisa Laskow Lahey' },
+      { title: 'The Girl on the Train: A Novel', author: 'Paula Hawkins' },
+    ];
+
     new FileNameDescription({ target: setting.descEl });
-    new Preview({ target: setting.controlEl });
+    new Preview({
+      target: setting.controlEl,
+      props: {
+        books,
+        onSelect: (book: BookDemo) => {
+          console.log('selected book', book);
+          fileName.set(`${book.title}-yeeha`);
+        },
+      },
+    });
   }
 
   private highlightTemplate(): void {
diff --git a/src/settingsTab/store.ts b/src/settingsTab/store.ts
new file mode 100644
index 0000000..71dd5c9
--- /dev/null
+++ b/src/settingsTab/store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const fileName = writable('');

From ddf23262d6b838f162721669c30a2c25de2e7a39 Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Mon, 15 Nov 2021 20:23:53 +1300
Subject: [PATCH 4/6] Complete file name preview setting

---
 .../syncModal/views/SyncingView.svelte        |  7 +-
 src/fileManager/mappers.ts                    |  4 +-
 src/fileNameRenderer.ts                       | 18 +++++
 src/notifications.ts                          |  4 +-
 src/renderer/index.ts                         |  4 +-
 .../components/FileNameDescription.svelte     | 14 ----
 .../components/Chip.svelte                    |  5 +-
 .../components/Legend.svelte                  | 20 +++++
 .../components/Preview.svelte                 | 16 ++--
 .../fileNameTemplateSetting/index.ts          | 74 +++++++++++++++++++
 .../fileNameTemplateSetting/store.ts          | 13 ++++
 src/settingsTab/index.ts                      | 51 +------------
 src/settingsTab/store.ts                      |  3 -
 src/store/statusBar/index.ts                  |  4 +-
 src/utils/br2ln.spec.ts                       | 37 +---------
 src/utils/index.ts                            |  2 +-
 ...tizeTitle.spec.ts => shortenTitle.spec.ts} | 39 ++--------
 .../{sanitizeTitle.ts => shortenTitle.ts}     |  4 +-
 18 files changed, 158 insertions(+), 161 deletions(-)
 delete mode 100644 src/settingsTab/components/FileNameDescription.svelte
 rename src/settingsTab/{ => fileNameTemplateSetting}/components/Chip.svelte (74%)
 create mode 100644 src/settingsTab/fileNameTemplateSetting/components/Legend.svelte
 rename src/settingsTab/{ => fileNameTemplateSetting}/components/Preview.svelte (64%)
 create mode 100644 src/settingsTab/fileNameTemplateSetting/index.ts
 create mode 100644 src/settingsTab/fileNameTemplateSetting/store.ts
 delete mode 100644 src/settingsTab/store.ts
 rename src/utils/{sanitizeTitle.spec.ts => shortenTitle.spec.ts} (53%)
 rename src/utils/{sanitizeTitle.ts => shortenTitle.ts} (75%)

diff --git a/src/components/syncModal/views/SyncingView.svelte b/src/components/syncModal/views/SyncingView.svelte
index d297ca8..6951a51 100644
--- a/src/components/syncModal/views/SyncingView.svelte
+++ b/src/components/syncModal/views/SyncingView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Jumper } from 'svelte-loading-spinners';
 
-  import { sanitizeTitleExcess } from '~/utils';
+  import { shortenTitle } from '~/utils';
   import { currentAmazonRegion } from '~/amazonRegion';
   import { store } from '../store';
 
@@ -13,8 +13,7 @@
   } else if ($store?.syncMode === 'amazon') {
     progressMessage = 'Looking for new Kindle highlights to sync...';
   } else {
-    progressMessage =
-      'Parsing your My Clippings files for highlights and notes...';
+    progressMessage = 'Parsing your My Clippings files for highlights and notes...';
   }
 
   $: total = $store.jobs?.length;
@@ -42,7 +41,7 @@
         <div class="kp-syncmodal--download">
           Syncing
           <span class="kp-syncmodal--book-name">
-            {sanitizeTitleExcess($store.currentJob.book.title)}
+            {shortenTitle($store.currentJob.book.title)}
           </span>
         </div>
       {:else}
diff --git a/src/fileManager/mappers.ts b/src/fileManager/mappers.ts
index 2785a93..5476d9b 100644
--- a/src/fileManager/mappers.ts
+++ b/src/fileManager/mappers.ts
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { get } from 'svelte/store';
 
 import { settingsStore } from '~/store';
-import { sanitizeTitle } from '~/utils';
+import { shortenTitle } from '~/utils';
 import type { Book, KindleFrontmatter } from '~/models';
 
 /**
@@ -11,7 +11,7 @@ import type { Book, KindleFrontmatter } from '~/models';
  * vault directory.
  */
 export const bookFilePath = (book: Book): string => {
-  const fileName = sanitizeTitle(book.title);
+  const fileName = shortenTitle(book.title);
   return path.join(get(settingsStore).highlightsFolder, `${fileName}.md`);
 };
 
diff --git a/src/fileNameRenderer.ts b/src/fileNameRenderer.ts
index 7c7c390..b14f236 100644
--- a/src/fileNameRenderer.ts
+++ b/src/fileNameRenderer.ts
@@ -1,4 +1,10 @@
 import nunjucks, { Environment } from 'nunjucks';
+import sanitize from 'sanitize-filename';
+import { get } from 'svelte/store';
+
+import { shortenTitle } from '~/utils';
+import { settingsStore } from '~/store';
+import type { Book } from '~/models';
 
 const DefaultTemplate = '{{shortTitle}}';
 
@@ -18,6 +24,18 @@ class FileNameRenderer {
     }
   }
 
+  public render(book: Partial<Book>): string {
+    const template = get(settingsStore).fileNameTemplate || this.defaultTemplate();
+
+    const fileName = this.nunjucks.renderString(template, {
+      shortTitle: shortenTitle(book.title),
+      longTitle: book.title,
+      author: book.author,
+    });
+
+    return `${sanitize(fileName)}.md`;
+  }
+
   public defaultTemplate(): string {
     return DefaultTemplate;
   }
diff --git a/src/notifications.ts b/src/notifications.ts
index fccce7e..bdf3d85 100644
--- a/src/notifications.ts
+++ b/src/notifications.ts
@@ -1,12 +1,12 @@
 import { Notice } from 'obsidian';
-import { sanitizeTitle } from '~/utils';
+import { shortenTitle } from '~/utils';
 
 import { ee } from '~/eventEmitter';
 import type { KindleFile } from '~/models';
 
 export const registerNotifications = (): void => {
   ee.on('resyncBook', (kindleFile) => {
-    new Notice(`Resyncing "${sanitizeTitle(kindleFile.book.title)}" highlights`);
+    new Notice(`Resyncing "${shortenTitle(kindleFile.book.title)}" highlights`);
   });
 
   ee.on('resyncComplete', (_kindleFile, diffCount) => {
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index eabf348..55f19c6 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -5,7 +5,7 @@ import bookTemplate from './templates/bookTemplate.njk';
 import defaultHighlightTemplate from './templates/defaultHighlightTemplate.njk';
 import highlightTemplateWrapper from './templates/highlightTemplateWrapper.njk';
 import { BlockReferenceExtension, TrimAllEmptyLinesExtension } from './nunjucks.extensions';
-import { sanitizeTitle } from '~/utils';
+import { shortenTitle } from '~/utils';
 import { settingsStore } from '~/store';
 import { trimMultipleLines } from './helper';
 import type { Book, BookHighlight, Highlight, RenderTemplate } from '~/models';
@@ -50,7 +50,7 @@ export class Renderer {
     const params: RenderTemplate = {
       ...book,
       fullTitle: book.title,
-      title: sanitizeTitle(book.title),
+      title: shortenTitle(book.title),
       appLink: appLink(book),
       ...entry.metadata,
       highlights: this.renderHighlights(book, highlights),
diff --git a/src/settingsTab/components/FileNameDescription.svelte b/src/settingsTab/components/FileNameDescription.svelte
deleted file mode 100644
index d7b1321..0000000
--- a/src/settingsTab/components/FileNameDescription.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  import Chip from './Chip.svelte';
-</script>
-
-Template to use for creation of file names from a book.
-
-<br />
-
-<span>
-  Available variables:
-  <Chip title={'shortTitle'} />
-  <Chip title={'longTitle'} />
-  <Chip title={'authorTitle'} />
-</span>
diff --git a/src/settingsTab/components/Chip.svelte b/src/settingsTab/fileNameTemplateSetting/components/Chip.svelte
similarity index 74%
rename from src/settingsTab/components/Chip.svelte
rename to src/settingsTab/fileNameTemplateSetting/components/Chip.svelte
index b080ec5..d65bd47 100644
--- a/src/settingsTab/components/Chip.svelte
+++ b/src/settingsTab/fileNameTemplateSetting/components/Chip.svelte
@@ -2,13 +2,14 @@
   export let title: string;
 </script>
 
-<div class="kp-chip setting-command-hotkeys">
+<div class="chip setting-command-hotkeys">
   <span class="setting-hotkey">{`{{${title}}}`}</span>
 </div>
 
 <style>
-  .kp-chip {
+  .chip {
     display: inline-flex;
     color: var(--text-normal);
+    margin: 0;
   }
 </style>
diff --git a/src/settingsTab/fileNameTemplateSetting/components/Legend.svelte b/src/settingsTab/fileNameTemplateSetting/components/Legend.svelte
new file mode 100644
index 0000000..98c0f8e
--- /dev/null
+++ b/src/settingsTab/fileNameTemplateSetting/components/Legend.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Chip from './Chip.svelte';
+</script>
+
+<div class="wrapper">
+  <span class="legend">Available variables:</span>
+  <Chip title={'shortTitle'} />
+  <Chip title={'longTitle'} />
+  <Chip title={'author'} />
+</div>
+
+<style>
+  .wrapper {
+    margin-bottom: 10px;
+  }
+
+  .legend {
+    font-size: 0.8em;
+  }
+</style>
diff --git a/src/settingsTab/components/Preview.svelte b/src/settingsTab/fileNameTemplateSetting/components/Preview.svelte
similarity index 64%
rename from src/settingsTab/components/Preview.svelte
rename to src/settingsTab/fileNameTemplateSetting/components/Preview.svelte
index ce2011d..38847c3 100644
--- a/src/settingsTab/components/Preview.svelte
+++ b/src/settingsTab/fileNameTemplateSetting/components/Preview.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
-  import type { BookDemo } from '../index';
-  import { fileName } from '../store';
+  import { books, fileName, BookDemo } from '../store';
 
-  export let books: BookDemo[];
-  let selectedBook = books[0];
+  let selectedBook = $books[0];
 
-  export let onSelect: (book: any) => void;
+  export let onSelect: (book: BookDemo) => void;
   $: onSelect(selectedBook);
 </script>
 
 <div class="wrapper">
-  <div class="title">Preview</div>
+  <div class="title">Live preview</div>
   <select class="dropdown" bind:value={selectedBook}>
-    {#each books as book}
+    {#each $books as book}
       <option value={book}>{book.title} ({book.author})</option>
     {/each}
   </select>
-  <div class="preview">File name: <span class="file-name">{$fileName}</span></div>
+  <div class="preview">Example file name: <span class="file-name">{$fileName}</span></div>
 </div>
 
 <style>
@@ -25,7 +23,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin-top: 10px;
+    margin-top: 20px;
     padding: 5px 10px;
   }
 
diff --git a/src/settingsTab/fileNameTemplateSetting/index.ts b/src/settingsTab/fileNameTemplateSetting/index.ts
new file mode 100644
index 0000000..ddf5bfc
--- /dev/null
+++ b/src/settingsTab/fileNameTemplateSetting/index.ts
@@ -0,0 +1,74 @@
+import { Setting } from 'obsidian';
+import { get } from 'svelte/store';
+
+import Legend from './components/Legend.svelte';
+import Preview from './components/Preview.svelte';
+import { settingsStore } from '~/store';
+import { fileName, BookDemo } from './store';
+import { fileNameRenderer } from '~/fileNameRenderer';
+
+const updateFileNamePreview = (book: BookDemo): void => {
+  const renderedFileName = fileNameRenderer.render(book);
+  fileName.set(renderedFileName);
+};
+
+export const fileNameTemplateSetting = (el: HTMLElement): void => {
+  let currentBook: BookDemo;
+
+  const setting = new Setting(el)
+    .setName('File name template')
+    .setDesc(
+      createDocumentFragment(
+        '<a href="https://mozilla.github.io/nunjucks/templating.html">Nunjucks template</a> to use for creation of file names from a book'
+      )
+    )
+    .addText((text) => {
+      text.inputEl.style.width = '400px';
+      text.inputEl.placeholder = fileNameRenderer.defaultTemplate();
+
+      text.setValue(get(settingsStore).fileNameTemplate).onChange(async (value) => {
+        const isValid = fileNameRenderer.validate(value);
+
+        if (isValid) {
+          settingsStore.actions.setFileNameTemplate(value);
+          updateFileNamePreview(currentBook);
+        }
+
+        text.inputEl.style.border = isValid ? '' : '1px solid red';
+      });
+
+      return text;
+    });
+
+  // Tweak vertical alignment of Settings component
+  setting.settingEl.style.alignItems = 'normal';
+  setting.controlEl.style.flexDirection = 'column';
+  setting.controlEl.style.alignItems = 'flex-end';
+  setting.controlEl.style.justifyContent = 'flex-start';
+
+  // Render Legend above control text field
+  const legendEl = document.createElement('div');
+  setting.controlEl.prepend(legendEl);
+  new Legend({ target: legendEl });
+
+  // Render Preview box after description
+  new Preview({
+    target: setting.descEl,
+    props: {
+      onSelect: (book: BookDemo) => {
+        currentBook = book;
+        updateFileNamePreview(book);
+      },
+    },
+  });
+};
+
+const createDocumentFragment = (innerHtml: string): DocumentFragment => {
+  const descEl = document.createElement('span');
+  descEl.innerHTML = innerHtml;
+
+  const descFragment = document.createDocumentFragment();
+  descFragment.appendChild(descEl);
+
+  return descFragment;
+};
diff --git a/src/settingsTab/fileNameTemplateSetting/store.ts b/src/settingsTab/fileNameTemplateSetting/store.ts
new file mode 100644
index 0000000..0ceb128
--- /dev/null
+++ b/src/settingsTab/fileNameTemplateSetting/store.ts
@@ -0,0 +1,13 @@
+import { readable, writable } from 'svelte/store';
+
+import type { Book } from '~/models';
+
+export type BookDemo = Pick<Book, 'title' | 'author'>;
+
+export const books = readable([
+  { title: 'Animal Farm (Classics To Go)', author: 'George Orwell' },
+  { title: 'An Everyone Culture', author: 'Robert Kegan and Lisa Laskow Lahey' },
+  { title: 'The Girl on the Train: A Novel', author: 'Paula Hawkins' },
+] as BookDemo[]);
+
+export const fileName = writable('');
diff --git a/src/settingsTab/index.ts b/src/settingsTab/index.ts
index e77bbba..4b0df1b 100644
--- a/src/settingsTab/index.ts
+++ b/src/settingsTab/index.ts
@@ -7,22 +7,14 @@ import AmazonLogoutModal from '~/components/amazonLogoutModal';
 import type KindlePlugin from '~/.';
 import type FileManager from '~/fileManager';
 import type { AmazonAccountRegion } from '~/models';
-import { fileNameRenderer } from '~/fileNameRenderer';
 import { Renderer } from '~/renderer';
 import { settingsStore } from '~/store';
 import { scrapeLogoutUrl } from '~/scraper';
 import { AmazonRegions } from '~/amazonRegion';
-import FileNameDescription from './components/FileNameDescription.svelte';
-import Preview from './components/Preview.svelte';
-import { fileName } from './store';
+import { fileNameTemplateSetting } from './fileNameTemplateSetting';
 
 const { moment } = window;
 
-export type BookDemo = {
-  title: string;
-  author: string;
-};
-
 export class SettingsTab extends PluginSettingTab {
   private renderer: Renderer;
 
@@ -139,46 +131,7 @@ export class SettingsTab extends PluginSettingTab {
   }
 
   private fileNameTemplate(): void {
-    const setting = new Setting(this.containerEl)
-      .setName('File name template')
-      .addText((text) => {
-        text.inputEl.style.fontSize = '0.8em';
-        text.inputEl.placeholder = fileNameRenderer.defaultTemplate();
-        text.setValue(get(settingsStore).fileNameTemplate).onChange(async (value) => {
-          const isValid = fileNameRenderer.validate(value);
-
-          fileName.set(`You typed: ${value}`);
-
-          if (isValid) {
-            console.log('template is valid. saving', value);
-          }
-
-          text.inputEl.style.border = isValid ? '' : '1px solid red';
-        });
-        return text;
-      });
-
-    setting.settingEl.style.alignItems = 'normal';
-    setting.controlEl.style.flexDirection = 'column';
-    setting.controlEl.style.alignItems = 'flex-end';
-
-    const books: BookDemo[] = [
-      { title: 'Animal Farm (Classics To Go)', author: 'George Orwell' },
-      { title: 'An Everyone Culture', author: 'Robert Kegan and Lisa Laskow Lahey' },
-      { title: 'The Girl on the Train: A Novel', author: 'Paula Hawkins' },
-    ];
-
-    new FileNameDescription({ target: setting.descEl });
-    new Preview({
-      target: setting.controlEl,
-      props: {
-        books,
-        onSelect: (book: BookDemo) => {
-          console.log('selected book', book);
-          fileName.set(`${book.title}-yeeha`);
-        },
-      },
-    });
+    fileNameTemplateSetting(this.containerEl);
   }
 
   private highlightTemplate(): void {
diff --git a/src/settingsTab/store.ts b/src/settingsTab/store.ts
deleted file mode 100644
index 71dd5c9..0000000
--- a/src/settingsTab/store.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const fileName = writable('');
diff --git a/src/store/statusBar/index.ts b/src/store/statusBar/index.ts
index 7ca305b..bb56a42 100644
--- a/src/store/statusBar/index.ts
+++ b/src/store/statusBar/index.ts
@@ -3,7 +3,7 @@ const { moment } = window;
 
 import { SetInterval, SetTimeout } from './scheduling';
 import { settingsStore, fileStore } from '~/store';
-import { sanitizeTitle } from '~/utils';
+import { shortenTitle } from '~/utils';
 import { ee } from '~/eventEmitter';
 
 const _setInterval = new SetInterval();
@@ -70,7 +70,7 @@ const createStatusBarStore = () => {
   ee.on('resyncFailure', async (file) => {
     setMessage({
       status: 'error',
-      text: `Error resyncing ${sanitizeTitle(file.book.title)}`,
+      text: `Error resyncing ${shortenTitle(file.book.title)}`,
     });
     // waitThenResumeDefaultMessage();
   });
diff --git a/src/utils/br2ln.spec.ts b/src/utils/br2ln.spec.ts
index 0fa2567..5531c8e 100644
--- a/src/utils/br2ln.spec.ts
+++ b/src/utils/br2ln.spec.ts
@@ -1,39 +1,4 @@
-import { sanitizeTitle, br2ln } from '~/utils';
-
-describe('Santize title for Obsidian environment', () => {
-  it('strip book description in title after colon', () => {
-    const santizedTitle = sanitizeTitle(
-      'Book Yourself Solid: The Fastest, Easiest, and Most Reliable System for Getting More Clients Than You Can Handle Even if You Hate Marketing and Selling'
-    );
-    expect(santizedTitle).toEqual('Book Yourself Solid');
-  });
-
-  it('remove reserved characters — single quote', () => {
-    const santizedTitle = sanitizeTitle(
-      "The Manager's Path: A Guide for Tech Leaders Navigating Growth and Change"
-    );
-    expect(santizedTitle).toEqual('The Managers Path');
-  });
-
-  it('remove reserved characters — single quote with other special characters', () => {
-    const santizedTitle = sanitizeTitle(
-      'Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!'
-    );
-    expect(santizedTitle).toEqual('Rich Dad Poor Dad');
-  });
-
-  it('remove any title content inside brackets', () => {
-    const santizedTitle = sanitizeTitle(
-      'The Discipline of Teams (Harvard Business Review Classics)'
-    );
-    expect(santizedTitle).toEqual('The Discipline of Teams');
-  });
-
-  it('trims any leading or trailing spaces', () => {
-    const santizedTitle = sanitizeTitle(' The Warm-Hearted Snowman ');
-    expect(santizedTitle).toEqual('The Warm-Hearted Snowman');
-  });
-});
+import { br2ln } from '~/utils';
 
 describe('HTML breakline to new line', () => {
   it('replaces breakline elements with no spaces', () => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c0d73a7..a2a3ec9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-export * from './sanitizeTitle';
+export * from './shortenTitle';
 export * from './frontmatter';
 export * from './br2ln';
 export * from './hash';
diff --git a/src/utils/sanitizeTitle.spec.ts b/src/utils/shortenTitle.spec.ts
similarity index 53%
rename from src/utils/sanitizeTitle.spec.ts
rename to src/utils/shortenTitle.spec.ts
index 0fa2567..e4335c3 100644
--- a/src/utils/sanitizeTitle.spec.ts
+++ b/src/utils/shortenTitle.spec.ts
@@ -1,63 +1,36 @@
-import { sanitizeTitle, br2ln } from '~/utils';
+import { shortenTitle } from '~/utils';
 
 describe('Santize title for Obsidian environment', () => {
   it('strip book description in title after colon', () => {
-    const santizedTitle = sanitizeTitle(
+    const santizedTitle = shortenTitle(
       'Book Yourself Solid: The Fastest, Easiest, and Most Reliable System for Getting More Clients Than You Can Handle Even if You Hate Marketing and Selling'
     );
     expect(santizedTitle).toEqual('Book Yourself Solid');
   });
 
   it('remove reserved characters — single quote', () => {
-    const santizedTitle = sanitizeTitle(
+    const santizedTitle = shortenTitle(
       "The Manager's Path: A Guide for Tech Leaders Navigating Growth and Change"
     );
     expect(santizedTitle).toEqual('The Managers Path');
   });
 
   it('remove reserved characters — single quote with other special characters', () => {
-    const santizedTitle = sanitizeTitle(
+    const santizedTitle = shortenTitle(
       'Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!'
     );
     expect(santizedTitle).toEqual('Rich Dad Poor Dad');
   });
 
   it('remove any title content inside brackets', () => {
-    const santizedTitle = sanitizeTitle(
+    const santizedTitle = shortenTitle(
       'The Discipline of Teams (Harvard Business Review Classics)'
     );
     expect(santizedTitle).toEqual('The Discipline of Teams');
   });
 
   it('trims any leading or trailing spaces', () => {
-    const santizedTitle = sanitizeTitle(' The Warm-Hearted Snowman ');
+    const santizedTitle = shortenTitle(' The Warm-Hearted Snowman ');
     expect(santizedTitle).toEqual('The Warm-Hearted Snowman');
   });
 });
-
-describe('HTML breakline to new line', () => {
-  it('replaces breakline elements with no spaces', () => {
-    const actual = br2ln('hello<br/>there');
-    expect(actual).toEqual('hello\nthere');
-  });
-
-  it('replaces breakline elements with spaces', () => {
-    const actual = br2ln('hello<br  />there');
-    expect(actual).toEqual('hello\nthere');
-  });
-
-  it('returns string with no breaklines', () => {
-    const actual = br2ln('hello there');
-    expect(actual).toEqual('hello there');
-  });
-
-  it('handles null', () => {
-    const actual = br2ln(null);
-    expect(actual).toEqual(null);
-  });
-
-  it('handles undefined', () => {
-    const actual = br2ln(undefined);
-    expect(actual).toEqual(undefined);
-  });
-});
diff --git a/src/utils/sanitizeTitle.ts b/src/utils/shortenTitle.ts
similarity index 75%
rename from src/utils/sanitizeTitle.ts
rename to src/utils/shortenTitle.ts
index 78d125c..42969aa 100644
--- a/src/utils/sanitizeTitle.ts
+++ b/src/utils/shortenTitle.ts
@@ -1,10 +1,10 @@
 import sanitize from 'sanitize-filename';
 
-export const sanitizeTitle = (title: string): string => {
+export const shortenTitle = (title: string): string => {
   return sanitizeTitleExcess(title).replace(/[':]/g, ''); // remove single quotes from title
 };
 
-export const sanitizeTitleExcess = (title: string): string => {
+const sanitizeTitleExcess = (title: string): string => {
   const santizedTitle = title
     .replace(/ *\([^)]*\) */g, '') // remove parenthesis and contents from title
     .replace(/:.*/g, '') // remove description test after `:` in title

From d0036b04c1263e891b6baddd0c70cc141f245dd5 Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Mon, 15 Nov 2021 20:32:33 +1300
Subject: [PATCH 5/6] Render created file names with new file name render
 utility

---
 src/fileManager/mappers.ts                       |  4 ++--
 src/settingsTab/fileNameTemplateSetting/index.ts |  2 +-
 src/utils/shortenTitle.ts                        | 11 ++---------
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/fileManager/mappers.ts b/src/fileManager/mappers.ts
index 5476d9b..e497752 100644
--- a/src/fileManager/mappers.ts
+++ b/src/fileManager/mappers.ts
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { get } from 'svelte/store';
 
 import { settingsStore } from '~/store';
-import { shortenTitle } from '~/utils';
+import { fileNameRenderer } from '~/fileNameRenderer';
 import type { Book, KindleFrontmatter } from '~/models';
 
 /**
@@ -11,7 +11,7 @@ import type { Book, KindleFrontmatter } from '~/models';
  * vault directory.
  */
 export const bookFilePath = (book: Book): string => {
-  const fileName = shortenTitle(book.title);
+  const fileName = fileNameRenderer.render(book);
   return path.join(get(settingsStore).highlightsFolder, `${fileName}.md`);
 };
 
diff --git a/src/settingsTab/fileNameTemplateSetting/index.ts b/src/settingsTab/fileNameTemplateSetting/index.ts
index ddf5bfc..ae49514 100644
--- a/src/settingsTab/fileNameTemplateSetting/index.ts
+++ b/src/settingsTab/fileNameTemplateSetting/index.ts
@@ -19,7 +19,7 @@ export const fileNameTemplateSetting = (el: HTMLElement): void => {
     .setName('File name template')
     .setDesc(
       createDocumentFragment(
-        '<a href="https://mozilla.github.io/nunjucks/templating.html">Nunjucks template</a> to use for creation of file names from a book'
+        '<a href="https://mozilla.github.io/nunjucks/templating.html">Nunjucks template</a> to use to format book file name'
       )
     )
     .addText((text) => {
diff --git a/src/utils/shortenTitle.ts b/src/utils/shortenTitle.ts
index 42969aa..629475a 100644
--- a/src/utils/shortenTitle.ts
+++ b/src/utils/shortenTitle.ts
@@ -1,14 +1,7 @@
-import sanitize from 'sanitize-filename';
-
 export const shortenTitle = (title: string): string => {
-  return sanitizeTitleExcess(title).replace(/[':]/g, ''); // remove single quotes from title
-};
-
-const sanitizeTitleExcess = (title: string): string => {
-  const santizedTitle = title
+  return title
     .replace(/ *\([^)]*\) */g, '') // remove parenthesis and contents from title
     .replace(/:.*/g, '') // remove description test after `:` in title
+    .replace(/[':]/g, '') // remove single quotes from title
     .trim();
-
-  return sanitize(santizedTitle);
 };

From d9623dbc1356930873c7812aa62273f3fd4cabd2 Mon Sep 17 00:00:00 2001
From: Hady Osman <hadyos@gmail.com>
Date: Mon, 15 Nov 2021 20:35:30 +1300
Subject: [PATCH 6/6] Update README. Bump version number

---
 README.md     | 6 +++---
 manifest.json | 2 +-
 package.json  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 63da95f..d6522fc 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ You can extract your `My Clippings.txt` file by plugging it into your computer u
 
 - **Enriched metadata** — Enrich your notes by downloading extra metadata information about your book from Amazon.com
 
-- **Powerful, flexible templating** — Customise your highlights to your liking by configuring your own template using ([Nunjucks][2]) templating language
+- **Powerful, flexible templating with preview** — Customise your highlights and file names to your liking by configuring your own template using ([Nunjucks][2]) templating language with live preview
 
 ## Mission statement
 
@@ -76,9 +76,9 @@ your online Amazon account.
 ### Template tags
 
 | Tag            | Description                                         | Present                                                                            |
-| -------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| -------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `{{text}}`     | Annotated text                                      | Always in all sync modes                                                           |
-| `{{location}}` | Highlighted text location                           | Usually available in all sync modes. If not, then `{{page}}` will be available     | Usually available. If not, then `{{page}}` will be available |
+| `{{location}}` | Highlighted text location                           | Usually available in all sync modes. If not, then `{{page}}` will be available     |
 | `{{page}}`     | Highlighted text page                               | Usually available in all sync modes. If not, then `{{location}}` will be available |
 | `{{note}}`     | Associated note to highlight                        | Optional                                                                           |
 | `{{appLink}}`  | Link to open highlight in Kindle app                | Available only for Amazon books synced through Amazon online                       |
diff --git a/manifest.json b/manifest.json
index 1772488..fe654e6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "obsidian-kindle-plugin",
   "name": "Kindle Highlights",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "minAppVersion": "0.10.2",
   "description": "Sync your Kindle book highlights using your Amazon login or uploading your My Clippings file",
   "author": "Hady Osman",
diff --git a/package.json b/package.json
index 2cb22d6..5e44293 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obsidian-kindle-plugin",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Sync your Kindle book highlights using your Amazon login or uploading your My Clippings file",
   "main": "src/index.ts",
   "repository": {