An Interest In:
Web News this Week
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
How to use htmx with ktor
1 Clone this repo https://github.com/tom-delalande/html-to-kotlin-converter and open in intellij
2 In the root of that project folder, create input.txt and add the component/html that you want to convert (feel free to pick a component from tailwind), run main in that project and it'll be converted to kotlin ktor html DSL in output.txt (basically, that's the readme of that project lol)
3 in your ktor project (make sure you already added ktor-html from kotlin team), respond to a route like so
call.respondHtml(HttpStatusCode.OK) { head { title { +"tailwind sample" } script { src = "https://cdn.tailwindcss.com" } } body { //paste the output of the input.txt }
4 Some tags are missing, so feel free to add them yourself as such
import kotlinx.html.FlowContentimport kotlinx.html.HTMLTagimport kotlinx.html.HtmlBlockTagimport kotlinx.html.HtmlTagMarkerimport kotlinx.html.TagConsumerimport kotlinx.html.attributesMapOfimport kotlinx.html.visit@HtmlTagMarkerinline fun FlowContent.path(classes : String? = null, crossinline block : PATH.() -> Unit = {}) : Unit = PATH( attributesMapOf("class", classes), consumer).visit(block)@Suppress("unused")open class PATH(initialAttributes : Map<String, String>, override val consumer : TagConsumer<*>) : HTMLTag("path", consumer, initialAttributes, null, false, false), HtmlBlockTag {}
5 done!
Thanks prime for the video, and a big thanks to Tom Delalande for this video https://www.youtube.com/watch?v=9OYn48xBzOY and the code snippets above. Join his discord here if you have more questions https://discord.com/invite/Cg66xQ8KgP
Original Link: https://dev.to/coltonidle/how-to-use-htmx-with-ktor-3740
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To