feat: added support for custom CSS, side menu plugin and a few more config options

- added support to add one or multiple CSS files as theme overrides
- added side menu plugin to control themes, transitions, switch to print view and so on
- added config options to set transition and navigation modes

assets/template/reveal-markdown.tmpl

@@ -28,30 +28,82 @@
 <script src="/reveal/js/reveal.js"></script>
 
 <script>
+    Reveal.initialize({
+        controls: true,
+        progress: true,
+        history: true,
+        center: true,
+        slideNumber: true,
+        hash: true,
+        transition: '{{ .Reveal.Transition }}', // none/fade/slide/convex/concave/zoom
+        navigationMode: '{{ .Reveal.NavigationMode }}',
+        markdown: {
+            smartypants: true,
+            smartLists: true
+        },
+        pdfSeparateFragments: false,
+        menu: {
+            numbers: true,
+            useTextContentForMissingTitles: true,
+            custom: [
+                {
+                    title: 'Print',
+                    icon: '<i class="fas fa-print"></i>',
+                    content: '<a href="/?print-pdf">Go to print view<a/>'
+                }
+            ],
+            themes: [
+                {name: 'Beige', theme: '/reveal/css/theme/beige.css'},
+                {name: 'Black', theme: '/reveal/css/theme/black.css'},
+                {name: 'Blood', theme: '/reveal/css/theme/blood.css'},
+                {name: 'League', theme: '/reveal/css/theme/league.css'},
+                {name: 'Moon', theme: '/reveal/css/theme/moon.css'},
+                {name: 'Night', theme: '/reveal/css/theme/night.css'},
+                {name: 'Serif', theme: '/reveal/css/theme/serif.css'},
+                {name: 'Simple', theme: '/reveal/css/theme/simple.css'},
+                {name: 'Sky', theme: '/reveal/css/theme/sky.css'},
+                {name: 'Solarized', theme: '/reveal/css/theme/solarized.css'},
+                {name: 'White', theme: '/reveal/css/theme/white.css'}
+            ],
+            transitions: true,
+        },
+        // Optional libraries used to extend on reveal.js
+        dependencies: [
+            {
+                src: '/reveal/plugin/markdown/marked.js', condition: function () {
+                    return !!document.querySelector('[data-markdown]');
+                }
+            },
+            {
+                src: '/reveal/plugin/markdown/markdown.js', condition: function () {
+                    return !!document.querySelector('[data-markdown]');
+                }
+            },
+            {
+                src: '/reveal/plugin/highlight/highlight.js', async: true, callback: function () {
+                    hljs.initHighlightingOnLoad();
+                }
+            },
+            {src: '/reveal/plugin/notes/notes.js'},
+            {src: '/reveal/plugin/menu/menu.js'}
+        ]
+    });
 
-			Reveal.initialize({
+    {{ if (len .Reveal.StyleSheets) gt 0 }}
-				controls: true,
+    {{ range $idx, $style := .Reveal.StyleSheets }}
-				progress: true,
+    var additionalStyleSheet = document.createElement('link');
-				history: true,
+    additionalStyleSheet.rel = 'stylesheet';
-				center: true,
+    additionalStyleSheet.type = 'text/css';
-                slideNumber: true,
+    additionalStyleSheet.href = '/local/{{- $style }}';
-                hash: true,
+    document.getElementsByTagName('head')[0].appendChild(additionalStyleSheet);
-                transition: 'slide', // none/fade/slide/convex/concave/zoom
+    {{ end}}
-                markdown:{
+    {{ end }}
-                    smartypants: true,
-                    smartLists: true,
-                },
-
-				// Optional libraries used to extend on reveal.js
-				dependencies: [
-					{ src: '/reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-                    { src: '/reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-                    { src: '/reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
-					{ src: '/reveal/plugin/notes/notes.js' }
-				]
-			});
-
 
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = window.location.search.match(/print-pdf/gi) ? '/reveal/css/print/pdf.css' : '/reveal/css/print/paper.css';
+    document.getElementsByTagName('head')[0].appendChild(link);
 
 </script>
 

download_revealjs.sh

@@ -2,3 +2,5 @@
 
 mkdir -p ./assets/reveal
 curl -sL "https://github.com/hakimel/reveal.js/archive/${1:-3.8.0}.tar.gz" | tar -xvz --strip-components=1 -C ./assets/reveal --wildcards *.js --wildcards *.css --exclude test --exclude gruntfile.js
+mkdir -p ./assets/reveal/plugin/
+git clone https://github.com/denehyg/reveal.js-menu.git ./assets/reveal/plugin/menu

examples/custom.css

@@ -0,0 +1,7 @@
+.reveal h1 {
+    color: yellow;
+}
+
+p {
+    color: green;
+}

examples/goveal.yaml

@@ -1,4 +1,6 @@
 theme: night
 code-theme: monokai
 horizontal-separator: ===
-vertical-separator: ---
+vertical-separator: ---
+stylesheets:
+  - examples/custom.css

examples/slides.md

@@ -46,4 +46,15 @@ Content 3.2
 
 ## External 4.2
 
-<a href="https://www.google.com">Google</a>
+<a href="https://www.google.com">Google</a>
+
+===
+
+## Code
+
+```csharp
+var i = 10;
+for (var j = 0; j < i; j++) {
+    Console.WriteLine($"{j}");
+}
+```

internal/app/cmd/root.go

@@ -34,6 +34,8 @@ var (
 	cfgFile             string
 	theme               string
 	codeTheme           string
+	transition          string
+	navigationMode      string
 	horizontalSeparator string
 	verticalSeparator   string
 	rootCmd             = &cobra.Command{
@@ -61,6 +63,8 @@ func init() {
 
 	rootCmd.PersistentFlags().StringVar(&theme, "theme", defaultTheme, "reveal.js theme to use")
 	rootCmd.PersistentFlags().StringVar(&codeTheme, "code-theme", "monokai", "name of the code theme to use for highlighting")
+	rootCmd.PersistentFlags().StringVar(&transition, "transition", "none", "transition effect to use")
+	rootCmd.PersistentFlags().StringVar(&navigationMode, "navigationMode", "default", "determine the navigation mode to use ['default', 'linear', 'grid']")
 	rootCmd.PersistentFlags().StringVar(&horizontalSeparator, "horizontal-separator", "===", "horizontal separator in slides")
 	rootCmd.PersistentFlags().StringVar(&verticalSeparator, "vertical-separator", "---", "vertical separator in slides")
 	rootCmd.PersistentFlags().StringVar(&cfgFile, "config", "", "config file (default is $HOME/.go-reveal-slides.yaml)")

internal/app/config/reveal_params.go

@@ -14,18 +14,26 @@
 
 package config
 
-import "github.com/spf13/viper"
+import (
+	"github.com/spf13/viper"
+)
 
 type RevealParams struct {
 	Theme               string
 	CodeTheme           string
+	Transition          string
+	NavigationMode      string
 	HorizontalSeparator string
 	VerticalSeparator   string
+	StyleSheets         []string
 }
 
 func (params *RevealParams) Load() {
 	params.Theme = viper.GetString("theme")
 	params.CodeTheme = viper.GetString("code-theme")
+	params.Transition = viper.GetString("transition")
+	params.NavigationMode = viper.GetString("navigationMode")
 	params.HorizontalSeparator = viper.GetString("horizontal-separator")
 	params.VerticalSeparator = viper.GetString("vertical-separator")
+	params.StyleSheets = viper.GetStringSlice("stylesheets")
 }