add buttons & update README

README.md

@@ -34,6 +34,59 @@ For Monthly Notes:
 
 -   `For year` backfill will a note each month before today month prefix, e.g. `January -` for each month of the year before this month
 
+## Commands
+
+Opening today's daily/monthly note or the next/previous from today or the next/previous from the current note can be done via the command prompt with the following `Auto Journal: ` commands.
+
+-   `Open today's daily note`
+-   `Open next daily note`
+-   `Open previous daily note`
+-   `Open today's monthly note`
+-   `Open next monthly note`
+-   `Open previous monthly note`
+
+You can assign hotkeys to any of these commands in the native Obsidian `Settings` -> `Hotkeys` tab.
+
+## Navigation buttons
+
+You can add buttons to navigate to today/next/previous daily/monthly notes via a `auto-journal-navigation` code block.
+
+Inside the codeblock include the `type` of the button and the button text you want it to display.
+
+To add previous and next buttons for daily notes, you can add the following code block:
+
+````
+```auto-journal-navigation
+previous-daily: Previous Note
+next-daily: Next note
+\```
+````
+
+and they'd look something like this,
+
+![](./docs/assets/prev-next-buttons.png)
+
+The following button `type`s are supported:
+
+-   `today-daily`
+-   `previous-daily`
+-   `next-daily`
+-   `today-monthly`
+-   `previous-monthly`
+-   `next-monthly`
+
+You can add CSS to the following classes to change the styling and/or positions of the buttons,
+
+-   `auto-journal-navigation-container` for the containing `<div>`
+-   `auto-journal-navigation-button` for all the `<button>`s
+-   `auto-journal-daily` for all the `daily` type buttons
+-   `auto-journal-monthly` for all the `monthly` type buttons
+-   `auto-journal-today` for all the `today` type buttons
+-   `auto-journal-next` for all the `next` type buttons
+-   `auto-journal-previous` for all the `previous` type buttons
+
+Or you can adjust the CSS of a specific button using the button's `id` which is the same as its type. For instance a `next-daily` button has the id that can be accessed in CSS via `#next-daily`
+
 ### Templating the date in a backfill
 
 You can include a configurable token in a template to be replaced by the date that the file would have been created in a backfill.
@@ -42,7 +95,6 @@ By default, the token `<$date-from-auto-journal$>` in a template file will be re
 
 ## Plugins that pair well for daily journaling
 
-
 -   [Custom File Explorer sorting](https://github.com/SebastianMC/obsidian-custom-sort) Since the default names of each journal are the full names of the months e.g. `January` the following `sortspec` file placed in the root folder of your journal will organize them in the correct order on your filesystem.
 
     -   <details>
@@ -166,12 +218,12 @@ The preferred method is adding this through the [built-in community plugin brows
 
 Please [open an issue](https://github.com/Ebonsignori/obsidian-auto-journal/issues/new) with any suggestions or bug reports.
 
-See [contributing docs](docs/contributing.md) if you'd like to open a PR. 
+See [contributing docs](docs/contributing.md) if you'd like to open a PR.
 
 ## Acknowledgements
 
 [The Obsidian team](https://obsidian.md/about) for creating a wonderful product :purple_heart:
 
 The implementation borrows from:
 
-- [suggest.ts](./src/utils/suggest.ts) and the [file-suggest.ts](./src/settings/file-suggest.ts) and [folder-suggest.ts](./src/settings/folder-suggest.ts) that implement it are copyrighted works of [Liam Cain](https://github.com/liamcain), [obsidian-periodic-notes](https://github.com/liamcain/obsidian-periodic-notes).
+-   [suggest.ts](./src/utils/suggest.ts) and the [file-suggest.ts](./src/settings/file-suggest.ts) and [folder-suggest.ts](./src/settings/folder-suggest.ts) that implement it are copyrighted works of [Liam Cain](https://github.com/liamcain), [obsidian-periodic-notes](https://github.com/liamcain/obsidian-periodic-notes).

src/main.ts

@@ -17,6 +17,13 @@ export default class AutoJournal extends Plugin {
 
 		this.addSettingTab(new SettingsTab(this.app, this));
 
+		// Automatically run on startup if enabled
+		if (this.settings.automaticallyRun) {
+			this.app.workspace.onLayoutReady(() => {
+				this.run();
+			});
+		}
+
 		this.addCommand({
 			id: "manually-trigger",
 			name: "Manually trigger",
@@ -25,95 +32,158 @@ export default class AutoJournal extends Plugin {
 			},
 		});
 
+		const goToNote = (
+			type: "daily" | "monthly",
+			navigateTo: "previous" | "next" | "today"
+		) => {
+			const link = getJournalLink(
+				this.app,
+				this.settings,
+				type,
+				navigateTo
+			);
+			navigateToJournalLink(this.app, this.settings, link);
+		};
+
 		this.addCommand({
 			id: "todays-daily-note",
-			name: "Open todays daily note",
+			name: "Open today's daily note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"daily",
-					"today"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("daily", "today");
 			},
 		});
 
 		this.addCommand({
 			id: "next-daily-note",
 			name: "Open next daily note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"daily",
-					"next"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("daily", "next");
 			},
 		});
 
 		this.addCommand({
 			id: "previous-daily-note",
 			name: "Open previous daily note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"daily",
-					"previous"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("daily", "previous");
 			},
 		});
 
 		this.addCommand({
 			id: "todays-monthly-note",
 			name: "Open todays monthly note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"monthly",
-					"today"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("monthly", "today");
 			},
 		});
 
 		this.addCommand({
 			id: "next-monthly-note",
 			name: "Open next monthly note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"monthly",
-					"next"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("monthly", "next");
 			},
 		});
 
 		this.addCommand({
 			id: "previous-monthly-note",
 			name: "Open previous monthly note",
 			callback: () => {
-				const link = getJournalLink(
-					this.app,
-					this.settings,
-					"monthly",
-					"previous"
-				);
-				navigateToJournalLink(this.app, this.settings, link);
+				goToNote("monthly", "previous");
 			},
 		});
 
-		if (this.settings.automaticallyRun) {
-			this.app.workspace.onLayoutReady(() => {
-				this.run();
+		const createNavigationButton = (
+			container: HTMLElement,
+			buttonType: string,
+			buttonText: string,
+			type: "daily" | "monthly",
+			navigateTo: "previous" | "next" | "today"
+		) => {
+			const button = container.createEl("button", {
+				text: buttonText,
+				cls: `auto-journal-navigation-button auto-journal-${type} auto-journal-${navigateTo}`,
 			});
-		}
+			button.setAttribute("id", buttonType);
+			button.onclick = () => {
+				goToNote(type, navigateTo);
+			};
+			container.appendChild(button);
+		};
+
+		this.registerMarkdownCodeBlockProcessor(
+			"auto-journal-navigation",
+			(source, el) => {
+				el.parentElement?.addClass("auto-journal-code-block-hidden");
+				const container = el.createEl("div", {
+					cls: "auto-journal-navigation-container",
+				});
+
+				const lines = source.split("\n");
+				for (const line of lines) {
+					const keyValues = line.split(":");
+					if (keyValues.length !== 2) {
+						continue;
+					}
+					const buttonType = keyValues[0].trim();
+					const buttonText = keyValues[1].trim();
+					if (buttonType === "today-daily") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"daily",
+							"today"
+						);
+					}
+					if (buttonType === "next-daily") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"daily",
+							"next"
+						);
+					}
+					if (buttonType === "previous-daily") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"daily",
+							"previous"
+						);
+					}
+					if (buttonType === "today-monthly") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"monthly",
+							"today"
+						);
+					}
+					if (buttonType === "next-monthly") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"monthly",
+							"next"
+						);
+					}
+					if (buttonType === "previous-monthly") {
+						createNavigationButton(
+							container,
+							buttonType,
+							buttonText,
+							"monthly",
+							"previous"
+						);
+					}
+				}
+			}
+		);
 	}
 
 	async run() {

styles.css

@@ -1,13 +1,31 @@
 /* Auto Journal styles */
+
+/* Settings */
 .auto-journal-heading {
-  margin: 0;
+	margin: 0;
 	color: var(--text-normal);
 }
 
 .auto-journal-link {
 	font-style: italic;
 }
 
-.auto-journal-notes-body {
-	margin: 0;
+/* Navigation buttons */
+.auto-journal-code-block-hidden:hover {
+	box-shadow: none !important;
+	border-radius: 0 !important;
+}
+
+.auto-journal-code-block-hidden > .edit-block-button {
+	opacity: 0 !important;
+}
+
+.auto-journal-navigation-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.auto-journal-navigation-button:hover {
+	cursor: pointer !important;
 }