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
This commit is contained in:
Peter 2019-05-16 03:18:02 +02:00
parent a213f9cff5
commit bb66990c98
Signed by: prskr
GPG key ID: C1DB5D2E8DB512F9
7 changed files with 111 additions and 25 deletions

View file

@ -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({
controls: true,
progress: true,
history: true,
center: true,
slideNumber: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
markdown:{
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' }
]
});
{{ if (len .Reveal.StyleSheets) gt 0 }}
{{ range $idx, $style := .Reveal.StyleSheets }}
var additionalStyleSheet = document.createElement('link');
additionalStyleSheet.rel = 'stylesheet';
additionalStyleSheet.type = 'text/css';
additionalStyleSheet.href = '/local/{{- $style }}';
document.getElementsByTagName('head')[0].appendChild(additionalStyleSheet);
{{ end}}
{{ end }}
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>

View file

@ -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

7
examples/custom.css Normal file
View file

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

View file

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

View file

@ -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}");
}
```

View file

@ -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)")

View file

@ -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")
}