commit 1daf02eb25ca913d0455dfc2b8b482d061b8554d Author: fyears Date: Sun Oct 17 22:47:48 2021 +0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2fd7c5e --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +# Intellij +*.iml +.idea + +# npm +node_modules +package-lock.json + +# build +main.js +*.js.map + +# obsidian +data.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..9e4fe9c --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +## Obsidian Sample Plugin + +This is a sample plugin for Obsidian (https://obsidian.md). + +This project uses Typescript to provide type checking and documentation. +The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does. + +**Note:** The Obsidian API is still in early alpha and is subject to change at any time! + +This sample plugin demonstrates some of the basic functionality the plugin API can do. +- Changes the default font color to red using `styles.css`. +- Adds a ribbon icon, which shows a Notice when clicked. +- Adds a command "Open Sample Modal" which opens a Modal. +- Adds a plugin setting tab to the settings page. +- Registers a global click event and output 'click' to the console. +- Registers a global interval which logs 'setInterval' to the console. + +### First time developing plugins? + +Quick starting guide for new plugin devs: + +- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it). +- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder. +- Install NodeJS, then run `npm i` in the command line under your repo folder. +- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`. +- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`. +- Reload Obsidian to load the new version of your plugin. +- Enable plugin in settings window. +- For updates to the Obsidian API run `npm update` in the command line under your repo folder. + +### Releasing new releases + +- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release. +- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible. +- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases +- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. +- Publish the release. + +### Adding your plugin to the community plugin list + +- Publish an initial version. +- Make sure you have a `README.md` file in the root of your repo. +- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin. + +### How to use + +- Clone this repo. +- `npm i` or `yarn` to install dependencies +- `npm run dev` to start compilation in watch mode. + +### Manually installing the plugin + +- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`. + +### API Documentation + +See https://github.com/obsidianmd/obsidian-api diff --git a/main.ts b/main.ts new file mode 100644 index 0000000..36e175e --- /dev/null +++ b/main.ts @@ -0,0 +1,112 @@ +import { App, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; + +interface MyPluginSettings { + mySetting: string; +} + +const DEFAULT_SETTINGS: MyPluginSettings = { + mySetting: 'default' +} + +export default class MyPlugin extends Plugin { + settings: MyPluginSettings; + + async onload() { + console.log('loading plugin'); + + await this.loadSettings(); + + this.addRibbonIcon('dice', 'Sample Plugin', () => { + new Notice('This is a notice!'); + }); + + this.addStatusBarItem().setText('Status Bar Text'); + + this.addCommand({ + id: 'open-sample-modal', + name: 'Open Sample Modal', + // callback: () => { + // console.log('Simple Callback'); + // }, + checkCallback: (checking: boolean) => { + let leaf = this.app.workspace.activeLeaf; + if (leaf) { + if (!checking) { + new SampleModal(this.app).open(); + } + return true; + } + return false; + } + }); + + this.addSettingTab(new SampleSettingTab(this.app, this)); + + this.registerCodeMirror((cm: CodeMirror.Editor) => { + console.log('codemirror', cm); + }); + + this.registerDomEvent(document, 'click', (evt: MouseEvent) => { + console.log('click', evt); + }); + + this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000)); + } + + onunload() { + console.log('unloading plugin'); + } + + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } + + async saveSettings() { + await this.saveData(this.settings); + } +} + +class SampleModal extends Modal { + constructor(app: App) { + super(app); + } + + onOpen() { + let {contentEl} = this; + contentEl.setText('Woah!'); + } + + onClose() { + let {contentEl} = this; + contentEl.empty(); + } +} + +class SampleSettingTab extends PluginSettingTab { + plugin: MyPlugin; + + constructor(app: App, plugin: MyPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display(): void { + let {containerEl} = this; + + containerEl.empty(); + + containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'}); + + 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) => { + console.log('Secret: ' + value); + this.plugin.settings.mySetting = value; + await this.plugin.saveSettings(); + })); + } +} diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..4ca4889 --- /dev/null +++ b/manifest.json @@ -0,0 +1,10 @@ +{ + "id": "obsidian-sample-plugin", + "name": "Sample Plugin", + "version": "1.0.1", + "minAppVersion": "0.9.12", + "description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.", + "author": "Obsidian", + "authorUrl": "https://obsidian.md/about", + "isDesktopOnly": false +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..29e2406 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "obsidian-sample-plugin", + "version": "0.12.0", + "description": "This is a sample plugin for Obsidian (https://obsidian.md)", + "main": "main.js", + "scripts": { + "dev": "rollup --config rollup.config.js -w", + "build": "rollup --config rollup.config.js --environment BUILD:production" + }, + "keywords": [], + "author": "", + "license": "MIT", + "devDependencies": { + "@rollup/plugin-commonjs": "^18.0.0", + "@rollup/plugin-node-resolve": "^11.2.1", + "@rollup/plugin-typescript": "^8.2.1", + "@types/node": "^14.14.37", + "obsidian": "^0.12.0", + "rollup": "^2.32.1", + "tslib": "^2.2.0", + "typescript": "^4.2.4" + } +} diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..dd4d041 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,30 @@ +import typescript from '@rollup/plugin-typescript'; +import {nodeResolve} from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; + +const isProd = (process.env.BUILD === 'production'); + +const banner = +`/* +THIS IS A GENERATED/BUNDLED FILE BY ROLLUP +if you want to view the source visit the plugins github repository +*/ +`; + +export default { + input: 'main.ts', + output: { + dir: '.', + sourcemap: 'inline', + sourcemapExcludeSources: isProd, + format: 'cjs', + exports: 'default', + banner, + }, + external: ['obsidian'], + plugins: [ + typescript(), + nodeResolve({browser: true}), + commonjs(), + ] +}; \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cfd0fd7 --- /dev/null +++ b/styles.css @@ -0,0 +1,4 @@ +/* Sets all the text color to red! */ +body { + color: red; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..09cf7ec --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "inlineSourceMap": true, + "inlineSources": true, + "module": "ESNext", + "target": "es6", + "allowJs": true, + "noImplicitAny": true, + "moduleResolution": "node", + "importHelpers": true, + "lib": [ + "dom", + "es5", + "scripthost", + "es2015" + ] + }, + "include": [ + "**/*.ts" + ] +} diff --git a/versions.json b/versions.json new file mode 100644 index 0000000..ba14785 --- /dev/null +++ b/versions.json @@ -0,0 +1,4 @@ +{ + "1.0.1": "0.9.12", + "1.0.0": "0.9.7" +}