refactor: rename plugin to Vault Explorer

README.md

@@ -1,8 +1,8 @@
-# Obsidian Frontmatter Views
+# Obsidian Vault Explorer
 
 ## About
 
-This plugin allows you to create dynamic views based on frontmatter
+This plugin allows you to explore your vault in visual format
 
 ## Installation
 
@@ -10,7 +10,7 @@ This plugin allows you to create dynamic views based on frontmatter
 2. Enable the plugin
 3. Open the plugin settings
 4. Click **Add beta plugin**
-5. Enter the repository url: **https://github.com/trey-wallis/obsidian-frontmatter-views**
+5. Enter the repository url: **https://github.com/trey-wallis/obsidian-vault-explorer**
 6. Click **Add plugin**
 
 ## Usage

manifest.json

@@ -1,9 +1,9 @@
 {
-	"id": "frontmatter-views",
-	"name": "Frontmatter Views",
+	"id": "vault-explorer",
+	"name": "Vault Explorer",
 	"version": "0.0.8",
 	"minAppVersion": "1.4.13",
-	"description": "Create dynamic views based on frontmatter",
+	"description": "Explore your vault in visual format",
 	"author": "Trey Wallis",
 	"authorUrl": "https://github.com/trey-wallis",
 	"fundingUrl": "https://buymeacoffee.com/treywallis",

package.json

@@ -1,7 +1,7 @@
 {
-	"name": "obsidian-frontmatter-views",
+	"name": "obsidian-vault-explorer",
 	"version": "0.0.8",
-	"description": "Create dynamic views based on frontmatter",
+	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",

src/constants.ts

@@ -1 +1 @@
-export const FRONTMATTER_VIEW = "frontmatter-view";
+export const VAULT_EXPLORER_VIEW = "vault-explorer";

src/main.ts

@@ -1,13 +1,13 @@
 import { Plugin, } from 'obsidian';
 
-import FrontmatterView from './obsidian/frontmatter-view';
-import FrontmatterViewsSettingTabs from './obsidian/frontmatter-views-settings-tab';
+import VaultExplorerView from './obsidian/vault-explorer-view';
+import VaultExplorerSettingsTab from './obsidian/vault-explorer-settings-tab';
 
-import { FrontmatterViewsPluginSettings } from './types';
-import { FRONTMATTER_VIEW } from './constants';
+import { VaultExplorerPluginSettings } from './types';
+import { VAULT_EXPLORER_VIEW } from './constants';
 
 
-const DEFAULT_SETTINGS: FrontmatterViewsPluginSettings = {
+const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 	favoritePropertyName: "favorite",
 	urlPropertyName: "url",
 	sourcePropertyName: "source",
@@ -15,32 +15,32 @@ const DEFAULT_SETTINGS: FrontmatterViewsPluginSettings = {
 	statusPropertyName: "status",
 }
 
-export default class FrontmatterViewsPlugin extends Plugin {
-	settings: FrontmatterViewsPluginSettings;
+export default class VaultExplorerPlugin extends Plugin {
+	settings: VaultExplorerPluginSettings;
 
 	async onload() {
 		await this.loadSettings();
 
 		this.registerView(
-			FRONTMATTER_VIEW,
-			(leaf) => new FrontmatterView(leaf, this.app, this.settings)
+			VAULT_EXPLORER_VIEW,
+			(leaf) => new VaultExplorerView(leaf, this.app, this.settings)
 		);
 
-		this.addRibbonIcon("layout-list", "Frontmatter View", async () => {
-			const leaves = this.app.workspace.getLeavesOfType(FRONTMATTER_VIEW);
+		this.addRibbonIcon("map", "Vault Explorer", async () => {
+			const leaves = this.app.workspace.getLeavesOfType(VAULT_EXPLORER_VIEW);
 			if (leaves.length !== 0) {
 				const leaf = leaves[0];
 				this.app.workspace.revealLeaf(leaf);
 			} else {
 				this.app.workspace.getLeaf().setViewState({
-					type: FRONTMATTER_VIEW,
+					type: VAULT_EXPLORER_VIEW,
 					active: true,
 				});
 			}
 		});
 
 
-		this.addSettingTab(new FrontmatterViewsSettingTabs(this.app, this));
+		this.addSettingTab(new VaultExplorerSettingsTab(this.app, this));
 	}
 
 	onunload() {

src/obsidian/vault-explorer-settings-tab.ts

@@ -1,10 +1,10 @@
 import { App, PluginSettingTab, Setting } from "obsidian";
-import FrontmatterViewsPlugin from "src/main";
+import VaultExplorerPlugin from "src/main";
 
-export default class FrontmatterViewsSettingTabs extends PluginSettingTab {
-	plugin: FrontmatterViewsPlugin;
+export default class VaultExplorerSettingsTab extends PluginSettingTab {
+	plugin: VaultExplorerPlugin;
 
-	constructor(app: App, plugin: FrontmatterViewsPlugin) {
+	constructor(app: App, plugin: VaultExplorerPlugin) {
 		super(app, plugin);
 		this.plugin = plugin;
 	}

src/obsidian/vault-explorer-view.tsx

@@ -3,20 +3,20 @@ import { App, ItemView, WorkspaceLeaf } from "obsidian";
 import React from "react";
 import { createRoot, Root } from "react-dom/client";
 
-import { FRONTMATTER_VIEW } from "src/constants";
+import { VAULT_EXPLORER_VIEW } from "src/constants";
 import ReactView from "src/react/index";
 import AppMountProvider from "src/react/app-mount-provider";
-import { FrontmatterViewsPluginSettings } from "src/types";
+import { VaultExplorerPluginSettings } from "src/types";
 
-export default class FrontmatterView extends ItemView {
+export default class VaultExplorerView extends ItemView {
 	root: Root | null;
 	app: App;
-	settings: FrontmatterViewsPluginSettings;
+	settings: VaultExplorerPluginSettings;
 
 	constructor(
 		leaf: WorkspaceLeaf,
 		app: App,
-		settings: FrontmatterViewsPluginSettings
+		settings: VaultExplorerPluginSettings
 	) {
 		super(leaf);
 		this.root = null;
@@ -25,10 +25,10 @@ export default class FrontmatterView extends ItemView {
 	}
 
 	getViewType(): string {
-		return FRONTMATTER_VIEW;
+		return VAULT_EXPLORER_VIEW;
 	}
 	getDisplayText(): string {
-		return "Frontmatter View";
+		return "Explorer";
 	}
 
 	async onOpen() {

src/react/app-mount-provider.tsx

@@ -1,12 +1,12 @@
 import { App, WorkspaceLeaf } from "obsidian";
 
 import React from "react";
-import { FrontmatterViewsPluginSettings } from "src/types";
+import { VaultExplorerPluginSettings } from "src/types";
 
 interface ContextProps {
 	app: App;
 	leaf: WorkspaceLeaf;
-	settings: FrontmatterViewsPluginSettings;
+	settings: VaultExplorerPluginSettings;
 }
 
 const MountContext = React.createContext<ContextProps | null>(null);

src/react/card/index.tsx

@@ -45,7 +45,7 @@ export default function Card({
 		if (leaf) {
 			app.workspace.setActiveLeaf(leaf);
 		} else {
-			app.workspace.openLinkText(path, "frontmatter-view");
+			app.workspace.openLinkText(path, "vault-explorer");
 		}
 	}
 
@@ -56,10 +56,10 @@ export default function Card({
 	}
 
 	return (
-		<div className="frontmatter-view-card">
-			<div className="frontmatter-view-card__header">
+		<div className="vault-explorer-card">
+			<div className="vault-explorer-card__header">
 				<div
-					className="frontmatter-view-card__title"
+					className="vault-explorer-card__title"
 					onClick={handleTitleClick}
 				>
 					{name}
@@ -76,19 +76,19 @@ export default function Card({
 				)}
 			</div>
 			<Spacer size="md" />
-			<div className="frontmatter-view-card__content">
-				<div className="frontmatter-view-card__tags">
+			<div className="vault-explorer-card__content">
+				<div className="vault-explorer-card__tags">
 					{tags.map((tag) => (
 						<Tag key={tag} name={tag} />
 					))}
 				</div>
 				{source !== null && <Property name="source" value={source} />}
-				<div className="frontmatter-view-card__labels">
+				<div className="vault-explorer-card__labels">
 					{status !== null && (
 						<div>
 							<Property name="status" value={status} />
 							<Spacer size="xs" />
-							<div className="frontmatter-view-property-label">
+							<div className="vault-explorer-property-label">
 								Status
 							</div>
 						</div>
@@ -98,7 +98,7 @@ export default function Card({
 						<div>
 							<Property name="revision" value={revision} />
 							<Spacer size="xs" />
-							<div className="frontmatter-view-property-label">
+							<div className="vault-explorer-property-label">
 								Revision
 							</div>
 						</div>

src/react/card/styles.css

@@ -1,43 +1,43 @@
-.frontmatter-view-card {
+.vault-explorer-card {
 	padding: 20px;
 	box-shadow: var(--shadow-s);
 	border: 1px solid var(--background-modifier-border);
 }
 
-.frontmatter-view-card__header {
+.vault-explorer-card__header {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
 	column-gap: 0.5rem;
 }
 
-.frontmatter-view-card__content {
+.vault-explorer-card__content {
 	display: flex;
 	flex-direction: column;
 	row-gap: 0.5rem;
 }
 
-.frontmatter-view-card__title {
+.vault-explorer-card__title {
 	cursor: pointer;
 	color: var(--text-accent)
 }
 
-.frontmatter-view-card__tags {
+.vault-explorer-card__tags {
 	display: flex;
 	column-gap: 0.25rem;
 	height: min-content;
 	overflow-x: auto;
 }
 
-.frontmatter-view-card__tags::-webkit-scrollbar {
+.vault-explorer-card__tags::-webkit-scrollbar {
 	display: none;
 }
 
-.frontmatter-view-card__labels {
+.vault-explorer-card__labels {
 	display: flex;
 }
 
-.frontmatter-view-property-label {
+.vault-explorer-property-label {
 	margin-left: 8px;
 	font-size: var(--font-smallest);
 	color: var(--text-muted);

src/react/checkbox/index.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export default function Checkbox({ id, label, value, onChange }: Props) {
 	return (
-		<div className="frontmatter-view-checkbox">
+		<div className="vault-explorer-checkbox">
 			<label htmlFor={id}>{label}</label>
 			<input
 				id={id}

src/react/checkbox/styles.css

@@ -1,4 +1,4 @@
-.frontmatter-view-checkbox {
+.vault-explorer-checkbox {
 	display: flex;
 	align-items: center;
 	column-gap: 0.5rem;

src/react/flex/index.tsx

@@ -24,7 +24,7 @@ export default function Flex({
 	}
 	return (
 		<div
-			className="frontmatter-view-flex"
+			className="vault-explorer-flex"
 			style={{
 				display: "flex",
 				flexDirection: direction,

src/react/index.tsx

@@ -128,8 +128,8 @@ export default function ReactView() {
 		});
 
 	return (
-		<div className="frontmatter-view">
-			<div className="frontmatter-view-header">
+		<div className="vault-explorer">
+			<div className="vault-explorer-header">
 				<Stack spacing="md">
 					<input
 						type="text"
@@ -176,7 +176,7 @@ export default function ReactView() {
 					</div>
 				</Flex>
 			</div>
-			<div className="frontmatter-view-list">
+			<div className="vault-explorer-list">
 				{filteredData.map((file) => {
 					const { name, tags, path, url, source, revision, status } =
 						file;

src/react/property/index.tsx

@@ -21,7 +21,7 @@ export default function Property({ name, value }: Props) {
 	return (
 		<a
 			// href={`["${source}"]`}
-			className="tag frontmatter-view-property"
+			className="tag vault-explorer-property"
 			target="_blank"
 			rel="noopener"
 			onClick={handleClick}

src/react/property/styles.css

@@ -1,10 +1,10 @@
-.frontmatter-view-property {
+.vault-explorer-property {
 	background-color: var(--color-base-20) !important;
 	color: var(--text-normal) !important;
 	width: max-content;
 	text-wrap: nowrap;
 }
 
-.frontmatter-view-property:hover {
+.vault-explorer-property:hover {
 	background-color: var(--color-base-30) !important;
 }

src/react/stack/index.tsx

@@ -31,7 +31,7 @@ export default function Stack({
 	}
 	return (
 		<div
-			className="frontmatter-view-stack"
+			className="vault-explorer-stack"
 			style={{
 				display: "flex",
 				flexDirection: direction,

src/react/styles.css

@@ -1,23 +1,23 @@
-.frontmatter-view {
+.vault-explorer {
 	display: flex;
 	flex-direction: column;
 }
 
-.frontmatter-view-list {
+.vault-explorer-list {
 	display: grid;
 	row-gap: 2rem;
 	column-gap: 2rem;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
 }
 
-.frontmatter-view-header {
+.vault-explorer-header {
 	display: flex;
 	flex-direction: column;
 	row-gap: 1rem;
 	margin-bottom: 2rem;
 }
 
-.frontmatter-view input[type="text"] {
+.vault-explorer input[type="text"] {
 	width: 100%;
 	max-width: 300px;
 }

src/react/tag/index.tsx

@@ -19,7 +19,7 @@ export default function Tag({ name }: Props) {
 
 	return (
 		<a
-			className="tag frontmatter-view-tag "
+			className="tag vault-explorer-tag "
 			href={`#${name}`}
 			target="_blank"
 			rel="noopener"

src/react/tag/styles.css

@@ -1,3 +1,3 @@
-.frontmatter-view-tag {
+.vault-explorer-tag {
 	white-space: nowrap;
 }

src/types.ts

@@ -1,4 +1,4 @@
-export interface FrontmatterViewsPluginSettings {
+export interface VaultExplorerPluginSettings {
 	favoritePropertyName: string;
 	urlPropertyName: string;
 	sourcePropertyName: string;