https://kotlinlang.org logo
#dokka
Title
# dokka
i

Ingo

12/08/2023, 11:08 AM
I have had an issue with
###
path prefixes staying in the final Dokka HTML output.
🧵 1
1
I'm using Dokka
1.8.10-with-fixed-urls6
, with a few custom assets and some CSS overrides, with Gradle 8.2.1 like this:
Copy code
apply<DokkaPlugin>()

val docsDir = "$rootDir/buildSrc/src/main/kotlin/plugins/docs"
val logoStyleSheetPath = "$docsDir/logo-styles.css"
val assetPaths = File("$docsDir/assets").walk().map { it.absolutePath }.joinToString { "\"$it\"" }
val customCssPluginConfiguration = Pair(
    "org.jetbrains.dokka.base.DokkaBase",
    """
    {
      "customAssets": [
        $assetPaths
      ],
      "customStyleSheets": ["$logoStyleSheetPath"],
      "separateInheritedMembers": true
    }
    """
)

tasks.withType<DokkaMultiModuleTask>().configureEach {
    pluginsMapConfiguration.set(
        mutableMapOf(customCssPluginConfiguration)
    )

    File("$docsDir/landing-page.md").takeIf { it.exists() }?.let {
        includes.from(it.absolutePath)
    }
}
(The mentioned
assets
directory contains only SVG files.) Now, all generated pages, except the main
index.html
, still contain this breaking code, which results in completely unstyled HTML pages that are missing the entire navigation on the left:
Copy code
<!--[+]cmd:{"@class":"org.jetbrains.dokka.base.templating.PathToRootSubstitutionCommand","pattern":"###","default":""}--><script type="text/javascript" src="###scripts/sourceset_dependencies.js" async></script>
<link href="###styles/style.css" rel="Stylesheet">
<link href="###styles/jetbrains-mono.css" rel="Stylesheet">
<link href="###styles/main.css" rel="Stylesheet">
<link href="###styles/prism.css" rel="Stylesheet">
<link href="###styles/logo-styles.css" rel="Stylesheet">
<script type="text/javascript" src="###scripts/clipboard.js" async></script>
<script type="text/javascript" src="###scripts/navigation-loader.js" async></script>
<script type="text/javascript" src="###scripts/platform-content-handler.js" async></script>
<script type="text/javascript" src="###scripts/main.js" defer></script>
<script type="text/javascript" src="###scripts/prism.js" async></script>
<script type="text/javascript" src="###scripts/symbol-parameters-wrapper_deferred.js" defer></script></head><body>
images/assets<link href="###images/theme-toggle-dark.svg">
<link href="###images/logo-icon.svg">
<link href="###images/theme-toggle-light.svg">
<link href="###styles/logo-styles.css" rel="Stylesheet">
<!--[-]cmd-->
This looks very strange, with
</head><body>images/assets
somewhere in between. I have not touched or toggled
delayTemplateSubstitution
, which was referred to here. Who can tell me what's going on here?
To answer my own question, this was the solution:
Copy code
val assetPaths =
    File("$docsDir/assets").walk().map { it.absolutePath }.filter { File(it).isFile }.joinToString { "\"$it\"" }
The
assets
directory itself was taken along as an asset and evaluated but not passed on, leading to this oddly formatted output.