🚧 More doc changes; build tweaks (plugin won't start)

ebullient · Feb 18, 2024 · f7c7beb · f7c7beb
1 parent 4a2705e
commit f7c7beb
Show file tree

Hide file tree

Showing 36 changed files with 212 additions and 168 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -4,6 +4,10 @@ root = true
 [*]
 charset = utf-8
 insert_final_newline = true
+trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 tab_width = 4
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,4 @@ build/
 coverage/
 .nyc_output/
 dist
+old
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,43 @@
+---
+title: "Advanced Slides Documentation"
+description: ""
+---
+# Create Awesome Presentations in Obsidian
+
+
+[Advanced Slides](https://github.com/ebullient/obsidian-advanced-slides) is an open source plugin for [Obsidian](https://obsidian.md/) that allows you to create [reveal.js](https://revealjs.com/) based presentations in Obsidian. With this tool anyone who is able to create a note in Obsidian can also create a beautiful presentation. 
+
+> [!NOTE] 
+> We follow the philosophy of `convention over configuration`.
+> In most cases it is sufficient to simply write a Slide in **Obsidian Markdown syntax**.
+
+## Main features
+
+- Live Preview while editing your slides markdown
+- Theme support for your slides
+- Excalidraw Support
+- Mermaid Support
+- Block Support: `::: block`
+- Obidian <-> Reveal.js integration
+    - Footnote Support: `Here's a footnote[^1]`
+    - Pass options To Slide Compiler through frontmatter (properties)
+    - Support for wiki links
+        - `[[Note]]` will be rendered as normal text in Presentation
+        - with aliases `[[Note|My Note]]`
+    - Obsidian embed Support: `![[Note.md#FirstChapter]]` or `![First Chapter](Note.md#FirstChapter)`
+    - Image Support: `![[picture.jpg]]` or `![](picture.jpg)`
+        - pipe image properties: `![[image.png|100x100]]` or `![|100x100](image.png)`
+    - See [Extended Syntax](/docs/extend-syntax/) for more
+- Reveal.js Markdown features
+    - Define stylesheets inside Markdown: `<style>....</style>` d
+    - Annotate elements: `<!-- element class="red" -->`
+
+## Call for Help
+
+You have coding skills and you are missing a proper Slides functionality as much as me and want to help? Join us, there is enough work to do.
+
+## Contribute to this documentation
+
+Feel free to update this content, just click the **Improve this page** link displayed on top right of each page, and pullrequest it
+
+Your modification will be deployed automatically when merged!
diff --git a/docs/_index.md b/docs/_index.md
diff --git a/docs/basic-syntax/footnotes.md b/docs/basic-syntax/footnotes.md
@@ -14,6 +14,7 @@ Here's a simple footnote[^1]
 
 ![Footnote](../images/footnote.png)
 
-{{%alert%}} To define the location where footnotes should be displayed on slide simply define a `<%? footnotes %>` placeholder on the slide at the location where the footnotes should be rendered. To style the Footnotes itself define styles for `footnotes` class and it's childeren `ol` and `ol->li`. {{%/alert%}}
+> [!TIP]
+> To define the location where footnotes should be displayed on slide simply define a `<%? footnotes %>` placeholder on the slide at the location where the footnotes should be rendered. To style the Footnotes itself define styles for `footnotes` class and it's childeren `ol` and `ol->li`.
 
 <%? footnotes %>
diff --git a/docs/basic-syntax/links.md b/docs/basic-syntax/links.md
@@ -77,4 +77,6 @@ ___
 
 <br>
 
-{{%alert%}}If you'd like backlinks to be displayed in the slides, check out the frontmatter property `enableLinks`. [see yaml docs]({{%relref "yaml"%}}){{%/alert%}}
+> [!TIP]
+> If you'd like backlinks to be displayed in the slides, check out the frontmatter property `enableLinks`.
+> See [yaml frontmatter docs](../yaml/README.md).
diff --git a/docs/basic-syntax/mermaid.md b/docs/basic-syntax/mermaid.md
@@ -66,4 +66,5 @@ mermaid:
 ---
 ```
 
-{{%alert%}}Read more about mermaid configuration [here](https://mermaid-js.github.io/mermaid/#/Setup){{%/alert%}}
+> [!TIP]
+> Read more about mermaid configuration [here](https://mermaid-js.github.io/mermaid/#/Setup)
diff --git a/docs/extend-syntax/charts.md b/docs/extend-syntax/charts.md
@@ -8,10 +8,12 @@ Advanced Slides allows to add charts using [Obsidian Charts](https://charts.phib
 
 #### Obsidian Charts Example:
 
-{{%alert%}}Currently the following features are not supported:
-- [Dataview Integration](https://charts.phibr0.de/Dataview%20Integration)
-- [Chart from Table](https://charts.phibr0.de/Chart%20from%20Table)
-{{%/alert%}}
+> [!NOTE]
+> Currently the following features are not supported:
+>
+> - [Dataview Integration](https://charts.phibr0.de/Dataview%20Integration)
+> - [Chart from Table](https://charts.phibr0.de/Chart%20from%20Table)
+
 
 
 ```md

diff --git a/docs/extend-syntax/emojis.md b/docs/extend-syntax/emojis.md
@@ -12,4 +12,5 @@ Any shortcode you write in your markdown notes will be automatically shown as an
 
 If you want to have full support for shortcode's autocompletion or viewing them in reading mode, this plugin is the perfect companion: [Obsidian Emoji Shortcodes](https://github.com/phibr0/obsidian-emoji-shortcodes)
 
-{{%alert%}}An extensive cheat sheet for every shortcode [here](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#table-of-contents){{%/alert%}}
+> [!TIP]
+> An extensive cheat sheet for every shortcode is [here](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#table-of-contents)
diff --git a/docs/extend-syntax/excalidraw.md b/docs/extend-syntax/excalidraw.md
@@ -4,7 +4,8 @@ description: ""
 weight: 10
 ---
 
-{{%alert%}}It’s required to activate Auto-Export SVG / PNG in Excalidraw Settings.{{%/alert%}}
+> [!TIP]
+> Auto-Export SVG / PNG must be enabled in Excalidraw Settings.
 
 ```md
 #### Excalidraw support
@@ -15,5 +16,3 @@ weight: 10
 ```
 
 ![Excalidraw](../images/excalidraw.png)
-
-
diff --git a/docs/extend-syntax/fontAwesome.md b/docs/extend-syntax/fontAwesome.md
@@ -168,11 +168,11 @@ And one fine morning — So we beat on<!-- .element: style="font-size: 46px" ali
 {{</revealhtml>}}
 
 
-<br>
-
-{{%alert%}}More documentation for Font Awesome [here](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use){{%/alert%}}
+> [!TIP]
+> More documentation for Font Awesome [here](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use)
 
 
-{{%alert%}}Overview of all icons [here](https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free){{%/alert%}}
+> [!TIP]
+> Overview of all icons [here](https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free)
 
 
diff --git a/docs/extend-syntax/fragments.md b/docs/extend-syntax/fragments.md
@@ -6,8 +6,10 @@ weight: 5
 
 Fragments are used to highlight or incrementally reveal individual elements on a slide. Every element with the class fragment will be stepped through before moving on to the next slide.
 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment.
-<br>
-{{%alert%}}A list of all possible fragment types could be found [here](https://revealjs.com/fragments/){{%/alert%}}
+
+> [!TIP]
+> A list of all possible fragment types can be found [here](https://revealjs.com/fragments/)
+
 ```md
 Fade in <!-- element class="fragment" -->
 

diff --git a/docs/extend-syntax/slideAnimation.md b/docs/extend-syntax/slideAnimation.md
@@ -20,4 +20,5 @@ Here's a simple example to give you a better idea of how it can be used:
 ###### *Author - 2022* 
 ```
 
-{{%alert%}}To learn more about Auto-Animation visit [reveal.js Documentation](https://revealjs.com/auto-animate/){{%/alert%}}
+> [!TIP]
+> To learn more about Auto-Animation visit [reveal.js Documentation](https://revealjs.com/auto-animate/)
diff --git a/docs/extend-syntax/slides.md b/docs/extend-syntax/slides.md
@@ -33,4 +33,6 @@ To create a horizontal slide use three dashes surrounded by two blank lines. To
 
 <br>
 
-{{%alert%}} It is possible to change the vertical / horizontal slide separator by changing the `separator` or `verticalSeparator` property in frontmatter [see yaml docs]({{%relref "yaml"%}}){{%/alert%}}
+> [!TIP]
+> It is possible to change the vertical / horizontal slide separator by changing the `separator` or `verticalSeparator` property in frontmatter.
+> See [yaml frontmatter docs](../yaml/README.md)
diff --git a/docs/extend-syntax/speakerNotes.md b/docs/extend-syntax/speakerNotes.md
@@ -28,4 +28,6 @@ note: this is not! Only the speaker might see this text.
 
 <br>
 
-{{%alert%}} It is possible to change the notes indicator by changing the `notesSeparator` property in frontmatter [see yaml docs]({{%relref "yaml"%}}){{%/alert%}}
+> [!TIP]
+> It is possible to change the notes indicator by changing the `notesSeparator` property in frontmatter.
+> See [yaml frontmatter docs](../yaml/README.md)
diff --git a/docs/features/embedSlide.md b/docs/features/embedSlide.md
@@ -19,10 +19,10 @@ By using `slide` code blocks you are able to embed an slide into an obsidian not
     ```
 ```
 
-{{%alert%}}
-When using horizontal & vertical slides you can specify a page as following: `3/6`<br>
-This would show the 6th vertical slide on the 3rd horizontal position.
-{{%/alert%}}
+> [!TIP]
+> When using horizontal & vertical slides you can specify a page as following: `3/6`  
+> This would show the 6th vertical slide on the 3rd horizontal position.
+
 
 
 

diff --git a/docs/getting-start/_index.md → docs/getting-started/_index.md b/docs/getting-start/_index.md → docs/getting-started/_index.md
diff --git a/docs/getting-start/firstSteps.md → docs/getting-started/firstSteps.md b/docs/getting-start/firstSteps.md → docs/getting-started/firstSteps.md
diff --git a/docs/getting-start/installation.md → docs/getting-started/installation.md b/docs/getting-start/installation.md → docs/getting-started/installation.md
@@ -8,11 +8,13 @@ pre: "<i class='fa fa-wrench' style='margin-right:5px' ></i> "
 The following steps are here to help you to install Advanced Slides Plugin for Obsidian. If you never installed a plugin at all, we strongly suggest you to read the guideline on Community Plugins. [Obsidian Documentation on Community Plugins](https://help.obsidian.md/Extending+Obsidian/Community+plugins).
 
 ## With Community Plugins
-* Search for `Advanced Slides` in Community Plugins and hit `install` and `enable`
 
-{{%alert%}} While Installation Advanced Slides will download the runtime to create & display Slide Presentations. Make sure that your VPN/Proxy allows https connections on `github.com`.{{%/alert%}}
+* Search for `Advanced Slides` in Community Plugins and hit `install` and `enable`
 
+> [!WARNING]
+> Advanced Slides will download the runtime to create & display Slide Presentations. 
+> Make sure that your VPN/Proxy allows https connections to `github.com`.
 
 ## Configuration
 
-[Follow instructions here]({{%relref "settings.md"%}})
+[Follow instructions here](./settings.md)
diff --git a/docs/getting-start/learnMore.md → docs/getting-started/learnMore.md b/docs/getting-start/learnMore.md → docs/getting-started/learnMore.md
diff --git a/docs/getting-start/settings.md → docs/getting-started/settings.md b/docs/getting-start/settings.md → docs/getting-started/settings.md
@@ -8,6 +8,7 @@ pre: "<i class='fa fa-gears' style='margin-right:5px' ></i> "
 The settings can be found under Advanced Slides Section inside Plugin Settings. The settings can be found by clicking the gear in the bottom left corner, or by hitting `Ctrl/Cmd-,`.
 
 Most of them are fairly self-explanatory, but here are some notes that might be helpful.
+
 <!--more-->
 
 ### Port

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
@@ -22,7 +22,8 @@ The following syntax is used to drag-and-drop a grid in Advanced Slides:
 
 The *width* and *height* values of the **drag** property define the  size of the area in which the content will be displayed. The *x* and *y* values of the **drop** property define the position on the slide where the content should be inserted. 
 
-{{%alert%}}By default, it is assumed that the values are percentages based on the size of the slide. Append **px** to the values for pixel sizes.{{%/alert%}}
+> [!TIP]
+> By default, it is assumed that the values are percentages based on the size of the slide. Append **px** to the values for pixel sizes.
 
 #### Position by Coordinates
 
@@ -84,7 +85,8 @@ Bottom
 
 ![Example](../images/grid-basic2.png)
 
-{{%alert%}}When drap property is not specified, grid component uses a default size of **50 100**{{%/alert%}}
+> [!TIP]
+> When drap property is not specified, grid component uses a default size of **50 100**
 
 ### Flow
 
@@ -208,7 +210,8 @@ Where the **type** option of the **animate** property can take one of the follow
 - scaleDown
 - scaleDownOut
 
-{{%alert%}}The **speed** option is optional. When specified it accepts a value of slower or faster.{{%/alert%}}
+> [!TIP]
+> The **speed** option is optional. When specified it accepts a value of slower or faster.
 
 #### Opacity
 
@@ -293,7 +296,8 @@ This sample grid above would display with 10px padding top and bottom and 15px p
 
 ![Example](../images/grid-pad.png)
 
-{{%alert%}}Padding introduced by this property does not increase the size of the grid itself. Rather it reduces the size of the area available to render children within the grid.{{%/alert%}}
+> [!TIP]
+> Padding introduced by this property does not increase the size of the grid itself. Rather it reduces the size of the area available to render children within the grid.
 
 #### Alignment
 

diff --git a/docs/plugins/_index.md → docs/plugins/README.md b/docs/plugins/_index.md → docs/plugins/README.md
@@ -8,4 +8,8 @@ pre: "<i class='fa fa-plug' ></i> "
 
 Advanced Slides comes with a varity of diffrent plugins built in:
 
-{{% children  %}}
+- [Chalkboard](chalkboard.md)
+- [Elapsed Time Bar](elapseTimeBar.md)
+- [Laser Pointer](pointer.md)
+- [Menu](menu.md)
+- [Overview](overview.md)
diff --git a/docs/plugins/chalkboard.md b/docs/plugins/chalkboard.md
@@ -13,4 +13,5 @@ The main use case in mind when implementing the plugin is classroom usage in whi
 
 ![Chalkboard](../images/chalkboard.gif)
 
-{{%alert%}} To enable Chalkboard you have to enable the Plugin in Advanced Slides Settings{{%/alert%}}
+> [!WARNING] 
+> To enable Chalkboard you have to enable the Plugin in Advanced Slides Settings
diff --git a/docs/plugins/elapseTimeBar.md b/docs/plugins/elapseTimeBar.md
@@ -6,6 +6,7 @@ weight: 4
 
 A plugin adding a progress bar based on the elapsed time, that helps you keeping the time in presentations.
 
-To set the time for presentation add a timeForPresentation property into your slides frontmatter with the time you want to present in seconds.
+To set the time for presentation add a `timeForPresentation` property into your slides frontmatter with the time you want to present in seconds.
 
-{{%alert%}} To enable Elapsed Time Bar you have to enable the Plugin in Advanced Slides Settings{{%/alert%}}
+> [!WARNING]
+> To enable Elapsed Time Bar you have to enable the Plugin in Advanced Slides Settings
diff --git a/docs/plugins/menu.md b/docs/plugins/menu.md
@@ -9,4 +9,5 @@ A slideout menu plugin for Advanced Slides to quickly jump to any slide by title
 ![Menu](../images/menu.gif)
 
 
-{{%alert%}} To enable Menu you have to enable the Plugin in Advanced Slides Settings{{%/alert%}}
+> [!WARNING]
+> To enable Menu you have to enable the Plugin in Advanced Slides Settings
diff --git a/docs/plugins/overview.md b/docs/plugins/overview.md
@@ -4,8 +4,10 @@ description: ""
 weight: 2
 ---
 
-Press the »ESC« or »O« keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation. You could also activate Overview Mode by pressing the Overview Button on the bottom right corner.
+Press the `»ESC«` or `»O«` keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation. You could also activate Overview Mode by pressing the Overview Button on the bottom right corner.
 
 ![Overview](../images/overview.gif)
 
-{{%alert%}} To enable Overview you have to enable the Plugin in Advanced Slides Settings{{%/alert%}}
+> [!WARNING]
+> To enable Overview you have to enable the Plugin in Advanced Slides Settings
+
diff --git a/docs/plugins/pointer.md b/docs/plugins/pointer.md
@@ -6,4 +6,5 @@ weight: 5
 
 A plugin that changes your mouse pointer into a laser pointer. To activate laser pointer press 'Q' Button
 
-{{%alert%}} To enable Laser Pointer you have to enable the Plugin in Advanced Slides Settings{{%/alert%}}
+> [!WARNING]
+> To enable Laser Pointer you have to enable the Plugin in Advanced Slides Settings
diff --git a/docs/templates/_index.md → docs/templates/README.md b/docs/templates/_index.md → docs/templates/README.md
diff --git a/docs/themes/_index.md → docs/themes/README.md b/docs/themes/_index.md → docs/themes/README.md
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,4 @@ build/ @@
     coverage/
     .nyc_output/
     dist
+    old