improvements

• calculate the copyright year dynamically • replaced rememberBreakpoint with my own NavigationBarLinkVariant & FooterLinkVariant since rememberBreakpoint may affect performance
Luki120 · Oct 30, 2024 · a87796d · a87796d
1 parent f92c574
commit a87796d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 55 deletions.
diff --git a/site/src/jsMain/kotlin/me/luki/website/composables/Footer.kt b/site/src/jsMain/kotlin/me/luki/website/composables/Footer.kt
@@ -1,7 +1,9 @@
 package me.luki.website.composables
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import com.varabyte.kobweb.compose.css.CSSLengthOrPercentageNumericValue
+import com.varabyte.kobweb.compose.css.TextDecorationLine
 import com.varabyte.kobweb.compose.foundation.layout.Arrangement
 import com.varabyte.kobweb.compose.foundation.layout.Box
 import com.varabyte.kobweb.compose.foundation.layout.Column
@@ -15,21 +17,44 @@ import com.varabyte.kobweb.core.rememberPageContext
 import com.varabyte.kobweb.silk.components.forms.Button
 import com.varabyte.kobweb.silk.components.graphics.Image
 import com.varabyte.kobweb.silk.components.navigation.Link
+import com.varabyte.kobweb.silk.components.navigation.LinkStyle
 import com.varabyte.kobweb.silk.components.text.SpanText
+import com.varabyte.kobweb.silk.style.addVariant
+import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
+import com.varabyte.kobweb.silk.style.plus
+import com.varabyte.kobweb.silk.style.selectors.hover
 import com.varabyte.kobweb.silk.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import me.luki.website.styles.SocialButtonStyle
 import me.luki.website.utils.Constants
+import me.luki.website.utils.CustomColors
 import me.luki.website.utils.Images
 import me.luki.website.utils.toSitePalette
 import org.jetbrains.compose.web.ExperimentalComposeWebApi
 import org.jetbrains.compose.web.css.cssRem
 import org.jetbrains.compose.web.css.filter
 import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.dom.Span
+import kotlin.js.Date
+
+val FooterLinkVariant = LinkStyle.addVariant {
+    base {
+        Modifier.color(CustomColors.Purple)
+    }
+
+    (Breakpoint.MD + hover) {
+        Modifier.textDecorationLine(TextDecorationLine.Underline)
+    }
+
+    Breakpoint.ZERO {
+        Modifier.textDecorationLine(TextDecorationLine.None)
+    }
+}
 
 @Composable
 fun Footer() {
+    val currentYear = remember { Date().getFullYear() }
+
     Box(
         contentAlignment = Alignment.Center,
         modifier = Modifier
@@ -46,9 +71,9 @@ fun Footer() {
         ) {
             Span {
                 FooterText(text = "This website is ")
-                Link(path = Constants.WEBSITE_URL, text = "open source")
+                Link(path = Constants.WEBSITE_URL, text = "open source", variant = FooterLinkVariant)
                 FooterText(text = ", written using ")
-                Link(path = Constants.KOBWEB_URL, text = "Kobweb")
+                Link(path = Constants.KOBWEB_URL, text = "Kobweb", variant = FooterLinkVariant)
             }
             Row(
                 horizontalArrangement = Arrangement.Center,
@@ -57,7 +82,7 @@ fun Footer() {
                 SocialButton(imageSource = Images.GITHUB, url = Constants.GITHUB_URL)
                 SocialButton(imageSource = Images.TWITTER, url = Constants.TWITTER_URL)
             }
-            FooterText(text = "© 2024 Luki120", fontSize = 0.75.cssRem)
+            FooterText(text = "© $currentYear Luki120", fontSize = 0.75.cssRem)
         }
     }
 }

diff --git a/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt b/site/src/jsMain/kotlin/me/luki/website/composables/Header.kt
@@ -4,6 +4,7 @@ import androidx.compose.runtime.*
 import com.varabyte.kobweb.browser.dom.ElementTarget
 import com.varabyte.kobweb.compose.css.FontWeight
 import com.varabyte.kobweb.compose.css.TextAlign
+import com.varabyte.kobweb.compose.css.TextDecorationLine
 import com.varabyte.kobweb.compose.css.Transition
 import com.varabyte.kobweb.compose.css.functions.clamp
 import com.varabyte.kobweb.compose.foundation.layout.Arrangement
@@ -20,24 +21,26 @@ import com.varabyte.kobweb.silk.components.icons.HamburgerIcon
 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.navigation.UncoloredLinkVariant
-import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant
+import com.varabyte.kobweb.silk.components.navigation.LinkStyle
 import com.varabyte.kobweb.silk.components.overlay.*
 import com.varabyte.kobweb.silk.components.text.SpanText
 import com.varabyte.kobweb.silk.defer.Deferred
+import com.varabyte.kobweb.silk.style.addVariant
 import com.varabyte.kobweb.silk.style.animation.Keyframes
 import com.varabyte.kobweb.silk.style.animation.toAnimation
 import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
 import com.varabyte.kobweb.silk.style.breakpoint.displayIfAtLeast
 import com.varabyte.kobweb.silk.style.breakpoint.displayUntil
+import com.varabyte.kobweb.silk.style.plus
+import com.varabyte.kobweb.silk.style.selectors.link
 import com.varabyte.kobweb.silk.style.toModifier
-import com.varabyte.kobweb.silk.theme.breakpoint.rememberBreakpoint
+import com.varabyte.kobweb.silk.style.vars.color.ColorVar
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import kotlinx.browser.localStorage
 import me.luki.website.core.COLOR_MODE_KEY
 import me.luki.website.core.SYSTEM
-import me.luki.website.styles.LinkStyle
 import me.luki.website.styles.TranslucentNavBarStyle
+import me.luki.website.utils.CustomColors
 import me.luki.website.utils.toSitePalette
 import org.jetbrains.compose.web.css.*
 
@@ -58,6 +61,28 @@ private enum class SideMenuState {
     }
 }
 
+val NavigationBarLinkVariant = LinkStyle.addVariant {
+    base {
+        Modifier.textDecorationLine(TextDecorationLine.None)
+    }
+
+    Breakpoint.MD {
+        Modifier
+            .border(
+                color = CustomColors.Purple,
+                style = LineStyle.Solid,
+                width = 2.px
+            )
+            .borderRadius(20.px)
+            .color(CustomColors.Purple)
+            .padding(topBottom = 10.px, leftRight = 20.px)
+    }
+
+    (Breakpoint.ZERO + link) {
+        Modifier.color(ColorVar.value())
+    }
+}
+
 @Composable
 fun Header() {
     Deferred {
@@ -152,13 +177,11 @@ private fun MenuItems(onLinkClick: () -> Unit = {}) {
 
 @Composable
 private fun MenuLink(path: String, text: String, onClick: () -> Unit) {
-    val breakpoint = rememberBreakpoint()
-
     Link(
         path = path,
         text = text,
-        modifier = LinkStyle.toModifier().onClick { onClick() },
-        variant = if (breakpoint == Breakpoint.ZERO) UndecoratedLinkVariant.then(UncoloredLinkVariant) else UndecoratedLinkVariant
+        modifier = Modifier.onClick { onClick() },
+        variant = NavigationBarLinkVariant
     )
 }
 

diff --git a/site/src/jsMain/kotlin/me/luki/website/core/AppEntry.kt b/site/src/jsMain/kotlin/me/luki/website/core/AppEntry.kt
@@ -5,11 +5,13 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
 import com.varabyte.kobweb.compose.css.ScrollBehavior
-import com.varabyte.kobweb.compose.css.TextDecorationLine
 import com.varabyte.kobweb.compose.css.setVariable
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.graphics.Colors
-import com.varabyte.kobweb.compose.ui.modifiers.*
+import com.varabyte.kobweb.compose.ui.modifiers.backgroundColor
+import com.varabyte.kobweb.compose.ui.modifiers.fontFamily
+import com.varabyte.kobweb.compose.ui.modifiers.minHeight
+import com.varabyte.kobweb.compose.ui.modifiers.scrollBehavior
 import com.varabyte.kobweb.compose.ui.styleModifier
 import com.varabyte.kobweb.core.App
 import com.varabyte.kobweb.silk.SilkApp
@@ -19,20 +21,14 @@ import com.varabyte.kobweb.silk.components.layout.SurfaceVars.BackgroundColor
 import com.varabyte.kobweb.silk.components.navigation.LinkStyle
 import com.varabyte.kobweb.silk.init.InitSilk
 import com.varabyte.kobweb.silk.init.InitSilkContext
-import com.varabyte.kobweb.silk.style.breakpoint.Breakpoint
 import com.varabyte.kobweb.silk.style.common.SmoothColorStyle
-import com.varabyte.kobweb.silk.style.plus
-import com.varabyte.kobweb.silk.style.selectors.hover
-import com.varabyte.kobweb.silk.style.selectors.link
-import com.varabyte.kobweb.silk.style.selectors.visited
 import com.varabyte.kobweb.silk.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import com.varabyte.kobweb.silk.theme.colors.palette.button
 import com.varabyte.kobweb.silk.theme.modifyStyle
 import kotlinx.browser.document
 import kotlinx.browser.localStorage
 import kotlinx.browser.window
-import me.luki.website.utils.CustomColors
 import org.jetbrains.compose.web.css.CSSMediaQuery
 import org.jetbrains.compose.web.css.StylePropertyValue
 import org.jetbrains.compose.web.css.vh
@@ -106,17 +102,5 @@ private fun overrideSilkStyles(context: InitSilkContext) {
                     property("-webkit-tap-highlight-color", "transparent")
                 }
         }
-        (Breakpoint.ZERO + hover) {
-            Modifier.textDecorationLine(TextDecorationLine.None)
-        }
-        (Breakpoint.MD + hover) {
-            Modifier.textDecorationLine(TextDecorationLine.Underline)
-        }
-        link {
-            Modifier.color(CustomColors.Purple)
-        }
-        visited {
-            Modifier.color(CustomColors.Purple)
-        }
     }
 }
diff --git a/site/src/jsMain/kotlin/me/luki/website/styles/LinkStyle.kt b/site/src/jsMain/kotlin/me/luki/website/styles/LinkStyle.kt