chore: cleanup and dep updates

Author: sureshg

.gitignore

@@ -19,5 +19,9 @@ classes.lst
 *.jsa
 jre/
 
+# Kobweb ignores
+**/.kobweb/*
+!**/.kobweb/conf.yaml
+
 # Gradle release
-cx.json
+cx.json

README.md

@@ -58,6 +58,11 @@ $ ./gradlew :backend:native:macOsUniversalBinary
 $ ./gradlew :backend:native:jibDockerBuild
 $ docker run -it --rm --name native-app sureshg/native
 
+# Kobweb
+$ kobweb run -p compose/web
+$ ./gradlew :compose:web:kobwebStart -t
+$ ./gradlew :compose:web:kobwebStop
+
 # Compose Desktop
 $ ./gradlew :compose:desktop:runDistributable
 $ ./gradlew :compose:desktop:packageDistributionForCurrentOS

build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
   plugins.common
   plugins.misc
+  alias(libs.plugins.jetbrains.compose) apply false
   // kotlin("multiplatform") apply false
 }
 

client/build.gradle.kts

@@ -5,7 +5,7 @@ import org.jetbrains.kotlin.gradle.plugin.KotlinPlatformType
 plugins {
   plugins.kotlin.mpp
   plugins.publishing
-  alias(libs.plugins.jetbrains.compose.mpp)
+  alias(libs.plugins.jetbrains.compose)
 }
 
 dependencies {

compose/desktop/build.gradle.kts

@@ -0,0 +1,14 @@
+site:
+  title: "Kobweb App"
+
+server:
+  files:
+    dev:
+      contentRoot: "build/processedResources/js/main/public"
+      script: "build/dist/js/developmentExecutable/web.js"
+      api: "build/libs/web.jar"
+    prod:
+      script: "build/dist/js/productionExecutable/web.js"
+      siteRoot: ".kobweb/site"
+
+  port: 8080

compose/web/.kobweb/conf.yaml

@@ -1,6 +1,43 @@
 plugins {
   plugins.kotlin.mpp
   plugins.publishing
+  alias(libs.plugins.jetbrains.compose)
+  alias(libs.plugins.kobweb.application)
+  alias(libs.plugins.kobwebx.markdown)
 }
 
-dependencies { commonMainImplementation(projects.common) }
+kobweb { app { index { this.description.set("Kobweb!") } } }
+
+tasks {
+  jsProcessResources {
+    inputs.property("version", project.version.toString())
+    filesMatching("manifest.json") {
+      expand(
+          "name" to project.name,
+          "version" to project.version.toString().substringBeforeLast("."),
+      )
+    }
+  }
+}
+
+kotlin {
+  sourceSets {
+    commonMain {
+      dependencies {
+        implementation(projects.common)
+        implementation(compose.runtime)
+      }
+    }
+
+    jsMain {
+      dependencies {
+        implementation(compose.html.core)
+        implementation(libs.kobweb.core)
+        implementation(libs.kobweb.silk)
+        implementation(libs.kobwebx.markdown)
+        // implementation(compose.html.svg)
+        // implementation(libs.silk.icons.fa)
+      }
+    }
+  }
+}

compose/web/README.md

@@ -0,0 +1,37 @@
+package dev.suresh
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import com.varabyte.kobweb.compose.css.ScrollBehavior
+import com.varabyte.kobweb.compose.ui.modifiers.minHeight
+import com.varabyte.kobweb.compose.ui.modifiers.scrollBehavior
+import com.varabyte.kobweb.core.App
+import com.varabyte.kobweb.silk.SilkApp
+import com.varabyte.kobweb.silk.components.layout.Surface
+import com.varabyte.kobweb.silk.components.style.common.SmoothColorStyle
+import com.varabyte.kobweb.silk.components.style.toModifier
+import com.varabyte.kobweb.silk.init.InitSilk
+import com.varabyte.kobweb.silk.init.InitSilkContext
+import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import kotlinx.browser.localStorage
+import org.jetbrains.compose.web.css.vh
+
+private const val COLOR_MODE_KEY = "playground:colorMode"
+
+@InitSilk
+fun initColorMode(ctx: InitSilkContext) {
+  ctx.config.initialColorMode =
+      localStorage.getItem(COLOR_MODE_KEY)?.let { ColorMode.valueOf(it) } ?: ColorMode.DARK
+}
+
+@App
+@Composable
+fun MyApp(content: @Composable () -> Unit) {
+  SilkApp {
+    val colorMode = ColorMode.current
+    LaunchedEffect(colorMode) { localStorage.setItem(COLOR_MODE_KEY, colorMode.name) }
+    Surface(SmoothColorStyle.toModifier().minHeight(100.vh).scrollBehavior(ScrollBehavior.Smooth)) {
+      content()
+    }
+  }
+}

compose/web/build.gradle.kts

@@ -0,0 +1,51 @@
+package dev.suresh.pages
+
+import BuildConfig
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import com.varabyte.kobweb.compose.foundation.layout.Column
+import com.varabyte.kobweb.compose.foundation.layout.Row
+import com.varabyte.kobweb.compose.ui.Alignment
+import com.varabyte.kobweb.compose.ui.Modifier
+import com.varabyte.kobweb.compose.ui.modifiers.borderRadius
+import com.varabyte.kobweb.compose.ui.modifiers.fillMaxSize
+import com.varabyte.kobweb.compose.ui.modifiers.flexWrap
+import com.varabyte.kobweb.compose.ui.modifiers.padding
+import com.varabyte.kobweb.core.Page
+import com.varabyte.kobweb.silk.components.forms.Button
+import com.varabyte.kobweb.silk.components.icons.MoonIcon
+import com.varabyte.kobweb.silk.components.icons.SunIcon
+import com.varabyte.kobweb.silk.components.navigation.Link
+import com.varabyte.kobweb.silk.components.text.SpanText
+import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import org.jetbrains.compose.web.css.FlexWrap
+import org.jetbrains.compose.web.css.percent
+import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.dom.H1
+import org.jetbrains.compose.web.dom.Text
+
+@Page
+@Composable
+fun HomePage() {
+  Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally) {
+    Row(Modifier.align(Alignment.End)) {
+      var colorMode by ColorMode.currentState
+      Button(
+          onClick = { colorMode = colorMode.opposite },
+          Modifier.borderRadius(50.percent).padding(0.px)) {
+            // Includes support for Font Awesome icons
+            if (colorMode.isLight) SunIcon() else MoonIcon()
+          }
+    }
+
+    H1 { Text("Welcome to Kobweb! ${BuildConfig.version}") }
+
+    Row(Modifier.flexWrap(FlexWrap.Wrap)) {
+      SpanText("Create rich, dynamic web apps with ease, leveraging ")
+      Link("https://kotlinlang.org/", "Kotlin")
+      SpanText(" and ")
+      Link("https://github.com/JetBrains/compose-multiplatform#compose-html/", "Compose HTML")
+    }
+  }
+}