feat: add settings page

Closes #3

package.json

@@ -21,6 +21,7 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "uslug": "git+https://github.com/laurent22/uslug.git#emoji-support"
   }
 }

src/index.ts

@@ -1,4 +1,5 @@
 import joplin from 'api';
+import { registerSettings, settingValue } from './settings';
 
 const uslug = require('uslug');
 
@@ -49,8 +50,9 @@ function headerSlug(headerText:string) {
 
 joplin.plugins.register({
     onStart: async function() {
-        const panels = joplin.views.panels;
+        await registerSettings();
 
+        const panels = joplin.views.panels;
         const view = await (panels as any).create();
 
         await panels.setHtml(view, 'Outline');
@@ -67,6 +69,10 @@ joplin.plugins.register({
             const note = await joplin.workspace.selectedNote();
             slugs = {};
 
+            const fontFamily = await settingValue('fontFamily')
+            const fontSize = await settingValue('fontSize')
+            const fontColor = await settingValue('fontColor');
+
             if (note) {
                 const headers = noteHeaders(note.body);
 
@@ -76,17 +82,23 @@ joplin.plugins.register({
 
                     itemHtml.push(`
 						<p class="toc-item" style="padding-left:${(header.level - 1) * 15}px">
-							<a class="toc-item-link" href="#" data-slug="${escapeHtml(slug)}">
+							<a class="toc-item-link" href="#" data-slug="${escapeHtml(slug)}" style="color: ${fontColor}">
 								${escapeHtml(header.text)}
 							</a>
 						</p>
 					`);
                 }
 
                 await panels.setHtml(view, `
-                    <p class="header">Outline</p>
-					<div class="container">
-						${itemHtml.join('\n')}
+                    <div class="outline-content" style='
+                        font-family: "${fontFamily}"
+                    '>
+                        <p class="header">Outline</p>
+                        <div class="container" style="
+                            font-size: ${fontSize};
+                        ">
+                            ${itemHtml.join('\n')}
+                        </div>
 					</div>
 				`);
             } else {

src/settings.ts

@@ -0,0 +1,38 @@
+import {SettingItemType} from 'api/types'
+import joplin from "../api";
+
+export async function registerSettings() {
+    await joplin.settings.registerSection('outline.settings', {
+        label: 'Outline',
+        iconName: 'fas fa-align-justify'
+    });
+
+    await joplin.settings.registerSetting('fontFamily', {
+        type: SettingItemType.String,
+        value: 'var(--joplin-font-family)',
+        description: 'var(--joplin-font-family)',
+        section: 'outline.settings',
+        public: true,
+        label: 'Font Family'
+    });
+    await joplin.settings.registerSetting('fontSize', {
+        type: SettingItemType.String,
+        value: 'var(--joplin-font-size)',
+        description: 'var(--joplin-font-size)',
+        section: 'outline.settings',
+        public: true,
+        label: 'Font Size'
+    });
+    await joplin.settings.registerSetting('fontColor', {
+        type: SettingItemType.String,
+        value: '#42b983',
+        description: '#42b983',
+        section: 'outline.settings',
+        public: true,
+        label: 'Font Color'
+    });
+}
+
+export async function settingValue(key: string) {
+    return await joplin.settings.value(key)
+}

src/webview.css

@@ -6,29 +6,14 @@ html {
     margin-top: 10px;
     font-size: 13px;
     font-weight: bold;
-    color: #34495e;
-}
-
-.container {
-    background-color: var(--joplin-background-color);
-    color: var(--joplin-color);
-    font-size: var(--joplin-font-size);
-    font-family: var(--joplin-font-family);
 }
 
 .toc-item a {
-    /*color: var(--joplin-color);*/
-    color: #42b983;
     font-weight: 600;
     padding: 0 2px;
     text-decoration: none;
 }
 
-.toc-item a:hover {
-    font-weight: bold;
-    color: #358b63;
-}
-
 ::-webkit-scrollbar {
 	width: 7px;
 	height: 7px;
@@ -53,4 +38,4 @@ html {
 
 ::-webkit-scrollbar-thumb:hover {
 	background: rgba(100, 100, 100, 0.7);
-}
+}