Shubham Singh
12/25/2024, 10:25 AMTopBar
composable that I want to share between multiple destinations/pages.David Herman
12/25/2024, 9:30 PMkobweb create app
which shares the NavHeader
composable across multiple pages (called by the PageLayout composable). You can also look at my blog site, which defines two page layouts, one which delegates to the other:
https://github.com/bitspittle/bitspittle.dev/blob/main/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt
https://github.com/bitspittle/bitspittle.dev/blob/main/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/BlogLayout.ktShubham Singh
12/26/2024, 12:21 PMScaffold-like
composable that he will manually have to use in all his @Page
composables?Shubham Singh
12/26/2024, 12:23 PMlayouts
, sections
, and widgets
are not special keywords (like in frameworks like Next.js) and give people just a way to organise their code if they didn't already know how to do so?S.
12/26/2024, 2:22 PMShubham Singh
12/26/2024, 2:23 PMS.
12/26/2024, 2:28 PMShubham Singh
12/26/2024, 2:29 PMS.
12/26/2024, 2:35 PMDavid Herman
12/26/2024, 7:55 PM@DefaultLayout
annotation that would apply to all pages automatically.Shubham Singh
12/26/2024, 8:00 PMDavid Herman
12/26/2024, 8:00 PMShubham Singh
12/26/2024, 8:02 PMJIRA
as an example
When you open a ticket's dialog on the same page, it routes to the same URL with a #
parameter added to it, essentially staying on the same page (not needing to recompose it), but animating-in the dialog
And when you need to close the dialog, just navigate to the same page without the #
parameterS.
12/26/2024, 8:03 PMShubham Singh
12/26/2024, 8:04 PMS.
12/26/2024, 8:05 PMS.
12/26/2024, 8:05 PMDavid Herman
12/26/2024, 8:06 PMS.
12/26/2024, 8:07 PMDavid Herman
12/26/2024, 8:07 PMShubham Singh
12/26/2024, 8:07 PMMyPage
that I want all routes to respond to
e.g.
localhost:8080/routeA
localhost:8080/routeA/B/C
localhost:8080/routeB/C/D
and so on
all routes should open up the same page, so that I could then detect which URL has been opened and what section to displayDavid Herman
12/26/2024, 8:07 PMShubham Singh
12/26/2024, 8:08 PMDavid Herman
12/26/2024, 8:08 PMDavid Herman
12/26/2024, 8:08 PMS.
12/26/2024, 8:09 PMShubham Singh
12/26/2024, 8:10 PMS.
12/26/2024, 8:11 PMDavid Herman
12/26/2024, 8:15 PM// Watch.kt
@Page
@Composable
fun WatchPage() {
/* ... */
}
@Page("/alt-watch")
@Composable
fun AltWatchPage() { WatchPage() }
@Page("/watch/a/b")
@Composable
fun WatchABPage() { WatchPage() }
etc.David Herman
12/26/2024, 8:16 PM/watch/{video-id}
)Shubham Singh
12/26/2024, 8:18 PMDavid Herman
12/26/2024, 10:11 PMDavid Herman
12/26/2024, 10:14 PM@Page("/{a}")
@Page("/{a}/{b}")
@Page("/{a}/{b}/{c}")
@Page("/{a}/{b}/{c}/{d}")
and have those delegate to some target composable methodDavid Herman
12/26/2024, 10:55 PMDavid Herman
12/26/2024, 10:56 PMDavid Herman
12/26/2024, 10:57 PMDavid Herman
12/26/2024, 11:00 PMDavid Herman
12/26/2024, 11:05 PMDavid Herman
12/26/2024, 11:06 PM@Page("{...slug}")
Shubham Singh
12/27/2024, 2:54 AMDavid Herman
12/27/2024, 3:49 AMShubham Singh
12/27/2024, 3:51 AM@Page
and switch its content on user interaction
Maybe create my own variant of AnimatedContent
composableDavid Herman
12/27/2024, 4:39 AMDavid Herman
12/27/2024, 4:40 AMShubham Singh
12/27/2024, 4:43 AMDavid Herman
12/30/2024, 8:45 PM0.20.1-SNAPSHOT
, you should now be able to do this:
// com/example/pages/Index.kt
@Page("{...path?}")
@Composable
fun CatchAllPage() {
val ctx = rememberPageContext()
println(ctx.route.params.getValue("path"))
}
You can read more here: https://github.com/varabyte/kobweb/tree/0.20.1#catch-all-dynamic-routes
If you are able to give it a try, please let me know if you run into any problems.Shubham Singh
01/01/2025, 5:45 PMDavid Herman
01/01/2025, 5:49 PMShubham Singh
01/01/2025, 6:25 PM