Skip to content

Commit d5b78b2

Browse files
kota-shiokarakota-shiokara
authored
Merge pull request #8 from kota-shiokara/develop
でぷろい！ v1.0.0
2 parents 0261a5f + 80cc943 commit d5b78b2

21 files changed

+6294
-23
lines changed

‎build.gradle.kts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ plugins {
44
}
55

66
group = "jp.ikanoshiokara"
7-
version = "0.0.1"
7+
version = "1.0.0"
88

99
repositories {
1010
mavenCentral()
1111
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
12+
maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/kotlin-js-wrappers")
1213
google()
1314
}
1415

@@ -33,6 +34,15 @@ kotlin {
3334
dependencies {
3435
implementation(compose.web.core)
3536
implementation(compose.runtime)
37+
38+
// kotlin react
39+
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.201-kotlin-1.5.0")
40+
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.201-kotlin-1.5.0")
41+
implementation(npm("react", "17.0.2"))
42+
implementation(npm("react-dom", "17.0.2"))
43+
44+
implementation(npm("react-icons", "4.7.1"))
45+
implementation(npm("@fortawesome/react-fontawesome", "latest"))
3646
}
3747
}
3848
}

‎gradlew

100644100755
File mode changed.

‎src/jsMain/kotlin/Main.kt

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
11

2+
import components.pages.MainPage
23
import org.jetbrains.compose.web.css.Style
3-
import org.jetbrains.compose.web.css.padding
4-
import org.jetbrains.compose.web.css.px
5-
import org.jetbrains.compose.web.dom.Div
6-
import org.jetbrains.compose.web.dom.Text
74
import org.jetbrains.compose.web.renderComposable
8-
import style.layout.UniversalLayout
5+
import style.layout.PageLayout
96
import style.sheet.AppStyleSheet
107

118
fun main() {
129
renderComposable(rootElementId = "root") {
1310
Style(AppStyleSheet)
14-
UniversalLayout {
15-
Div({ style { padding(25.px) } }) {
16-
Text("Hello kota-shiokara's portfolio")
17-
}
18-
Div({ style { padding(25.px) } }) {
19-
Text("Coming soon...")
20-
}
11+
PageLayout {
12+
MainPage()
2113
}
2214
}
2315
}

‎src/jsMain/kotlin/components/ReactComponent.kt

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
package components
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.runtime.DisposableEffect
5+
import org.jetbrains.compose.web.dom.*
6+
import react.RBuilder
7+
import org.w3c.dom.HTMLElement
8+
import react.dom.render
9+
import react.dom.unmountComponentAtNode
10+
11+
@Composable
12+
fun ElementScope<HTMLElement>.ReactComponent(
13+
key: Any?,
14+
content: RBuilder.() -> Unit
15+
) {
16+
DisposableEffect(key) {
17+
render(scopeElement) {
18+
content()
19+
}
20+
onDispose { }
21+
}
22+
23+
DisposableEffect(Unit) {
24+
onDispose {
25+
unmountComponentAtNode(scopeElement)
26+
}
27+
}
28+
}

‎src/jsMain/kotlin/components/ReactIcons.kt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package components

‎src/jsMain/kotlin/components/pages/MainPage.kt

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
package components.pages
2+
3+
import androidx.compose.runtime.Composable
4+
import components.parts.LinkIconRow
5+
import components.parts.VerticalSpacer
6+
import org.jetbrains.compose.web.css.Color
7+
import org.jetbrains.compose.web.css.DisplayStyle
8+
import org.jetbrains.compose.web.css.borderRadius
9+
import org.jetbrains.compose.web.css.color
10+
import org.jetbrains.compose.web.css.display
11+
import org.jetbrains.compose.web.css.percent
12+
import org.jetbrains.compose.web.css.textAlign
13+
import org.jetbrains.compose.web.dom.B
14+
import org.jetbrains.compose.web.dom.Div
15+
import org.jetbrains.compose.web.dom.H3
16+
import org.jetbrains.compose.web.dom.Img
17+
import org.jetbrains.compose.web.dom.Text
18+
import style.common.CSSProperty
19+
import style.sheet.AppStyleSheet
20+
21+
@Composable
22+
fun MainPage() {
23+
Div(
24+
attrs = {
25+
classes(AppStyleSheet.centerStyle)
26+
}
27+
) {
28+
Img(
29+
src = "https://avatars.githubusercontent.com/u/50353938?s=96&v=4",
30+
attrs = {
31+
classes(AppStyleSheet.centerStyle)
32+
style {
33+
borderRadius(50.percent)
34+
}
35+
attr("onerror", "this.src='./img/favicon.ico'")
36+
}
37+
)
38+
VerticalSpacer()
39+
H3(
40+
attrs = {
41+
style {
42+
color(Color.white)
43+
display(DisplayStyle.Block)
44+
textAlign(CSSProperty.CENTER)
45+
}
46+
}
47+
) {
48+
B {
49+
Text("Welcome to kota-shiokara's portfolio")
50+
}
51+
}
52+
VerticalSpacer(20)
53+
LinkIconRow()
54+
}
55+
}

‎src/jsMain/kotlin/components/parts/LinkIconRow.kt

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
package components.parts
2+
3+
import androidx.compose.runtime.Composable
4+
import org.jetbrains.compose.web.css.DisplayStyle
5+
import org.jetbrains.compose.web.css.JustifyContent
6+
import org.jetbrains.compose.web.css.display
7+
import org.jetbrains.compose.web.css.height
8+
import org.jetbrains.compose.web.css.justifyContent
9+
import org.jetbrains.compose.web.css.px
10+
import org.jetbrains.compose.web.css.width
11+
import org.jetbrains.compose.web.dom.A
12+
import org.jetbrains.compose.web.dom.Div
13+
import org.jetbrains.compose.web.dom.Img
14+
15+
val defaultLinkIconList = listOf(
16+
LinkIconData(
17+
href = "https://github.com/kota-shiokara",
18+
src = "https://github.githubassets.com/favicons/favicon-dark.svg"
19+
),
20+
LinkIconData(
21+
href = "https://twitter.com/shiokara_create",
22+
src = "./img/twitter.svg"
23+
),
24+
LinkIconData(
25+
href = "https://www.instagram.com/kota_bellflower",
26+
src = "./img/instagram.svg"
27+
),
28+
LinkIconData(
29+
href = "https://qiita.com/kotambourine",
30+
src = "./img/qiita.png"
31+
),
32+
LinkIconData(
33+
href = "https://zenn.dev/kota_shiokara",
34+
src = "./img/zenn.svg"
35+
)
36+
)
37+
38+
@Composable
39+
fun LinkIconRow(dataList: List<LinkIconData> = defaultLinkIconList) {
40+
if (dataList.isEmpty()) return
41+
42+
Div(
43+
attrs = {
44+
style {
45+
display(DisplayStyle.Flex)
46+
justifyContent(JustifyContent.SpaceEvenly)
47+
}
48+
}
49+
) {
50+
LinkIcon(
51+
href = dataList[0].href,
52+
src = dataList[0].src
53+
)
54+
if (dataList.size >= 2) {
55+
(1 until dataList.size)
56+
.map { dataList[it] }
57+
.forEach { data ->
58+
HorizontalSpacer()
59+
LinkIcon(data)
60+
}
61+
}
62+
}
63+
}
64+
65+
@Composable
66+
fun LinkIcon(href: String, src: String) {
67+
A(
68+
href = href
69+
) {
70+
Img(
71+
src = src,
72+
attrs = {
73+
style {
74+
/* 丸めるとロゴのガイドライン違反になる気がする...！！ */
75+
/* borderRadius(50.percent) */
76+
width(32.px)
77+
height(32.px)
78+
}
79+
}
80+
)
81+
}
82+
}
83+
84+
@Composable
85+
fun LinkIcon(data: LinkIconData) {
86+
LinkIcon(data.href, data.src)
87+
}
88+
89+
data class LinkIconData(
90+
val href: String,
91+
val src: String
92+
)

‎src/jsMain/kotlin/components/parts/Spacer.kt

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
package components.parts
2+
3+
import androidx.compose.runtime.Composable
4+
import org.jetbrains.compose.web.css.DisplayStyle
5+
import org.jetbrains.compose.web.css.display
6+
import org.jetbrains.compose.web.css.margin
7+
import org.jetbrains.compose.web.css.px
8+
import org.jetbrains.compose.web.dom.Div
9+
10+
@Composable
11+
fun VerticalSpacer() {
12+
Div(
13+
attrs = {
14+
style {
15+
display(DisplayStyle.Block)
16+
margin(10.px, 0.px)
17+
}
18+
}
19+
)
20+
}
21+
22+
@Composable
23+
fun VerticalSpacer(value: Int) {
24+
Div(
25+
attrs = {
26+
style {
27+
display(DisplayStyle.Block)
28+
margin(value.px, 0.px)
29+
}
30+
}
31+
)
32+
}
33+
34+
@Composable
35+
fun HorizontalSpacer() {
36+
Div(
37+
attrs = {
38+
style {
39+
display(DisplayStyle.Block)
40+
margin(0.px, 10.px)
41+
}
42+
}
43+
)
44+
}
45+
46+
@Composable
47+
fun HorizontalSpacer(value: Int) {
48+
Div(
49+
attrs = {
50+
style {
51+
display(DisplayStyle.Block)
52+
margin(0.px, value.px)
53+
}
54+
}
55+
)
56+
}

‎src/jsMain/kotlin/style/common/CSSProperty.kt

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package style.common
2+
3+
class CSSProperty {
4+
companion object {
5+
const val CENTER = "center"
6+
}
7+
}

‎src/jsMain/kotlin/style/common/cssUrl.kt

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
package style.common
2+
3+
// css url() method https://developer.mozilla.org/ja/docs/Web/CSS/url
4+
// example: backgroundImage(cssUrl("YOUR_IMAGE_PATH"))
5+
fun cssUrl(value: String): String {
6+
return "url(\"$value\")"
7+
}

‎src/jsMain/kotlin/style/layout/UniversalLayout.kt renamed to ‎src/jsMain/kotlin/style/layout/PageLayout.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import org.jetbrains.compose.web.dom.Div
55
import style.sheet.AppStyleSheet
66

77
@Composable
8-
fun UniversalLayout(content: @Composable () -> Unit) {
8+
fun PageLayout(content: @Composable () -> Unit) {
99
Div(attrs = {
10-
AppStyleSheet.universalStyle
10+
classes(AppStyleSheet.pageStyle)
1111
}) {
1212
content()
1313
}

‎src/jsMain/kotlin/style/sheet/AppSStyleSheet.kt

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,36 @@
11
package style.sheet
22

3+
import org.jetbrains.compose.web.css.Color
4+
import org.jetbrains.compose.web.css.DisplayStyle
5+
import org.jetbrains.compose.web.css.FlexDirection
36
import org.jetbrains.compose.web.css.StyleSheet
4-
import org.jetbrains.compose.web.css.margin
5-
import org.jetbrains.compose.web.css.px
7+
import org.jetbrains.compose.web.css.backgroundColor
8+
import org.jetbrains.compose.web.css.display
9+
import org.jetbrains.compose.web.css.flexDirection
10+
import org.jetbrains.compose.web.css.height
11+
import org.jetbrains.compose.web.css.vh
12+
import org.jetbrains.compose.web.css.vw
13+
import org.jetbrains.compose.web.css.width
14+
615

716
object AppStyleSheet : StyleSheet() {
8-
val universalStyle by style {
9-
this.universal.style {
10-
margin(0.px)
11-
}
17+
val pageStyle by style {
18+
display(DisplayStyle.Flex)
19+
flexDirection(FlexDirection.Column)
20+
property("box-sizing", "border-box")
21+
22+
// background
23+
backgroundColor(Color("#F5B1AA"))
24+
// backgroundImage(cssUrl("./img/Kota_Background.png"))
25+
// backgroundPosition(CSSProperty.CENTER)
26+
// backgroundSize("cover")
27+
28+
height(100.vh)
29+
width(100.vw)
30+
}
31+
32+
val centerStyle by style {
33+
display(DisplayStyle.Block)
34+
margin(MarginStyle.AUTO)
1235
}
1336
}

0 commit comments

Comments
 (0)