Add title and topbar

This commit is contained in:
Paul-Henri Froidmont 2025-08-27 03:09:14 +02:00
parent 124239925d
commit fca87a4263
Signed by: phfroidmont
GPG key ID: BE948AFD7E7873BE
5 changed files with 14 additions and 10 deletions

View file

@ -54,4 +54,4 @@ object example extends ScalaCommon:
object js extends TypeScriptModule: object js extends TypeScriptModule:
def mainFileName = "app.js" def mainFileName = "app.js"
def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8") def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0")

View file

@ -1,3 +1,4 @@
import scalive.codecs.BooleanAsAttrPresenceCodec
import scalive.codecs.StringAsIsCodec import scalive.codecs.StringAsIsCodec
import scalive.defs.attrs.HtmlAttrs import scalive.defs.attrs.HtmlAttrs
import scalive.defs.complex.ComplexHtmlKeys import scalive.defs.complex.ComplexHtmlKeys
@ -5,7 +6,7 @@ import scalive.defs.tags.HtmlTags
package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys: package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys:
lazy val defer = htmlAttr("defer", codecs.BooleanAsOnOffStringCodec) lazy val defer = htmlAttr("defer", codecs.BooleanAsAttrPresenceCodec)
object phx: object phx:
private def phxAttr(suffix: String): HtmlAttr[String] = private def phxAttr(suffix: String): HtmlAttr[String] =
@ -13,9 +14,10 @@ package object scalive extends HtmlTags with HtmlAttrs with ComplexHtmlKeys:
private def phxAttrJson(suffix: String): HtmlAttrJsonValue = private def phxAttrJson(suffix: String): HtmlAttrJsonValue =
new HtmlAttrJsonValue(s"phx-$suffix") new HtmlAttrJsonValue(s"phx-$suffix")
private def dataPhxAttr(suffix: String): HtmlAttr[String] = private def dataPhxAttr(suffix: String): HtmlAttr[String] =
new HtmlAttr(s"data-phx-$suffix", StringAsIsCodec) dataAttr(s"phx-$suffix")
private[scalive] lazy val session = dataPhxAttr("session") private[scalive] lazy val session = dataPhxAttr("session")
private[scalive] lazy val main = htmlAttr("data-phx-main", BooleanAsAttrPresenceCodec)
lazy val click = phxAttrJson("click") lazy val click = phxAttrJson("click")
def value(key: String) = phxAttr(s"value-$key") def value(key: String) = phxAttr(s"value-$key")

View file

@ -1,7 +1,6 @@
import { Socket } from "phoenix" import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view" import { LiveSocket } from "phoenix_live_view"
// import topbar from "../vendor/topbar" import topbar from "topbar"
// import Calendar from "./hooks/calendar"
// let csrfToken = // let csrfToken =
// document.querySelector("meta[name='csrf-token']").getAttribute("content") // document.querySelector("meta[name='csrf-token']").getAttribute("content")
@ -12,9 +11,9 @@ let liveSocket = new LiveSocket("/live", Socket, {
}); });
// Show progress bar on live navigation and form submits // Show progress bar on live navigation and form submits
// topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }) topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
// window.addEventListener("phx:page-loading-start", info => topbar.delayedShow(200)) window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
// window.addEventListener("phx:page-loading-stop", info => topbar.hide()) window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// connect if there are any LiveViews on the page // connect if there are any LiveViews on the page
liveSocket.connect() liveSocket.connect()

View file

@ -6,7 +6,9 @@ object RootLayout:
lang := "en", lang := "en",
headTag( headTag(
metaTag(charset := "utf-8"), metaTag(charset := "utf-8"),
scriptTag(defer := true, typ := "text/javascript", src := "/static/app.js") metaTag(nameAttr := "viewport", contentAttr := "width=device-width, initial-scale=1"),
scriptTag(defer := true, typ := "text/javascript", src := "/static/app.js"),
titleTag("Scalive Example")
), ),
bodyTag( bodyTag(
content content

View file

@ -33,6 +33,7 @@ final case class LiveRoute[A, ClientEvt: JsonCodec, ServerEvt](
rootLayout( rootLayout(
div( div(
idAttr := id, idAttr := id,
phx.main := true,
phx.session := token, phx.session := token,
lv.el lv.el
) )