We definitely should have an API for defining different `AppBlock.IndexBlock` depending on the route...

# kobweb

[Ayfri]

We definitely should have an API for defining different AppBlock.IndexBlock depending on the route we're currently in. By just adding a property like route or path that would resolve this issue ! Is there any plan for that ? I don't like the current solution that is to replace some composables in the App code using rememberPageContext().route . It seems so hacky for just a small detail

[David Herman]

I'm not sure I understand the issue you're trying to solve. You want to define something in your build.gradle script?

[Ayfri]

I mean, I'm using the app { index { } } block for defining the meta tags for my pages, but some needs to be different depending on the page (for example <link rel="canonical" href="something">, there the href should be the link to the current page, not the exact same for link for all the pages.
But currently AFAIK we can't do that

[David Herman]

You want to be able to configure custom head tags based on the page you're on, in other words?

[Ayfri]

Exactly !

[David Herman]

app { route("/a/b/c") { head.add { ... } } }

[David Herman]

It's an interesting idea, although I'd have to think it through

[David Herman]

Would you mind filing an issue with exactly the problems you want to solve? Maybe show the in app code you're using now that you'd like to eliminate?

[David Herman]

(https://github.com/varabyte/kobweb/issues)

[David Herman]

Besides head tags, I assume you'd want description. Anything else?

[David Herman]

I think it's an intriguing proposal and I can't prioritize it right away but I could see getting this done before 1.0 if there's a clear case for using it to remove boilerplate.

[Ayfri]

With your proposal it would be hard to have something different for each route ?

I would rather want an API like :

app {
    // (A way head.add {} could be simplified also)
    head {
        // here a property "route" is available, it is a String, or maybe an URL to allow more manipulations
        link(href = route.ensureEndsWith("/"), rel = "canonical")
        link(href = "$route.css", rel = "stylesheet")
    }
}

[Ayfri]

That proposal would be exactly what I'm needing for my website, and could help many people for SEO (as we often require tags referencing the page url)

[David Herman]

Everything in the head block is kotlinx html DSL stuff, I can't really do much fancy in there

[David Herman]

Potentially I can declare my own version that delegates to kotlinx html under the hood

[David Herman]

but.... that's a lot of work 🙂

[Ayfri]

Ah, I see, keep me informed on your work about that !

[David Herman]

Sure -- to be honest, an approach like that might be a harder thing to prioritize pre-1.0

[David Herman]

Making my own HTML DSL builder sounds like a lot of work 😛

[David Herman]

even if it's just a subset of everything, I still feel like it opens me up to bug reports in the future I don't want to have to handle!

[David Herman]

But we can use the filed issue to discuss further, maybe there are simple solutions here I'm too tired to see

[Roland]

Something else regarding Head configuration:

Is it somehow possible to override the description meta tag, like the title tag in page?

// for now I solve it this way, but the result is that it only adds an additional description Tag

val description = document.createElement("meta").apply {

setAttribute("name","description")
setAttribute("content", "some description")
}
document.head?.appendChild(description?
// title works straight ahead
document.title = "my title"

Next question:
Is it possible to add more comprehensive links or completely custom tags in build.gradle.kts

For example this like it's possible in page:

val iconApple = document.createElement("link").apply {
            setAttribute("rel", "apple-touch-icon")
            setAttribute("sizes","180x180")
            setAttribute("href", "/apple-touch-icon.png")
        }
        document.head?.appendChild(iconApple)

To be placed in this context:

kobweb.app.index.head.add {}

And lastly: Can we set the document language to something other than "en" ?

[David Herman]

https://github.com/bitspittle/bitspittle.dev/blob/f4e419bf1c017551cc6c1ea7d95b9a1d157c157f/site/src/jsMain/kotlin/dev/bitspittle/site/components/layouts/PageLayout.kt#L52 here's how I update the meta tag in my own site

[David Herman]

Not sure I understand the language question

[Roland]

Thanks for the solution with the description.

Im talking about the second line in HTML file

<HTML lang="en">

I don't know if Google cares, but some SEO Check Tools complaining if the actual language used in text is different.

[David Herman]

Ah, you're absolutely right. This code is about as old as it gets in Kobweb, I hardcoded this a long time ago and forgot about it:

https://github.com/varabyte/kobweb/blob/c7799cc1d8f5c5125af036531fb17cf429c6a334/t[…]m/varabyte/kobweb/gradle/application/templates/IndexTemplate.kt

You can work around this right now by changing the language from code inside your @App block:

@App
@Composable
fun AppEntry(content: @Composable () -> Unit) {
    document.documentElement!!.setAttribute("lang", "fr")

but I'll make sure you can set the language value in the next release of Kobweb (aiming to release in a few days)

[David Herman]

Commit is in: https://github.com/varabyte/kobweb/commit/73a21cbfa71e0c84348974946b9138a43e9a0745

Starting in 0.17.2, you will be able to write this in your site's build script:

kobweb {
  app {
    index {
      lang.set("fr")
    }
  }
}

Sorry for missing your question the first time. Thanks for reporting this!