https://kotlinlang.org logo
Join Slack
Powered by
Are there any kobweb templates, libraries, or samp...
# kobweb
s
Are there any kobweb templates, libraries, or sample projects which support "blog" style content? i.e., something which would bootstrap the following: 1. Date and tag-based content directories 2. Date-based page routing 3. Content rendering from an intermediate format like Markdown 4. Truncating content for previews or directory listings
➕ 1
d
Bootstrapping, no, but https://bitspittle.dev and https://kobweb.varabyte.com/docs are sites driven by markdown
A blog template is a good idea though
The main issue (that I've kicked the can down the road on a bit but I hope to revisit before or right after 1.0) is that Kobweb sites bundle all pages into a single output JS file. So if you plan to have a blog site with thousands of articles, that is currently a problem.
👀 2
s
I'm about to start building my own static site with portfolio and blog entries, so it's great to see what's already out there
d
Sure!
A site that I want to make very soon is a simple "submit your Kobweb project with screenshot, description, and link" place
s
I'm also interested in making a blog-engine library! If I'm already putting in the work to create it, I may as well disambiguate it and see what makes sense to reuse
d
I'd be happy to work with you on how best to do that!
🙏 1
Probably to start check out https://bitspittle.dev and let me know what you generally think about it
s
I guess I'd start by asking if there are any other "content engine" libraries, and if that even makes sense in Kobweb
d
And then look at the 
site/buid.gradle.kts
file to see how it works
Seeing the sort of soltions that people reach out to in other frameworks is a nice idea
and whether it would work in Kobweb as it is today or not is something we'd have to see
s
What specifically do you mean with content engine? Most rich text editors or markdown processors support exporting content as html
s
Some library that abstracts out the vertical of page routing, directory generation, etc in a way that makes sense for a specific type of content
i.e. to build my ideal site, I'd plug in a "portfolio engine" and a "blog engine" which would support rendering out 
Project
and 
Post
data types. Actual HTML rendering would be left to the user, but these content engines would ease the setup burden
s
I assume you want a fully static product in the end? because for more extensive blogs I have them stored in a db along with metadata. then I can create as many routes and filters with my ktor backend as I want
d
Yes, dynamic routes and markdown in a DB can be a great way to write an extensive blog site. Although SEO could be tricky
Also you lose access to being able to embed Kotlin code inside your markdown
In the future I'd like to play with per file compilation and see if that can give Kobweb users the best of both worlds
m
Came to this channel wanting to ask that exact question. Currently on the market for something that takes a bunch of 
.md
blog post files alongside 
.jpeg
images and generates static HTML from that, including pagination, RSS, images optimization, etc... But looks like this is not really Kobweb strong suit at the moment?
d
Hey Martin! Are you talking about dynamic content generation at runtime? Or compile time?
m
Compile time
I don't want to run a server, I want to drop a bunch of 
.html
files in Firebase static hosting or whatever
d
Ah, you want to put the md files inside a db?
My first thought would be to drop the md files into your project somewhere and process them in your build script
m
I don't want a db either, my local filesystem would be the db 😃
build script being Gradle here?
d
Correct
Now in this case, I'm generating additional Kotlin based on the existing markdown files (creating a listing file), but you may be asking about something a bit different.
m
I'm not sure 😅 , I'll dig more
Thanks for the pointers!
Just built the docs website and it gives me a bunch of static files
Copy code
./docs/community/index.html
./docs/community/articles.html
./docs/community/testimonials.html
./docs/community/connecting-with-us.html
./docs/community/contributors.html
./docs/community/submitting-issues-and-feedback.html
./docs/community/supporting-the-project.html
So looks like this is what I was looking for, thanks!
d
That's post export yeah?
m
yes
d
Yep, if that's what you want then Kobweb is a good fit actually
m
Gradle APIs being involved make me a bit itchy though
Can I do this
Copy code
kobweb {
    app {
        index {
            head.add {
                link {
                    rel = "stylesheet"
                    href = "/prism/prism.css"
                }
                script {
                    src = "/prism/prism.js"
                }
                link {
                    rel = "stylesheet"
                    href = "<https://cdn.jsdelivr.net/npm/@docsearch/css@3>"
                }
            }
        }
    }
But outside Gradle?
d
At the moment Kobweb boilerplate generation is tied pretty tightly to Gradle. That information is processed by a Gradle task which is used to generate 
index.html
(you can search for that under the 
site/build
folder).
s
you can still edit head elements in your normal code
👀 1
d
Some day, Kobweb could migrate all that logic over to a different build system -- that's the power of leaning on a CLI, it abstracts away that layer. But today? I wouldn't expect you could
s
Copy code
@Layout
@Composable
fun ClassroomsLayout(ctx: PageContext, content: @Composable () -> Unit) {
    val data = ctx.data.getValue<PageLayoutData>()
    LaunchedEffect(data.title) {
        document.title = data.title
        document.querySelector("""meta[name="og:title"]""")?.setAttribute("content", data.title)
        document.querySelector("""meta[name="description"]""")?.setAttribute("content", data.description)
        document.querySelector("""meta[name="og:description"]""")?.setAttribute("content", data.description)
        document.body?.style?.setProperty("--${scrollbarColor.name}", Theme.secondary.toString())
        document.querySelector("""link[rel="icon"]""")?.setAttribute("href", "/classrooms.ico")
    }
}
👍 1
d
you can still edit head elements in your normal code See also: https://kobweb.varabyte.com/docs/concepts/foundation/page-metadata
(That article is focused more on setting metadata for a page but it's based on the same underlying mechanism)
👍 1
s
actually I'm not sure if I should put this inside a LaunchedEffect as it won't update instantly
d
The gradle build script is good for embedding stuff that should always be present. Doing things inside code may result in a microscopic delay. I think, not 100% sure, but I think doing a kobweb export will still be fine and pick up your launchedeffect changes.
s
yeah it does, site is already up. but while navigating pages there is a slight delay until the title is changed (meta tags aren't visible to the user so I never noticed)
👍 1
9 Views
Open in Slack
PreviousNext
Powered by