feat: replaced wasmMain to jsMain platform

.github/workflows/publish.yaml

@@ -1,7 +1,7 @@
 name: 'Deploy To Github Pages'
 
 on:
-  workflow_dispatch: 
+  workflow_dispatch:
   push:
     branches:
       - main
@@ -27,8 +27,8 @@ jobs:
           check-latest: true
           cache: 'gradle'
       - name: Packaging 📦
-        run: ./gradlew :web:bundlePortfolio --no-daemon
+        run: ./gradlew :web:bundleWebApp --no-daemon
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: ./web/build/dist/wasm/productionExecutable
+          folder: ./web/build/dist/js/productionExecutable

build.gradle.kts

@@ -11,6 +11,7 @@ allprojects {
 
     configurations.all {
         val conf = this
+        // Currently it's necessary to make the android build work properly
         conf.resolutionStrategy.eachDependency {
             val isWasm = conf.name.contains("wasm", true)
             val isJs = conf.name.contains("js", true)

gradle.properties

@@ -1,7 +1,7 @@
 org.gradle.jvmargs=-Xmx3g
 kotlin.code.style=official
 org.jetbrains.compose.experimental.jscanvas.enabled=true
-
+kotlin.js.ir.output.granularity=whole-program
 compose.wasm.version=1.4.0-dev-wasm09
-compose.version=1.4.0-dev-wasm09
+compose.version=1.4.0
 kotlin.version=1.9.0

web/build.gradle.kts

@@ -1,5 +1,3 @@
-import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
-
 plugins {
     kotlin("multiplatform")
     id("org.jetbrains.compose")
@@ -11,40 +9,18 @@ kotlin {
         browser()
         binaries.executable()
     }
-    @Suppress("OPT_IN_USAGE")
-    wasm {
-        moduleName = "jamshedalamqaderi-portfolio"
-        browser {
-            commonWebpackConfig(Action {
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).copy(
-//                    open = mapOf(
-//                        "app" to mapOf(
-//                            "name" to "google chrome canary",
-//                            "arguments" to listOf("--js-flags=--experimental-wasm-gc ")
-//                        )
-//                    ),
-                    static = (devServer?.static ?: mutableListOf()).apply {
-                        // Serve sources to debug inside browser
-                        add(project.rootDir.path)
-                        add(project.rootDir.path + "/common/")
-                        add(project.rootDir.path + "/web/")
-                    },
-                )
-            })
-        }
-        binaries.executable()
-    }
+
     sourceSets {
         val commonMain by getting {
             dependencies {
-                api(compose.runtime)
-                api(compose.foundation)
-                api(compose.material)
-            }
-        }
-        val commonTest by getting {
-            dependencies {
-                implementation(kotlin("test"))
+                implementation(compose.runtime)
+                implementation(compose.ui)
+                implementation(compose.foundation)
+                implementation(compose.material)
+                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.material3)
+                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.components.resources)
             }
         }
     }
@@ -55,18 +31,16 @@ compose.experimental {
 }
 
 compose {
-    val composeVersion = project.property("compose.wasm.version") as String
-    kotlinCompilerPlugin.set(composeVersion)
     val kotlinVersion = project.property("kotlin.version") as String
     kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=$kotlinVersion")
 }
 
-tasks.register<Copy>("copyMjsFile") {
-    mustRunAfter("wasmBrowserDistribution")
-    from("$buildDir/compileSync/wasm/main/productionExecutable/kotlin/jamshedalamqaderi-portfolio.uninstantiated.mjs")
-    into("$buildDir/dist/wasm/productionExecutable")
+tasks.register<Copy>("copyJsFile") {
+    mustRunAfter("jsBrowserDistribution")
+    from("$buildDir/compileSync/js/main/productionExecutable/kotlin/")
+    into("$buildDir/dist/js/productionExecutable")
 }
 
-tasks.register("bundlePortfolio") {
-    dependsOn("wasmBrowserDistribution", "copyMjsFile")
-}
+tasks.register("bundleWebApp") {
+    dependsOn("jsBrowserDistribution", "copyJsFile")
+}

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/Main.kt

@@ -2,92 +2,39 @@ package com.jamshedalamqaderi.portfolio
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Email
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.CanvasBasedWindow
-import com.jamshedalamqaderi.portfolio.presentation.ui.components.Accordion
 import com.jamshedalamqaderi.portfolio.presentation.ui.theme.PortfolioTheme
 import org.jetbrains.skiko.wasm.onWasmReady
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        CanvasBasedWindow("Jamshed Alam Qaderi - Portfolio", canvasElementId = "ComposeTarget") {
-            val loading = remember { mutableStateOf(true) }
-            LaunchedEffect(Unit) {
-                loading.value = false
-            }
-            if (loading.value) {
+        CanvasBasedWindow("Jamshed Alam Qaderi - Portfolio") {
+            PortfolioTheme {
                 Column(
                     modifier = Modifier.fillMaxSize(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    CircularProgressIndicator()
-                }
-                return@CanvasBasedWindow
-            }
-            PortfolioTheme {
-                Scaffold {
-                    Column(
-                        modifier = Modifier.fillMaxSize(),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        Spacer(Modifier.height(100.dp))
-                        Accordion(
-                            modifier = Modifier.width(500.dp),
-                            header = {
-                                Row(verticalAlignment = Alignment.CenterVertically) {
-                                    Icon(
-                                        Icons.Default.Email,
-                                        "Email me",
-                                        tint = MaterialTheme.colors.onSecondary
-                                    )
-                                    Spacer(modifier = Modifier.width(8.dp))
-                                    Text(
-                                        "What is full stack development?",
-                                        color = MaterialTheme.colors.onSecondary
-                                    )
-                                }
-                            },
-                        ) {
-                            Column(modifier = Modifier.padding(20.dp)) {
-                                Text(
-                                    "Generally, it is accepted to use FlowBite in open-source projects, as long as it is not a UI library, a theme, a template, a page-builder that would be considered as an alternative to FlowBite itself.",
-                                    color = Color(0xff6B7280)
-                                )
-                                Text(
-                                    "With that being said, feel free to use this design kit for your open-source projects.",
-                                    color = Color(0xff6B7280)
-                                )
-                                Text(
-                                    "Find out more information by reading the license.",
-                                    color = Color(0xff6B7280)
-                                )
-                            }
-                        }
-                    }
+                    Text(
+                        "Hi there, I'm Jamshed Alam Qaderi",
+                        style = androidx.compose.material3.MaterialTheme.typography.headlineLarge
+                    )
+                    Spacer(Modifier.height(10.dp))
+                    Text(
+                        "Full stack developer (kotlin multiplatform)",
+                        style = androidx.compose.material3.MaterialTheme.typography.bodyMedium
+                    )
                 }
             }
         }
     }
-}
+}

web/src/wasmMain/kotlin/com/jamshedalamqaderi/portfolio/domain/exceptions/MissingResourceException.kt → web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/exceptions/MissingResourceException.kt

@@ -1,3 +1,3 @@
 package com.jamshedalamqaderi.portfolio.domain.exceptions
 
-class MissingResourceException(url: String) : Exception("GET $url failed")
+class MissingResourceException(url: String) : Exception("GET $url failed")

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/ByteArrayExt.kt

@@ -0,0 +1,7 @@
+package com.jamshedalamqaderi.portfolio.domain.utils
+
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.toComposeImageBitmap
+import org.jetbrains.skia.Image
+
+fun ByteArray.toImageBitmap(): ImageBitmap = Image.makeFromEncoded(this).toComposeImageBitmap()

web/src/wasmMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/FontLoader.kt → web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/domain/utils/FontLoader.kt

@@ -4,108 +4,111 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.platform.Font
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+import org.jetbrains.compose.resources.resource
 
 object FontLoader {
     private const val fontPath = "fonts"
     var Poppins: FontFamily? = null
         private set
 
+    @OptIn(ExperimentalResourceApi::class)
     suspend fun loadPoppins() {
         Poppins = FontFamily(
             Font(
                 identity = "PoppinsBlack",
-                data = loadResource("$fontPath/Poppins/Poppins-Black.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Black.ttf").readBytes(),
                 weight = FontWeight.Black
             ),
             Font(
                 identity = "PoppinsBlackItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-BlackItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-BlackItalic.ttf").readBytes(),
                 weight = FontWeight.Black,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsBold",
-                data = loadResource("$fontPath/Poppins/Poppins-Bold.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Bold.ttf").readBytes(),
                 weight = FontWeight.Bold,
             ),
             Font(
                 identity = "PoppinsBoldItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-BoldItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-BoldItalic.ttf").readBytes(),
                 weight = FontWeight.Bold,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsExtraBold",
-                data = loadResource("$fontPath/Poppins/Poppins-ExtraBold.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-ExtraBold.ttf").readBytes(),
                 weight = FontWeight.ExtraBold,
             ),
             Font(
                 identity = "PoppinsExtraBoldItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-ExtraBoldItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-ExtraBoldItalic.ttf").readBytes(),
                 weight = FontWeight.ExtraBold,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsExtraLight",
-                data = loadResource("$fontPath/Poppins/Poppins-ExtraLight.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-ExtraLight.ttf").readBytes(),
                 weight = FontWeight.ExtraLight,
             ),
             Font(
                 identity = "PoppinsExtraLightItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-ExtraLightItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-ExtraLightItalic.ttf").readBytes(),
                 weight = FontWeight.ExtraLight,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-Italic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Italic.ttf").readBytes(),
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsLight",
-                data = loadResource("$fontPath/Poppins/Poppins-Light.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Light.ttf").readBytes(),
                 weight = FontWeight.Light,
             ),
             Font(
                 identity = "PoppinsLightItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-LightItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-LightItalic.ttf").readBytes(),
                 weight = FontWeight.Light,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsMedium",
-                data = loadResource("$fontPath/Poppins/Poppins-Medium.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Medium.ttf").readBytes(),
                 weight = FontWeight.Medium,
             ),
             Font(
                 identity = "PoppinsMediumItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-MediumItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-MediumItalic.ttf").readBytes(),
                 weight = FontWeight.Medium,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsRegular",
-                data = loadResource("$fontPath/Poppins/Poppins-Regular.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Regular.ttf").readBytes(),
             ),
             Font(
                 identity = "PoppinsSemiBold",
-                data = loadResource("$fontPath/Poppins/Poppins-SemiBold.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-SemiBold.ttf").readBytes(),
                 weight = FontWeight.SemiBold,
             ),
             Font(
                 identity = "PoppinsSemiBoldItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-SemiBoldItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-SemiBoldItalic.ttf").readBytes(),
                 weight = FontWeight.SemiBold,
                 style = FontStyle.Italic
             ),
             Font(
                 identity = "PoppinsThin",
-                data = loadResource("$fontPath/Poppins/Poppins-Thin.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-Thin.ttf").readBytes(),
                 weight = FontWeight.Thin,
             ),
             Font(
                 identity = "PoppinsThinItalic",
-                data = loadResource("$fontPath/Poppins/Poppins-ThinItalic.ttf").toByteArray(),
+                data = resource("$fontPath/Poppins/Poppins-ThinItalic.ttf").readBytes(),
                 weight = FontWeight.Thin,
                 style = FontStyle.Italic
             ),