chore: added a deploy to github pages workflow

This workflow builds the documentation using `mkdocs` and then publishes it
onto the github pages site.

Author: Tygo-van-den-Hurk

.github/workflows/push--deploy-github-pages.yaml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+# Updates the GitHub pages website with the changes made in the last push.
+# Takes in all markdown files and images of the repository and turns that
+# into HTML to present on the GitHub pages website. Used for documentation.
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, master, release, development]
+    paths: [".github/workflows/push--deploy-github-pages.yaml", "mkdocs.yml", "docs/**"]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: github-pages
+  cancel-in-progress: false
+
+jobs:
+
+  build:
+    name: Build site
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/[email protected]
+      - name: Setup Pages
+        uses: actions/[email protected]
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with: { python-version: '3.x' }
+      - name: Install pip
+        run: python -m pip install --upgrade pip
+      - name: Install MkDocs and dependencies
+        run: pip install mkdocs mkdocs-shadcn mkdocstrings-python pymdown-extensions
+      - name: Build site with MkDocs
+        run: mkdocs --verbose --color build --site-dir ./_site
+      - name: Upload artifact
+        uses: actions/[email protected]
+        with: { path: ./_site }
+
+  deploy:
+    name: Deploy site
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/[email protected]

docs/basics.md

@@ -2,7 +2,7 @@
 
 to get started make a file called `slyde.xml`, and put in the following text:
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation">
 </presentation>
 ```
@@ -11,7 +11,7 @@ Slyde is made out of XML blocks denoted like this `<tag>...</tag>`. They are an
 
 Now in the presentation block you can add slides as you please. Add one and optionally give it a title:
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation">
   <slide title="Why you should use Slyde">
   </slide>
@@ -20,7 +20,7 @@ Now in the presentation block you can add slides as you please. Add one and opti
 
 Slide blocks should always be at the 2nd level. To add text to a slide add 3rd level blocks like `<text>...</text>`, `<point>....</point>`, or `<image/>`:
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation">
   <slide title="Why you should use Slyde">
     <point>It is super fast and easy to make slides</point>
@@ -32,7 +32,7 @@ Slide blocks should always be at the 2nd level. To add text to a slide add 3rd l
 
 To style text add [markup](./markup.md). For more information about how markup works in Slyde see [the page on markup](./markup.md)
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation" by="Tygo van den Hurk">
   <slide title="Why you should use Slyde">
     <point>It is super **fast and easy** to make slides</point>
@@ -48,7 +48,7 @@ This would output the following fully animated presentation:
 
 You can optionally add presentor notes using XML comments `<!-- ... -->`:
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation" by="Tygo van den Hurk">
   <slide title="Why you should use Slyde">
     <!-- These are my slide notes in case I forget what to say -->

docs/index.md

@@ -12,7 +12,7 @@
 
 Slyde is a program to create professional beautifully animated presentations from XML. It is fast and easy, even for non-technical people. [See the basics](./basics.md) to get started.
 
-```XML
+```xml
 <presentation title="My First Slyde Presentation" by="Tygo van den Hurk">
   <slide title="Why you should use Slyde">
     <!-- These are my slide notes in case I forget what to say -->

docs/markup.md

@@ -72,15 +72,15 @@ This markup is rendered automatically in the text of all components. The markup
 
 You might not want the markup to be processed at all. In that case you have 3 options. You could switch the markup renderer to the `plain` named renderer. This one just returns the input without processing:
 
-```XML
+```xml
 <text markup="plain">
   **This text will NOT be bold**
 </text>
 ```
 
 or use a [processing instruction](./processing-instructions.md):
 
-```XML
+```xml
 <?slyde markup="plain"?>
 <text>
   **This text will NOT be bold**
@@ -92,7 +92,7 @@ or use a [processing instruction](./processing-instructions.md):
 
 Or you can use an XML CDATA tag:
 
-```XML
+```xml
 <text><CDATA[[
   **This text will NOT be bold**
 ]]></text>

docs/plugins/component.md

@@ -2,7 +2,7 @@
 
 To add your own component simply follow this template:
 
-```JavaScript
+```javascript
 // Now available as: my-component, MyComponent, ...
 export default ({ Component }) => Component.register(
 
@@ -24,7 +24,7 @@ There are a couple of requirements for any instance of `Component`. The function
 
 Now that you've added your own `Component` plugin you can simply use it using its's ID as the element name. Like so:
 
-```XML
+```xml
 <presentation>
   <slide>
     <my-component />

docs/plugins/markup-renderer.md

@@ -2,7 +2,7 @@
 
 To add your own markup renderer simply follow this template:
 
-```JavaScript
+```javascript
 // Now available as: my-language, MyLanguage, ...
 export default ({ MarkupRenderer }) => MarkupRenderer.register(
 
@@ -23,7 +23,7 @@ There are a couple of requirements for any instance of `MarkupRenderer`. The fun
 
 Now that you've added your own `MarkupRenderer` plugin you can simply render by using it's ID as the value. [See the markup documentation on how to set a renderer](../markup.md).
 
-```XML
+```xml
 <text markup="my-language">
   this is rendered using your new MyLanguage renderer
 </text>

docs/processing-instructions.md

@@ -6,7 +6,7 @@ Processing instructions are a special way to tell the compiler things. They do n
 
 An example is the processing instructions to change the [markup renderer](markup.md) to something else from here on out for all next elements and their descendants.
 
-```XML
+```xml
 <text>
   **This text will be bold**
 </text>
@@ -26,6 +26,6 @@ Here follows a list off all possible instructions:
 
 You can change the markup render to `XYZ` using:
 
-```XML
+```xml
 <?slyde markup="XYZ"?>
 ```

mkdocs.yml

@@ -0,0 +1,43 @@
+site_name: Slyde
+site_author: Tygo van den Hurk
+site_url: https://tygo-van-den-hurk.github.io/Slyde/
+site_description: Make beautifully animated Slydes and presentations from XML with ease!
+
+repo_url: https://github.com/Tygo-van-den-Hurk/Slyde
+
+theme: 
+  name: shadcn
+  show_title: true
+  show_stargazers: false
+  pygments_style:
+    light: github-light
+    dark: github-dark
+  icon: assets/logo-standalone.svg
+  favicon: assets/logo-standalone.svg
+  show_datetime: true
+  highlightjs: true
+  color_mode: auto
+
+plugins: 
+  - search
+  - mkdocstrings
+
+markdown_extensions:
+  admonition:
+  codehilite:
+  fenced_code:
+  footnotes:
+  extra:
+  pymdownx.blocks.details:
+  pymdownx.tabbed:
+  pymdownx.blocks.tab:
+    combine_header_slug: true
+    separator: ___
+  pymdownx.progressbar:
+  pymdownx.snippets:
+  pymdownx.arithmatex:
+    generic: true
+  shadcn.extensions.echarts.alpha:
+  shadcn.extensions.codexec:
+  shadcn.extensions.iconify:
+  pymdownx.blocks.caption: