Compare commits

...

11 Commits

Author SHA1 Message Date
30bd6dc740 Initial commit 2025-09-27 16:58:33 -05:00
Johannes Theiner
e2a64e0534 Merge pull request #151 from adamu/main
Prefix unused variables with _
2025-09-17 18:12:44 +02:00
Johannes Theiner
8933f6ce64 Merge pull request #142 from johannrichard/declutter-version-bump
build: only write new minAppVersion requirements to `versions.json`
2025-09-17 17:54:33 +02:00
Steph Ango
db97f5f629 Merge pull request #155 from obsidianmd/agents-md
AGENTS.md
2025-09-05 09:12:10 -07:00
Steph Ango
9673533aa9 language 2025-09-05 09:10:47 -07:00
Steph Ango
33075ecd13 use forward slashes for cross OS compatibility 2025-09-05 09:04:04 -07:00
Steph Ango
188bb6120f small copy tweaks 2025-09-05 09:01:58 -07:00
Steph Ango
a4398b8ecc Corrections based on feedback 2025-09-05 08:58:49 -07:00
Steph Ango
ce4fc8c209 First pass 2025-09-04 15:28:25 -07:00
Adam Millerchip
f16c1401b3 Prefix unused variables with _ 2025-08-28 14:38:40 +09:00
Johann Richard
3fe07677b5 build: only write new minAppVersion requirements to versions.json
Only add a new version requirements if `minAppVersion` is not already in `versions.json`. Should declutter `versions.json`.
2025-04-28 08:38:38 +02:00
8 changed files with 2888 additions and 140 deletions

251
AGENTS.md Normal file
View File

@@ -0,0 +1,251 @@
# Obsidian community plugin
## Project overview
- Target: Obsidian Community Plugin (TypeScript → bundled JavaScript).
- Entry point: `main.ts` compiled to `main.js` and loaded by Obsidian.
- Required release artifacts: `main.js`, `manifest.json`, and optional `styles.css`.
## Environment & tooling
- Node.js: use current LTS (Node 18+ recommended).
- **Package manager: npm** (required for this sample - `package.json` defines npm scripts and dependencies).
- **Bundler: esbuild** (required for this sample - `esbuild.config.mjs` and build scripts depend on it). Alternative bundlers like Rollup or webpack are acceptable for other projects if they bundle all external dependencies into `main.js`.
- Types: `obsidian` type definitions.
**Note**: This sample project has specific technical dependencies on npm and esbuild. If you're creating a plugin from scratch, you can choose different tools, but you'll need to replace the build configuration accordingly.
### Install
```bash
npm install
```
### Dev (watch)
```bash
npm run dev
```
### Production build
```bash
npm run build
```
## Linting
- To use eslint install eslint from terminal: `npm install -g eslint`
- To use eslint to analyze this project use this command: `eslint main.ts`
- eslint will then create a report with suggestions for code improvement by file and line number.
- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder: `eslint ./src/`
## File & folder conventions
- **Organize code into multiple files**: Split functionality across separate modules rather than putting everything in `main.ts`.
- Source lives in `src/`. Keep `main.ts` small and focused on plugin lifecycle (loading, unloading, registering commands).
- **Example file structure**:
```
src/
main.ts # Plugin entry point, lifecycle management
settings.ts # Settings interface and defaults
commands/ # Command implementations
command1.ts
command2.ts
ui/ # UI components, modals, views
modal.ts
view.ts
utils/ # Utility functions, helpers
helpers.ts
constants.ts
types.ts # TypeScript interfaces and types
```
- **Do not commit build artifacts**: Never commit `node_modules/`, `main.js`, or other generated files to version control.
- Keep the plugin small. Avoid large dependencies. Prefer browser-compatible packages.
- Generated output should be placed at the plugin root or `dist/` depending on your build setup. Release artifacts must end up at the top level of the plugin folder in the vault (`main.js`, `manifest.json`, `styles.css`).
## Manifest rules (`manifest.json`)
- Must include (non-exhaustive):
- `id` (plugin ID; for local dev it should match the folder name)
- `name`
- `version` (Semantic Versioning `x.y.z`)
- `minAppVersion`
- `description`
- `isDesktopOnly` (boolean)
- Optional: `author`, `authorUrl`, `fundingUrl` (string or map)
- Never change `id` after release. Treat it as stable API.
- Keep `minAppVersion` accurate when using newer APIs.
- Canonical requirements are coded here: https://github.com/obsidianmd/obsidian-releases/blob/master/.github/workflows/validate-plugin-entry.yml
## Testing
- Manual install for testing: copy `main.js`, `manifest.json`, `styles.css` (if any) to:
```
<Vault>/.obsidian/plugins/<plugin-id>/
```
- Reload Obsidian and enable the plugin in **Settings → Community plugins**.
## Commands & settings
- Any user-facing commands should be added via `this.addCommand(...)`.
- If the plugin has configuration, provide a settings tab and sensible defaults.
- Persist settings using `this.loadData()` / `this.saveData()`.
- Use stable command IDs; avoid renaming once released.
## Versioning & releases
- Bump `version` in `manifest.json` (SemVer) and update `versions.json` to map plugin version → minimum app version.
- Create a GitHub release whose tag exactly matches `manifest.json`'s `version`. Do not use a leading `v`.
- Attach `manifest.json`, `main.js`, and `styles.css` (if present) to the release as individual assets.
- After the initial release, follow the process to add/update your plugin in the community catalog as required.
## Security, privacy, and compliance
Follow Obsidian's **Developer Policies** and **Plugin Guidelines**. In particular:
- Default to local/offline operation. Only make network requests when essential to the feature.
- No hidden telemetry. If you collect optional analytics or call third-party services, require explicit opt-in and document clearly in `README.md` and in settings.
- Never execute remote code, fetch and eval scripts, or auto-update plugin code outside of normal releases.
- Minimize scope: read/write only what's necessary inside the vault. Do not access files outside the vault.
- Clearly disclose any external services used, data sent, and risks.
- Respect user privacy. Do not collect vault contents, filenames, or personal information unless absolutely necessary and explicitly consented.
- Avoid deceptive patterns, ads, or spammy notifications.
- Register and clean up all DOM, app, and interval listeners using the provided `register*` helpers so the plugin unloads safely.
## UX & copy guidelines (for UI text, commands, settings)
- Prefer sentence case for headings, buttons, and titles.
- Use clear, action-oriented imperatives in step-by-step copy.
- Use **bold** to indicate literal UI labels. Prefer "select" for interactions.
- Use arrow notation for navigation: **Settings → Community plugins**.
- Keep in-app strings short, consistent, and free of jargon.
## Performance
- Keep startup light. Defer heavy work until needed.
- Avoid long-running tasks during `onload`; use lazy initialization.
- Batch disk access and avoid excessive vault scans.
- Debounce/throttle expensive operations in response to file system events.
## Coding conventions
- TypeScript with `"strict": true` preferred.
- **Keep `main.ts` minimal**: Focus only on plugin lifecycle (onload, onunload, addCommand calls). Delegate all feature logic to separate modules.
- **Split large files**: If any file exceeds ~200-300 lines, consider breaking it into smaller, focused modules.
- **Use clear module boundaries**: Each file should have a single, well-defined responsibility.
- Bundle everything into `main.js` (no unbundled runtime deps).
- Avoid Node/Electron APIs if you want mobile compatibility; set `isDesktopOnly` accordingly.
- Prefer `async/await` over promise chains; handle errors gracefully.
## Mobile
- Where feasible, test on iOS and Android.
- Don't assume desktop-only behavior unless `isDesktopOnly` is `true`.
- Avoid large in-memory structures; be mindful of memory and storage constraints.
## Agent do/don't
**Do**
- Add commands with stable IDs (don't rename once released).
- Provide defaults and validation in settings.
- Write idempotent code paths so reload/unload doesn't leak listeners or intervals.
- Use `this.register*` helpers for everything that needs cleanup.
**Don't**
- Introduce network calls without an obvious user-facing reason and documentation.
- Ship features that require cloud services without clear disclosure and explicit opt-in.
- Store or transmit vault contents unless essential and consented.
## Common tasks
### Organize code across multiple files
**main.ts** (minimal, lifecycle only):
```ts
import { Plugin } from "obsidian";
import { MySettings, DEFAULT_SETTINGS } from "./settings";
import { registerCommands } from "./commands";
export default class MyPlugin extends Plugin {
settings: MySettings;
async onload() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
registerCommands(this);
}
}
```
**settings.ts**:
```ts
export interface MySettings {
enabled: boolean;
apiKey: string;
}
export const DEFAULT_SETTINGS: MySettings = {
enabled: true,
apiKey: "",
};
```
**commands/index.ts**:
```ts
import { Plugin } from "obsidian";
import { doSomething } from "./my-command";
export function registerCommands(plugin: Plugin) {
plugin.addCommand({
id: "do-something",
name: "Do something",
callback: () => doSomething(plugin),
});
}
```
### Add a command
```ts
this.addCommand({
id: "your-command-id",
name: "Do the thing",
callback: () => this.doTheThing(),
});
```
### Persist settings
```ts
interface MySettings { enabled: boolean }
const DEFAULT_SETTINGS: MySettings = { enabled: true };
async onload() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
await this.saveData(this.settings);
}
```
### Register listeners safely
```ts
this.registerEvent(this.app.workspace.on("file-open", f => { /* ... */ }));
this.registerDomEvent(window, "resize", () => { /* ... */ });
this.registerInterval(window.setInterval(() => { /* ... */ }, 1000));
```
## Troubleshooting
- Plugin doesn't load after build: ensure `main.js` and `manifest.json` are at the top level of the plugin folder under `<Vault>/.obsidian/plugins/<plugin-id>/`.
- Build issues: if `main.js` is missing, run `npm run build` or `npm run dev` to compile your TypeScript source code.
- Commands not appearing: verify `addCommand` runs after `onload` and IDs are unique.
- Settings not persisting: ensure `loadData`/`saveData` are awaited and you re-render the UI after changes.
- Mobile-only issues: confirm you're not using desktop-only APIs; check `isDesktopOnly` and adjust.
## References
- Obsidian sample plugin: https://github.com/obsidianmd/obsidian-sample-plugin
- API documentation: https://docs.obsidian.md
- Developer policies: https://docs.obsidian.md/Developer+policies
- Plugin guidelines: https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines
- Style guide: https://help.obsidian.md/style-guide

View File

@@ -63,7 +63,7 @@ Quick starting guide for new plugin devs:
- `eslint main.ts`
- eslint will then create a report with suggestions for code improvement by file and line number.
- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
- `eslint .\src\`
- `eslint ./src/`
## Funding URL

259
main.ts
View File

@@ -1,134 +1,157 @@
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
import { Plugin, setIcon, WorkspaceLeaf } from "obsidian";
import { DEFAULT_SETTINGS, TabPinSettings, TabPinSettingTab } from "./settings";
// Remember to rename these classes and interfaces!
const BTN_CLASS = "tab-pin-toggle";
const PINNED_CLASS = "is-pinned";
interface MyPluginSettings {
mySetting: string;
}
const DEFAULT_SETTINGS: MyPluginSettings = {
mySetting: 'default'
}
export default class MyPlugin extends Plugin {
settings: MyPluginSettings;
export default class TabPinButtonPlugin extends Plugin {
settings: TabPinSettings;
private observer?: MutationObserver;
private seenLeaves = new WeakSet<WorkspaceLeaf>();
async onload() {
await this.loadSettings();
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
// This creates an icon in the left ribbon.
const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
// Called when the user clicks the icon.
new Notice('This is a notice!');
this.addSettingTab(new TabPinSettingTab(this.app, this));
this.applyHoverStyle();
this.decorateAllTabHeaders();
this.registerEvent(this.app.workspace.on("layout-change", () => this.onWorkspaceChange()));
this.registerEvent(this.app.workspace.on("active-leaf-change", () => this.syncAllButtons()));
this.observer = new MutationObserver(() => {
this.decorateAllTabHeaders();
this.syncAllButtons();
});
// Perform additional things with the ribbon
ribbonIconEl.addClass('my-plugin-ribbon-class');
this.observer.observe(document.body, { childList: true, subtree: true });
// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
const statusBarItemEl = this.addStatusBarItem();
statusBarItemEl.setText('Status Bar Text');
// This adds a simple command that can be triggered anywhere
this.addCommand({
id: 'open-sample-modal-simple',
name: 'Open sample modal (simple)',
callback: () => {
new SampleModal(this.app).open();
}
});
// This adds an editor command that can perform some operation on the current editor instance
this.addCommand({
id: 'sample-editor-command',
name: 'Sample editor command',
editorCallback: (editor: Editor, view: MarkdownView) => {
console.log(editor.getSelection());
editor.replaceSelection('Sample Editor Command');
}
});
// This adds a complex command that can check whether the current state of the app allows execution of the command
this.addCommand({
id: 'open-sample-modal-complex',
name: 'Open sample modal (complex)',
checkCallback: (checking: boolean) => {
// Conditions to check
const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
if (markdownView) {
// If checking is true, we're simply "checking" if the command can be run.
// If checking is false, then we want to actually perform the operation.
if (!checking) {
new SampleModal(this.app).open();
}
// This command will only show up in Command Palette when the check function returns true
return true;
}
}
});
// This adds a settings tab so the user can configure various aspects of the plugin
this.addSettingTab(new SampleSettingTab(this.app, this));
// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
// Using this function will automatically remove the event listener when this plugin is disabled.
this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
console.log('click', evt);
});
// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
this.autoPinNewLeavesPass();
}
onunload() {
this.observer?.disconnect();
document.querySelectorAll<HTMLElement>(`.${BTN_CLASS}`).forEach((el) => el.remove());
}
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
async saveSettings() { await this.saveData(this.settings); }
applyHoverStyle() {
const root = document.documentElement;
if (this.settings.showPinOnlyOnHover) {
root.style.setProperty("--tab-pin-initial-opacity", "0");
root.style.setProperty("--tab-pin-hover-opacity", "1");
} else {
root.style.setProperty("--tab-pin-initial-opacity", "0.7");
root.style.setProperty("--tab-pin-hover-opacity", "1");
}
}
async saveSettings() {
await this.saveData(this.settings);
}
}
class SampleModal extends Modal {
constructor(app: App) {
super(app);
}
onOpen() {
const {contentEl} = this;
contentEl.setText('Woah!');
}
onClose() {
const {contentEl} = this;
contentEl.empty();
}
}
class SampleSettingTab extends PluginSettingTab {
plugin: MyPlugin;
constructor(app: App, plugin: MyPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const {containerEl} = this;
containerEl.empty();
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();
}));
private onWorkspaceChange() {
this.decorateAllTabHeaders();
this.syncAllButtons();
this.autoPinNewLeavesPass();
}
private decorateAllTabHeaders() {
const headers = document.querySelectorAll<HTMLElement>(".workspace-tab-header");
headers.forEach((header) => {
if (header.querySelector(`.${BTN_CLASS}`)) return;
const inner = header.querySelector<HTMLElement>(".workspace-tab-header-inner") ?? header;
const btn = inner.createSpan({ cls: BTN_CLASS });
const closeBtn = inner.querySelector<HTMLElement>(".workspace-tab-header-inner-close-button");
if (closeBtn) closeBtn.before(btn); else inner.appendChild(btn);
btn.setAttribute("aria-label", "Toggle pin");
btn.setAttribute("tabindex", "0");
setIcon(btn, "pin");
btn.addEventListener("click", (ev) => {
ev.stopPropagation();
ev.preventDefault();
this.activateHeader(header);
const leaf = this.app.workspace.activeLeaf as any;
if (!leaf) return;
const pinned = !!leaf?.pinned;
if (typeof leaf.setPinned === "function") leaf.setPinned(!pinned);
else this.toggleViaViewState(leaf as WorkspaceLeaf, !pinned);
this.syncButtonForHeader(header);
// hide if pinned
if (this.isHeaderPinned(header)) {
btn.style.display = "none";
} else {
btn.style.display = "";
}
});
btn.addEventListener("keydown", (e: KeyboardEvent) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
(btn as HTMLElement).click();
}
});
});
}
private syncAllButtons() {
document.querySelectorAll<HTMLElement>(".workspace-tab-header").forEach((h) => this.syncButtonForHeader(h));
}
private syncButtonForHeader(header: HTMLElement) {
const btn = header.querySelector<HTMLElement>(`.${BTN_CLASS}`);
if (!btn) return;
const isPinned = this.isHeaderPinned(header);
btn.classList.toggle(PINNED_CLASS, isPinned);
btn.setAttribute("aria-pressed", isPinned ? "true" : "false");
btn.title = isPinned ? "Unpin tab" : "Pin tab";
}
private isHeaderPinned(header: HTMLElement): boolean {
if (header.classList.contains("mod-pinned")) return true;
if (header.classList.contains("is-active")) {
const leaf = this.app.workspace.activeLeaf as any;
return !!leaf?.pinned;
}
return false;
}
private activateHeader(header: HTMLElement) {
header.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
header.click();
}
private async toggleViaViewState(leaf: WorkspaceLeaf, toPinned: boolean) {
const vs = await leaf.getViewState();
await leaf.setViewState({ ...vs, pinned: toPinned });
}
private autoPinNewLeavesPass() {
if (!this.settings.autoPinNewTabs) return;
const leaves = this.app.workspace.getLeavesOfType?.("") || this.getAllLeavesFallback();
for (const leaf of leaves) {
if (this.seenLeaves.has(leaf)) continue;
this.seenLeaves.add(leaf);
const anyLeaf = leaf as any;
const pinned = !!anyLeaf?.pinned;
if (!pinned) {
if (typeof anyLeaf.setPinned === "function") anyLeaf.setPinned(true);
else this.toggleViaViewState(leaf, true);
}
}
this.syncAllButtons();
}
private getAllLeavesFallback(): WorkspaceLeaf[] {
const out: WorkspaceLeaf[] = [];
const visit: any = (container: any) => {
if (!container) return;
if (Array.isArray(container.children)) container.children.forEach(visit);
if (container?.view && container?.leaf) out.push(container.leaf as WorkspaceLeaf);
if (container?.leaves) container.leaves.forEach((l: WorkspaceLeaf) => out.push(l));
};
// @ts-expect-error accessing private rootSplit
visit((this.app.workspace as any).rootSplit);
return out;
}
}

View File

@@ -1,11 +1,11 @@
{
"id": "sample-plugin",
"name": "Sample Plugin",
"version": "1.0.0",
"minAppVersion": "0.15.0",
"description": "Demonstrates some of the capabilities of the Obsidian API.",
"author": "Obsidian",
"authorUrl": "https://obsidian.md",
"fundingUrl": "https://obsidian.md/pricing",
"isDesktopOnly": false
"id": "tab-pin-button",
"name": "Tab Pin Button",
"version": "0.0.1",
"minAppVersion": "1.8.0",
"description": "Adds a pin icon to each tab header and lets you autopin new tabs.",
"author": "You",
"isDesktopOnly": true,
"js": "main.js",
"css": "styles.css"
}

2406
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

59
settings.ts Normal file
View File

@@ -0,0 +1,59 @@
import { App, PluginSettingTab, Setting } from "obsidian";
import type TabPinButtonPlugin from "./main";
export interface TabPinSettings {
showPinOnlyOnHover: boolean;
autoPinNewTabs: boolean;
}
export const DEFAULT_SETTINGS: TabPinSettings = {
showPinOnlyOnHover: true,
autoPinNewTabs: false,
};
export class TabPinSettingTab extends PluginSettingTab {
plugin: TabPinButtonPlugin;
constructor(app: App, plugin: TabPinButtonPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const { containerEl } = this;
containerEl.empty();
containerEl.createEl("h2", { text: "Tab Pin Button Settings" });
new Setting(containerEl)
.setName("Show pin only on hover")
.setDesc("When ON, the pin icon appears on hover; when OFF, it is always visible.")
.addToggle((toggle) =>
toggle
.setValue(this.plugin.settings.showPinOnlyOnHover)
.onChange(async (v) => {
this.plugin.settings.showPinOnlyOnHover = v;
await this.plugin.saveSettings();
this.plugin.applyHoverStyle();
})
);
new Setting(containerEl)
.setName("Autopin newly opened tabs")
.setDesc("Automatically pin tabs when they are first created.")
.addToggle((toggle) =>
toggle
.setValue(this.plugin.settings.autoPinNewTabs)
.onChange(async (v) => {
this.plugin.settings.autoPinNewTabs = v;
await this.plugin.saveSettings();
})
);
}
}

View File

@@ -1,8 +1,14 @@
/*
This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.
If your plugin does not need CSS, delete this file.
*/
/* Pin button styles */
.tab-pin-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 6px;
opacity: var(--tab-pin-initial-opacity, 0.7);
cursor: pointer;
}
.workspace-tab-header:hover .tab-pin-toggle { opacity: var(--tab-pin-hover-opacity, 1); }
.tab-pin-toggle.is-pinned svg { transform: rotate(-35deg); }
.tab-pin-toggle:focus { outline: 2px solid var(--interactive-accent); outline-offset: 2px; }

View File

@@ -3,12 +3,15 @@ import { readFileSync, writeFileSync } from "fs";
const targetVersion = process.env.npm_package_version;
// read minAppVersion from manifest.json and bump version to target version
let manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
const manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
const { minAppVersion } = manifest;
manifest.version = targetVersion;
writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t"));
// update versions.json with target version and minAppVersion from manifest.json
let versions = JSON.parse(readFileSync("versions.json", "utf8"));
versions[targetVersion] = minAppVersion;
writeFileSync("versions.json", JSON.stringify(versions, null, "\t"));
// but only if the target version is not already in versions.json
const versions = JSON.parse(readFileSync('versions.json', 'utf8'));
if (!Object.values(versions).includes(minAppVersion)) {
versions[targetVersion] = minAppVersion;
writeFileSync('versions.json', JSON.stringify(versions, null, '\t'));
}