slide themes

docs/themes/README.md

@@ -20,7 +20,9 @@ Advanced Slides comes with a varity of diffrent themes built in:
 - blood
 - moon
 - consult
-- css/mattropolis.css
+- mattropolis
+
+The source for these built in themes is found in `.obsidian/plugins/obsidian-advanced-slides/dist/theme`
 
 To activate a theme simply add a theme property in the frontmatter section of your slides:
 
@@ -29,27 +31,43 @@ To activate a theme simply add a theme property in the frontmatter section of yo
 
 	---
 
-If you want to use a custom theme you can do that! Just place the theme in the plugins directory and load them from there.
+## Custom themes
+
+If you want to use a custom theme you can do that, but please keep your themes in your vault.
+
+Open the settings for Advanced Slides Plugin, and choose a folder to use as your "Theme Directory".
+
+- Name your theme uniquely. 
+- If you reference pre-packaged fonts or want to import from existing themes, use `/dist/theme/...` as the path.
+- The theme suggester will list all themes from your theme directory,
+  `.obsidian/plugins/obsidian-advanced-slides/css` and `.obsidian/plugins/obsidian-advanced-slides/dist/theme`.
 
 **Example:** 
 
-If your theme file name is **my-theme.css** place it inside your Vaults directory in  `.obsidian/plugins/obsidian-advanced-slides/css/` subfolder and load it by adding the following line on top of your slides markdown file: 
+If you create a directory in your vault called `assets/themes`, and create a CSS file called **my-theme.css** in that directory:
+
+1. Open settings for Advanced Slides Plugin, and choose `assets/themes` as the "Theme Directory"
+2. You should be able to select `my-theme.css` as the default theme in slide settings (suggester)
+3. Alternatively, you can specify the theme as a property in your slides markdown file: 
 
 	---
-	theme: css/my-theme.css
+	theme: my-theme.css
 
 	---
 
+## Remote themes
+
 You can also load a custom theme directly from the Internet:
 
 	---
 	theme: https://revealjs-themes.dzello.com/css/theme/robot-lung.css
 
 	---
 
-# Highlight Themes
+## Highlight Themes
 
-All you have learned so far about custom themes could be applied to highlight themes as well. Highlight Themes define how codeblock elements should look. To activate a highlight theme simply add a highlightTheme property in the frontmatter section of your slides:
+All you have learned so far about custom themes could be applied to highlight themes as well. Highlight Themes define how codeblock elements should look. 
+To activate a highlight theme simply add a highlightTheme property in the frontmatter section of your slides:
 
 	---
 	highlightTheme: monokai
@@ -60,4 +78,9 @@ By default advanced slides comes with a variety of different highlight themes:
 
 - zenburn (default)
 - monokai
-- css/vs2015.css
+- vs2015
+
+### Custom Highlight Theme
+
+To define a custom highlight theme, add a CSS file containing `highlight` or `hljs` in the name into your 
+Custom Theme directory (like `assets/themes` from the previous section).

esbuild.config.mjs

@@ -96,6 +96,12 @@ const parameters = {
                 to: ['./README.md']
             }
         }),
+        copy({
+            assets: {
+                from: ['styles.css'],
+                to: ['./styles.css']
+            }
+        }),
         copy({
             assets: {
                 from: ['distVersion.json'],
@@ -123,7 +129,7 @@ const parameters = {
         copy({
             assets: {
                 from: ['node_modules/highlight.js/styles/vs2015.css'],
-                to: ['./css/'],
+                to: ['./plugin/highlight/'],
             }
         }),
         copy({

src/advancedSlides-Plugin.ts

@@ -7,7 +7,7 @@ import { REVEAL_PREVIEW_VIEW, RevealPreviewView } from './reveal/revealPreviewVi
 import { LineSelectionListener } from './obsidian/suggesters/lineSelectionListener';
 import { DEFAULT_SETTINGS, ICON_DATA, REFRESH_ICON } from './advancedSlides-constants';
 import { AdvancedSlidesSettingTab } from './advancedSlides-SettingTab';
-import { ObsidianMarkdownPreprocessor } from './obsidian/obsidianCodeBlockProcessor';
+import { EmbeddedSlideProcessor } from './obsidian/embeddedSlideProcessor';
 import { AdvancedSlidesDistribution } from './advancedSlides-Distribution';
 
 export class AdvancedSlidesPlugin extends Plugin {
@@ -33,17 +33,6 @@ export class AdvancedSlidesPlugin extends Plugin {
             this.registerEvent(this.app.vault.on('modify', this.onChange.bind(this)));
             this.registerEditorSuggest(new LineSelectionListener(this.app, this));
 
-            this.registerMarkdownPostProcessor((element) => {
-                const paragraphs = element.querySelectorAll<HTMLParagraphElement>('p');
-                for (let index = 0; index < paragraphs.length; index++) {
-                    const paragraph = paragraphs.item(index);
-
-                    if (paragraph.innerText.startsWith(':::')) {
-                        paragraph.remove();
-                    }
-                }
-            });
-
             addIcon('slides', ICON_DATA);
             addIcon('refresh', REFRESH_ICON);
 
@@ -55,9 +44,7 @@ export class AdvancedSlidesPlugin extends Plugin {
                 id: 'open-advanced-slides-preview',
                 name: 'Show Slide Preview',
                 hotkeys: [{ modifiers: ['Mod', 'Shift'], key: 'E' }],
-                callback: async () => {
-                    await this.toggleView();
-                },
+                callback: async () => this.toggleView(),
             });
 
             this.addCommand({
@@ -72,30 +59,25 @@ export class AdvancedSlidesPlugin extends Plugin {
                     instance.onChange();
                 },
             });
-
             this.addCommand({
                 id: 'stop-server-advanced-slides-preview',
                 name: 'Stop Slide Preview Server',
-                callback: () => {
-                    this.revealServer.stop();
-                },
+                callback: async () => this.revealServer.stop(),
             });
-
             this.addCommand({
                 id: 'start-server-advanced-slides-preview',
                 name: 'Start Slide Preview Server',
-                callback: async () => {
-                    this.revealServer.start();
-                },
+                callback: async () => this.revealServer.start(),
             });
 
             this.addSettingTab(new AdvancedSlidesSettingTab(this.app, this));
             this.app.workspace.onLayoutReady(this.layoutReady);
 
-            const blockProcessor = new ObsidianMarkdownPreprocessor(this);
+            const blockProcessor = new EmbeddedSlideProcessor(this);
             this.registerMarkdownCodeBlockProcessor('slide', blockProcessor.handler);
-            // eslint-disable-next-line no-empty
+            this.registerMarkdownPostProcessor(this.obsidianUtils.markdownProcessor.postProcess);
         } catch (err) {
+            console.debug("Advanced Slides caught an error", err);
         }
     }
 
@@ -110,13 +92,13 @@ export class AdvancedSlidesPlugin extends Plugin {
         this.registerEditorSuggest(this.autoCompleteSuggester);
 
         if (this.settings.autoStart) {
-            this.revealServer.start();
+            await this.revealServer.start();
         }
 
         const instance = this.getViewInstance();
         if (instance) {
             if (instance.url == 'about:blank') {
-                this.showView();
+                await this.showView();
             }
         }
     }
@@ -195,7 +177,7 @@ export class AdvancedSlidesPlugin extends Plugin {
     }
 
     async onunload() {
-        console.log("unloading Advanced Slides");
+        console.debug("unloading Advanced Slides");
         await this.revealServer.stop();
         const instance = this.getViewInstance();
         if (instance) {
@@ -210,7 +192,7 @@ export class AdvancedSlidesPlugin extends Plugin {
 
     async saveSettings() {
         await this.saveData(this.settings);
-        console.log("Advanced Slides: settings saved");
+        console.debug("Advanced Slides: settings saved");
         await this.onunload();
         await this.onload();
         await this.layoutReady();

src/advancedSlides-SettingTab.ts

@@ -1,7 +1,6 @@
 import { App, PluginSettingTab, Setting } from 'obsidian';
 import { FolderSuggest } from './obsidian/suggesters/FolderSuggester';
 import { ThemeSuggest } from './obsidian/suggesters/ThemeSuggester';
-import { HighlightThemeSuggest } from './obsidian/suggesters/HighlightThemeSuggester';
 import { AdvancedSlidesPlugin } from './advancedSlides-Plugin';
 import { AdvancedSlidesSettings } from './@types';
 
@@ -128,7 +127,7 @@ export class AdvancedSlidesSettingTab extends PluginSettingTab {
             .setName('Theme')
             .setDesc('Which theme should be used for your slides?')
             .addSearch(cb => {
-                new ThemeSuggest(this.app, cb.inputEl);
+                new ThemeSuggest('theme', this.app, cb.inputEl, this.plugin.obsidianUtils);
                 cb.setPlaceholder('black')
                     .setValue(this.newSettings.theme)
                     .onChange(value => {
@@ -140,7 +139,7 @@ export class AdvancedSlidesSettingTab extends PluginSettingTab {
             .setName('Highlight Theme')
             .setDesc('Which highlight theme should be used for your slides?')
             .addSearch(cb => {
-                new HighlightThemeSuggest(this.app, cb.inputEl);
+                new ThemeSuggest('highlight', this.app, cb.inputEl, this.plugin.obsidianUtils);
                 cb.setPlaceholder('zenburn')
                     .setValue(this.newSettings.highlightTheme)
                     .onChange(value => {

src/obsidian/obsidianCodeBlockProcessor.ts → src/obsidian/embeddedSlideProcessor.ts

@@ -2,7 +2,7 @@ import { AdvancedSlidesPlugin } from '../advancedSlides-Plugin';
 import { EmbeddedSlideParameters } from '../@types';
 import { load } from 'js-yaml';
 
-export class ObsidianMarkdownPreprocessor {
+export class EmbeddedSlideProcessor {
     private plugin: AdvancedSlidesPlugin
     constructor(plugin: AdvancedSlidesPlugin) {
         this.plugin = plugin;

src/obsidian/obsidianMarkdownPreprocessor.ts → src/obsidian/markdownProcessor.ts

@@ -25,7 +25,7 @@ import { ReferenceProcessor } from './processors/referenceProcessor';
 import { SkipSlideProcessor } from './processors/skipSlideProcessor';
 import { Options } from '../@types';
 
-export class ObsidianMarkdownPreprocessor {
+export class MarkdownProcessor {
 	private multipleFileProcessor: MultipleFileProcessor;
 	private blockProcessor: BlockProcessor;
 	private imageProcessor: ImageProcessor;
@@ -75,7 +75,8 @@ export class ObsidianMarkdownPreprocessor {
 		this.referenceProcessor = new ReferenceProcessor();
 		this.skipSlideProcessor = new SkipSlideProcessor();
 	}
-	process(markdown: string, options: Options) {
+
+    process(markdown: string, options: Options) {
 		YamlStore.getInstance().options = options;
 
 		let before = this.trimEnding(markdown, options);
@@ -150,7 +151,19 @@ export class ObsidianMarkdownPreprocessor {
 
 		return afterChartProcessor;
 	}
-	trimEnding(markdown: string, options: Options): string {
+
+    postProcess = (element: HTMLElement) => {
+        const paragraphs = element.querySelectorAll<HTMLParagraphElement>('p');
+        for (let index = 0; index < paragraphs.length; index++) {
+            const paragraph = paragraphs.item(index);
+
+            if (paragraph.innerText.startsWith(':::')) {
+                paragraph.remove();
+            }
+        }
+    }
+
+    trimEnding(markdown: string, options: Options): string {
 
 		const input = markdown + '\n';
 

src/obsidian/obsidianUtils.ts

@@ -1,8 +1,9 @@
-import { existsSync, readFileSync } from 'fs-extra';
+import { readFileSync } from 'fs-extra';
 import { App, FileSystemAdapter, resolveSubpath, TFile } from 'obsidian';
 import path from 'path';
 import { AdvancedSlidesSettings, ImageCollector } from '../@types';
 import { DISABLED_IMAGE_COLLECTOR } from '../advancedSlides-constants';
+import { MarkdownProcessor } from './markdownProcessor';
 
 
 let instance: ImageCollector = DISABLED_IMAGE_COLLECTOR;
@@ -18,11 +19,13 @@ export class ObsidianUtils implements ImageCollector {
 	private app: App;
 	private fileSystem: FileSystemAdapter;
 	private settings: AdvancedSlidesSettings;
+    private readonly processor: MarkdownProcessor;
     private readonly vaultDir;
     private readonly pluginDir;
     private readonly distDir;
     private readonly exportDir;
-    private cache = new Map<string, string>();
+    private readonly highlightSearchPath;
+    private readonly themeSearchPath;
 
 	private yamlRegex = /^---.*?---\n(.*?)($|---)/s;
 
@@ -34,8 +37,27 @@ export class ObsidianUtils implements ImageCollector {
         this.pluginDir = path.join(this.vaultDir, this.app.vault.configDir, 'plugins/obsidian-advanced-slides/');
         this.distDir = path.join(this.pluginDir, 'dist/');
         this.exportDir = path.join(this.vaultDir, this.settings.exportDirectory);
+
+        this.highlightSearchPath = [
+            path.join(this.pluginDir, 'plugin/highlight'),
+        ];
+        this.themeSearchPath = [
+            path.join(this.pluginDir, 'css'),
+            path.join(this.distDir, 'theme'),
+        ];
+
+        if (this.settings.themeDirectory) {
+            this.highlightSearchPath.unshift(path.join(this.vaultDir, this.settings.themeDirectory));
+            this.themeSearchPath.unshift(path.join(this.vaultDir, this.settings.themeDirectory));
+        }
+
         setImageCollector(this);
-	}
+        this.processor = new MarkdownProcessor(this);
+    }
+
+    get markdownProcessor(): MarkdownProcessor {
+        return this.processor;
+    }
 
     get vaultName(): string {
         return this.fileSystem.getName();
@@ -56,6 +78,14 @@ export class ObsidianUtils implements ImageCollector {
 		return this.exportDir;
 	}
 
+    getThemeSearchPath(): string[] {
+        return this.themeSearchPath;
+    }
+
+    getHighlightSearchPath(): string[] {
+        return this.highlightSearchPath;
+    }
+
 	getSettings(): AdvancedSlidesSettings {
 		return this.settings;
 	}