varabyte/kobweb v0.9.4

on GitHub

This is a pretty major update that's a bit all over the place, driven by work I'm doing on my blog site, so many of these features were standing in the way of supporting behavior useful for real world scenarios.

Note there are a handful of breaking API changes which hopefully most users won't run into, which are called out below. They should be trivial to fix if you run into them. (Once Kobweb hits 1.0, we'll begin deprecating APIs instead of outright deleting them)

Frontend

• Added a bunch of new Modifier extensions...
  • ... including a handful of attribute modifiers that can be applied to all HTML elements
    • hidden, id, title, and a few others like that
  • ... including a bunch of properties for controlling window scroll behavior and snapping
  • ... including a handful of properties related to margin, padding, and text layout
• Link can now wrap arbitrary content, not just text
• Added an uncolored variant for Link which is useful for links you want to de-emphasize, like tasteful buttons in your footer.
• Added the rememberBreakpoint method, which you can use to change the flow of your site depending on your screen width
• Improved support for linking to URLs that are just fragments without a path part (e.g. href=#hello-there)
• Extended Kotlin/JS element class with a clearFocus method.
• Tweaked the Silk dark theme a bit so links are easier to see
• Breaking change: attrModifier and asAttributeBuilder have been renamed to attrsModifier and asAttributesBuilder respectfully.
  • This is more consistent with the underlying Compose for Web APIs, where the class is called AttrsBuilder and it responsible for building a collection of attributes, as opposed to asAttributeBuilder which implies you're only building a single attribute.

Markdown

• Breaking change: Single curly brace syntax has been replaced with a more Kotlin-y style with a preceeding $
  • {.example.inline.Code} -> ${.example.inline.Code}
• Code blocks (e.g. {{{ ... }}}) can now be multiline, so something like this:

      {{{.components.widgets.Note
          Did you know that cats can jump more than six times their length?
          [Sign up here](https://catfacts.madeupsite.com) to subscribe for more!
      }}}
  

  will generate code like

      com.mysite.components.widgets.Note {
         Text("Did you know...")
         Link("https://...", "Sign up here")
         Text(" to subscribe for more!"
      }
  

  which is a nice workaround for the fact that html blocks are not currently supported.
• Header elements now generate an ID derived from their name
  • For example: # Hello there becomes H1(attrs = { id("hello-there") })

Backend

• Fixed an issue where the server would occasionally crash due to a file deserialization issue