add template settings

main.ts

@@ -59,7 +59,7 @@ export default class RecipeGrabber extends Plugin {
 	}
 
 	getRecipes = async (url: string): Promise<void> => {
-		const markdown = handlebars.compile(c.DEFAULT_TEMPLATE);
+		const markdown = handlebars.compile(this.settings.recipeTemplate);
 		try {
 			const recipes = await this.fetchRecipes(url);
 			const view = this.app.workspace.getActiveViewOfType(MarkdownView);

settings.ts

@@ -1,12 +1,15 @@
 import { App, PluginSettingTab, Setting } from "obsidian";
 import RecipeGrabber from "./main";
+import * as c from "./constants";
 
 export interface PluginSettings {
 	debug: boolean;
+	recipeTemplate: string;
 }
 
 export const DEFAULT_SETTINGS: PluginSettings = {
 	debug: false,
+	recipeTemplate: c.DEFAULT_TEMPLATE,
 };
 
 export class SettingsTab extends PluginSettingTab {
@@ -20,7 +23,8 @@ export class SettingsTab extends PluginSettingTab {
 	display(): void {
 		const { containerEl } = this;
 		containerEl.empty();
-		containerEl.createEl("h2", { text: "Settings for the recipe grabber" });
+		containerEl.createEl("h2", { text: "The Recipe Grabber: Settings" });
+		containerEl.addClass("settingsTemplate");
 
 		new Setting(containerEl)
 			.setName("Debug mode")
@@ -34,15 +38,33 @@ export class SettingsTab extends PluginSettingTab {
 						await this.plugin.saveSettings();
 					});
 			});
-		// .addText((text) =>
-		// 	text
-		// 		.setPlaceholder("Debug mode")
-		// 		.setValue(this.plugin.settings.debug ? "true" : "false")
-		// 		.onChange(async (value) => {
-		// 			console.log("Secret: " + value);
-		// 			this.plugin.settings.mySetting = value;
-		// 			await this.plugin.saveSettings();
-		// 		})
-		// );
+
+		new Setting(containerEl)
+			.setClass("settingsTemplateRow")
+			.setName("Recipe template")
+			.setDesc(
+				"A Handlebars template to render the recipe. (see README for more info)"
+			)
+			.addButton((btn) =>
+				btn
+					.setButtonText("Reset to default")
+					.setClass("settingsTemplateButton")
+					.setCta()
+					.onClick(async () => {
+						this.plugin.settings.recipeTemplate =
+							c.DEFAULT_TEMPLATE;
+						await this.plugin.saveSettings();
+						this.display();
+					})
+			)
+			.addTextArea((text) => {
+				text.setValue(this.plugin.settings.recipeTemplate).onChange(
+					async (value) => {
+						console.log("Recipe template: " + value);
+						this.plugin.settings.recipeTemplate = value;
+						await this.plugin.saveSettings();
+					}
+				);
+			});
 	}
 }

styles.css

@@ -6,3 +6,46 @@ available in the app when your plugin is enabled.
 If your plugin does not need CSS, delete this file.
 
 */
+
+/**
+	We need to add some custom styling for the settings tab because we want our textarea to fill the avaialble space.
+*/
+.settingsTemplateRow {
+	display: flex;
+	justify-content: start;
+	flex-direction: column;
+	align-items: flex-start;
+	position: relative;
+}
+
+.settingsTemplateRow .setting-item-control {
+	width: 100%;
+	margin: 1rem 0 0;
+	flex: 1 auto;
+}
+
+.settingsTemplateRow .setting-item-info {
+	flex: 0 1 auto;
+}
+
+.settingsTemplateRow textarea {
+	width: 100%;
+	height: 100%;
+}
+
+.settingsTemplate {
+	display: flex;
+	justify-content: start;
+	flex-direction: column;
+}
+
+.settingsTemplate .settingsTemplateRow {
+	flex: 1 auto;
+}
+
+.settingsTemplateRow .settingsTemplateButton {
+	position: absolute;
+	top: 1rem;
+	right: 0;
+	cursor: pointer;
+}