Merge pull request #205 from decaf-dev/dev

Dev

.gitignore

@@ -8,16 +8,20 @@
 # npm
 node_modules
 
-# Don't include the compiled main.js file in the repo.
-# They should be uploaded to GitHub releases instead.
 main.js
 
+# Ignore the symbolic links in the test-vault
+test-vault/.obsidian/plugins/vault-explorer/main.js
+test-vault/.obsidian/plugins/vault-explorer/manifest.json
+test-vault/.obsidian/plugins/vault-explorer/styles.css
+
+# Ignore the workspace. There was a initial workspace created in the test-vault
+# This file updates too frequently and is not useful for version control
+test-vault/.obsidian/workspace.json
+
 # Exclude sourcemaps
 *.map
 
-# obsidian
-data.json
-
 # Exclude macOS Finder (System Explorer) View States
 .DS_Store
 

CONTRIBUTING.md

@@ -38,29 +38,27 @@ Build the project. This will create a `dist` folder
 bun run build
 ```
 
-> [!TIP]  
-> I recommend creating a new Obsidian vault just for development. This way, you won't accidentally modify any of your files.
+The repository that you cloned contains a folder called `test-vault`. This is what will be used for development.
 
-Create a symbolic link from the `dist` folder to your Obsidan vault.
+The `test-vault` contains a `.obsidian/plugins/vault-explorer` folder with a `data.json` file but it is missing the `main.js`, `manifest.json` and `styles.css`.
+
+We need to create symbolic links for each of these folders
 
 ```shell
-ln -s <repository-path>/dist <development-vault-path>/.obsidian/plugins/vault-explorer-dev
+cd test-vault/.obsidian/plugins/vault-explorer
 ```
 
-For example
-
 ```shell
-ln -s /users/decaf-dev/desktop/obsidian-vault-explorer/dist /users/decaf-dev/desktop/dev-vault/.obsidian/plugins/vault-explorer-dev
+ln -s ../../../../dist/main.js .
 ```
 
-Open your Obsidian vault
-
-Go to **Community plugins**
-
-Find **Vault Explorer** and then enable the plugin by switching the toggle.
+```shell
+ln -s ../../../../dist/manifest.json .
+```
 
-> [!NOTE]  
-> You may need to click the **Reload plugins** button for the plugin to appear in the list
+```shell
+ln -s ../../../../dist/styles.css .
+```
 
 ### Development
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.25.1",
+	"version": "1.25.2",
 	"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.25.1",
+	"version": "1.25.2",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

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

@@ -51,7 +51,8 @@
 
 <style>
 	.vault-explorer-grid-card__title {
-		width: 100%;
+		flex-grow: 1;
+		min-width: 0;
 	}
 
 	.vault-explorer-grid-card__title--interactive {

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

@@ -242,6 +242,9 @@
 					value={custom3}
 				/>{/if}
 		</Wrap>
+		{#if tags != null || custom1 !== null || custom2 !== null || custom3 !== null}
+			<Spacer size="sm" direction="vertical" />
+		{/if}
 	</div>
 </GridCardContainer>
 
@@ -280,8 +283,4 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-
-	.vault-explorer-grid-card__tags {
-		margin-bottom: 16px;
-	}
 </style>

src/svelte/app/index.svelte

@@ -711,6 +711,7 @@
 				plugin.app.metadataCache.getFileCache(file)?.frontmatter;
 
 			const content = contentCache[file.path] ?? null;
+
 			return formatFileDataForRender(
 				plugin.app,
 				plugin.settings,

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

@@ -9,6 +9,16 @@ import {
 } from "src/svelte/shared/services/time-utils";
 import { isImageExtension } from "./utils/image-utils";
 
+/**
+ * Formats the file's data for rendering
+ * @param app - The Obsidian app
+ * @param settings - The plugin's settings
+ * @param id - The file's id. This is a randomly generated identifier for the file
+ * @param file - The file to format
+ * @param frontmatter - The file's frontmatter
+ * @param content - The file's content
+ * @returns A FileRenderData object that contains the file's data formatted for rendering
+ */
 export const formatFileDataForRender = (
 	app: App,
 	settings: VaultExplorerPluginSettings,
@@ -17,11 +27,7 @@ export const formatFileDataForRender = (
 	frontmatter: FrontMatterCache | undefined,
 	content: string | null
 ): FileRenderData => {
-	const tags: string[] | null = loadPropertyValue<string[]>(
-		frontmatter,
-		"tags",
-		PropertyType.LIST
-	);
+	const { name, basename, extension, path } = file;
 
 	const {
 		createdDate: createdDateProp,
@@ -34,6 +40,12 @@ export const formatFileDataForRender = (
 		custom3: custom3Prop,
 	} = settings.properties;
 
+	const tags: string[] | null = loadPropertyValue<string[]>(
+		frontmatter,
+		"tags",
+		PropertyType.LIST
+	);
+
 	const url: string | null = loadPropertyValue<string>(
 		frontmatter,
 		urlProp,
@@ -102,12 +114,21 @@ export const formatFileDataForRender = (
 		PropertyType.TEXT
 	);
 
-	const { name, basename, extension, path } = file;
-
 	if (imageUrl?.startsWith("[[") && imageUrl.endsWith("]]")) {
 		const link = imageUrl.substring(2, imageUrl.length - 2);
-		const resourcePath = app.vault.adapter.getResourcePath(link);
-		imageUrl = resourcePath;
+
+		//Get the link file
+		//We use this function because a link can exclude folders when `New link format` is set to
+		//`shortest path when possible`.
+		const linkFile = app.metadataCache.getFirstLinkpathDest(link, path);
+
+		if (linkFile) {
+			const resourcePath = app.vault.getResourcePath(linkFile);
+			imageUrl = resourcePath;
+		} else {
+			Logger.error(`Link path for image url not found: ${link}`);
+			imageUrl = null;
+		}
 	} else if (isImageExtension(extension)) {
 		imageUrl = app.vault.getResourcePath(file);
 	}

test-vault/.obsidian/app.json

@@ -0,0 +1,4 @@
+{
+  "promptDelete": false,
+  "showUnsupportedFiles": true
+}

test-vault/.obsidian/appearance.json

@@ -0,0 +1 @@
+{}

test-vault/.obsidian/community-plugins.json

@@ -0,0 +1,3 @@
+[
+  "vault-explorer"
+]

test-vault/.obsidian/core-plugins-migration.json

@@ -0,0 +1,30 @@
+{
+  "file-explorer": true,
+  "global-search": true,
+  "switcher": true,
+  "graph": true,
+  "backlink": true,
+  "canvas": true,
+  "outgoing-link": true,
+  "tag-pane": true,
+  "properties": false,
+  "page-preview": true,
+  "daily-notes": false,
+  "templates": false,
+  "note-composer": true,
+  "command-palette": true,
+  "slash-command": false,
+  "editor-status": true,
+  "bookmarks": true,
+  "markdown-importer": false,
+  "zk-prefixer": false,
+  "random-note": false,
+  "outline": true,
+  "word-count": true,
+  "slides": false,
+  "audio-recorder": false,
+  "workspaces": false,
+  "file-recovery": true,
+  "publish": false,
+  "sync": false
+}

test-vault/.obsidian/core-plugins.json

@@ -0,0 +1,18 @@
+[
+  "file-explorer",
+  "global-search",
+  "switcher",
+  "graph",
+  "backlink",
+  "canvas",
+  "outgoing-link",
+  "tag-pane",
+  "page-preview",
+  "note-composer",
+  "command-palette",
+  "editor-status",
+  "bookmarks",
+  "outline",
+  "word-count",
+  "file-recovery"
+]

test-vault/.obsidian/graph.json

@@ -0,0 +1,22 @@
+{
+  "collapse-filter": true,
+  "search": "",
+  "showTags": false,
+  "showAttachments": false,
+  "hideUnresolved": false,
+  "showOrphans": true,
+  "collapse-color-groups": true,
+  "colorGroups": [],
+  "collapse-display": true,
+  "showArrow": false,
+  "textFadeMultiplier": 0,
+  "nodeSizeMultiplier": 1,
+  "lineSizeMultiplier": 1,
+  "collapse-forces": true,
+  "centerStrength": 0.518713248970312,
+  "repelStrength": 10,
+  "linkStrength": 1,
+  "linkDistance": 250,
+  "scale": 1,
+  "close": true
+}

test-vault/.obsidian/plugins/vault-explorer/data.json

@@ -0,0 +1,81 @@
+{
+  "logLevel": "trace",
+  "properties": {
+    "favorite": "favorite",
+    "url": "url",
+    "custom1": "category",
+    "custom2": "color",
+    "custom3": "size",
+    "creationDate": "creation",
+    "modifiedDate": "modification",
+    "createdDate": "creation",
+    "imageUrl": "image"
+  },
+  "filters": {
+    "search": {
+      "isEnabled": true,
+      "value": ""
+    },
+    "timestamp": {
+      "isEnabled": true,
+      "value": "all"
+    },
+    "sort": {
+      "isEnabled": true,
+      "value": "file-name-asc"
+    },
+    "custom": {
+      "isEnabled": true,
+      "selectedGroupId": "",
+      "groups": []
+    },
+    "favorites": {
+      "isEnabled": true,
+      "value": false
+    },
+    "properties": {
+      "groups": []
+    }
+  },
+  "views": {
+    "dashboard": {
+      "isEnabled": false
+    },
+    "grid": {
+      "isEnabled": true,
+      "loadSocialMediaImage": true
+    },
+    "list": {
+      "isEnabled": true
+    },
+    "table": {
+      "isEnabled": false
+    },
+    "feed": {
+      "isEnabled": true,
+      "renderNewLineCharacters": false,
+      "collapseContent": true
+    },
+    "recommended": {
+      "isEnabled": false
+    },
+    "related": {
+      "isEnabled": false
+    }
+  },
+  "currentView": "grid",
+  "titleWrapping": "normal",
+  "enableClockUpdates": true,
+  "enableFileIcons": true,
+  "enableScrollButtons": true,
+  "fileInteractionStyle": "content",
+  "filterGroupsWidth": "367px",
+  "filterGroupsWrapping": "nowrap",
+  "pageSize": 25,
+  "viewOrder": [
+    "grid",
+    "list",
+    "feed"
+  ],
+  "pluginVersion": "1.25.1"
+}

test-vault/.obsidian/types.json

@@ -0,0 +1,10 @@
+{
+  "types": {
+    "aliases": "aliases",
+    "cssclasses": "multitext",
+    "tags": "tags",
+    "favorite": "checkbox",
+    "creation": "date",
+    "modification": "date"
+  }
+}

test-vault/Creation property with date.md

@@ -0,0 +1,3 @@
+---
+creation: 2023-01-01
+---

test-vault/Creation property with datetime.md

@@ -0,0 +1,3 @@
+---
+creation: 2024-01-01T00:00:00
+---

test-vault/Favorite property.md

@@ -0,0 +1,3 @@
+---
+favorite: true
+---

test-vault/Image property.md

@@ -0,0 +1,3 @@
+---
+image: "[[pexels-diana-2910042-4445240.jpg]]"
+---

test-vault/Long content.md

@@ -0,0 +1,5 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui justo, tempus eu vulputate eu, fringilla et nunc. Duis id nunc vel nulla fermentum varius. Integer mattis metus eu tellus commodo maximus. In hac habitasse platea dictumst. Curabitur id luctus nisi, ac ornare ante. Pellentesque quis elit nec nibh tempor tempor et in sapien. Suspendisse in lacus nec sem luctus consequat suscipit a tellus.
+
+Sed ornare est sed erat pulvinar, a rhoncus urna volutpat. Nunc sed gravida dui, nec venenatis justo. Cras tempor porttitor odio posuere tincidunt. Donec vitae lectus commodo, consequat ipsum sit amet, pharetra eros. Aliquam ac lacus risus. Fusce pretium viverra tellus, non rutrum sem cursus vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus eget sem metus.
+
+Ut aliquam risus sed metus aliquam, ac rhoncus nisl blandit. Duis vel congue odio. Vestibulum mi tellus, rhoncus vel felis quis, semper dictum diam. Duis eget mauris eget massa vestibulum cursus. Phasellus sollicitudin tortor auctor placerat congue. Vivamus quis purus sed sem feugiat lobortis. Quisque urna urna, dictum at ornare id, maximus in felis. Praesent convallis urna commodo mauris vestibulum, ac fermentum ipsum pulvinar. Nullam vel gravida augue. Duis vel hendrerit neque.