1.18.0

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.17.2",
+	"version": "1.18.0",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.17.2",
+	"version": "1.18.0",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

src/svelte/app/components/feed-card.svelte

@@ -9,10 +9,10 @@
 	import { formatBearTime } from "../services/time-utils";
 	import Stack from "src/svelte/shared/components/stack.svelte";
 	import Tag from "src/svelte/shared/components/tag.svelte";
+	import { removeFrontmatterBlock } from "../services/frontmatter-utils";
 
 	export let name: string;
 	export let path: string;
-	export let url: string | null;
 	export let tags: string[] | null;
 	export let createdMillis: number;
 	export let content: string | null;
@@ -22,12 +22,12 @@
 	let plugin: VaultExplorerPlugin;
 	store.plugin.subscribe((value) => {
 		plugin = value;
-		wordBreak = plugin.settings.views.titleWrapping;
+		wordBreak = plugin.settings.titleWrapping;
 	});
 
 	onMount(() => {
 		function handleTitleWrappingSettingChange() {
-			wordBreak = plugin.settings.views.titleWrapping;
+			wordBreak = plugin.settings.titleWrapping;
 		}
 
 		EventManager.getInstance().on(
@@ -55,13 +55,21 @@
 		}
 	}
 
-	function handleUrlClick() {
-		if (url != null) {
-			window.open(url, "_blank");
+	const creationString = formatBearTime(createdMillis);
+
+	function getDisplayContent(content: string | null) {
+		if (content != null) {
+			const contentWithoutFrontmatter = removeFrontmatterBlock(content);
+			if (contentWithoutFrontmatter.length > 250) {
+				return contentWithoutFrontmatter.slice(0, 250) + "...";
+			} else {
+				return contentWithoutFrontmatter;
+			}
 		}
+		return content;
 	}
 
-	const creationString = formatBearTime(createdMillis);
+	$: displayContent = getDisplayContent(content);
 </script>
 
 <div class="vault-explorer-feed-card">
@@ -86,12 +94,11 @@
 			}}
 		>
 			{name}
-			<!-- {#if url !== null}
-			<IconButton iconId="external-link" on:click={handleUrlClick} />
-		{/if} -->
 		</div>
-		{#if content != null && content.length > 0}
-			<div class="vault-explorer-feed-card__content">{content}</div>
+		{#if displayContent != null && displayContent.length > 0}
+			<div class="vault-explorer-feed-card__content">
+				{displayContent}
+			</div>
 		{/if}
 		{#if tags != null}
 			<div class="vault-explorer-feed-card__tags">
@@ -108,7 +115,6 @@
 
 <style>
 	.vault-explorer-feed-card {
-		max-width: 350px;
 		padding-bottom: 10px;
 		border-bottom: 1px solid var(--background-modifier-border);
 		margin-bottom: 10px;

src/svelte/app/components/feed-view.svelte

@@ -44,7 +44,6 @@
 			<FeedCard
 				name={fileData.name}
 				path={fileData.path}
-				url={fileData.url}
 				tags={fileData.tags}
 				content={fileData.content}
 				createdMillis={fileData.createdMillis}

src/svelte/app/components/grid-card.svelte

@@ -33,13 +33,13 @@
 	let plugin: VaultExplorerPlugin;
 	store.plugin.subscribe((p) => {
 		plugin = p;
-		wordBreak = plugin.settings.views.titleWrapping;
+		wordBreak = plugin.settings.titleWrapping;
 		enableScrollButtons = plugin.settings.enableScrollButtons;
 	});
 
 	onMount(() => {
 		function handleTitleWrappingSettingChange() {
-			wordBreak = plugin.settings.views.titleWrapping;
+			wordBreak = plugin.settings.titleWrapping;
 		}
 
 		EventManager.getInstance().on(

src/svelte/app/components/list-item.svelte

@@ -3,9 +3,12 @@
 	import VaultExplorerPlugin from "src/main";
 	import store from "../../shared/services/store";
 	import { HOVER_LINK_SOURCE_ID } from "src/constants";
+	import Tag from "src/svelte/shared/components/tag.svelte";
+	import Wrap from "src/svelte/shared/components/wrap.svelte";
 
 	export let name: string;
 	export let path: string;
+	export let tags: string[] | null;
 
 	let plugin: VaultExplorerPlugin;
 	store.plugin.subscribe((p) => {
@@ -27,31 +30,39 @@
 </script>
 
 <div class="vault-explorer-list-item">
-	<div
-		tabindex="0"
-		role="link"
-		class="vault-explorer-list-item__title"
-		on:focus={() => {}}
-		on:click={handleTitleClick}
-		on:keydown={(e) =>
-			(e.key === "Enter" || e.key === " ") && handleTitleClick()}
-		on:mouseover={(event) => {
-			plugin.app.workspace.trigger("hover-link", {
-				event,
-				linktext: path,
-				source: HOVER_LINK_SOURCE_ID,
-				targetEl: event.currentTarget,
-				hoverParent: event.currentTarget.parentElement,
-			});
-		}}
-	>
-		{name}
-	</div>
+	<Wrap justify="space-between" spacingX="xl" spacingY="sm">
+		<div
+			tabindex="0"
+			role="link"
+			class="vault-explorer-list-item__title"
+			on:focus={() => {}}
+			on:click={handleTitleClick}
+			on:keydown={(e) =>
+				(e.key === "Enter" || e.key === " ") && handleTitleClick()}
+			on:mouseover={(event) => {
+				plugin.app.workspace.trigger("hover-link", {
+					event,
+					linktext: path,
+					source: HOVER_LINK_SOURCE_ID,
+					targetEl: event.currentTarget,
+					hoverParent: event.currentTarget.parentElement,
+				});
+			}}
+		>
+			{name}
+		</div>
+		{#if tags != null}
+			<div class="vault-explorer-list-item__tags">
+				{#each tags as tag}
+					<Tag name={tag} variant="unstyled" />
+				{/each}
+			</div>
+		{/if}
+	</Wrap>
 </div>
 
 <style>
 	.vault-explorer-list-item {
-		max-width: 800px;
 		padding-bottom: 2px;
 		border-bottom: 1px solid var(--background-modifier-border);
 		margin-bottom: 10px;
@@ -65,4 +76,11 @@
 		cursor: pointer;
 		color: var(--text-accent);
 	}
+
+	.vault-explorer-list-item__tags {
+		display: flex;
+		flex-wrap: wrap;
+		row-gap: 5px;
+		column-gap: 5px;
+	}
 </style>

src/svelte/app/components/list-view.svelte

@@ -24,6 +24,6 @@
 
 <div class="vault-explorer-list-view">
 	{#each displayedItems as file (file.path)}
-		<ListItem name={file.name} path={file.path} />
+		<ListItem name={file.name} path={file.path} tags={file.tags} />
 	{/each}
 </div>

src/svelte/app/services/filters/search-filter.ts

@@ -8,41 +8,19 @@ export const filterBySearch = (file: FileRenderData, value: string) => {
 
 	const compare = value.toLowerCase().trim();
 
-	const { name, tags, path, content, custom1, custom2, custom3 } = file;
+	const { name, path, content, } = file;
 
 	if (name.toLowerCase().includes(compare)) {
 		return true;
 	}
 
-
 	if (path.toLowerCase().includes(compare)) {
 		return true;
 	}
 
-	//TODO should this include the frontmatter?
 	if (content !== null && content.toLowerCase().includes(compare)) {
 		return true;
 	}
 
-	if (
-		tags !== null && tags.some((tag) =>
-			tag.toLowerCase().includes(compare)
-		)
-	) {
-		return true;
-	}
-
-	if (custom1 !== null && custom1.toLowerCase().includes(compare)) {
-		return true;
-	}
-
-	if (custom2 !== null && custom2.toLowerCase().includes(compare)) {
-		return true;
-	}
-
-	if (custom3 !== null && custom3.toLowerCase().includes(compare)) {
-		return true;
-	}
-
 	return false;
 }

src/svelte/app/services/render-utils.ts

@@ -4,7 +4,6 @@ import { FileRenderData } from "../types";
 import { getTimeMillis, isDateSupported } from "../../shared/services/time-utils";
 import Logger from "js-logger";
 import { loadPropertyValue } from "src/svelte/shared/services/load-property-value";
-import { removeFrontmatterBlock } from "./frontmatter-utils";
 
 export const formatFileDataForRender = (settings: VaultExplorerPluginSettings, file: TFile, frontmatter: FrontMatterCache | undefined, content: string | null): FileRenderData => {
 	const tags: string[] | null = loadPropertyValue<string[]>(frontmatter, "tags", PropertyType.LIST);
@@ -51,22 +50,11 @@ export const formatFileDataForRender = (settings: VaultExplorerPluginSettings, f
 	const { name, basename, extension, path } = file;
 	const displayName = extension === "md" ? basename : name;
 
-	let filteredContent = "";
-	if (content != null) {
-		filteredContent = removeFrontmatterBlock(content);
-
-		const length = filteredContent.length;
-		if (length > 80) {
-			filteredContent = filteredContent.slice(0, 78);
-			filteredContent += "...";
-		}
-	}
-
 	return {
 		name: displayName,
 		path,
 		url,
-		content: filteredContent,
+		content,
 		tags,
 		favorite,
 		createdMillis,

src/svelte/shared/services/license.ts

@@ -21,13 +21,13 @@ export default class License {
 		const storedDeviceRegistered = this.getStoredDeviceRegistered();
 		this.isDeviceRegistered = storedDeviceRegistered;
 		this.isDeviceRegisteredStore.set(storedDeviceRegistered);
-		Logger.debug({ fileName: "license.ts", functionName: "constructor", message: "loaded storedDeviceRegistered", }, storedDeviceRegistered);
+		Logger.debug({ fileName: "license.ts", functionName: "constructor", message: "loaded stored device registration", }, storedDeviceRegistered);
 
 		this.responseMessage = "";
 
 		const storedKey = this.getStoredLicenseKey();
 		this.licenseKey = storedKey;
-		Logger.debug({ fileName: "license.ts", functionName: "constructor", message: "loaded storedKey" }, storedKey);
+		Logger.debug({ fileName: "license.ts", functionName: "constructor", message: "loaded stored license key" }, storedKey);
 	}
 
 	async registerDevice(licenseKey: string) {
@@ -197,7 +197,7 @@ export default class License {
 	 * @param value - The license key
 	 */
 	private updateLicenseKey(value: string) {
-		Logger.trace({ filename: "license.ts", functionName: "updateLicenseKey", message: "called" });
+		Logger.trace({ fileName: "license.ts", functionName: "updateLicenseKey", message: "called" });
 		this.licenseKey = value;
 		this.setStoredLicenseKey(value);
 	}
@@ -207,14 +207,14 @@ export default class License {
 	 * @param value - The registration status of the device
 	 */
 	private updateDeviceRegistered(value: boolean) {
-		Logger.trace({ filename: "license.ts", functionName: "updateDeviceRegistered", message: "called" });
+		Logger.trace({ fileName: "license.ts", functionName: "updateDeviceRegistered", message: "called" });
 		this.isDeviceRegistered = value;
 		this.isDeviceRegisteredStore.set(value);
 		this.setStoredDeviceRegistered(value);
 	}
 
 	private setStoredLicenseKey(value: string) {
-		Logger.trace({ filename: "license.ts", functionName: "setStoredLicenseKey", message: "called" });
+		Logger.trace({ fileName: "license.ts", functionName: "setStoredLicenseKey", message: "called" });
 		localStorage.setItem(LOCAL_STORAGE_LICENSE_KEY, value);
 	}
 
@@ -231,7 +231,7 @@ export default class License {
 	}
 
 	setStoredDeviceRegistered(value: boolean) {
-		Logger.trace({ filename: "license.ts", functionName: "setStoredDeviceRegistered", message: "called" });
+		Logger.trace({ fileName: "license.ts", functionName: "setStoredDeviceRegistered", message: "called" });
 		localStorage.setItem(LOCAL_STORAGE_DEVICE_REGISTERED, value.toString());
 	}
 

versions.json

@@ -75,5 +75,6 @@
 	"1.16.0": "1.4.13",
 	"1.17.0": "1.4.13",
 	"1.17.1": "1.4.13",
-	"1.17.2": "1.4.13"
+	"1.17.2": "1.4.13",
+	"1.18.0": "1.4.13"
 }