Updated Demo

.github/workflows/documentation.yml → .github/workflows/pages.yml

@@ -3,9 +3,7 @@ name: Publish documentation to Github Pages
 on:
   push:
     branches:
-      - 'main'
-    paths:
-      - 'docs/**.adoc'
+      - 'release'
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -29,14 +27,28 @@ jobs:
         uses: actions/checkout@v4
       - name: Configure Pages
         uses: actions/configure-pages@v3
-      - name: Install Node.js
+
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
       - name: Install Antora
         run: npm install
-      - name: Generate Site
+      - name: Generate Documentation Site
         run: npx antora antora-playbook.yml
+
+      - name: Set up JDK Temurin 17
+        uses: actions/setup-java@v3
+        with:
+          distribution: temurin
+          java-version: 17
+      - name: Setup Gradle
+        uses: gradle/gradle-build-action@v2
+      - name: Generate Demo web export
+        run: ./gradlew :Demo:wasmJsBrowserDistribution
+      - name: Copy Demo web export to site directory
+        run: cp -r Demo/build/dist/wasmJs/productionExecutable build/site/Demo
+
       - name: Upload Artifacts
         uses: actions/upload-pages-artifact@v2
         with:

Demo/src/commonMain/kotlin/1_Navigation.kt

@@ -7,6 +7,7 @@ import androidx.compose.material.icons.automirrored.outlined.Backspace
 import androidx.compose.material.icons.outlined.ArrowUpward
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
 import org.kodein.emoji.Emoji
 import org.kodein.emoji.smileys_emotion.face_smiling.Wink
 import net.kodein.cup.Slide
@@ -26,4 +27,9 @@ val navigation by Slide {
     )
     Spacer(Modifier.height(16.dp))
     TextWithEmoji("Still, move forward to see the rest of the features ${Emoji.Wink}")
+    Spacer(Modifier.height(16.dp))
+    Text(
+        text = "(By the way, your USB or bluetooth clicker should also work!)",
+        fontSize = 0.6.em
+    )
 }

Demo/src/commonMain/kotlin/2_Steps.kt

@@ -44,10 +44,12 @@ val steps by Slide(
     AnimatedVisibility(
         visible = step >= 4,
         enter = scaleIn(spring(Spring.DampingRatioHighBouncy, Spring.StiffnessMediumLow)) + expandVertically(clip = false),
-        modifier = Modifier
     ) {
-        Title {
-            TextWithAnimatedEmoji("Or attracting attention! ${Emoji.Collision}")
+        Title(
+            modifier = Modifier
+                .padding(top = 32.dp)
+        ) {
+            TextWithAnimatedEmoji("${Emoji.Collision} Or attracting attention! ${Emoji.Collision}")
         }
     }
 }

Demo/src/commonMain/kotlin/3_Transitions.kt

@@ -2,7 +2,6 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
 import net.kodein.cup.Slide
 import net.kodein.cup.SlideSpecs
@@ -20,7 +19,7 @@ val transitions by Slide(
     )
 ) { step ->
     Title(Modifier.padding(16.dp)) {
-        Text("There can also be complex slide transition animations !")
+        Text("There can also be complex slide transition transitions !")
     }
     AnimatedVisibility(step >= 1) {
         TextWithEmoji("Have you noticed the background change? 🤔")

Demo/src/commonMain/kotlin/4_SourceCode.kt

@@ -1,13 +1,23 @@
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import net.kodein.cup.PreparedSlide
-import net.kodein.cup.sa.*
+import net.kodein.cup.sa.SAStyle
+import net.kodein.cup.sa.SourceCode
+import net.kodein.cup.sa.line
+import net.kodein.cup.sa.rememberSourceCode
+import net.kodein.cup.ui.SpanStyleSheet
+import net.kodein.cup.ui.styled
 import utils.Title
 
 
@@ -44,9 +54,18 @@ val sourceCode by PreparedSlide(
     }
 
     slideContent { step ->
+        val stylesheet = object : SpanStyleSheet() {
+            val pre by registerMarker(SpanStyle(
+                fontFamily = KodeinTheme.Fonts.JetBrainsMono,
+                color = KodeinTheme.Color.Orange
+            ))
+        }
+
         Title {
             Text("You can animate source code!")
         }
+        Text(styled(stylesheet) { "(Here's an example of how I would introduce Kotlin's ${+pre}lazy${-pre} property delegate)" })
+        Spacer(Modifier.height(8.dp))
         SourceCode(
             sourceCode = sourceCode,
             step = step,
@@ -56,5 +75,12 @@ val sourceCode by PreparedSlide(
                 .background(Color.DarkGray, RoundedCornerShape(4.dp))
                 .padding(8.dp)
         )
+        Spacer(Modifier.height(8.dp))
+        Row {
+            AnimatedVisibility(step >= 1) { Text("You can reveal") }
+            AnimatedVisibility(step >= 2) { Text(", highlight") }
+            AnimatedVisibility(step >= 4) { Text(", remove, replace") }
+            AnimatedVisibility(step >= 5) { Text(" or decorate source code") }
+        }
     }
 }

Demo/src/commonMain/kotlin/5_Modes.kt

@@ -4,15 +4,13 @@ import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.List
-import androidx.compose.material.icons.automirrored.rounded.SpeakerNotes
 import androidx.compose.material.icons.rounded.ZoomOut
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.em
-import net.kodein.cup.*
-import net.kodein.cup.speaker.SpeakerNotes
+import net.kodein.cup.Slide
+import net.kodein.cup.SlideGroup
 import utils.InlineIcon
 import utils.Title
 
@@ -46,60 +44,4 @@ val overview by Slide {
     )
 }
 
-val speakerWindow by Slide(
-    user = SpeakerNotes(
-        """
-                This slides has some **speaker notes** that you can see here!
-                
-                - You can use markdown in speaker notes
-                - Or you can use regular compose if you prefer
-                
-                Isn't that cool!
-        """
-    )
-) {
-    Title {
-        Text("Hit S to open the Speaker Window!")
-    }
-    Text(
-        text = buildAnnotatedString {
-            append("(Or click on the top left ")
-            appendInlineContent("icon")
-            append(" shown when moving your mouse.)")
-        },
-        inlineContent = mapOf(
-            "icon" to InlineIcon(Icons.AutoMirrored.Rounded.SpeakerNotes, "icon")
-        ),
-        textAlign = TextAlign.Center,
-    )
-    Spacer(Modifier.height(16.dp))
-    Text(
-        text = "Only available on desktop (not web).",
-        fontSize = 0.6.em,
-        textAlign = TextAlign.Center,
-    )
-}
-
-val groups by Slide {
-    Title {
-        Text("You can group slides and apply specifics to all slides in the group")
-    }
-    Text(
-        text = "For example, the last 3 slides are grouped and given a vertical transitions between them!",
-        textAlign = TextAlign.Center,
-    )
-}
-
-val modes = Slides(
-    overview,
-    speakerWindow,
-    groups,
-    specs = {
-        it.insideTransitionSpecs(
-            startTransitions = TransitionSet.moveVertical,
-            endTransitions = TransitionSet.moveVertical
-        ) + SlideSpecs(
-            size = SLIDE_SIZE_16_9
-        )
-    }
-)
+expect val modes: SlideGroup

Demo/src/commonMain/kotlin/6_Decoration.kt

@@ -15,14 +15,13 @@ import utils.Title
 
 
 val decoration by Slide(
-    stepCount = 2,
-    user = KodeinBanner(visible = true)
+    stepCount = 2
 ) { step ->
     Title {
-        Text("You can decorate and theme your presentation")
+        Text("You can decorate and\ntheme your presentation")
     }
     Text(
-        text = "This presentation uses the KODEIN theme that we created for our own presentations!",
+        text = "This presentation uses the KODEIN theme that\nwe created for our own presentations!",
         textAlign = TextAlign.Center,
     )
     Spacer(Modifier.height(32.dp))
@@ -31,7 +30,7 @@ val decoration by Slide(
             horizontalAlignment = Alignment.CenterHorizontally,
             modifier = Modifier.fillMaxWidth()
         ) {
-            TextWithEmoji("For example the ${Emoji.DownArrow} orange bar is not standard and part of our theming.")
+            TextWithEmoji("For example the ${Emoji.DownArrow} light purple bar is not standard and part of our theming.")
             Spacer(Modifier.height(16.dp))
             NotoAnimatedEmoji(Emoji.StarStruck, Modifier.size(64.dp))
         }

Demo/src/commonMain/kotlin/7_KodeinKoders.kt

@@ -1,12 +1,15 @@
+import androidx.compose.animation.core.*
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.input.pointer.pointerHoverIcon
@@ -26,9 +29,14 @@ import org.jetbrains.compose.resources.painterResource
 
 
 val kodeinKoders by Slide(
-    specs = SlideSpecs(size = SLIDE_SIZE_16_9),
-    user = KodeinBanner(visible = true)
+    specs = SlideSpecs(size = SLIDE_SIZE_16_9)
 ) {
+    val scale by rememberInfiniteTransition().animateFloat(
+        initialValue = 0.95f,
+        targetValue = 1.05f,
+        animationSpec = infiniteRepeatable(tween(2_500), RepeatMode.Reverse)
+    )
+
     Text(
         text = "CuP is brought to you by:",
         modifier = Modifier.padding(bottom = 16.dp)
@@ -38,6 +46,7 @@ val kodeinKoders by Slide(
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = Modifier
+            .scale(scale)
             .pointerHoverIcon(PointerIcon.Hand)
             .clickable {
                 uriHandler.openUri("https://kodein.net")
@@ -47,7 +56,9 @@ val kodeinKoders by Slide(
             painter = painterResource(Res.drawable.logo),
             contentDescription = null,
             colorFilter = ColorFilter.tint(KodeinTheme.Color.Orange),
-            modifier = Modifier.height(112.dp).padding(end = 12.dp)
+            modifier = Modifier
+                .height(112.dp)
+                .padding(end = 12.dp)
         )
         Column {
             Text(

Demo/src/commonMain/kotlin/8_GetStarted.kt

@@ -15,13 +15,13 @@ val getStarted by Slide {
     }
     val uriHandler = LocalUriHandler.current
     Text(
-        text = "https://github.com/kosi-libs/CuP",
+        text = "https://github.com/KodeinKoders/CuP",
         textAlign = TextAlign.Center,
         color = KodeinTheme.Color.Link,
         modifier = Modifier
             .pointerHoverIcon(PointerIcon.Hand)
             .clickable {
-                uriHandler.openUri("https://github.com/kosi-libs/CuP")
+                uriHandler.openUri("https://github.com/KodeinKoders/CuP")
             }
     )
 }

Demo/src/commonMain/kotlin/main.kt

@@ -103,7 +103,7 @@ fun KodeinPresentation(
                     .align(Alignment.TopEnd)
             ) {
                 Text(
-                    text = "Amazing!",
+                    text = "Desktop only!",
                     fontSize = 20.sp,
                     color = Color.Black,
                 )

Demo/src/jvmMain/kotlin/5_Modes.desktop.kt

@@ -0,0 +1,54 @@
+import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.SpeakerNotes
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import net.kodein.cup.*
+import net.kodein.cup.speaker.SpeakerNotes
+import net.kodein.cup.utils.dataMapOf
+import utils.InlineIcon
+import utils.Title
+
+
+val speakerWindow by Slide(
+    user = dataMapOf(
+        SpeakerNotes(
+            """
+                    This slides has some **speaker notes** that you can see here!
+                    
+                    Speaker notes are written in _Markdown_.
+                    Isn't that cool!
+            """
+        ),
+        KodeinBanner(visible = true)
+    )
+) {
+    Title {
+        Text("Hit S to open the Speaker Window!")
+    }
+    Text(
+        text = buildAnnotatedString {
+            append("(Or click on the top left ")
+            appendInlineContent("icon")
+            append(" shown when moving your mouse.)")
+        },
+        inlineContent = mapOf(
+            "icon" to InlineIcon(Icons.AutoMirrored.Rounded.SpeakerNotes, "icon")
+        ),
+        textAlign = TextAlign.Center,
+    )
+}
+
+actual val modes: SlideGroup = Slides(
+    overview,
+    speakerWindow,
+    specs = {
+        it.insideTransitionSpecs(
+            startTransitions = TransitionSet.moveVertical,
+            endTransitions = TransitionSet.moveVertical
+        ) + SlideSpecs(
+            size = SLIDE_SIZE_16_9
+        )
+    }
+)