olivier/monster-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add plugin settings, improve internal link handling, and apply a default border to menu items.

Browse Source
This commit is contained in:
Olivier
2025-11-20 22:12:00 -05:00
parent 8b9e092329
commit fd6cf15700
4 changed files with 321 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
main.js
View File

@@ -29,8 +29,13 @@ __export(main_exports, {
module.exports = __toCommonJS(main_exports); module.exports = __toCommonJS(main_exports);
var import_obsidian = require("obsidian"); var import_obsidian = require("obsidian");
var { shell } = require("electron"); var { shell } = require("electron");
var DEFAULT_SETTINGS = {
mySetting: "default"
};
var MenuPlugin = class extends import_obsidian.Plugin { var MenuPlugin = class extends import_obsidian.Plugin {
async onload() { async onload() {
await this.loadSettings();
this.addSettingTab(new MenuPluginSettingTab(this.app, this));
this.registerMarkdownCodeBlockProcessor("menu", (source, el, ctx) => { this.registerMarkdownCodeBlockProcessor("menu", (source, el, ctx) => {
const lines = source.trim().split("\n"); const lines = source.trim().split("\n");
let layoutOrClass = ""; let layoutOrClass = "";
@@ -149,10 +154,7 @@ var MenuPlugin = class extends import_obsidian.Plugin {
a.style.cursor = "pointer"; a.style.cursor = "pointer";
a.addEventListener("click", (e) => { a.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
const vaultName = this.app.vault.getName(); this.app.workspace.openLinkText(href, ctx.sourcePath, false);
const encodedFile = encodeURIComponent(href);
const uri = `obsidian://open?vault=${encodeURIComponent(vaultName)}&file=${encodedFile}`;
window.open(uri);
}); });
} else if (link.match(/^\[.*\]\(.*\)$/)) { } else if (link.match(/^\[.*\]\(.*\)$/)) {
const match = link.match(/^\[(.*)\]\((.*)\)$/); const match = link.match(/^\[(.*)\]\((.*)\)$/);
@@ -197,6 +199,52 @@ var MenuPlugin = class extends import_obsidian.Plugin {
} }
onunload() { onunload() {
} }
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
};
var MenuPluginSettingTab = class extends import_obsidian.PluginSettingTab {
constructor(app, plugin) {
super(app, plugin);
this.plugin = plugin;
}
display() {
const { containerEl } = this;
containerEl.empty();
containerEl.createEl("h2", { text: "Menu Plugin Settings" });
new import_obsidian.Setting(containerEl).setName("Setting #1").setDesc("It's a secret").addText((text) => text.setPlaceholder("Enter your secret").setValue(this.plugin.settings.mySetting).onChange(async (value) => {
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
containerEl.createEl("hr");
containerEl.createEl("h3", { text: "Usage Guide" });
const doc = containerEl.createEl("div");
doc.createEl("p", { text: "Create a custom menu using the `menu` code block." });
doc.createEl("h4", { text: "Example" });
const pre = doc.createEl("pre");
pre.createEl("code", {
text: `\`\`\`menu
layout: slate
bg: #333
text: white
[[Internal Link]]
[External Link](https://example.com)
\`\`\``
});
doc.createEl("h4", { text: "Supported Properties" });
const ul = doc.createEl("ul");
ul.createEl("li", { text: "layout: default, minimal, slate, horizon, aether" });
ul.createEl("li", { text: "class: custom CSS classes" });
ul.createEl("li", { text: "colors: bg, text, border, font (supports hover- prefix)" });
doc.createEl("h4", { text: "Link Types" });
const ul2 = doc.createEl("ul");
ul2.createEl("li", { text: "[[Internal Link]] - Opens Obsidian note" });
ul2.createEl("li", { text: "[External Link](https://...) - Opens in browser" });
ul2.createEl("li", { text: "[File Link](file://...) - Opens local file/folder" });
}
}; };
// Annotate the CommonJS export names for ESM import in node: // Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {}); 0 && (module.exports = {});

94
main.ts
View File

@@ -1,10 +1,24 @@
import { Plugin } from 'obsidian'; import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';
const { shell } = require('electron'); const { shell } = require('electron');
interface MenuPluginSettings {
mySetting: string;
}
const DEFAULT_SETTINGS: MenuPluginSettings = {
mySetting: 'default'
}
export default class MenuPlugin extends Plugin { export default class MenuPlugin extends Plugin {
settings: MenuPluginSettings;
async onload() { async onload() {
await this.loadSettings();
// This adds a settings tab so the user can configure various aspects of the plugin
this.addSettingTab(new MenuPluginSettingTab(this.app, this));
this.registerMarkdownCodeBlockProcessor('menu', (source, el, ctx) => { this.registerMarkdownCodeBlockProcessor('menu', (source, el, ctx) => {
const lines = source.trim().split('\n'); const lines = source.trim().split('\n');
let layoutOrClass = ''; let layoutOrClass = '';
@@ -70,8 +84,8 @@ export default class MenuPlugin extends Plugin {
// plus internal-, external-, file- prefixed versions). No raw CSS props allowed. // plus internal-, external-, file- prefixed versions). No raw CSS props allowed.
if (Object.keys(colors).length > 0) { if (Object.keys(colors).length > 0) {
const baseKeys = new Set([ const baseKeys = new Set([
'bg','text','border','font', 'bg', 'text', 'border', 'font',
'hover-text','hover-bg','hover-border','hover-font', 'hover-text', 'hover-bg', 'hover-border', 'hover-font',
]); ]);
const normalizeKey = (raw: string) => { const normalizeKey = (raw: string) => {
let s = raw.trim().toLowerCase(); let s = raw.trim().toLowerCase();
@@ -120,7 +134,7 @@ export default class MenuPlugin extends Plugin {
const borderVal = get('border'); if (borderVal) a.style.borderColor = borderVal as string; const borderVal = get('border'); if (borderVal) a.style.borderColor = borderVal as string;
const fontVal = get('font'); if (fontVal) a.style.fontFamily = fontVal as string; const fontVal = get('font'); if (fontVal) a.style.fontFamily = fontVal as string;
// Expose hover values as CSS variables on the anchor for user CSS to consume if desired // Expose hover values as CSS variables on the anchor for user CSS to consume if desired
const hoverKeys = ['hover-bg','hover-text','hover-border','hover-font']; const hoverKeys = ['hover-bg', 'hover-text', 'hover-border', 'hover-font'];
for (const hk of hoverKeys) { for (const hk of hoverKeys) {
const v = get(hk); const v = get(hk);
if (v) a.style.setProperty(`--${hk}`, v as string); if (v) a.style.setProperty(`--${hk}`, v as string);
@@ -146,10 +160,7 @@ export default class MenuPlugin extends Plugin {
a.style.cursor = 'pointer'; a.style.cursor = 'pointer';
a.addEventListener('click', (e) => { a.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
const vaultName = this.app.vault.getName(); this.app.workspace.openLinkText(href, ctx.sourcePath, false);
const encodedFile = encodeURIComponent(href);
const uri = `obsidian://open?vault=${encodeURIComponent(vaultName)}&file=${encodedFile}`;
window.open(uri);
}); });
} else if (link.match(/^\[.*\]\(.*\)$/)) { } else if (link.match(/^\[.*\]\(.*\)$/)) {
// External link // External link
@@ -199,4 +210,71 @@ export default class MenuPlugin extends Plugin {
onunload() { onunload() {
// Cleanup if needed // Cleanup if needed
} }
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
}
class MenuPluginSettingTab extends PluginSettingTab {
plugin: MenuPlugin;
constructor(app: App, plugin: MenuPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const { containerEl } = this;
containerEl.empty();
containerEl.createEl('h2', { text: 'Menu Plugin Settings' });
new Setting(containerEl)
.setName('Setting #1')
.setDesc('It\'s a secret')
.addText(text => text
.setPlaceholder('Enter your secret')
.setValue(this.plugin.settings.mySetting)
.onChange(async (value) => {
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
// --- Documentation Section ---
containerEl.createEl('hr');
containerEl.createEl('h3', { text: 'Usage Guide' });
const doc = containerEl.createEl('div');
doc.createEl('p', { text: 'Create a custom menu using the `menu` code block.' });
doc.createEl('h4', { text: 'Example' });
const pre = doc.createEl('pre');
pre.createEl('code', {
text: `\`\`\`menu
layout: slate
bg: #333
text: white
[[Internal Link]]
[External Link](https://example.com)
\`\`\``});
doc.createEl('h4', { text: 'Supported Properties' });
const ul = doc.createEl('ul');
ul.createEl('li', { text: 'layout: default, minimal, slate, horizon, aether' });
ul.createEl('li', { text: 'class: custom CSS classes' });
ul.createEl('li', { text: 'colors: bg, text, border, font (supports hover- prefix)' });
doc.createEl('h4', { text: 'Link Types' });
const ul2 = doc.createEl('ul');
ul2.createEl('li', { text: '[[Internal Link]] - Opens Obsidian note' });
ul2.createEl('li', { text: '[External Link](https://...) - Opens in browser' });
ul2.createEl('li', { text: '[File Link](file://...) - Opens local file/folder' });
}
} }

2
manifest.json
View File

@@ -1,7 +1,7 @@
{ {
"id": "menu-plugin", "id": "menu-plugin",
"name": "Obsidian Menus", "name": "Obsidian Menus",
"version": "1.0.1", "version": "1.2",
"minAppVersion": "0.15.0", "minAppVersion": "0.15.0",
"description": "Create custom menus using code blocks with links and CSS styling.", "description": "Create custom menus using code blocks with links and CSS styling.",
"author": "Olivier Legendre", "author": "Olivier Legendre",

1
styles.css
View File

@@ -128,6 +128,7 @@
font-size: 0.9em; font-size: 0.9em;
font-weight: normal; font-weight: normal;
color: var(--text, var(--text-normal)); color: var(--text, var(--text-normal));
border: 1px solid var(--border, var(--background-modifier-border));
background: var(--bg, transparent); background: var(--bg, transparent);
font-family: var(--font, inherit); font-family: var(--font, inherit);