kslides

slideimg

A Kotlin DSL wrapper for reveal.js

👇

Slide Definition

 markdownSlide {
  id = "intro"
  content {
    """
    # kslides
    ![slideimg](images/slide-transparent.png)
 
    ### A Kotlin DSL wrapper for [reveal.js](https://revealjs.com)
    ### 👇
    Notes: This is a note for the opening slide 📝
    """
  }
}

A Markdown Slide

🍒

Use the arrow keys to navigate

Press ESC to see the presentation overview

Press the down arrow to see the slide definition 👇

Slide Definition

 markdownSlide {
  id = "markdownslide"
  content {
    """
    # A Markdown Slide
    ## 🍒
    
    Use the arrow keys to navigate ${fragment(Effect.FADE_LEFT)}
    
    Press ESC to see the presentation overview ${fragment(Effect.FADE_LEFT)}
              
    Press the down arrow to see the slide definition 👇 ${fragment(Effect.FADE_LEFT)}
 
    Notes: This is a note for the Markdown slide 📝
    """
  }
}

An HTML Slide

🐦

Press S to see the speaker notes

Press M to see the menu

Press B or . to pause the presentation

Press the down arrow to see the slide definition 👇

Animated Code with an htmlSlide

 let planets = [
    {name: 'mars', diameter: 6779},
];

👇

Animated Code with an htmlSlide

 let planets = [
    {name: 'mars', diameter: 6779},
    {name: 'earth', diameter: 12742},
    {name: 'jupiter', diameter: 139820}
];

👇

Animated Code with an htmlSlide

 let circumferenceReducer = (c, planet) => {
    return c + planet.diameter * Math.PI;
};
 
let planets = [
    {name: 'mars', diameter: 6779},
    {name: 'earth', diameter: 12742},
    {name: 'jupiter', diameter: 139820}
];
 
let c = planets.reduce(circumferenceReducer, 0);

👇

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

Slide Definition

     dslSlide {
      slideConfig {
        backgroundIframe = "https://revealjs.com/backgrounds/#iframe-backgrounds"
      }
      content {
        div {
          style =
            """
              position: absolute; width: 40%; right: 0; 
              box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); 
              background-color: rgba(0, 0, 0, 0.9); 
              color: #fff; 
              padding: 20px; 
              font-size: 20px; 
              text-align: left;
            """
          h2 { +"Iframe Backgrounds" }
          p {
            +"""Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the
          page in the background."""
          }
        }
      }
    }
    // iframe end
 
    slideDefinition(slides, "iframe")
  }
 
  verticalSlides {
    // transition begin
    dslSlide {
      id = "transitions"
      content {
        h2 { +"Transitions" }
        p {
          +"You can select from different transitions, like:"
          br {}
          // The Transition enum includes all the built-in transitions
          Transition.values()
            .forEachIndexed { index, transition ->
              a { href = "?transition=${transition.name.toLower()}#/transitions"; +transition.name }
              if (index < Transition.values().size - 1)
                +"-"
            }
        }
      }
    }
    // transition end
 
    slideDefinition(slides, "transition")
  }
 
  verticalSlides {
    // themes begin
    dslSlide {
      id = "themes"
      content {
        h2 { +"Themes" }
        p {
          +"reveal.js comes with some built-in themes:"
          br {}
          // The Theme enum includes all the built in themes
          PresentationTheme.values()
            .forEachIndexed { index, theme ->
              a {
                href = "#/themes"
                onClick =
                  "document.getElementById('theme').setAttribute('href','dist/theme/${theme.name.toLower()}.css'); return false;"
                +theme.name
              }
              if (index < PresentationTheme.values().size - 1)
                +"-"
            }
        }
      }
    }
    // themes end
 
    slideDefinition(slides, "themes")
  }
 
  verticalSlides {
    // video1 begin
    dslSlide {
      slideConfig {
        backgroundVideo = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      }
 
      content {
        h1 { +"Video Backgrounds"; style = "color: red;" }
      }
    }
    // video1 end
 
    slideDefinition(slides, "video1")
  }
 
  verticalSlides {
 
    // webcontent begin
    dslSlide {
      content {
        h2 { +"Embedded Web Content" }
        iframe {
          src = "https://slides.com/news/auto-animate/embed"
          height = "540"
          width = "700"
          style = "border:none;"
        }
      }
    }
    // webcontent end
 
    slideDefinition(slides, "webcontent")
  }
 
  verticalSlides {
    // other begin
    markdownSlide {
      id = "features"
      content {
        """
        ## Other Features 🚡
        
        [Layouts](/layouts.html) 
     
        [Fragments](/fragments.html) 
                    
        [Backgrounds](/backgrounds.html) 
 
        [Multi-Columns DSL Slides](/multicols.html) 
 
        [Multi-Slide Markdown Slides](/multislide.html) 
 
        👇 ${fragment()}
 
        """
      }
    }
    // other end
 
    slideDefinition(slides, "other")
  }
 
  verticalSlides {
    // navigation begin
    markdownSlide {
      content {
        """
        ## Presentation Navigation 🦊 
        
        [Go to the previous slide](#/features) ${fragment()}
     
        [Go to the next slide](#/lastslide) ${fragment()}
        
        [Go to the presentation source on GitHub](https://github.com/kslides/kslides/blob/master/kslides-examples/src/main/kotlin/Slides.kt) ${fragment()}
        """
      }
    }
    // navigation end
 
    slideDefinition(slides, "navigation")
  }
 
  verticalSlides {
    // slidedef begin
    slideDefinition(
      "kslides-core/src/main/kotlin/com/kslides/Presentation.kt",
      "slideDefinition",
      title = "Slide Definition Source",
      id = "lastslide"
    )
    // slidedef end
 
    slideDefinition(slides, "slidedef")
  }
}
 
presentation {
  path = "layouts.html"
 
  presentationConfig {
    topRightHref = "/#/features"
    topRightTitle = "Go back to main presentation"
    topRightText = "🔙"
  }
 
  verticalSlides {
    // layouts begin
    dslSlide {
      content {
        h2 { +"Layout Examples" }
        unorderedList(
          { listHref("#/fit-text", "Fit Text") },
          { listHref("#/stretch", "Stretch") },
          { listHref("#/stack", "Stack") },
          { listHref("#/hstack", "HStack") },
          { listHref("#/vstack", "VStack") },
        )
        p { +"👇" }
      }
    }
    // layouts end
 
    slideDefinition(slides, "layouts")
  }
 
  verticalSlides {
    dslSlide {
      id = "fit-text"
      content {
        h2 { +"Fit Text" }
        p { +"Resizes text to be as large as possible within its container. 👇" }
        codeSnippet {
          language = "kotlin"
          highlightPattern = "none"
          copyButton = false
          +include(slides, "3", beginToken = "ft1 begin", endToken = "ft1 end")
        }
        p { +"or" }
        pre {
          attributes["data-cc"] = "false"
          code("html") {
            attributes["data-trim"] = ""
            h2("r-fit-text") { +"FIT" }
          }
        }
      }
    }
 
    // ft1 begin
    dslSlide {
      content {
        h2("r-fit-text") { +"FIT" }
      }
    }
    // ft1 end
 
    slideDefinition(slides, "ft1")
 
    // fit-text2 begin
    dslSlide {
      content {
        h2("r-fit-text") { +"HELLO WORLD" }
        h2("r-fit-text") { +"BOTH THESE TITLES USE FIT-TEXT" }
      }
    }
    // fit-text2 end
 
    slideDefinition(slides, "fit-text2")
  }
 
  verticalSlides {
    dslSlide {
      id = "stretch"
      content {
        h2 { +"Stretch" }
        p { +"Makes an element as tall as possible while remaining within the slide bounds. 👇" }
        codeSnippet {
          language = "kotlin"
          highlightPattern = "none"
          copyButton = false
          +include(slides, "3-7", beginToken = "stretch begin", endToken = "stretch end")
        }
        p { +"or" }
        pre {
          attributes["data-cc"] = "false"
          code("html") {
            attributes["data-trim"] = ""
            h2 { +"Stretch Example" }
            img(classes = "r-stretch") {
              src = "revealjs/assets/image2.png"
            }
            p { +"Image byline" }
            p { +"👇" }
          }
        }
      }
    }
 
    // stretch begin
    dslSlide {
      content {
        h2 { +"Stretch Example" }
        img(classes = "r-stretch") {
          src = "revealjs/assets/image2.png"
        }
        p { +"Image byline" }
        p { +"👇" }
      }
    }
    // stretch end
 
    slideDefinition(slides, "stretch")
  }
 
  verticalSlides {
    dslSlide {
      id = "stack"
      content {
        h2 { +"Stack" }
        p { +"Stacks multiple elements on top of each other, for use with fragments. 👇" }
        pre {
          code("kotlin") {
            attributes["data-trim"] = "true"
            +include(slides, "3-21", beginToken = "stack1 begin", endToken = "stack1 end")
          }
        }
      }
    }
 
    // stack1 begin
    dslSlide {
      content {
        h2 { +"Stack Example" }
        div("r-stack") {
          p("fragment fade-in-then-out") { +"One" }
          p("fragment fade-in-then-out") { +"Two" }
          p("fragment fade-in-then-out") { +"Three" }
          p("fragment fade-in-then-out") { +"Four" }
        }
        div("r-stack") {
          val kitten = "https://placekitten.com"
          img(classes = "fragment") {
            src = "$kitten/450/300"; width = "450"; height = "300"
          }
          img(classes = "fragment") {
            src = "$kitten/300/450"; width = "300"; height = "450"
          }
          img(classes = "fragment") {
            src = "$kitten/400/400"; width = "400"; height = "400"
          }
        }
      }
    }
    // stack1 end
 
    slideDefinition(slides, "stack1")
  }
 
  verticalSlides {
    dslSlide {
      id = "hstack"
      content {
        h2 { +"HStack 👇" }
        p { +"Stacks multiple elements horizontally." }
        pre {
          code("kotlin") {
            attributes["data-trim"] = "true"
            +include(slides, "3-8", beginToken = "hstack begin", endToken = "hstack end")
          }
        }
      }
    }
 
    // hstack begin
    dslSlide {
      content {
        h2 { +"HStack Example 👇" }
        div("r-hstack") {
          p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
          p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
          p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
        }
      }
    }
    // hstack end
 
    slideDefinition(slides, "hstack")
  }
 
  verticalSlides {
    dslSlide {
      id = "vstack"
      content {
        h2 { +"VStack 👇" }
        p { +"Stacks multiple elements vertically." }
        pre {
          code("kotlin") {
            attributes["data-trim"] = "true"
            +include(slides, "3-8", beginToken = "vstack begin", endToken = "vstack end")
          }
        }
      }
    }
 
    // vstack begin
    dslSlide {
      content {
        h2 { +"VStack Example 👇" }
        div("r-vstack") {
          p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
          p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
          p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
        }
      }
    }
    // vstack end
 
    slideDefinition(slides, "vstack")
  }
}
 
presentation {
  path = "fragments.html"
 
  presentationConfig {
    topRightHref = "/#/features"
    topRightTitle = "Go to main presentation"
    topRightText = "🔙"
  }
 
  verticalSlides {
    // fragment-styles begin
    dslSlide {
      content {
        h2 { +"Fragment Styles" }
        p { +"There are different types of fragments, like: 👇" }
        p("fragment grow") { +"grow" }
        p("fragment shrink") { +"shrink" }
        p("fragment fade-out") { +"fade-out" }
        p {
          span("fragment fade-right") { style = "display: inline-block;"; +"fade-right," }
          +" "
          span("fragment fade-up") { style = "display: inline-block;"; +"fade-up," }
          +" "
          span("fragment fade-down") { style = "display: inline-block;"; +"fade-down, " }
          +" "
          span("fragment fade-left") { style = "display: inline-block;"; +"fade-left" }
        }
        p("fragment fade-in-then-out") { +"fade-in-then-out" }
        p("fragment fade-in-then-semi-out") { +"fade-in-then-semi-out" }
        p {
          +"Highlight "
          span("fragment highlight-red") { +"red " }
          span("fragment highlight-blue") { +"blue " }
          span("fragment highlight-green") { +"green " }
        }
      }
    }
    // fragment-styles end
 
    slideDefinition(slides, "fragment-styles")
  }
 
  verticalSlides {
 
    // fragment-md begin
    markdownSlide {
      content {
        """
        ## Markdown Slide with Fragments
 
        highlight-red ${fragment(Effect.HIGHLIGHT_RED)}
        
        fade-in-then-semi-out ${fragment(Effect.FADE_IN_THEN_SEMI_OUT)}
        
        fade-left ${fragment(Effect.FADE_LEFT)}
 
        fade-right ${fragment(Effect.FADE_RIGHT)}
        
        fade-up 👇 ${fragment(Effect.FADE_UP)}
       
        """
      }
    }
    // fragment-md end
 
    slideDefinition(slides, "fragment-md")
  }
}
 
presentation {
  path = "backgrounds.html"
 
  presentationConfig {
    topRightHref = "/#/features"
    topRightTitle = "Go to main presentation"
    topRightText = "🔙"
 
    theme = PresentationTheme.SERIF
  }
 
  verticalSlides {
    // background1 begin
    dslSlide {
      slideConfig {
        background = "#00ffff"
      }
      content {
        h2 { +"data-background: #00ffff" }
      }
    }
    // background1 end
 
    slideDefinition(slides, "background1")
  }
 
  verticalSlides {
    // background2 begin
    dslSlide {
      slideConfig {
        background = "#bb00bb"
      }
      content {
        h2 { +"data-background: #bb00bb" }
      }
    }
    // background2 end
 
    slideDefinition(slides, "background2")
  }
 
  verticalSlides {
    // background3 begin
    dslSlide {
      slideConfig {
        backgroundColor = "lightblue"
      }
      content {
        h2 { +"data-background-color: lightblue" }
      }
    }
    // background3 end
 
    slideDefinition(slides, "background3")
  }
 
  verticalSlides {
    // background4 begin
    dslSlide {
      slideConfig {
        background = "#ff0000"
      }
      content {
        h2 { +"data-background: #ff0000" }
      }
    }
 
    dslSlide {
      slideConfig {
        background = "rgba(0, 0, 0, 0.2)"
      }
      content {
        h2 { +"data-background: rgba(0, 0, 0, 0.2)" }
      }
    }
 
    dslSlide {
      slideConfig {
        background = "salmon"
      }
      content {
        h2 { +"data-background: salmon" }
      }
    }
    // background4 end
 
    slideDefinition(slides, "background4")
  }
 
  // vertical-config begin
  verticalSlides {
    slideConfig {
      background = "rgba(0, 100, 100, 0.2)"
    }
 
    dslSlide {
      content {
        h2 { +"Background applied to stack (1/2)" }
      }
    }
 
    dslSlide {
      content {
        h2 { +"Background applied to stack (2/2)" }
      }
    }
 
    dslSlide {
      slideConfig {
        background = "rgb(66, 66, 66)"
      }
      content {
        h2 { +"Background applied to slide inside of stack" }
      }
    }
 
    slideDefinition(slides, "vertical-config")
  }
  // vertical-config end
 
  verticalSlides {
    // background-image begin
    dslSlide {
      slideConfig {
        backgroundTransition = Transition.SLIDE
        background = "revealjs/assets/image1.png"
      }
      content {
        h2 { +"Background image" }
      }
    }
    // background-image end
 
    slideDefinition(slides, "background-image")
  }
 
  verticalSlides {
    // repeat begin
    dslSlide {
      slideConfig {
        background = "revealjs/assets/image2.png"
        backgroundSize = "100px"
        backgroundRepeat = "repeat"
        backgroundColor = "#111"
      }
      content {
        h2 { +"Background repeat" }
      }
    }
    // repeat end
 
    slideDefinition(slides, "repeat")
  }
 
  verticalSlides {
    // background-video begin
    dslSlide {
      slideConfig {
        val aws = "https://s3.amazonaws.com/static.slid.es/site/homepage/v1"
        backgroundVideo = "$aws/homepage-video-editor.mp4,$aws/homepage-video-editor.webm"
      }
      content {
        h2 { +"Video background" }
      }
    }
    // background-video end
 
    slideDefinition(slides, "background-video")
  }
 
  verticalSlides {
    // background-iframe begin
    dslSlide {
      slideConfig {
        backgroundIframe =
          "https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000"
      }
      content {
        h2 { +"Iframe background" }
      }
    }

	htmlSlide {
	id = "htmlslide"
	content {
	"""
	<h1>An HTML Slide</h1>
	<h2>🐦</h2>
	<p class="fragment fade-up">Press S to see the speaker notes</p>
	<p class="fragment fade-up">Press M to see the menu</p>
	<p class="fragment fade-up">Press B or . to pause the presentation</p>
	<p class="fragment fade-up">Press the down arrow to see the slide definition 👇</p>

	<aside class="notes">
	This is a note for the HTML slide 📝
	</aside>
	"""
	}
	}

	dslSlide {
	content {
	h1 { +"An HTML DSL Slide" }
	h2 { +"👀" }
	p("fragment fade-right") { +"Press CTRL+Shift+F to search all the slides" }
	p("fragment fade-right") { +"Press Alt+click to zoom in on elements" }
	p("fragment fade-right") { +"Press the down arrow to see the slide definition 👇" }
	notes { +"This is a note for the DSL slide 📝" }
	}
	}

	package content

	fun main() {
	for (i in (0..5)) {
	println("Hello World $i")
	}
	}

	package content

	fun main() {
	for (i in (0..5)) {
	println("Hello World $i")
	}
	}

	package content

	fun main() {
	for (i in (0..5)) {
	println("Hello World $i")
	}
	}

	markdownSlide {
	id = "intro"
	content {
	"""
	# kslides
	![slideimg](images/slide-transparent.png)

	### A Kotlin DSL wrapper for [reveal.js](https://revealjs.com)
	### 👇
	Notes: This is a note for the opening slide 📝
	"""
	}
	}

	markdownSlide {
	id = "markdownslide"
	content {
	"""
	# A Markdown Slide
	## 🍒

	Use the arrow keys to navigate ${fragment(Effect.FADE_LEFT)}

	Press ESC to see the presentation overview ${fragment(Effect.FADE_LEFT)}

	Press the down arrow to see the slide definition 👇 ${fragment(Effect.FADE_LEFT)}

	Notes: This is a note for the Markdown slide 📝
	"""
	}
	}

	markdownSlide {
	content {
	"""
	## Highlighted Code with a markdownSlide
	```kotlin [\|3,7\|4,6\|5\|4-6]
	${include("kslides-examples/src/main/kotlin/content/HelloWorldK.kt")}
	```
	### 👇
	Note: This slide shows code highlights. You can specify the lines you want to highlight.
	"""
	}
	}

	dslSlide {
	content {
	h2 { +"Highlighted Code with a dslSlide" }
	val file = "kslides-examples/src/main/kotlin/content/HelloWorldK.kt"
	codeSnippet {
	language = "kotlin"
	highlightPattern = "[\|3,7\|4,6\|5\|4-6]"
	+include(file)
	}
	h3 { +"👇" }
	aside("notes") {
	+"This slide shows highlighted code. You can specify the lines you want to highlight."
	}
	}
	}

	let planets = [
	{name: 'mars', diameter: 6779},
	{name: 'earth', diameter: 12742},
	{name: 'jupiter', diameter: 139820}
	];

	let circumferenceReducer = (c, planet) => {
	return c + planet.diameter * Math.PI;
	};

	let planets = [
	{name: 'mars', diameter: 6779},
	{name: 'earth', diameter: 12742},
	{name: 'jupiter', diameter: 139820}
	];

	let c = planets.reduce(circumferenceReducer, 0);

	// A for loop generates a series of slides, each with a different set of lines
	// Uses the same line number syntax used by revealjs: https://revealjs.com/code/
	for (linePattern in "[5,6,9\|5-9\|]".toLinePatterns())
	dslSlide {
	autoAnimate = true
	content {
	h2 { +"Animated Code with a dslSlide" }
	val file = "kslides-examples/src/main/kotlin/content/assign.js"
	codeSnippet {
	language = "javascript"
	dataId = "code-animation"
	+include(file, linePattern)
	}
	h3 { +"👇" }
	aside("notes") {
	+"This slide shows animated code highlights."
	}
	}
	}

	dslSlide {
	content {
	h2 { +"Kotlin Playground Support" }
	playground("$pg/HelloWorld.kt") {
	args = "1 2 3"
	}
	}
	}

	dslSlide {
	content {
	h2 { +"Playground with Additional Code" }
	playground("$pg/HelloPets.kt", "$pg/Cat.kt", "$pg/Dog.kt") {
	theme = PlaygroundTheme.IDEA
	}
	}
	}

	dslSlide {
	content {
	h2 { +"Playground Using JUnit" }
	small {
	+"( Replace TODO() with: "
	em { +"it%2==0" }
	+" )"
	}
	playground("$pg/TestLambdas.kt") {
	height = "250px"
	dataTargetPlatform = TargetPlatform.JUNIT
	}
	}
	}

	dslSlide {
	content {
	h2 { +"Playground Support for other Languages" }
	playground("kslides-examples/src/main/kotlin/content/helloworld.html") {
	theme = PlaygroundTheme.DARCULA
	mode = PlaygroundMode.XML
	}
	p { +"Read-only languages include: JS, Java, Groovy, XML/HTML, C, Shell, Swift, Obj-C" }
	}
	}

	dslSlide {
	content {
	h2 { +"A plotly-kt Plot" }
	plotly(
	dimensions = 801 by 400,
	iframeConfig = PlotlyIframeConfig {
	style = "width: 85%; border: 2px solid #586E75;"
	height = "415px"
	},
	plotlyConfig = PlotlyConfig { withEditorButton() }
	) {
	layout {
	title = "A Simple Random Plot"
	xaxis.title = "x Axis Title"
	yaxis.title = "y Axis Title"
	}
	scatter {
	x.numbers = 0..400
	y.numbers = x.numbers.map { Random.nextDouble(10.0) }
	}
	}
	}
	}

	dslSlide {
	content {
	h2 { +"A plotly-kt Histogram" }
	plotly(
	dimensions = 608 by 484,
	iframeConfig = PlotlyIframeConfig {
	style = "width: 65%; border: 2px solid #586E75;"
	height = "500px"
	},
	plotlyConfig = PlotlyConfig { withEditorButton() }
	) {
	layout {
	title = "Horizontal Histogram"
	bargap = 0.1
	xaxis {
	title = "Count"
	}
	yaxis {
	title = "Value"
	ticklen = 3
	tickcolor("#FFF")
	}
	}

	histogram {
	y.set(listOf(1, 2, 2, 3, 2, 1, 4, 4))
	marker {
	colors(listOf(T10.RED, T10.GREEN, T10.ORANGE, T10.BLUE))
	}
	}
	}
	}
	}

	dslSlide {
	content {
	h2 { +"A plotly-kt 3D Surface Plot" }
	plotly(
	dimensions = 503 by 484,
	iframeConfig = PlotlyIframeConfig {
	style = "width: 54%; border: 2px solid #586E75;"
	height = "500px"
	},
	plotlyConfig = PlotlyConfig { withEditorButton() }
	) {
	layout {
	title = "A 3D Surface Plot"
	}
	fun l(vararg numbers: Number) = numbers.map { it.asValue() }.asValue()
	trace {
	z.value = listOf(
	l(8.83, 8.89, 8.81, 8.87, 8.9, 8.87),
	l(8.89, 8.94, 8.85, 8.94, 8.96, 8.92),
	l(8.84, 8.9, 8.82, 8.92, 8.93, 8.91),
	l(8.79, 8.85, 8.79, 8.9, 8.94, 8.92),
	l(8.79, 8.88, 8.81, 8.9, 8.95, 8.92),
	l(8.8, 8.82, 8.78, 8.91, 8.94, 8.92),
	l(8.75, 8.78, 8.77, 8.91, 8.95, 8.92),
	l(8.8, 8.8, 8.77, 8.91, 8.95, 8.94),
	l(8.74, 8.81, 8.76, 8.93, 8.98, 8.99),
	l(8.89, 8.99, 8.92, 9.1, 9.13, 9.11),
	l(8.97, 8.97, 8.91, 9.09, 9.11, 9.11),
	l(9.04, 9.08, 9.05, 9.25, 9.28, 9.27),
	l(9, 9.01, 9, 9.2, 9.23, 9.2),
	l(8.99, 8.99, 8.98, 9.18, 9.2, 9.19),
	l(8.93, 8.97, 8.97, 9.18, 9.2, 9.18)
	).asValue()
	configure {
	"type" put "surface"
	}
	}
	}
	}
	}

	dslSlide {
	content {
	h2 { +"Playground Using Kotlin/JS" }
	playground("$pg/JsPlayground.txt") {
	theme = PlaygroundTheme.IDEA
	dataTargetPlatform = TargetPlatform.JS
	dataJsLibs = "https://unpkg.com/moment@2"
	}
	}
	}

	dslSlide {
	content {
	h2 { +"A plotly-kt 3D Scatter Plot" }
	plotly(
	dimensions = 503 by 484,
	iframeConfig = PlotlyIframeConfig {
	style = "width: 54%; border: 2px solid #586E75;"
	height = "500px"
	},
	plotlyConfig = PlotlyConfig { withEditorButton() }
	) {
	layout {
	title = "A 3D Scatter Plot"
	}
	trace {
	configure {
	"type" put "scatter3d"
	}
	x(1, 2, 3)
	y(1, 2, 3)
	z(1, 2, 3)
	}
	}
	}
	}

	dslSlide {
	content {
	h2 { +"A plotly-kt Heatmap" }
	plotly(
	dimensions = 503 by 484,
	iframeConfig = PlotlyIframeConfig {
	style = "width: 54%; border: 2px solid #586E75;"
	height = "500px"
	},
	plotlyConfig = PlotlyConfig { withEditorButton() }
	) {
	layout {
	title = "Red Heatmap"
	}
	heatmap {
	x.set(listOf(1, 2, 3, 4, 5))
	y.set(listOf(6, 7, 8, 9, 10))
	z.set((1..25).chunked(5))
	colorscale = Value.of("Reds")
	}
	}
	}
	}

	listOf("One", "Two", "Three", "Four", "👇")
	.permuteBy(
	listOf(0, 1, 4),
	listOf(0, 1, 2),
	listOf(0, 1, 2, 3),
	listOf(1, 0, 3, 2),
	listOf(1, 2, 0, 3),
	listOf(1, 2, 3, 0),
	listOf(0, 3, 2, 1),
	)
	.forEach { items ->
	dslSlide {
	autoAnimate = true
	content {
	h2 { +"Animated List Items" }
	unorderedList(*items.toTypedArray())
	}
	}
	}

	dslSlide {
	content {
	h2 { +"YouTube Content" }
	iframe {
	width = "560"
	height = "315"
	src = "https://www.youtube.com/embed/X8Az9X0mwUE?start=163"
	title = "YouTube video player"
	attributes["frameborder"] = "0"
	attributes["allow"] = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
	attributes["allowfullscreen"] = "true"
	}
	}
	}

	dslSlide {
	id = "tables"
	content {
	h2 { +"Tables" }
	table {
	thead {
	headRow("Item", "Value", "Quantity")
	}
	tbody {
	bodyRow("Apples", "$1", "7")
	bodyRow("Lemonade", "$2", "18")
	// Or use the verbose form
	tr {
	td { +"Bread" }
	td { +"$3" }
	td { +"2" }
	}
	}
	}
	}
	}

	dslSlide {
	slideConfig {
	backgroundIframe = "https://revealjs.com/backgrounds/#iframe-backgrounds"
	}
	content {
	div {
	style =
	"""
	position: absolute; width: 40%; right: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2);
	background-color: rgba(0, 0, 0, 0.9);
	color: #fff;
	padding: 20px;
	font-size: 20px;
	text-align: left;
	"""
	h2 { +"Iframe Backgrounds" }
	p {
	+"""Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the
	page in the background."""
	}
	}
	}
	}
	// iframe end

	slideDefinition(slides, "iframe")
	}

	verticalSlides {
	// transition begin
	dslSlide {
	id = "transitions"
	content {
	h2 { +"Transitions" }
	p {
	+"You can select from different transitions, like:"
	br {}
	// The Transition enum includes all the built-in transitions
	Transition.values()
	.forEachIndexed { index, transition ->
	a { href = "?transition=${transition.name.toLower()}#/transitions"; +transition.name }
	if (index < Transition.values().size - 1)
	+"-"
	}
	}
	}
	}
	// transition end

	slideDefinition(slides, "transition")
	}

	verticalSlides {
	// themes begin
	dslSlide {
	id = "themes"
	content {
	h2 { +"Themes" }
	p {
	+"reveal.js comes with some built-in themes:"
	br {}
	// The Theme enum includes all the built in themes
	PresentationTheme.values()
	.forEachIndexed { index, theme ->
	a {
	href = "#/themes"
	onClick =
	"document.getElementById('theme').setAttribute('href','dist/theme/${theme.name.toLower()}.css'); return false;"
	+theme.name
	}
	if (index < PresentationTheme.values().size - 1)
	+"-"
	}
	}
	}
	}
	// themes end

	slideDefinition(slides, "themes")
	}

	verticalSlides {
	// video1 begin
	dslSlide {
	slideConfig {
	backgroundVideo = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
	}

	content {
	h1 { +"Video Backgrounds"; style = "color: red;" }
	}
	}
	// video1 end

	slideDefinition(slides, "video1")
	}

	verticalSlides {

	// webcontent begin
	dslSlide {
	content {
	h2 { +"Embedded Web Content" }
	iframe {
	src = "https://slides.com/news/auto-animate/embed"
	height = "540"
	width = "700"
	style = "border:none;"
	}
	}
	}
	// webcontent end

	slideDefinition(slides, "webcontent")
	}

	verticalSlides {
	// other begin
	markdownSlide {
	id = "features"
	content {
	"""
	## Other Features 🚡

	[Layouts](/layouts.html)

	[Fragments](/fragments.html)

	[Backgrounds](/backgrounds.html)

	[Multi-Columns DSL Slides](/multicols.html)

	[Multi-Slide Markdown Slides](/multislide.html)

	👇 ${fragment()}

	"""
	}
	}
	// other end

	slideDefinition(slides, "other")
	}

	verticalSlides {
	// navigation begin
	markdownSlide {
	content {
	"""
	## Presentation Navigation 🦊

	[Go to the previous slide](#/features) ${fragment()}

	[Go to the next slide](#/lastslide) ${fragment()}

	[Go to the presentation source on GitHub](https://github.com/kslides/kslides/blob/master/kslides-examples/src/main/kotlin/Slides.kt) ${fragment()}
	"""
	}
	}
	// navigation end

	slideDefinition(slides, "navigation")
	}

	verticalSlides {
	// slidedef begin
	slideDefinition(
	"kslides-core/src/main/kotlin/com/kslides/Presentation.kt",
	"slideDefinition",
	title = "Slide Definition Source",
	id = "lastslide"
	)
	// slidedef end

	slideDefinition(slides, "slidedef")
	}
	}

	presentation {
	path = "layouts.html"

	presentationConfig {
	topRightHref = "/#/features"
	topRightTitle = "Go back to main presentation"
	topRightText = "🔙"
	}

	verticalSlides {
	// layouts begin
	dslSlide {
	content {
	h2 { +"Layout Examples" }
	unorderedList(
	{ listHref("#/fit-text", "Fit Text") },
	{ listHref("#/stretch", "Stretch") },
	{ listHref("#/stack", "Stack") },
	{ listHref("#/hstack", "HStack") },
	{ listHref("#/vstack", "VStack") },
	)
	p { +"👇" }
	}
	}
	// layouts end

	slideDefinition(slides, "layouts")
	}

	verticalSlides {
	dslSlide {
	id = "fit-text"
	content {
	h2 { +"Fit Text" }
	p { +"Resizes text to be as large as possible within its container. 👇" }
	codeSnippet {
	language = "kotlin"
	highlightPattern = "none"
	copyButton = false
	+include(slides, "3", beginToken = "ft1 begin", endToken = "ft1 end")
	}
	p { +"or" }
	pre {
	attributes["data-cc"] = "false"
	code("html") {
	attributes["data-trim"] = ""
	h2("r-fit-text") { +"FIT" }
	}
	}
	}
	}

	// ft1 begin
	dslSlide {
	content {
	h2("r-fit-text") { +"FIT" }
	}
	}
	// ft1 end

	slideDefinition(slides, "ft1")

	// fit-text2 begin
	dslSlide {
	content {
	h2("r-fit-text") { +"HELLO WORLD" }
	h2("r-fit-text") { +"BOTH THESE TITLES USE FIT-TEXT" }
	}
	}
	// fit-text2 end

	slideDefinition(slides, "fit-text2")
	}

	verticalSlides {
	dslSlide {
	id = "stretch"
	content {
	h2 { +"Stretch" }
	p { +"Makes an element as tall as possible while remaining within the slide bounds. 👇" }
	codeSnippet {
	language = "kotlin"
	highlightPattern = "none"
	copyButton = false
	+include(slides, "3-7", beginToken = "stretch begin", endToken = "stretch end")
	}
	p { +"or" }
	pre {
	attributes["data-cc"] = "false"
	code("html") {
	attributes["data-trim"] = ""
	h2 { +"Stretch Example" }
	img(classes = "r-stretch") {
	src = "revealjs/assets/image2.png"
	}
	p { +"Image byline" }
	p { +"👇" }
	}
	}
	}
	}

	// stretch begin
	dslSlide {
	content {
	h2 { +"Stretch Example" }
	img(classes = "r-stretch") {
	src = "revealjs/assets/image2.png"
	}
	p { +"Image byline" }
	p { +"👇" }
	}
	}
	// stretch end

	slideDefinition(slides, "stretch")
	}

	verticalSlides {
	dslSlide {
	id = "stack"
	content {
	h2 { +"Stack" }
	p { +"Stacks multiple elements on top of each other, for use with fragments. 👇" }
	pre {
	code("kotlin") {
	attributes["data-trim"] = "true"
	+include(slides, "3-21", beginToken = "stack1 begin", endToken = "stack1 end")
	}
	}
	}
	}

	// stack1 begin
	dslSlide {
	content {
	h2 { +"Stack Example" }
	div("r-stack") {
	p("fragment fade-in-then-out") { +"One" }
	p("fragment fade-in-then-out") { +"Two" }
	p("fragment fade-in-then-out") { +"Three" }
	p("fragment fade-in-then-out") { +"Four" }
	}
	div("r-stack") {
	val kitten = "https://placekitten.com"
	img(classes = "fragment") {
	src = "$kitten/450/300"; width = "450"; height = "300"
	}
	img(classes = "fragment") {
	src = "$kitten/300/450"; width = "300"; height = "450"
	}
	img(classes = "fragment") {
	src = "$kitten/400/400"; width = "400"; height = "400"
	}
	}
	}
	}
	// stack1 end

	slideDefinition(slides, "stack1")
	}

	verticalSlides {
	dslSlide {
	id = "hstack"
	content {
	h2 { +"HStack 👇" }
	p { +"Stacks multiple elements horizontally." }
	pre {
	code("kotlin") {
	attributes["data-trim"] = "true"
	+include(slides, "3-8", beginToken = "hstack begin", endToken = "hstack end")
	}
	}
	}
	}

	// hstack begin
	dslSlide {
	content {
	h2 { +"HStack Example 👇" }
	div("r-hstack") {
	p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
	p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
	p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
	}
	}
	}
	// hstack end

	slideDefinition(slides, "hstack")
	}

	verticalSlides {
	dslSlide {
	id = "vstack"
	content {
	h2 { +"VStack 👇" }
	p { +"Stacks multiple elements vertically." }
	pre {
	code("kotlin") {
	attributes["data-trim"] = "true"
	+include(slides, "3-8", beginToken = "vstack begin", endToken = "vstack end")
	}
	}
	}
	}

	// vstack begin
	dslSlide {
	content {
	h2 { +"VStack Example 👇" }
	div("r-vstack") {
	p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
	p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
	p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
	}
	}
	}
	// vstack end

	slideDefinition(slides, "vstack")
	}
	}

	presentation {
	path = "fragments.html"

	presentationConfig {
	topRightHref = "/#/features"
	topRightTitle = "Go to main presentation"
	topRightText = "🔙"
	}

	verticalSlides {
	// fragment-styles begin
	dslSlide {
	content {
	h2 { +"Fragment Styles" }
	p { +"There are different types of fragments, like: 👇" }
	p("fragment grow") { +"grow" }
	p("fragment shrink") { +"shrink" }
	p("fragment fade-out") { +"fade-out" }
	p {
	span("fragment fade-right") { style = "display: inline-block;"; +"fade-right," }
	+" "
	span("fragment fade-up") { style = "display: inline-block;"; +"fade-up," }
	+" "
	span("fragment fade-down") { style = "display: inline-block;"; +"fade-down, " }
	+" "
	span("fragment fade-left") { style = "display: inline-block;"; +"fade-left" }
	}
	p("fragment fade-in-then-out") { +"fade-in-then-out" }
	p("fragment fade-in-then-semi-out") { +"fade-in-then-semi-out" }
	p {
	+"Highlight "
	span("fragment highlight-red") { +"red " }
	span("fragment highlight-blue") { +"blue " }
	span("fragment highlight-green") { +"green " }
	}
	}
	}
	// fragment-styles end

	slideDefinition(slides, "fragment-styles")
	}

	verticalSlides {

	// fragment-md begin
	markdownSlide {
	content {
	"""
	## Markdown Slide with Fragments

	highlight-red ${fragment(Effect.HIGHLIGHT_RED)}

	fade-in-then-semi-out ${fragment(Effect.FADE_IN_THEN_SEMI_OUT)}

	fade-left ${fragment(Effect.FADE_LEFT)}

	fade-right ${fragment(Effect.FADE_RIGHT)}

	fade-up 👇 ${fragment(Effect.FADE_UP)}

	"""
	}
	}
	// fragment-md end

	slideDefinition(slides, "fragment-md")
	}
	}

	presentation {
	path = "backgrounds.html"

	presentationConfig {
	topRightHref = "/#/features"
	topRightTitle = "Go to main presentation"
	topRightText = "🔙"

	theme = PresentationTheme.SERIF
	}

	verticalSlides {
	// background1 begin
	dslSlide {
	slideConfig {
	background = "#00ffff"
	}
	content {
	h2 { +"data-background: #00ffff" }
	}
	}
	// background1 end

	slideDefinition(slides, "background1")
	}

	verticalSlides {
	// background2 begin
	dslSlide {
	slideConfig {
	background = "#bb00bb"
	}
	content {
	h2 { +"data-background: #bb00bb" }
	}
	}
	// background2 end

	slideDefinition(slides, "background2")
	}

	verticalSlides {
	// background3 begin
	dslSlide {
	slideConfig {
	backgroundColor = "lightblue"
	}
	content {
	h2 { +"data-background-color: lightblue" }
	}
	}
	// background3 end

	slideDefinition(slides, "background3")
	}

	verticalSlides {
	// background4 begin
	dslSlide {
	slideConfig {
	background = "#ff0000"
	}
	content {
	h2 { +"data-background: #ff0000" }
	}
	}

	dslSlide {
	slideConfig {
	background = "rgba(0, 0, 0, 0.2)"
	}
	content {
	h2 { +"data-background: rgba(0, 0, 0, 0.2)" }
	}
	}

	dslSlide {
	slideConfig {
	background = "salmon"
	}
	content {
	h2 { +"data-background: salmon" }
	}
	}
	// background4 end

	slideDefinition(slides, "background4")
	}

	// vertical-config begin
	verticalSlides {
	slideConfig {
	background = "rgba(0, 100, 100, 0.2)"
	}

	dslSlide {
	content {
	h2 { +"Background applied to stack (1/2)" }
	}
	}

	dslSlide {
	content {
	h2 { +"Background applied to stack (2/2)" }
	}
	}

	dslSlide {
	slideConfig {
	background = "rgb(66, 66, 66)"
	}
	content {
	h2 { +"Background applied to slide inside of stack" }
	}
	}

	slideDefinition(slides, "vertical-config")
	}
	// vertical-config end

	verticalSlides {
	// background-image begin
	dslSlide {
	slideConfig {
	backgroundTransition = Transition.SLIDE
	background = "revealjs/assets/image1.png"
	}
	content {
	h2 { +"Background image" }
	}
	}
	// background-image end

	slideDefinition(slides, "background-image")
	}

	verticalSlides {
	// repeat begin
	dslSlide {
	slideConfig {
	background = "revealjs/assets/image2.png"
	backgroundSize = "100px"
	backgroundRepeat = "repeat"
	backgroundColor = "#111"
	}
	content {
	h2 { +"Background repeat" }
	}
	}
	// repeat end

	slideDefinition(slides, "repeat")
	}

	verticalSlides {
	// background-video begin
	dslSlide {
	slideConfig {
	val aws = "https://s3.amazonaws.com/static.slid.es/site/homepage/v1"
	backgroundVideo = "$aws/homepage-video-editor.mp4,$aws/homepage-video-editor.webm"
	}
	content {
	h2 { +"Video background" }
	}
	}
	// background-video end

	slideDefinition(slides, "background-video")
	}

	verticalSlides {
	// background-iframe begin
	dslSlide {
	slideConfig {
	backgroundIframe =
	"https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000"
	}
	content {
	h2 { +"Iframe background" }
	}
	}

	fun slideDefinition(
	source: String,
	token: String,
	title: String = "Slide Definition",
	highlightPattern: String = "[]",
	id: String = "",
	language: String = "kotlin",
	) {
	markdownSlide {
	if (id.isNotBlank()) this.id = id
	content {
	"""
	## $title
	```$language $highlightPattern
	${include(source, beginToken = "$token begin", endToken = "$token end")}
	```
	"""
	}
	}
	}