Add Edit page link in docs site

[EchoEllet]

Add edit page link

• Fix #24

The design is inspired by Serverpod docs site

See this page.

The design and video demonstration

https://github.com/user-attachments/assets/2a69b8c1-9a1d-42c5-a6f9-9e808356a885

GitHub will ask the user to log in if they click the Edit this page link and they are not logged in on GitHub.

https://github.com/user-attachments/assets/6899c5cb-94d8-427e-b29c-cba6e6b4f1a5

[EchoEllet]

I have added some tests in f46db3a135abd4f2da43c714272353b523fc52f4, but I couldn't get them to run due to a blocker, so I reverted the commit. However, if it's possible to fix it, I can add them back and complete them to cover this feature.

Blocker details

The blocker that a generated file by Kobweb called main.kt, provides styles that are not registered when running a test for a specific composable/widget.

IllegalStateException: Failed to convert a CssStyle to a modifier. Double check that the style was declared at the top-level of your file or registered manually via an `@InitSilk` method.
	at <global>.captureStack(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:117676)
	at <global>.init_kotlin_IllegalStateException(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:120613)
	at IllegalStateException.new_kotlin_IllegalStateException_8zpm09(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:107541)
	at <global>._toModifier(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:96433)
	at <global>.toModifier(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:96407)
	at <global>.Link(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:98427)
	at <global>.EditPageLink(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:102084)
	at <global>.ComposableSingletons$EditPageLinkTestKt$lambda_1$lambda_1riw87(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:101808)
	at ComposableLambdaImpl.invoke_z8di7s(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:53741)
	at <global>.<unknown>(/var/folders/g1/fbqmwzhn52s9xg14756wg6s00000gn/T/_karma_webpack_55938/commons.js:101803)

See the related thread in Discord.

A workaround is to add unit tests instead and extract the link generation logic outside of the UI code.

[EchoEllet]

Closing in favor of https://github.com/varabyte/kobweb-site/commit/392e4f4e8a9476f75f5b483ee72c0c0060483528

[bitspittle]

Thank you for getting this started!

I ended up embedding the path to the markdown file inside the SITE_LISTING global and using that. So no more path hack. This involved updating the gradle build script as well. I also moved the edit link from the bottom of the page to the sidebar, basically taking a cue from Chakra UI, which does it that way and I thought it looked good. As a side effect, this means the edit link only shows up on desktop, but I think that makes sense, because I doubt mobile users will be a major user of this feature.

Finally, I also found a bug with HorizontalDivider's style which I needed to fix in the Kobweb codebase.

This simple change had a lot to consider! I'm very glad this is in though, it feels proper.