@mnaoumov/create-obsidian-plugin 1.0.2 → 1.1.0

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

@@ -0,0 +1,39 @@
+// Docs: Views
+// https://docs.obsidian.md/Plugins/User+interface/Views
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Views.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 { ItemView, WorkspaceLeaf } from 'obsidian';
+
+export const VIEW_TYPE_EXAMPLE = 'example-view';
+
+export class ExampleView extends ItemView {
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+  }
+
+  getViewType() {
+    return VIEW_TYPE_EXAMPLE;
+  }
+
+  getDisplayText() {
+    return 'Example view';
+  }
+
+  async onOpen() {
+    const container = this.contentEl;
+    container.empty();
+    container.createEl('h4', { text: 'Example view' });
+  }
+
+  async onClose() {
+    // Nothing to clean up.
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.openView((leaf) => new ExampleView(leaf));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/workspace/05-inspect-the-workspace.ts

@@ -0,0 +1,23 @@
+// Docs: Workspace > Inspect the workspace
+// https://docs.obsidian.md/Plugins/User+interface/Workspace#Inspect+the+workspace
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Workspace.md?plain=1#L101
+// 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 leaf types', () => {
+      this.app.workspace.iterateAllLeaves((leaf) => {
+        console.log(leaf.getViewState().type);
+      });
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/workspace/06-leaf-groups.ts

@@ -0,0 +1,19 @@
+// Docs: Workspace > Leaf groups
+// https://docs.obsidian.md/Plugins/User+interface/Workspace#Leaf+groups
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Workspace.md?plain=1#L132
+// 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) {
+  const leaves = [context.getLeaf()];
+  {
+    leaves.forEach((leaf) => leaf.setGroup('group1'));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/vault/02-read-files.ts

@@ -0,0 +1,37 @@
+// Docs: Vault > Read files
+// https://docs.obsidian.md/Plugins/Vault#Read+files
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Vault.md?plain=1#L35
+// 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, Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addRibbonIcon('info', 'Calculate average file length', async () => {
+      const fileLength = await this.averageFileLength();
+      new Notice(`The average file length is ${fileLength} characters.`);
+    });
+  }
+
+  async averageFileLength(): Promise<number> {
+    const { vault } = this.app;
+
+    const fileContents: string[] = await Promise.all(
+      vault.getMarkdownFiles().map((file) => vault.cachedRead(file))
+    );
+
+    let totalLength = 0;
+    fileContents.forEach((content) => {
+      totalLength += content.length;
+    });
+
+    return totalLength / fileContents.length;
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/vault/03-modify-files.ts

@@ -0,0 +1,19 @@
+// Docs: Vault > Modify files
+// https://docs.obsidian.md/Plugins/Vault#Modify+files
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Vault.md?plain=1#L67
+// 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 { TFile, Vault } from 'obsidian';
+
+function writeCurrentDate(vault: Vault, file: TFile): Promise<void> {
+  return vault.modify(file, `Today is ${new Intl.DateTimeFormat().format(new Date())}.`);
+}
+
+export { writeCurrentDate };
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await writeCurrentDate(context.app.vault, await context.getFile()), 'writeCurrentDate()');
+}

package/templates/docs-showcase/files/src/docs/plugins/vault/04-modify-files.ts

@@ -0,0 +1,22 @@
+// Docs: Vault > Modify files (2)
+// https://docs.obsidian.md/Plugins/Vault#Modify+files
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Vault.md?plain=1#L75
+// 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 { TFile, Vault } from 'obsidian';
+
+// emojify replaces all occurrences of :) with 🙂.
+function emojify(vault: Vault, file: TFile): Promise<string> {
+  return vault.process(file, (data) => {
+    return data.replace(':)', '🙂');
+  })
+}
+
+export { emojify };
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await emojify(context.app.vault, await context.getFile()), 'emojify()');
+}

package/templates/docs-showcase/files/src/docs/plugins/vault/05-is-it-a-file-or-folder.ts

@@ -0,0 +1,25 @@
+// Docs: Vault > Is it a file or folder?
+// https://docs.obsidian.md/Plugins/Vault#Is+it+a+file+or+folder%3F
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Vault.md?plain=1#L109
+// 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 { TFile, TFolder } from 'obsidian';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  {
+    const folderOrFile = this.app.vault.getAbstractFileByPath('folderOrFile');
+
+    if (folderOrFile instanceof TFile) {
+      console.log('It\'s a file!');
+    } else if (folderOrFile instanceof TFolder) {
+      console.log('It\'s a folder!');
+    }
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/reference/css-variables/about-styling/01-for-plugins.ts

@@ -0,0 +1,14 @@
+// Docs: About styling > For plugins
+// https://docs.obsidian.md/Reference/CSS+variables/About+styling#For+plugins
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/CSS%20variables/About%20styling.md?plain=1#L11
+// 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 = ".todo-list {\n  background-color: var(--background-secondary);\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/reference/css-variables/about-styling/02-for-themes-and-snippets.ts

@@ -0,0 +1,14 @@
+// Docs: About styling > For themes and snippets
+// https://docs.obsidian.md/Reference/CSS+variables/About+styling#For+themes+and+snippets
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/CSS%20variables/About%20styling.md?plain=1#L23
+// 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 = ".theme-dark {\n  --background-primary: #18004F;\n  --background-secondary: #220070;\n}\n\n.theme-light {\n  --background-primary: #ECE4FF;\n  --background-secondary: #D9C9FF;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/reference/css-variables/publish/site-fonts/01-intro.ts

@@ -0,0 +1,14 @@
+// Docs: Site fonts
+// https://docs.obsidian.md/Reference/CSS+variables/Publish/Site+fonts
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/CSS%20variables/Publish/Site%20fonts.md?plain=1#L8
+// 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 = "/* @import must always be at the top of your publish.css file */\n@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\n\nbody {\n  --font-text-theme: 'Poppins';\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/reference/typescript-api/command/callback/01-example.ts

@@ -0,0 +1,24 @@
+// Docs: callback > Example
+// https://docs.obsidian.md/Reference/TypeScript+API/Command/callback#Example
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/TypeScript%20API/Command/callback.md?plain=1#L23
+// 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';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  {
+    this.addCommand({
+      id: 'print-greeting-to-console',
+      name: 'Print greeting to console',
+      callback: () => {
+        console.log('Hey, you!');
+      },
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/reference/typescript-api/debounce/01-example.ts

@@ -0,0 +1,24 @@
+// Docs: debounce > Example
+// https://docs.obsidian.md/Reference/TypeScript+API/debounce#Example
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/TypeScript%20API/debounce.md?plain=1#L37
+// 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 { debounce } from 'obsidian';
+
+async function snippet(context: DocsContext) {
+  {
+    const debounced = debounce((text: string) => {
+        console.log(text);
+    }, 1000, true);
+    debounced('Hello world'); // this will not be printed
+    await sleep(500);
+    debounced('World, hello'); // this will be printed to the console.
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/reference/typescript-api/vault/process/01-example.ts

@@ -0,0 +1,22 @@
+// Docs: process > Example
+// https://docs.obsidian.md/Reference/TypeScript+API/Vault/process#Example
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Reference/TypeScript%20API/Vault/process.md?plain=1#L37
+// 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) {
+  const app = context.app;
+  const file = await context.getFile();
+  {
+    app.vault.process(file, (data) => {
+     return data.replace('Hello', 'World');
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/build-a-theme/05-step-4-change-the-font.ts

@@ -0,0 +1,14 @@
+// Docs: Build a theme > Step 4: Change the font (2)
+// https://docs.obsidian.md/Themes/App+themes/Build+a+theme#Step+4%3A+Change+the+font
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Build%20a%20theme.md?plain=1#L80
+// 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 = "body {\n  --font-text-theme: Georgia, serif;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/build-a-theme/06-step-5-change-the-background-color.ts

@@ -0,0 +1,14 @@
+// Docs: Build a theme > Step 5: Change the background color
+// https://docs.obsidian.md/Themes/App+themes/Build+a+theme#Step+5%3A+Change+the+background+color
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Build%20a%20theme.md?plain=1#L94
+// 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 = ".theme-dark {\n  --background-primary: #18004F;\n  --background-secondary: #220070;\n}\n\n.theme-light {\n  --background-primary: #ECE4FF;\n  --background-secondary: #D9C9FF;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/build-a-theme/07-step-6-change-the-input-hover-border-col.ts

@@ -0,0 +1,14 @@
+// Docs: Build a theme > Step 6: Change the input hover border color
+// https://docs.obsidian.md/Themes/App+themes/Build+a+theme#Step+6%3A+Change+the+input+hover+border+color
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Build%20a%20theme.md?plain=1#L134
+// 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 = ":root {\n   --input-hover-border-color: red;\n/* Change from Black to Red */\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/build-a-theme/08-step-7-discover-css-variables-in-use.ts

@@ -0,0 +1,14 @@
+// Docs: Build a theme > Step 7: Discover CSS variables in use
+// https://docs.obsidian.md/Themes/App+themes/Build+a+theme#Step+7%3A+Discover+CSS+variables+in+use
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Build%20a%20theme.md?plain=1#L173
+// 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 = "body {\n  --ribbon-background: magenta;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/embed-fonts-and-images-in-your-theme/02-use-data-urls.ts

@@ -0,0 +1,14 @@
+// Docs: Embed fonts and images in your theme > Use data URLs (2)
+// https://docs.obsidian.md/Themes/App+themes/Embed+fonts+and+images+in+your+theme#Use+data+URLs
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Embed%20fonts%20and%20images%20in%20your%20theme.md?plain=1#L21
+// 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 = "h1 {\n  background-image: url(\"data:image/gif;base64,R0lGODdhAQADAPABAP////8AACwAAAAAAQADAAACAgxQADs=\")\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/app-themes/theme-guidelines/01-use-css-variables.ts

@@ -0,0 +1,14 @@
+// Docs: Theme guidelines > Use CSS variables
+// https://docs.obsidian.md/Themes/App+themes/Theme+guidelines#Use+CSS+variables
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/App%20themes/Theme%20guidelines.md?plain=1#L11
+// 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 = ":root {\n  --input-focus-border-color: Highlight;\n}\n\nbody {\n  --font-text-size: 18px;\n}\n\n.theme-light {\n  --background-primary: white;\n}\n\n.theme-dark {\n  --background-primary: black;\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/obsidian-publish-themes/best-practices-for-publish-themes/01-small-screens-and-mobile-devices.ts

@@ -0,0 +1,14 @@
+// Docs: Best practices for Publish themes > Small screens and mobile devices
+// https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Best+practices+for+Publish+themes#Small+screens+and+mobile+devices
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/Obsidian%20Publish%20themes/Best%20practices%20for%20Publish%20themes.md?plain=1#L41
+// 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 = "@media screen and (min-width: 1000px) {\n  /* ... rules and variables for screens larger than tablet */\n}\n@media screen and (max-width: 1000px) {\n  /* ... rules and variables for tablet devices and smaller */\n}\n@media screen and (max-width: 750px) {\n  /* ... rules and variables for mobile devices and smaller */\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/themes/obsidian-publish-themes/build-a-publish-theme/01-intro.ts

@@ -0,0 +1,14 @@
+// Docs: Build a Publish theme
+// https://docs.obsidian.md/Themes/Obsidian+Publish+themes/Build+a+Publish+theme
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Themes/Obsidian%20Publish%20themes/Build%20a%20Publish%20theme.md?plain=1#L13
+// 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 = ".published-container {\n  --page-width: 800px;\n  --page-side-padding: 48px;\n\n  /* ... CSS variables for Publish that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */\n}\n\n.theme-light {\n  --background-primary: #ebf2ff;\n  --h1-color: #000000;\n\n  /* ... CSS color variables for when light mode is enabled */\n}\n.theme-dark {\n  --background-primary: #1f2a3f;\n  --h1-color: #ffffff;\n\n  /* ... CSS color variables for when dark mode is enabled */\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": [
+      "DOM",
+      "ES2021"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2021",
+    "types": []
+  },
+  "include": [
+    "./**/*.ts"
+  ]
+}

package/templates/docs-showcase/host/entry.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'obsidian';
+
+/**
+ * Registers one command per code snippet of the Obsidian developer docs.
+ *
+ * @param plugin - The plugin to register the commands on.
+ */
+export function registerDocsShowcase(plugin: Plugin): void;

package/templates/docs-showcase/host/entry.js

@@ -0,0 +1,4 @@
+// The one module the plugin's own code imports from this folder. It is JavaScript, with `entry.d.ts` beside it,
+// so that the project's `tsconfig.json` sees only that declaration: the snippets are upstream's code and are
+// type-checked by `tsconfig.json` in this folder instead, under the official sample plugin's compiler options.
+export { registerDocsShowcase } from './index.ts';