4 | based on dark.css by Ivan Sagalaev
5 |
6 | */
7 |
8 | .hljs {
9 | display: block;
10 | overflow-x: auto;
11 | padding: 0.5em;
12 | background: #3f3f3f;
13 | color: #dcdcdc;
14 | }
15 |
16 | .hljs-keyword,
17 | .hljs-selector-tag,
18 | .hljs-tag {
19 | color: #e3ceab;
20 | }
21 |
22 | .hljs-template-tag {
23 | color: #dcdcdc;
24 | }
25 |
26 | .hljs-number {
27 | color: #8cd0d3;
28 | }
29 |
30 | .hljs-variable,
31 | .hljs-template-variable,
32 | .hljs-attribute {
33 | color: #efdcbc;
34 | }
35 |
36 | .hljs-literal {
37 | color: #efefaf;
38 | }
39 |
40 | .hljs-subst {
41 | color: #8f8f8f;
42 | }
43 |
44 | .hljs-title,
45 | .hljs-name,
46 | .hljs-selector-id,
47 | .hljs-selector-class,
48 | .hljs-section,
49 | .hljs-type {
50 | color: #efef8f;
51 | }
52 |
53 | .hljs-symbol,
54 | .hljs-bullet,
55 | .hljs-link {
56 | color: #dca3a3;
57 | }
58 |
59 | .hljs-deletion,
60 | .hljs-string,
61 | .hljs-built_in,
62 | .hljs-builtin-name {
63 | color: #cc9393;
64 | }
65 |
66 | .hljs-addition,
67 | .hljs-comment,
68 | .hljs-quote,
69 | .hljs-meta {
70 | color: #7f9f7f;
71 | }
72 |
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/examples/index.md:
--------------------------------------------------------------------------------
1 | [Basic routing](/examples/basic-routing/live)
2 |
3 | [Path matching](/examples/path-matching/live)
4 |
5 | [Recursive path matching](/examples/recursive-path-matching/live)
6 |
7 | [Query parameters](/examples/query-parameters/live)
8 |
9 | [Custom directives](/examples/custom-directives/live)
10 |
11 | [Signal](/examples/signal/live)
12 |
13 | [Auth](/examples/auth/live)
14 |
15 | [Tabs](/examples/tabs/live)
16 |
17 | [Nested](/examples/nested/live)
18 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/getting-started/drafts.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Under the hood, a route is defined by a function, with a signature that approximately looks like
5 | this: `Signal[Location] => Option[Element]`
6 | (the actual signature is a bit more complicated, but that is an implementation detail, and we will not be dealing with
7 | it directly). `Location` is an equivalent of the
8 | [Window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location). Because we're in a single page
9 | application, and `Window.location` can change dynamically, the "current location" is modeled as a `Signal[Location]`.
10 |
11 |
12 |
13 | ---
14 |
15 |
16 |
17 | This looks and behaves very similar to nested routes:
18 |
19 | ```scala
20 | pathPrefix("posts") {
21 | div(
22 | path(segment) {
23 | postId
24 | div("Post ID: $postId")
25 | }
26 | )
27 | }
28 | ```
29 |
30 | The difference is that in case of "nested directives", there will be a single modifier applied to the element and a
31 | single subscription to the location signal that will drive the whole "tree of routes".
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/getting-started/index.md:
--------------------------------------------------------------------------------
1 | [Laminar basics](/getting-started/laminar-basics)
2 |
3 | A quick intro into Laminar.
4 |
5 | [First routes](/getting-started/first-routes)
6 |
7 | First steps and main concepts.
8 |
9 | [Handling 'Not Found'](/getting-started/handling-not-found)
10 |
11 | Displaying an element when none of the routes matches.
12 |
13 | [Links and Navigation](/getting-started/links-and-navigation)
14 |
15 | Single-page app navigation.
16 |
17 | [Building routes](/getting-started/building-routes)
18 |
19 | Use-cases and examples.
20 |
21 | [Nested routes](/getting-started/nested-routes)
22 |
23 | Splitting the routes across nested components.
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/conjunction.md:
--------------------------------------------------------------------------------
1 | # Conjunction
2 |
3 | Directives can be combined using the `&` operator.
4 |
5 | The resulting directive will match only if both the combined directives match.
6 |
7 | The resulting directive will provide the values provided by the combined directives
8 | in a tuple (except `Unit`s)
9 |
10 | If only one of the combined directives provides a non-`Unit` value, and it's a scalar – the conjunction will provide
11 | a scalar as well (it will not wrap it into a 1-tuple).
12 |
13 | If both combined directives provide a `Unit` — the conjunction will provide a `Unit` as well.
14 |
15 | See the [tuplez](https://github.com/tulz-app/tuplez/) library for more details.
16 |
17 | ```scala
18 | (path("page-1") & param("param-1") & param("param-2")) { (param2, param2) =>
19 | ???
20 | }
21 | ```
22 |
23 | Equivalent to "nesting":
24 |
25 | ```scala
26 | path("page-1") {
27 | param("param-1") { param1 =>
28 | param("param-2") { param2 =>
29 | ???
30 | }
31 | }
32 | }
33 |
34 | ```
35 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/custom-directives.md:
--------------------------------------------------------------------------------
1 | `TODO`
2 |
3 |
4 | ### `reject`
5 |
6 | ```scala
7 | val reject: Route
8 | ```
9 |
10 | Returns a `Route` that always rejects.
11 |
12 |
13 |
14 |
15 | # Custom directives
16 |
17 | In order to create a custom directive, you should start with an existing one and build
18 | your directive using the combinators that directives provide:
19 |
20 | * `map[R](f: L => R): Directive[R]`
21 | * `flatMap[R](next: L => Directive[R]): Directive[R]`
22 | * `collect[R](f: PartialFunction[L, R]): Directive[R]`
23 | * `filter(predicate: L => Boolean): Directive[L]`
24 |
25 | ## Example
26 |
27 | Say, you wanted to check if the next segment in the path is a number.
28 |
29 | Let's create an `asNumber` directive which we will use like this:
30 |
31 | ```scala
32 | path("user" / segment) { userId =>
33 | asNumber(userId) { userIdAsInt =>
34 | userByIdPage(userId)
35 | }
36 | }
37 | ```
38 |
39 |
40 | For this particular case, using the `long` path matcher would make much more sense, but let's try this anyway,
41 | to keep things simple.
42 |
43 |
44 | ```scala
45 | def asNumber(s: String): Directive[Int] =
46 | Try(s.toInt) match {
47 | case Success(int) => provide(int)
48 | case Failure(_) => reject
49 | }
50 | ```
51 |
52 |
53 | This is an extremely simple example, but most directives, no matter how complicated, can be
54 | derived as easily from the more powerful existing directives and more powerful combinators (like, for example,
55 | the `signal` directive or the `flatMap` combinator).
56 |
57 |
58 | [Live example](/examples/custom-directives)
59 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/disjunction.md:
--------------------------------------------------------------------------------
1 | # Disjunction
2 |
3 | Directives can be combined using the `|` operator.
4 |
5 | The resulting directive will match if any of the combined directives match.
6 |
7 | The resulting directive will provide the value provided by the first of the combined directives
8 | that matches (the remaining directives are not evaluated).
9 |
10 | ```scala
11 | (path("page-1") | path("page-1-alternative")) {
12 | ???
13 | }
14 | ```
15 |
16 | ```scala
17 | (param("param-1") | param("param-2") | param("param-3")) { valueFromParam1or2or3 =>
18 | ???
19 | }
20 | ```
21 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/first-match.md:
--------------------------------------------------------------------------------
1 | # `firstMatch`
2 |
3 | `firstMatch` takes a list of routes and returns a new route which tries to apply the alternatives in the order
4 | they are provided, until one of them matches. Rejects if all the alternatives reject.
5 |
6 | ```scala
7 | firstMatch(
8 | pathEnd { /*...*/ },
9 | pathPrefix("pages") {
10 | firstMatch(
11 | path("page-1") { /*...*/ },
12 | path("page-2") { /*...*/ }
13 | )
14 | }
15 | )
16 | ```
17 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/index.md:
--------------------------------------------------------------------------------
1 | # Directives
2 |
3 | * [Built-in directives](/reference/directives)
4 | * [.signal directive](/reference/signal-directive)
5 | * [Injecting external signal](/reference/injecting-external-signal)
6 | * [Conjunction (&)](/reference/conjunction)
7 | * [Disjunction (|)](/reference/disjunction)
8 |
9 | # Path matchers
10 |
11 | * [Built-in path matchers](/reference/path-matchers)
12 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/navigation.md:
--------------------------------------------------------------------------------
1 | # Navigation
2 |
3 | `BrowserNavigation` object contains a set of utility methods for programmatic navigation.
4 |
5 |
6 |
7 | ### pushState / replaceState
8 |
9 | ```scala
10 | def pushState(
11 | data: js.Any = js.undefined,
12 | title: String = "",
13 | url: js.UndefOr[String] = js.undefined,
14 | popStateEvent: Boolean = true
15 | ): Unit
16 |
17 | def replaceState(
18 | url: js.UndefOr[String] = js.undefined,
19 | title: String = "",
20 | data: js.Any = js.undefined,
21 | popStateEvent: Boolean = true
22 | ): Unit
23 | ```
24 |
25 | These methods should be used for navigation instead of directly calling `window.history.pushState` / `window.history.replaceState`.
26 |
27 | If `popStateEvent` is `true`, `emitPopStateEvent` will be invoked as well (the browser does not emit this event in case of
28 | programmatic history push/replace).
29 |
30 |
31 |
32 | ### emitPopStateEvent
33 |
34 | ```scala
35 | def emitPopStateEvent(): Unit
36 | ```
37 |
38 | Emits (`dom.window.dispatchEvent`) a `popstate` event.
39 |
40 |
41 | ### preserveScroll
42 |
43 | ```scala
44 | def preserveScroll(keep: Boolean): Unit
45 | ```
46 |
47 | Configures whether `BrowserNavigation` should preserve the window scroll location (in the history state) when pushing state (`pushState`).
48 |
49 |
50 | ## restoreScroll
51 |
52 | ```scala
53 | def restoreScroll(): Unit
54 | ```
55 |
56 | If scroll position is available in the current history state — scrolls the window to that position. You might want to use this after you render your content and want the `back`/`forward` buttons
57 | to get the user to the position on the page where they used to be before navigation.
58 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/signal-directive.md:
--------------------------------------------------------------------------------
1 | # .signal
2 |
3 | ```scala
4 | (d: Directive[L]).signal: Directive[Signal[L]]
5 | ```
6 |
7 | Transforms a `Directive[L]` into a `Directive[Signal[L]]`.
8 |
9 | Whenever you have a directive, you can call the `.signal` function on it.
10 |
11 | ```scala
12 | param("param-name").signal { (paramSignal: Signal[String]) =>
13 | /* ... */
14 | }
15 | ```
16 |
17 | ## When would this be useful?
18 |
19 | Consider the following example:
20 |
21 | ```scala
22 | def MyPage(selectedTab: String): Element = ???
23 |
24 | pathPrefix("dashboard") {
25 | maybeParam("tab").map(_.getOrElse("summary")) { (selectedTab: String) =>
26 | MyPage(selectedTab)
27 | }
28 | }
29 | ```
30 |
31 | In this case, whenever the query string changes to have a different value for the `tab` parameter, the route will
32 | be re-evaluated and `MyPage(selectedTab)` will be called again.
33 |
34 | For example, you might not want to re-render the whole page from scratch whenever `selectedTab`
35 | changes. Rather, you might want to keep the rendered page with all the DOM and state, and only change a visibility of
36 | some elements on the page according to the `selectedTab` parameter.
37 |
38 | To achieve that, you can use the `.signal` combinator:
39 |
40 | ```scala
41 | def MyPage(selectedTab: Signal[String]): Element = ???
42 |
43 | pathPrefix("dashboard") {
44 | maybeParam("tab").map(_.getOrElse("summary")).signal { (selectedTab: Signal[String]) =>
45 | MyPage(selectedTab)
46 | }
47 | }
48 | ```
49 |
50 | The `selectedTab` is now a `Signal[String]` (not a `String`), and when the `tab` parameter changes,
51 | `MyPage` will not be called again — rather, the value inside the
52 | `selectedTab` signal will change, and you can react to it in your rendering logic.
53 |
--------------------------------------------------------------------------------
/website/src/main/resources/doc/reference/under-the-hood/route.md:
--------------------------------------------------------------------------------
1 | # Route
2 |
3 | `Route` is a `Modifier`, which wraps a function that accepts the current location,
4 | the previous routing state and the current routing state:
5 |
6 | ```scala
7 | trait Route extends ((RouteLocation, RoutingState, RoutingState) => Signal[RouteResult]) with Mod[HtmlElement]
8 | ```
9 |
10 | The result of the `Route` function is either a match or a rejection.
11 |
12 | ```scala
13 | object RouteResult {
14 |
15 | final case class Matched(state: RoutingState, location: RouteLocation, result: () => Signal[Element]) extends RouteResult
16 |
17 | case object Rejected extends RouteResult
18 |
19 | }
20 | ```
21 |
22 | When a route matches, it returns the remaining part of the location (which can subsequently be used in the
23 | nested routes), the updated `RoutingState`, and the `Element` to be rendered (inside a `Signal`).
24 |
25 | A `Route` acts like the `child.maybe <-- ...` modifier. When a `Route` is mounted, it subscribes to the relevant `Signal[Location]`
26 | and reacts to changes in it:
27 |
28 | * if it's a match, the `Route` inserts the result into the parent element;
29 | * if it's a rejection, it removes the previous result (if any) from the parent element;
30 |
31 | There is a top-level location signal, which is derived directly from `window.location`, and changes
32 | whenever a [popstate event](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)
33 | is emitted. Top-level routes will be subscribing to this signal.
34 |
35 | Routes can (and often do) "consume" parts of the path in the location, leaving the remaining path for
36 | the nested routes. Nested routes do not subscribe to the top-level location signal: rather, they get their own signals
37 | with a location that may have been partially "consumed" by the parent routes.
38 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/Page.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | import com.raquo.laminar.api.L.*
4 |
5 | final class Page private (
6 | val path: String,
7 | val link: String,
8 | val title: String,
9 | val render: () => Element
10 | )
11 |
12 | object Page {
13 |
14 | def apply(
15 | path: String,
16 | link: String,
17 | title: String,
18 | render: => Element
19 | ): Page = new Page(
20 | path,
21 | link,
22 | title,
23 | () => render
24 | )
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/SiteModule.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | class SiteModule private (
4 | val path: String,
5 | val title: String,
6 | val index: Page,
7 | val navigation: Seq[(String, Seq[Page])]
8 | ) {
9 |
10 | def findPage(path: String): Option[Page] = {
11 | navigation.flatMap(_._2).find(_.path == path)
12 | }
13 |
14 | }
15 |
16 | object SiteModule {
17 |
18 | def apply(
19 | path: String,
20 | title: String,
21 | index: Page,
22 | navigation: (String, Seq[Page])*
23 | ): SiteModule = new SiteModule(path, title, index, navigation)
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/SsrContext.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | case class SsrContext(
4 | ssr: Boolean
5 | )
6 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/Wiring.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | import org.scalajs.dom
4 |
5 | class Wiring(
6 | val ssrContext: SsrContext,
7 | val routes: Routes
8 | )
9 |
10 | object Wiring {
11 |
12 | def apply(): Wiring = {
13 | new Wiring(
14 | ssrContext = SsrContext(
15 | ssr = dom.window.navigator.userAgent == "frontroute/ssr"
16 | ),
17 | routes = new Routes
18 | )
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/components/DocumentationDisplay.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.components
2 |
3 | import io.laminext.highlight.Highlight
4 | import com.raquo.laminar.api.L.*
5 | import io.laminext.syntax.dangerous.*
6 |
7 | object DocumentationDisplay {
8 |
9 | def apply(title: String, markdown: String): Element =
10 | div(
11 | cls := "space-y-4",
12 | h1(
13 | cls := "font-display text-3xl font-bold text-gray-900 tracking-wider md:hidden",
14 | title
15 | ),
16 | div(
17 | cls := "prose prose-blue max-w-none",
18 | unsafeInnerHtml := markdown,
19 | onMountCallback { ctx =>
20 | ctx.thisNode.ref.querySelectorAll("pre > code").foreach { codeElement =>
21 | Highlight.highlightElement(codeElement)
22 | }
23 | }
24 | )
25 | )
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/CodeExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.examples
2 |
3 | import com.raquo.laminar.api.L.*
4 |
5 | abstract class CodeExample(
6 | val id: String,
7 | val title: String,
8 | val description: String,
9 | val links: Seq[String]
10 | )(
11 | _code: sourcecode.Text[() => Element]
12 | ) {
13 |
14 | val code: sourcecode.Text[() => Element] = _code
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_advanced_params/AdvancedParamsExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.examples.ex_advanced_params
2 |
3 | import com.yurique.embedded.FileAsString
4 | import frontroute.site.examples.CodeExample
5 |
6 | object AdvancedParamsExample
7 | extends CodeExample(
8 | id = "advanced-query-parameters",
9 | title = "Advanced query parameters",
10 | description = FileAsString("description.md"),
11 | links = Seq(
12 | "/",
13 | "/movies",
14 | "/movies?page=1",
15 | "/movies?page=2",
16 | "/movies?page=3",
17 | )
18 | )(() => {
19 | import com.raquo.laminar.api.L.*
20 | import frontroute.*
21 | import scala.util.Try
22 |
23 | /* */
24 | def intParam(name: String): Directive[Int] =
25 | param(name).emap { string =>
26 | Try(string.toInt).toEither
27 | }
28 | /* */
29 |
30 | routes(
31 | div(
32 | cls := "p-4 min-h-[300px]",
33 | pathEnd {
34 | div(cls := "text-2xl", "Index page.")
35 | },
36 | /* */
37 | (path("movies") & intParam("page").opt.default(0)) { movieId =>
38 | /* */
39 | div(div(cls := "text-2xl", "Movie page."), div(s"Movies, page: $movieId"))
40 | /* */
41 | },
42 | /* */
43 | (noneMatched & extractUnmatchedPath) { unmatched =>
44 | div(
45 | div(cls := "text-2xl", "Not Found"),
46 | div(unmatched.mkString("/", "/", ""))
47 | )
48 | }
49 | )
50 | )
51 | })
52 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_advanced_params/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_auth/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_basic/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_custom_directives/CustomDirectivesExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 | package examples
3 | package ex_custom_directives
4 |
5 | import com.yurique.embedded.FileAsString
6 |
7 | object CustomDirectivesExample
8 | extends CodeExample(
9 | id = "custom-directives",
10 | title = "Custom directives",
11 | description = FileAsString("description.md"),
12 | links = Seq(
13 | "/",
14 | "/movie?id=1",
15 | "/movie?id=2",
16 | "/movie?id=not-long"
17 | )
18 | )(() => {
19 | import com.raquo.laminar.api.L.*
20 | import frontroute.*
21 | import scala.util.*
22 |
23 | def longParam(paramName: String): Directive[Long] =
24 | /* */
25 | param(paramName).flatMap { paramValue =>
26 | Try(paramValue.toLong).fold(
27 | _ => reject,
28 | parsed => provide(parsed)
29 | )
30 | }
31 | /* */
32 |
33 | routes(
34 | div(
35 | cls := "p-4 min-h-[300px]",
36 | pathEnd {
37 | div(cls := "text-2xl", "Index page.")
38 | },
39 | (
40 | path("movie") &
41 | /* */
42 | longParam("id")
43 | /* */
44 | ) { movieId =>
45 | div(div(cls := "text-2xl", "Movie page."), div(s"Movie ID (long): $movieId"))
46 | },
47 | (noneMatched & extractUnmatchedPath) { unmatched =>
48 | div(
49 | div(cls := "text-2xl", "Not Found"),
50 | div(unmatched.mkString("/", "/", ""))
51 | )
52 | }
53 | )
54 | )
55 | })
56 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_custom_directives/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_effect/EffectExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.examples.ex_effect
2 |
3 | import frontroute.site.examples.CodeExample
4 | import com.yurique.embedded.FileAsString
5 |
6 | object EffectExample
7 | extends CodeExample(
8 | id = "run-effect",
9 | title = "Run Effect",
10 | description = FileAsString("description.md"),
11 | links = Seq(
12 | "/",
13 | "/effect-1",
14 | "/effect-2",
15 | "/some-page"
16 | )
17 | )(() => {
18 | import frontroute.*
19 |
20 | import com.raquo.laminar.api.L.*
21 | import org.scalajs.dom
22 |
23 | routes(
24 | div(
25 | cls := "p-4 min-h-[300px]",
26 | /* */
27 | pathEnd {
28 | /* */
29 | div(cls := "text-2xl", "Index page.")
30 | /* */
31 | },
32 | path("effect-1") {
33 | runEffect {
34 | dom.console.log("effect 1")
35 | }
36 | },
37 | path("effect-2") {
38 | runEffect {
39 | dom.console.log("effect 2")
40 | }
41 | },
42 | /* */
43 | (noneMatched & extractUnmatchedPath) { unmatched =>
44 | div(
45 | div(cls := "text-2xl", "Not Found"),
46 | div(unmatched.mkString("/", "/", ""))
47 | )
48 | }
49 | )
50 | )
51 | })
52 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_effect/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_execute/ExecuteExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.examples.ex_execute
2 |
3 | import frontroute.site.examples.CodeExample
4 | import com.yurique.embedded.FileAsString
5 |
6 | object ExecuteExample
7 | extends CodeExample(
8 | id = "execute",
9 | title = "Execute",
10 | description = FileAsString("description.md"),
11 | links = Seq(
12 | "/",
13 | "/execute-1",
14 | "/execute-2",
15 | "/execute-2/sub-1",
16 | "/execute-2/sub-2",
17 | "/execute-2/sub-2/sub-sub-1",
18 | "/execute-2/sub-2/sub-sub-2",
19 | "/some-page"
20 | )
21 | )(() => {
22 | import frontroute.*
23 | import com.raquo.laminar.api.L.*
24 | import org.scalajs.dom
25 |
26 | routes(
27 | div(
28 | cls := "p-4 min-h-[300px]",
29 | pathEnd.execute {
30 | dom.console.log("root")
31 | },
32 | path("execute-1").execute {
33 | dom.console.log("execute-1")
34 | },
35 | pathPrefix("execute-2") {
36 | firstMatch(
37 | pathEnd.execute {
38 | dom.console.log("execute-2")
39 | },
40 | path(segment).execute { s =>
41 | dom.console.log(s"execute-2/${s}")
42 | },
43 | path(segment / segment).execute { case (s1, s2) =>
44 | dom.console.log(s"execute-2/${s1}/${s2}")
45 | },
46 | )
47 | },
48 | (noneMatched & extractUnmatchedPath) { unmatched =>
49 | div(
50 | div(cls := "text-2xl", "Not Found"),
51 | div(unmatched.mkString("/", "/", ""))
52 | )
53 | }
54 | )
55 | )
56 | })
57 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_execute/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_extract_matched_path/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_matched_path/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_multiparams/MultiParamsExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.examples.ex_multiparams
2 |
3 | import com.yurique.embedded.FileAsString
4 | import frontroute.site.examples.CodeExample
5 |
6 | object MultiParamsExample
7 | extends CodeExample(
8 | id = "multi-parameters",
9 | title = "Query multi-parameters",
10 | description = FileAsString("description.md"),
11 | links = Seq(
12 | "/",
13 | "/movies/search?director=cameron&director=spielberg&year=1991&year=1992&year=1993",
14 | "/movies/search?director=cameron&director=quentin",
15 | "/movies/search?year=1991&year=1992&year=1994&year=1995"
16 | )
17 | )(() => {
18 | import com.raquo.laminar.api.L.*
19 | import frontroute.*
20 |
21 | routes(
22 | div(
23 | cls := "p-4 min-h-[300px]",
24 | pathEnd {
25 | div(cls := "text-2xl", "Index page.")
26 | },
27 | /* */
28 | (
29 | path("movies" / "search") &
30 | multiParam("director") &
31 | multiParam("year")
32 | ) { (maybeDirector, maybeYear) =>
33 | /* */
34 | div(div(cls := "text-2xl", "Movie search page."), div(s"Director: $maybeDirector"), div(s"Year: $maybeYear"))
35 | /* */
36 | },
37 | /* */
38 | (noneMatched & extractUnmatchedPath) { unmatched =>
39 | div(
40 | div(cls := "text-2xl", "Not Found"),
41 | div(unmatched.mkString("/", "/", ""))
42 | )
43 | }
44 | )
45 | )
46 | })
47 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_multiparams/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_navigate/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_navmod/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_nested/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_params/ParamsExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 | package examples
3 | package ex_params
4 |
5 | import com.yurique.embedded.FileAsString
6 |
7 | object ParamsExample
8 | extends CodeExample(
9 | id = "query-parameters",
10 | title = "Query parameters",
11 | description = FileAsString("description.md"),
12 | links = Seq(
13 | "/",
14 | "/movie?id=2356777",
15 | "/movie?id=0306414",
16 | "/movies/search?director=cameron&year=1991",
17 | "/movies/search?director=cameron",
18 | "/movies/search?year=1991"
19 | )
20 | )(() => {
21 | import com.raquo.laminar.api.L.*
22 | import frontroute.*
23 |
24 | routes(
25 | div(
26 | cls := "p-4 min-h-[300px]",
27 | pathEnd {
28 | div(cls := "text-2xl", "Index page.")
29 | },
30 | /* */
31 | (path("movie") & param("id")) { movieId =>
32 | /* */
33 | div(div(cls := "text-2xl", "Movie page."), div(s"Movie ID: $movieId"))
34 | /* */
35 | },
36 | /* */
37 | /* */
38 | (
39 | path("movies" / "search") &
40 | maybeParam("director") &
41 | maybeParam("year")
42 | ) { (maybeDirector, maybeYear) =>
43 | /* */
44 | div(div(cls := "text-2xl", "Movie search page."), div(s"Director: $maybeDirector"), div(s"Year: $maybeYear"))
45 | /* */
46 | },
47 | /* */
48 | (noneMatched & extractUnmatchedPath) { unmatched =>
49 | div(
50 | div(cls := "text-2xl", "Not Found"),
51 | div(unmatched.mkString("/", "/", ""))
52 | )
53 | }
54 | )
55 | )
56 | })
57 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_params/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_path_matching/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_recursive_path_matching/RecursivePathMatchingExample.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 | package examples
3 | package ex_recursive_path_matching
4 |
5 | import com.yurique.embedded.FileAsString
6 |
7 | object RecursivePathMatchingExample
8 | extends CodeExample(
9 | id = "recursive-path-matching",
10 | title = "Recursive path matching",
11 | description = FileAsString("description.md"),
12 | links = Seq(
13 | "/",
14 | "/recursive",
15 | "/recursive/1",
16 | "/recursive/1/2",
17 | "/recursive/1/2/3",
18 | "/recursive/1/2/3/4",
19 | "/recursive/1/2/3/4/5"
20 | )
21 | )(() => {
22 | import com.raquo.laminar.api.L.*
23 | import frontroute.*
24 |
25 | def recursivePathMatch: Directive[List[String]] =
26 | /* */
27 | pathEnd.mapTo(List.empty[String]) | pathPrefix(segment).flatMap { head =>
28 | recursivePathMatch.map { rest =>
29 | head :: rest
30 | }
31 | }
32 | /* */
33 |
34 | routes(
35 | div(
36 | cls := "p-4 min-h-[300px]",
37 | pathEnd {
38 | div(cls := "text-2xl", "Index page.")
39 | },
40 | (
41 | pathPrefix("recursive") &
42 | /* */
43 | recursivePathMatch
44 | /* */
45 | ) { segments =>
46 | div(div(cls := "text-2xl", "Recursive page."), div(s"Segments: ${segments.mkString(", ")}"))
47 | },
48 | (noneMatched & extractUnmatchedPath) { unmatched =>
49 | div(
50 | div(cls := "text-2xl", "Not Found"),
51 | div(unmatched.mkString("/", "/", ""))
52 | )
53 | }
54 | )
55 | )
56 | })
57 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_recursive_path_matching/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/ex_tabs/description.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/examples/package.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | import com.raquo.laminar.api.L.*
4 |
5 | package object examples {
6 |
7 | type TitledExample[E <: Element] = (String, sourcecode.Text[E])
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/layout/PageFooter.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.layout
2 |
3 | import com.raquo.laminar.api.L.*
4 | import com.raquo.laminar.nodes.ReactiveHtmlElement
5 |
6 | object PageFooter {
7 |
8 | def apply(
9 | ): ReactiveHtmlElement.Base =
10 | div(
11 | cls := "hidden bg-gray-900 text-white p-4"
12 | )
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/layout/PageWrap.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.layout
2 |
3 | import frontroute.site.Page
4 | import frontroute.site.Site
5 | import frontroute.site.SiteModule
6 | import frontroute.site.Styles
7 | import com.raquo.laminar.api.L.*
8 | import io.laminext.syntax.core.*
9 | import io.laminext.syntax.tailwind.*
10 | import com.raquo.laminar.nodes.ReactiveHtmlElement
11 |
12 | object PageWrap {
13 |
14 | def apply(
15 | $page: Signal[Option[(SiteModule, Page)]],
16 | menuObserver: Observer[Option[ModalContent]]
17 | ): ReactiveHtmlElement.Base = {
18 | div(
19 | linkTag(
20 | rel := "stylesheet",
21 | href <-- Styles.highlightStyle.signal.map(s => Site.thisVersionHref(s"/stylesheets/highlightjs/${s}.css"))
22 | ),
23 | div(
24 | cls := "h-screen flex flex-col",
25 | PageHeader($page, menuObserver),
26 | noScriptTag(
27 | div(
28 | cls := "max-w-5xl border-l-4 border-red-400 bg-red-50 text-red-900 mx-auto p-4 font-condensed",
29 | "Your browser does not support JavaScript: some features of this site may not work properly."
30 | )
31 | ),
32 | div(
33 | cls := "flex-1 flex overflow-hidden",
34 | PageNavigation($page).hiddenIf($page.optionMap(_._1).optionContains(Site.indexModule)),
35 | div(
36 | cls := "flex-1 bg-gray-200 overflow-auto md:p-4",
37 | div(
38 | cls := "lg:container lg:mx-auto lg:max-w-4xl lg:p-8 p-4 bg-white min-h-full flex flex-col",
39 | child.maybe <-- $page.optionMap { case (_, page) => page.render() }
40 | )
41 | )
42 | ),
43 | PageFooter()
44 | )
45 | )
46 | }
47 |
48 | }
49 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/pages/CodeExamplePage.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.pages
2 |
3 | import com.raquo.laminar.api.L.*
4 | import frontroute.site.components.CodeExampleDisplay
5 | import frontroute.site.examples.CodeExample
6 |
7 | object CodeExamplePage {
8 |
9 | def apply(example: CodeExample): Element = page(example.title) {
10 | CodeExampleDisplay(example)
11 | }
12 |
13 | }
14 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/pages/DocumentationPage.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.pages
2 |
3 | import com.raquo.laminar.api.L.*
4 | import frontroute.site.components.DocumentationDisplay
5 |
6 | object DocumentationPage {
7 |
8 | def apply(title: String, markdown: String): Element = page(title) {
9 | DocumentationDisplay(title, markdown)
10 | }
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/pages/NotFoundPage.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site.pages
2 |
3 | import com.raquo.laminar.api.L.*
4 | import frontroute.site.components.DocumentationDisplay
5 |
6 | object NotFoundPage {
7 |
8 | def apply(title: String, markdown: String): Element = page(title) {
9 | DocumentationDisplay(title, markdown)
10 | }
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/website/src/main/scala/frontroute/site/pages/package.scala:
--------------------------------------------------------------------------------
1 | package frontroute.site
2 |
3 | import com.raquo.laminar.api.L.*
4 | import frontroute.*
5 |
6 | package object pages {
7 |
8 | def page(
9 | title: String,
10 | description: Option[String] = None,
11 | keywords: Option[String] = None,
12 | status: PageStatusCode = PageStatusCode.Ok
13 | )(
14 | content: => Element
15 | ): Element =
16 | content.amend(
17 | onMountCallback { _ =>
18 | DocumentMeta.set(
19 | title = title,
20 | description = description,
21 | keywords = keywords,
22 | status = status
23 | )
24 | }
25 | )
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/website/src/main/static/fonts/Inter-VariableFont_slnt,wght.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tulz-app/frontroute/6f13ad036ae6dfb1c5b557e392a9bfda2c2654fe/website/src/main/static/fonts/Inter-VariableFont_slnt,wght.ttf
--------------------------------------------------------------------------------
/website/src/main/static/fonts/JetBrainsMono-VariableFont_wght.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tulz-app/frontroute/6f13ad036ae6dfb1c5b557e392a9bfda2c2654fe/website/src/main/static/fonts/JetBrainsMono-VariableFont_wght.ttf
--------------------------------------------------------------------------------
/website/src/main/static/fonts/Oxanium-VariableFont_wght.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tulz-app/frontroute/6f13ad036ae6dfb1c5b557e392a9bfda2c2654fe/website/src/main/static/fonts/Oxanium-VariableFont_wght.ttf
--------------------------------------------------------------------------------
/website/src/main/static/stylesheets/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Inter';
3 | src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype supports variations'),
4 | url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
5 | font-weight: 100 1000;
6 | font-stretch: 25% 151%;
7 | }
8 | @font-face {
9 | font-family: 'JetBrains Mono';
10 | src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype supports variations'),
11 | url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
12 | font-weight: 100 1000;
13 | font-stretch: 25% 151%;
14 | }
15 | @font-face {
16 | font-family: 'Oxanium';
17 | src: url('../fonts/Oxanium-VariableFont_wght.ttf') format('truetype supports variations'),
18 | url('../fonts/Oxanium-VariableFont_wght.ttf') format('truetype-variations');
19 | font-weight: 100 1000;
20 | font-stretch: 25% 151%;
21 | }
22 |
--------------------------------------------------------------------------------
/website/src/main/static/stylesheets/index.css:
--------------------------------------------------------------------------------
1 | @import './tailwind.css';
2 | @import './fonts.css';
3 | @import './markdown.css';
4 | @import './buttons.css';
5 |
6 |
7 | @layer base {
8 |
9 | body {
10 | @apply font-serif;
11 | }
12 |
13 | [type='text'],
14 | [type='email'],
15 | [type='url'],
16 | [type='password'],
17 | [type='number'],
18 | [type='date'],
19 | [type='datetime-local'],
20 | [type='month'],
21 | [type='search'],
22 | [type='tel'],
23 | [type='time'],
24 | [type='week'],
25 | [multiple],
26 | textarea,
27 | select {
28 | @apply shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-1 border-blue-300 rounded-md bg-blue-50 text-blue-700 placeholder-blue-400 font-mono;
29 | }
30 |
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/website/src/main/static/stylesheets/markdown.css:
--------------------------------------------------------------------------------
1 | .prose code:not(.hljs) {
2 | @apply bg-blue-50 !important;
3 | @apply hover:bg-blue-200 !important;
4 | @apply text-blue-900 !important;
5 | @apply px-1 !important;
6 | @apply rounded !important;
7 | }
8 |
9 | .prose code:not(.hljs):before {
10 | content: "" !important;
11 | }
12 |
13 | .prose code:not(.hljs):after {
14 | content: "" !important;
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/website/src/main/static/stylesheets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | @tailwind screens;
5 |
--------------------------------------------------------------------------------
/website/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['stylelint-config-recommended'],
3 | rules: {
4 | 'at-rule-no-unknown': [ true, {
5 | ignoreAtRules: [
6 | 'tailwind',
7 | 'apply',
8 | 'variants',
9 | 'responsive',
10 | 'screen'
11 | ]
12 | }],
13 | 'declaration-block-trailing-semicolon': false,
14 | 'no-descending-specificity': null,
15 | 'max-nesting-depth': 10,
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/website/vite.config.js:
--------------------------------------------------------------------------------
1 | import {resolve} from 'path'
2 | import {createHtmlPlugin} from 'vite-plugin-html'
3 | import commonjs from '@rollup/plugin-commonjs';
4 | import viteCompression from 'vite-plugin-compression';
5 | import fs from 'fs'
6 |
7 | import scalaVersion from './scala-version'
8 |
9 | const frontrouteVersion = fs.readFileSync('.frontroute-version')
10 |
11 | // https://vitejs.dev/config/
12 | export default ({mode}) => {
13 | const mainJS = `target/scala-${scalaVersion}/website-${mode === 'production' ? 'opt' : 'fastopt'}/main.js`
14 | const script = ``
15 |
16 | /** @type {import('vite').UserConfig} */
17 | return {
18 | server: {
19 | port: 6080,
20 | },
21 | base: `/v/${frontrouteVersion}/`,
22 | publicDir: './src/main/public',
23 | build: {
24 | outDir: `dist/v/${frontrouteVersion}`,
25 | },
26 | optimizeDeps: {
27 | disabled: mode === 'production',
28 | },
29 | plugins: [
30 | ...(mode === 'production' ? [
31 | commonjs(),
32 | viteCompression({
33 | filter: /\.(js|css|html)$/i,
34 | algorithm: 'gzip'
35 | }),
36 | viteCompression({
37 | filter: /\.(js|css|html)$/i,
38 | algorithm: 'brotliCompress'
39 | }),
40 | ] : []),
41 | createHtmlPlugin({
42 | minify: mode === 'production',
43 | inject: {
44 | data: {
45 | script,
46 | pl: mode === 'production' ? '' : ''
47 | },
48 | },
49 | }),
50 | ],
51 | resolve: {
52 | alias: {
53 | 'stylesheets': resolve(__dirname, './src/main/static/stylesheets'),
54 | 'svg': resolve(__dirname, './src/main/static/svg'),
55 | }
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------