feat: allow disabling of callout styles for note previews

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "journal-review",
 	"name": "Journal Review",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"minAppVersion": "0.15.0",
 	"description": "Review your daily notes on their anniversaries, like \"what happened today last year\".",
 	"author": "Kageetai",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-plugin-journal-review",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"description": "Review your daily notes on their anniversaries, like \"what happened today last year\"\n\n",
 	"main": "main.js",
 	"scripts": {

src/components/NotePreview.tsx

@@ -1,6 +1,6 @@
 import { Keymap, MarkdownRenderer, TFile } from "obsidian";
 import * as React from "preact";
-import { useEffect, useRef } from "preact/hooks";
+import { useRef } from "preact/hooks";
 import useContext from "../hooks/useContext";
 
 interface Props {
@@ -11,45 +11,51 @@ const NotePreview = ({ note }: Props) => {
 	const {
 		app,
 		view,
-		settings: { previewLength },
+		settings: { previewLength, useCallout },
 	} = useContext();
 	const ref = useRef(null);
 
-	useEffect(() => {
-		const read = async () => {
-			const content = await app.vault.cachedRead(note);
-			const hasFrontMatter = content.startsWith("---");
-			const frontMatterEnd = content.indexOf("---", 3) + 3;
-			const sliceEnd = frontMatterEnd + previewLength;
-			const slicedContent = content.slice(0, sliceEnd) + " ...";
-
-			ref.current &&
-				MarkdownRenderer.render(
-					app,
-					hasFrontMatter ? slicedContent : content,
-					ref.current,
-					note.path,
-					view,
-				);
-		};
-
-		read();
-	}, [note]);
+	(async () => {
+		const content = await app.vault.cachedRead(note);
+		const hasFrontMatter = content.startsWith("---");
+		const frontMatterEnd = content.indexOf("---", 3) + 3;
+		const sliceEnd = frontMatterEnd + previewLength;
+		const slicedContent = content.slice(0, sliceEnd) + " ...";
+
+		ref.current &&
+			MarkdownRenderer.render(
+				app,
+				hasFrontMatter ? slicedContent : content,
+				ref.current,
+				note.path,
+				view,
+			);
+	})();
+
+	const onClick = (evt: MouseEvent) =>
+		app.workspace.getLeaf(Keymap.isModEvent(evt)).openFile(note);
+
+	if (useCallout) {
+		return (
+			<div class="callout" onClick={onClick}>
+				<div class="callout-title">
+					<div class="callout-title-inner">{note.basename}</div>
+				</div>
+
+				<div class="callout-content">
+					<div ref={ref} />
+				</div>
+			</div>
+		);
+	}
 
 	return (
-		<div
-			class="callout"
-			onClick={(evt) =>
-				app.workspace.getLeaf(Keymap.isModEvent(evt)).openFile(note)
-			}
-		>
-			<div class="callout-title">
-				<div class="callout-title-inner">{note.basename}</div>
-			</div>
+		<div onClick={onClick}>
+			<h4>{note.basename}</h4>
 
-			<div class="callout-content">
-				<div ref={ref} />
-			</div>
+			<small className="markdown-rendered">
+				<blockquote ref={ref} />
+			</small>
 		</div>
 	);
 };

src/components/context.ts

@@ -1,6 +1,7 @@
 import { createContext } from "preact";
 import { App, View } from "obsidian";
-import { Settings } from "src/main";
+
+import { Settings } from "../constants";
 
 type Context = {
 	view: View;

src/constants.ts

@@ -4,7 +4,6 @@ import {
 	getDailyNote,
 	getDateFromFile,
 } from "obsidian-daily-notes-interface";
-import { Settings } from "./main";
 
 export const DEBOUNCE_DELAY = 1000;
 export const VIEW_TYPE = "on-this-day-view";
@@ -42,11 +41,20 @@ export const defaultTimeSpans: TimeSpan[] = [
 	{ number: 1, unit: Unit.year, recurring: true },
 ];
 
+export interface Settings {
+	timeSpans: TimeSpan[];
+	dayMargin: number;
+	previewLength: number;
+	useHumanize: boolean;
+	useCallout: boolean;
+}
+
 export const DEFAULT_SETTINGS: Settings = {
 	timeSpans: defaultTimeSpans,
 	dayMargin: 0,
 	previewLength: 100,
 	useHumanize: true,
+	useCallout: true,
 };
 
 export const getTimeSpanTitle = ({ number, unit, recurring }: TimeSpan) =>

src/main.ts

@@ -3,19 +3,12 @@ import { Plugin } from "obsidian";
 import OnThisDayView from "./view";
 import {
 	DEFAULT_SETTINGS,
+	Settings,
 	SETTINGS_UPDATED_EVENT,
-	TimeSpan,
 	VIEW_TYPE,
 } from "./constants";
 import { SettingsTab } from "./settingsTab";
 
-export interface Settings {
-	timeSpans: TimeSpan[];
-	dayMargin: number;
-	previewLength: number;
-	useHumanize: boolean;
-}
-
 export const icon = "calendar-clock";
 const label = "Open 'On this day' view";
 

src/settingsTab.ts

@@ -123,6 +123,20 @@ export class SettingsTab extends PluginSettingTab {
 					}),
 			);
 
+		new Setting(containerEl)
+			.setName("Use Obsidian callouts for note previews")
+			.setDesc(
+				"Use callouts to render note previews, using their styles based on current theme. More info: https://help.obsidian.md/Editing+and+formatting/Callouts",
+			)
+			.addToggle((toggle) =>
+				toggle
+					.setValue(this.plugin.settings.useCallout)
+					.onChange((value) => {
+						this.plugin.settings.useCallout = value;
+						this.plugin.saveSettings();
+					}),
+			);
+
 		new Setting(containerEl)
 			.setName("Lookup Margin")
 			.setDesc(
@@ -142,7 +156,6 @@ export class SettingsTab extends PluginSettingTab {
 			.setName("Preview Length")
 			.setDesc("Length of the preview text to show for each note")
 			.addSlider((slider) => {
-				console.log("slider", this.plugin.settings.previewLength);
 				slider
 					.setValue(this.plugin.settings.previewLength)
 					.setDynamicTooltip()

src/styles.css

@@ -14,11 +14,14 @@
 
 	&.notes > li {
 		cursor: pointer;
-		transition: transform 0.5s ease-out;
 
-		&:hover {
-			transform: translateY(-0.25rem);
+		&:has(.callout) {
 			transition: transform 0.5s ease-out;
+
+			&:hover {
+				transform: translateY(-0.25rem);
+				transition: transform 0.5s ease-out;
+			}
 		}
 	}
 }

src/view.tsx

@@ -8,9 +8,10 @@ import * as React from "preact";
 import { render } from "preact";
 import Main from "./components/Main";
 import AppContext from "./components/context";
-import { icon, Settings } from "./main";
+import { icon } from "./main";
 import {
 	reduceTimeSpans,
+	Settings,
 	SETTINGS_UPDATED_EVENT,
 	VIEW_TYPE,
 } from "./constants";

versions.json

@@ -8,5 +8,6 @@
 	"2.0.1": "0.15.0",
 	"2.0.3": "0.15.0",
 	"2.0.4": "0.15.0",
-	"2.0.5": "0.15.0"
+	"2.0.5": "0.15.0",
+	"2.0.6": "0.15.0"
 }