@mnaoumov/create-obsidian-plugin 1.0.2 → 1.2.0

package/templates/docs-showcase/files/src/docs/plugins/user-interface/ribbon-actions/01-intro.ts

@@ -0,0 +1,21 @@
+// Docs: Ribbon actions
+// https://docs.obsidian.md/Plugins/User+interface/Ribbon+actions
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Ribbon%20actions.md?plain=1#L5
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addRibbonIcon('dice', 'Print to console', () => {
+      console.log('Hello, you!');
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/right-to-left/01-use-fallback-values-when-necessary.ts

@@ -0,0 +1,14 @@
+// Docs: Right-to-left > Make plugins and themes agnostic of language direction > Use fallback values when necessary
+// https://docs.obsidian.md/Plugins/User+interface/Right-to-left#Use+fallback+values+when+necessary
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Right-to-left.md?plain=1#L69
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = ".supported,\n.unsupported {\n  /* this won't run */\n}\n\n.supported {\n  /* this will run */\n}\n\n.unsupported {\n  /* this won't run */\n}\n\n@supports selector(:dir(*)) {\n  /* will run if :dir() is supported */\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/right-to-left/02-global-selectors.ts

@@ -0,0 +1,14 @@
+// Docs: Right-to-left > Obsidian CSS helpers and rules for RTL > Selectors for language direction > Global selectors
+// https://docs.obsidian.md/Plugins/User+interface/Right-to-left#Global+selectors
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Right-to-left.md?plain=1#L98
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = ".mod-rtl .plugin-class {\n  direction: rtl;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/right-to-left/03-icons-are-mirrored-automatically.ts

@@ -0,0 +1,14 @@
+// Docs: Right-to-left > Obsidian CSS helpers and rules for RTL > Icons are mirrored automatically
+// https://docs.obsidian.md/Plugins/User+interface/Right-to-left#Icons+are+mirrored+automatically
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Right-to-left.md?plain=1#L120
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = ".mod-rtl svg.svg-icon.left-icon {\n\ttransform: unset;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/09-toggle.ts

@@ -0,0 +1,20 @@
+// Docs: Settings > Control types > Toggle
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Toggle
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L190
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    { name: 'Open in foreground', control: { type: 'toggle', key: 'openInForeground' } }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/10-text.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Control types > Text
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Text
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L196
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Folder name',
+      control: { type: 'text', key: 'folder', placeholder: '/' },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/11-textarea.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Control types > Textarea
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Textarea
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L205
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Notes',
+      control: { type: 'textarea', key: 'notes', rows: 4 },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/12-number.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Control types > Number
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Number
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L214
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Cache size (MB)',
+      control: { type: 'number', key: 'cacheMb', min: 1, max: 500, defaultValue: 50 },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/13-slider.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Control types > Slider
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Slider
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L223
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Volume',
+      control: { type: 'slider', key: 'volume', min: 0, max: 100, step: 1 },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/14-dropdown.ts

@@ -0,0 +1,28 @@
+// Docs: Settings > Control types > Dropdown
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Dropdown
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L232
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Default mode',
+      control: {
+        type: 'dropdown',
+        key: 'mode',
+        defaultValue: 'edit',
+        options: { edit: 'Editing', read: 'Reading' },
+      },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/15-file.ts

@@ -0,0 +1,27 @@
+// Docs: Settings > Control types > File
+// https://docs.obsidian.md/Plugins/User+interface/Settings#File
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L246
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Template file',
+      control: {
+        type: 'file',
+        key: 'template',
+        filter: (file) => file.extension === 'md',
+      },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/16-folder.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Control types > Folder
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Folder
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L259
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Output folder',
+      control: { type: 'folder', key: 'outputDir', includeRoot: true },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/17-color-picker.ts

@@ -0,0 +1,20 @@
+// Docs: Settings > Control types > Color picker
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Color+picker
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L268
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    { name: 'Accent color', control: { type: 'color', key: 'accent' } }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/18-validating-input.ts

@@ -0,0 +1,28 @@
+// Docs: Settings > Validating input
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Validating+input
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L288
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'File extension',
+      control: {
+        type: 'text',
+        key: 'extension',
+        validate: (value) =>
+          /\s/.test(value) ? 'Extension cannot contain spaces.' : undefined,
+      },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/23-groups.ts

@@ -0,0 +1,27 @@
+// Docs: Settings > Groups
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Groups
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L499
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      type: 'group',
+      heading: 'Advanced',
+      items: [
+        { name: 'Debug logging', control: { type: 'toggle', key: 'debug' } },
+        { name: 'Cache size (MB)', control: { type: 'number', key: 'cacheMb', min: 1 } },
+      ],
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/32-cleanup.ts

@@ -0,0 +1,30 @@
+// Docs: Settings > Render callback > Cleanup
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Cleanup
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L749
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { SettingDefinitionItem } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const value: SettingDefinitionItem = (
+    {
+      name: 'Live preview',
+      render: (setting) => {
+        let previewEl = setting.controlEl.createDiv('preview');
+        let observer = new ResizeObserver(() => {
+          previewEl.setText(`${previewEl.clientWidth}px`);
+        });
+        observer.observe(previewEl);
+        return () => observer.disconnect();
+      },
+    }
+  );
+  await context.showSettingDefinitions([value]);
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await snippet(context);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/33-no-top-level-heading.ts

@@ -0,0 +1,27 @@
+// Docs: Settings > Style guide > No top-level heading
+// https://docs.obsidian.md/Plugins/User+interface/Settings#No+top-level+heading
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L781
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  {
+    // ❌ Don't
+    return [
+      { type: 'group', heading: 'My Plugin', items: [/* … */] },
+    ];
+
+    // ✅ Do
+    return [
+      { name: 'Foo', control: { type: 'toggle', key: 'foo' } },
+      { name: 'Bar', control: { type: 'toggle', key: 'bar' } },
+    ];
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/34-headings-only-when-there-are-multiple-se.ts

@@ -0,0 +1,26 @@
+// Docs: Settings > Style guide > Headings only when there are multiple sections
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Headings+only+when+there+are+multiple+sections
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L800
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  {
+    return [
+      // General — no heading
+      { name: 'Default folder', control: { type: 'folder', key: 'folder' } },
+      { name: 'Open on launch', control: { type: 'toggle', key: 'openOnLaunch' } },
+
+      // Subsequent sections get headings
+      { type: 'group', heading: 'Appearance', items: [/* … */] },
+      { type: 'group', heading: 'Advanced', items: [/* … */] },
+    ];
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/36-headings.ts

@@ -0,0 +1,20 @@
+// Docs: Settings > Legacy: imperative display() approach > Available components > Headings
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Headings
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L897
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Setting } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    new Setting(containerEl).setName('Defaults').setHeading();
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/38-moment-format.ts

@@ -0,0 +1,42 @@
+// Docs: Settings > Legacy: imperative display() approach > Available components > Moment format
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Moment+format
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L925
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext, DocsThis } from '../../../host.ts';
+import { Setting } from 'obsidian';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    let dateSampleEl: HTMLElement;
+    const dateDesc = createFragment((frag) => {
+      frag.appendText('For a list of all available tokens, see the ');
+      frag.createEl('a', {
+        text: 'format reference',
+        attr: { href: 'https://momentjs.com/docs/#/displaying/format/', target: '_blank' },
+      });
+      frag.createEl('br');
+      frag.appendText('Your current syntax looks like this: ');
+      dateSampleEl = frag.createEl('b', 'u-pop');
+    });
+
+    new Setting(containerEl)
+      .setName('Date format')
+      .setDesc(dateDesc)
+      .addMomentFormat((momentFormat) => momentFormat
+        .setValue(this.plugin.settings.dateFormat)
+        .setSampleEl(dateSampleEl)
+        .setDefaultFormat('MMMM dd, yyyy')
+        .onChange(async (value) => {
+          this.plugin.settings.dateFormat = value;
+          await this.plugin.saveSettings();
+        }));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/39-buttons.ts

@@ -0,0 +1,26 @@
+// Docs: Settings > Legacy: imperative display() approach > Available components > Buttons
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Buttons
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L953
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Notice, Setting } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    new Setting(containerEl)
+      .setName('Button')
+      .addButton((button) => button
+        .setButtonText('Click me!')
+        .onClick(() => {
+          new Notice('This is a notice!');
+        }));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/40-extra-button.ts

@@ -0,0 +1,28 @@
+// Docs: Settings > Legacy: imperative display() approach > Available components > Extra button
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Extra+button
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L969
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext, DocsThis } from '../../../host.ts';
+import { Setting } from 'obsidian';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    new Setting(containerEl)
+      .setName('API endpoint')
+      .addText((text) => text.setValue(this.plugin.settings.endpoint))
+      .addExtraButton((button) => button
+        .setIcon('lucide-rotate-ccw')
+        .setTooltip('Reset to default')
+        .onClick(() => {
+          // ...
+        }));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/settings/41-progress-bar.ts

@@ -0,0 +1,23 @@
+// Docs: Settings > Legacy: imperative display() approach > Available components > Progress bar
+// https://docs.obsidian.md/Plugins/User+interface/Settings#Progress+bar
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Settings.md?plain=1#L985
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Setting } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    new Setting(containerEl)
+      .setName('Progress bar')
+      .setDesc('It\'s 50% done')
+      .addProgressBar((bar) => bar.setValue(50));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/status-bar/01-intro.ts

@@ -0,0 +1,20 @@
+// Docs: Status bar
+// https://docs.obsidian.md/Plugins/User+interface/Status+bar
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Status%20bar.md?plain=1#L6
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    const item = this.addStatusBarItem();
+    item.createEl('span', { text: 'Hello from the status bar 👋' });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/status-bar/02-intro.ts

@@ -0,0 +1,25 @@
+// Docs: Status bar (2)
+// https://docs.obsidian.md/Plugins/User+interface/Status+bar
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Status%20bar.md?plain=1#L22
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    const fruits = this.addStatusBarItem();
+    fruits.createEl('span', { text: '🍎' });
+    fruits.createEl('span', { text: '🍌' });
+
+    const veggies = this.addStatusBarItem();
+    veggies.createEl('span', { text: '🥦' });
+    veggies.createEl('span', { text: '🥬' });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}