diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index 56bb49edb2..d94c655e7f 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -8,6 +8,8 @@ import com.sample.components.Card import com.sample.components.ContainerInSection import com.sample.components.LinkOnCard import com.sample.style.* +import org.jetbrains.compose.web.attributes.ATarget +import org.jetbrains.compose.web.attributes.target import org.jetbrains.compose.web.css.paddingTop data class CardWithListPresentation( @@ -37,6 +39,30 @@ private fun createAboutComposeWebCards(): List { ) } +private fun createFeaturesList(): List { + return listOf( + "Same reactive engine that is used on Android/Desktop allows using a common codebase.", + "Framework for rich UI creation for Kotlin/JS.", + "Convenient Kotlin DOM DSL that covers all common frontend development scenarios.", + "Comprehensive CSS-in-Kotlin/JS API." + ) +} + + +@Composable +private fun FeatureDescriptionBlock(description: String) { + Div(attrs = { + classes(WtCols.wtCol3, WtCols.wtColMd6, WtCols.wtColSm12, WtOffsets.wtTopOffset48) + }) { + Img(src = "compose_bullet.svg") + P(attrs = { + classes(WtTexts.wtText1, WtTexts.wtText1HardnessHard, WtOffsets.wtTopOffset12) + }) { + Text(description) + } + } +} + @Composable fun ComposeWebLibraries() { ContainerInSection(WtSections.wtSectionBgGrayLight) { @@ -56,22 +82,21 @@ fun ComposeWebLibraries() { Text("Compose for Web allows you to build reactive user interfaces for the web in Kotlin, using the concepts and APIs of Jetpack Compose to express the state, behavior, and logic of your application.") } } - - Div(attrs = { - classes(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12, WtOffsets.wtTopOffset24) - }) { - P(attrs = { - classes(WtTexts.wtText1) - }) { - Text("Compose for Web provides multiple ways of declaring user interfaces in Kotlin code, allowing you to have full control over your website layout with a declarative DOM API, or use versions of the widgets you already know from Jetpack Compose for Desktop and Android.\n") - } - } } Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtOffsets.wtTopOffset48) + classes(WtRows.wtRow, WtRows.wtRowSizeM, WtOffsets.wtTopOffset24) }) { - createAboutComposeWebCards().forEach { CardWithList(it) } + createFeaturesList().forEach { + FeatureDescriptionBlock(it) + } + } + + A(attrs = { + classes(WtTexts.wtButton, WtTexts.wtButtonThemeLight, WtOffsets.wtTopOffset48, WtOffsets.wtTopOffsetSm24) + target(ATarget.Blank) + }, href = "https://github.com/JetBrains/compose-jb/blob/master/FEATURES.md#features-currently-available-in-compose-for-web") { + Text("See all features") } } } diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 27e9a062a1..73bd8df478 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -72,7 +72,7 @@ private val DeclareAndUseStylesheet = CodeSnippetData( private val DeclareAndUseCssVariable = CodeSnippetData( title = "Declare and use CSS variables", source = """ - object MyVariables : CSSVariables { + object MyVariables { val contentBackgroundColor by variable() /* declare a variable */ } @@ -190,7 +190,7 @@ private val allSnippets = arrayOf( DeclareAndUseCssVariable, HoverSelectorAndMedia, DefineCssClassInComponent, - LayoutsSample + //LayoutsSample ) private var currentCodeSnippet: CodeSnippetData by mutableStateOf(allSnippets[0]) diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index 54f1bdb87b..70f4a6db79 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -45,9 +45,9 @@ fun Intro() { }) { Text("Web") - Span(attrs = { classes(AppStylesheet.composeTitleTag) }) { - Text("Technology preview") - } +// Span(attrs = { classes(AppStylesheet.composeTitleTag) }) { +// Text("Technology preview") +// } } } Div({ @@ -95,11 +95,11 @@ private fun IntroAboutComposeWeb() { Text( "Compose for Web simplifies and accelerates UI development for web applications, " + "and aims to enable UI code sharing between web, desktop, and Android applications " + - "in the future. Currently in technology preview." + "in the future." ) } - ComposeWebStatusMessage() + //ComposeWebStatusMessage() IntroCodeSample() diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/content/JoinUs.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/content/JoinUs.kt index 2dc30b17d9..7c34ebedb9 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/content/JoinUs.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/content/JoinUs.kt @@ -29,7 +29,7 @@ fun JoinUs() { classes(WtTexts.wtLink) target(ATarget.Blank) }) { - Text("Compose for Desktop") + Text("Compose Multiplatform") } } } @@ -69,4 +69,4 @@ private fun LinkToSlack(url: String, text: String) { }) { Text(text) } -} \ No newline at end of file +} diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt index ba70d247c0..e926e777d7 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt @@ -23,6 +23,12 @@ object WtOffsets : StyleSheet(AppStylesheet) { marginTop(48.px) } + val wtTopOffset12 by style { + self style { + marginTop(12.px) + } + } + val wtTopOffsetSm12 by style { media(mediaMaxWidth(640.px)) { self style { diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt index 4bc5492cdd..1817492897 100644 --- a/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -61,6 +61,10 @@ object WtTexts : StyleSheet(AppStylesheet) { ) } + val wtText1HardnessHard by style { + color(rgb(15, 16, 17)) + } + val wtText1ThemeDark by style { color(rgba(255, 255, 255, 0.6)) } @@ -198,6 +202,20 @@ object WtTexts : StyleSheet(AppStylesheet) { } } + val wtButtonThemeLight by style { + color(Color("#27282c")) + backgroundColor(Color("transparent")) + border { + style(LineStyle.Solid) + width(1.px) + color(Color("#27282c")) + } + + hover(self) style { + backgroundColor(rgba(39,40,44,.05)) + } + } + val wtSocialButtonItem by style { marginRight(16.px) marginLeft(16.px) diff --git a/examples/web-landing/src/jsMain/resources/compose_bullet.svg b/examples/web-landing/src/jsMain/resources/compose_bullet.svg new file mode 100644 index 0000000000..fa8ee10ad2 --- /dev/null +++ b/examples/web-landing/src/jsMain/resources/compose_bullet.svg @@ -0,0 +1,15 @@ + + + + + + + + + +