Merge pull request #18 from kota-shiokara/develop

v2.2.0

.fleet/receipt.json

@@ -0,0 +1,14 @@
+// Project generated by Kotlin Multiplatform Wizard
+{
+    "spec": {
+        "template_id": "kmt",
+        "targets": {
+            "web": {
+                "ui": [
+                    "compose"
+                ]
+            }
+        }
+    },
+    "timestamp": "2024-07-07T15:01:46.407950621Z"
+}

.github/workflows/deploy.yaml

@@ -17,7 +17,7 @@ jobs:
       - name: Grant execute permission for gradlew
         run: chmod +x gradlew
       - name: Build with Gradle
-        run: ./gradlew wasmJsBrowserWebpack
+        run: ./gradlew wasmJsBrowserDistribution
       - name: deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

.gitignore

@@ -153,4 +153,6 @@ kotlin-js-store/*
 !.idea/scopes
 
 # gradle-wrapper
-!gradle/wrapper/gradle-wrapper.jar
+!gradle/wrapper/gradle-wrapper.jar
+
+.kotlin

Makefile

@@ -0,0 +1,5 @@
+keeprun:
+	./gradlew wasmJsBrowserRun --continuous
+
+run:
+	./gradlew wasmJsBrowserRun

README.md

@@ -1,12 +1,18 @@
 # kota-shiokara.github.io
 
 ## Running the Project
-```
+```shell
+# Simple Run
 ./gradlew wasmJsBrowserRun
+# or
+make run
 ```
 or
-```
+```shell
+# Active Hot Reload
 ./gradlew wasmJsBrowserRun --continuous
+# or
+make keeprun
 ```
 
 ## Build the project

build.gradle.kts

@@ -1,74 +1,48 @@
-import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 group = "jp.ikanoshiokara"
-version = "2.1.0"
-
-repositories {
-    google()
-    mavenCentral()
-    mavenLocal()
-    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
-    maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
-    maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev")
-}
+version = "2.2.0"
 
 plugins {
-    kotlin("multiplatform")
-    id("org.jetbrains.compose")
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.jetbrains.compose)
+    alias(libs.plugins.compose.compiler)
 }
 
-// なんでこれ使ってエラーなるのかわからない
-//val copyWasmResources = tasks.create("copyWasmResourcesWorkaround", Copy::class.java) {
-//    from(rootProject.file("src/wasmJsMain/resources"))
-//    into("build/processedResources/wasmJs/main")
-//}
-//
-//afterEvaluate {
-//    project.tasks.getByName("wasmJsProcessResources").finalizedBy(copyWasmResources)
-//}
-
-@OptIn(org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl::class)
 kotlin {
+    @OptIn(ExperimentalWasmDsl::class)
     wasmJs {
-        moduleName = "kota-shiokara.github.io"
-
         browser {
             commonWebpackConfig {
                 outputFileName = "kota-shiokara.github.io.js"
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
-                    static = (static ?: mutableListOf()).apply {
-                        add(project.rootDir.path)
-                    }
-                }
             }
         }
         binaries.executable()
     }
 
     sourceSets {
-        val wasmJsMain by getting {
+        commonMain {
             dependencies {
                 implementation(compose.runtime)
                 implementation(compose.foundation)
-                implementation(compose.material)
-                implementation(compose.ui)
-
-                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.material3)
+                implementation(compose.materialIconsExtended)
                 implementation(compose.components.resources)
+
+                // Preview
+                implementation(compose.components.uiToolingPreview)
+                implementation(libs.composeMaterialWindowSize)
             }
         }
     }
 }
 
-compose.experimental {
-    web.application {}
-}
-
-compose {
-    val kotlinVersion = rootProject.extra["kotlin.version"] as String
-    val composeCompilerVersion = rootProject.extra["compose.compiler.version"] as String
-
-    kotlinCompilerPlugin.set(composeCompilerVersion)
-    kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=$kotlinVersion")
-}
-
+// なんでこれ使ってエラーなるのかわからない
+//val copyWasmResources = tasks.create("copyWasmResourcesWorkaround", Copy::class.java) {
+//    from(rootProject.file("src/wasmJsMain/resources"))
+//    into("build/processedResources/wasmJs/main")
+//}
+//
+//afterEvaluate {
+//    project.tasks.getByName("wasmJsProcessResources").finalizedBy(copyWasmResources)
+//}

gradle.properties

@@ -1,7 +1,3 @@
 kotlin.code.style=official
 org.jetbrains.compose.experimental.jscanvas.enabled=true
-org.gradle.jvmargs=-Xmx3g
-
-kotlin.version=1.9.20
-compose.compiler.version=1.5.3
-compose.wasm.version=1.5.10-dev-wasm03
+org.gradle.jvmargs=-Xmx3g

gradle/libs.versions.toml

@@ -0,0 +1,12 @@
+[versions]
+kotlin = "2.0.0"
+compose = "1.6.11"
+
+[libraries]
+# JetBrainsのCompose MaterialがWindowSizeClassに対応するまでの暫定
+composeMaterialWindowSize = "dev.chrisbanes.material3:material3-window-size-class-multiplatform:0.5.0"
+
+[plugins]
+kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+jetbrains-compose = { id = "org.jetbrains.compose", version.ref = "compose" }
+compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

settings.gradle.kts

@@ -4,16 +4,15 @@ pluginManagement {
     repositories {
         google()
         gradlePluginPortal()
+        mavenCentral()
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
-        maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
-        maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/dev")
     }
+}
 
-    plugins {
-        val kotlinVersion = extra["kotlin.version"] as String
-        val composeVersion = extra["compose.wasm.version"] as String
-
-        kotlin("multiplatform").version(kotlinVersion)
-        id("org.jetbrains.compose").version(composeVersion)
+dependencyResolutionManagement {
+    repositories {
+        google()
+        mavenCentral()
+        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }
 }

src/commonMain/composeResources/values/strings.xml

@@ -0,0 +1,8 @@
+<resources>
+    <string name="app_name">kota-shiokara</string>
+    <string name="section_top_welcome">Welcome to kota-shiokara's portfolio!</string>
+    <string name="section_about_me_title">About Me</string>
+    <string name="my_name_japanese">田島 鼓太郎</string>
+    <string name="my_name_english">TAJIMA Kotaro</string>
+    <string name="section_footer_copyright">© 2023 kota-shiokara | All Rights Reserved</string>
+</resources>

src/commonMain/kotlin/App.kt

@@ -0,0 +1,77 @@
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
+import component.TopPageFooter
+import section.AboutMeSection
+import section.BlogSection
+import section.TopSection
+import section.WorkSection
+import theme.ShiokaraTheme
+import theme.primaryColor
+
+@Composable
+fun App() {
+    ShiokaraTheme {
+        BoxWithConstraints {
+            val height = maxHeight
+            val sectionSpan = 32.dp
+
+            LazyColumn(
+                modifier = Modifier.fillMaxSize(),
+            ) {
+                item {
+                    TopSection(height = height)
+                }
+
+                item {
+                    Spacer(modifier = Modifier.height(16.dp))
+                    AboutMeSection()
+                }
+
+                item {
+                    Spacer(modifier = Modifier.height(sectionSpan))
+                    WorkSection()
+                }
+
+                item {
+                    Spacer(modifier = Modifier.height(sectionSpan))
+                    BlogSection()
+                }
+
+                item {
+                    TopPageFooter()
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun LoadingCircle() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(primaryColor),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = "Loading...",
+            color = Color.White
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        CircularProgressIndicator(
+            color = Color.White,
+            strokeWidth = 8.dp,
+            strokeCap = StrokeCap.Round
+        )
+    }
+}

src/wasmJsMain/kotlin/component/AsyncImage.kt → src/commonMain/kotlin/component/AsyncImage.kt

@@ -8,17 +8,19 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.layout.ContentScale
-import utils.ImageLoader
 import utils.Log
+import utils.fetchImageBitmap
 
 @Composable
 fun AsyncImage(
     imageUrl: String,
     contentDescription: String?,
     modifier: Modifier = Modifier,
-    contentScale: ContentScale = ContentScale.Crop
+    contentScale: ContentScale = ContentScale.Crop,
+    colorFilter: ColorFilter? = null,
 ) {
     var bitmap: ImageBitmap? by remember { mutableStateOf(null) }
 
@@ -27,12 +29,13 @@ fun AsyncImage(
             bitmap!!,
             contentDescription = contentDescription,
             modifier = modifier,
-            contentScale = contentScale
+            contentScale = contentScale,
+            colorFilter = colorFilter
         )
     }
 
     LaunchedEffect(imageUrl) {
-        runCatching { ImageLoader.fetchImageBitmap(imageUrl) }
+        runCatching { fetchImageBitmap(imageUrl) }
             .onSuccess {
                 bitmap = it
             }

src/wasmJsMain/kotlin/component/AvatarImage.kt → src/commonMain/kotlin/component/AvatarImage.kt

@@ -2,16 +2,19 @@ package component
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
 
 @Composable
 fun AvatarImage(
     imageUrl: String,
     contentDescription: String?,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    colorFilter: ColorFilter? = null,
 ) {
     AsyncImage(
         imageUrl = imageUrl,
         contentDescription = contentDescription,
-        modifier = modifier
+        modifier = modifier,
+        colorFilter = colorFilter
     )
 }