Possible issue with useDocus()
Hello there,
The situation :
- in app.config.ts, I have
docus.aside.collapsed: truebecause I want all my asideTree nodes collapsed - in some _dir.yml I have
aside.collapsed = falseso I can expand only few asideTree nodes
I noticed that when I hard refresh a page :
- click on a page which is in a folder with
aside.collapsed = false, all the asideTree nodes expand - click on a page which is not in a folder with
aside.collapsed = false, the asideTree nodes return to their normal state (either expanded or collapsed)
I understand there might be an overwrite for the collapsed option.
I went to useDocus.ts and looked into the computed config.
I see how the return is built :
return {
// Raw appConfig
...docus.value,
// Merged attributes
titleTemplate,
main: {
...main,
...navKeyFromPath(route.path, 'main', navigation.value || []),
...page.value?.main
} as typeof main,
header: {
...header,
...navKeyFromPath(route.path, 'header', navigation.value || []),
...page.value?.header
} as typeof header,
aside: {
...aside,
...navKeyFromPath(route.path, 'aside', navigation.value || []),
...page.value?.aside
} as typeof aside,
footer: {
...footer,
...navKeyFromPath(route.path, 'footer', navigation.value || []),
...page.value?.footer
} as typeof footer
}
I added these lines before the return :
console.log("hello from aside")
console.log({...aside})
console.log({...navKeyFromPath(route.path, 'aside', navigation.value || [])})
console.log({...page.value?.header})
console.log({...aside,
...navKeyFromPath(route.path, 'aside', navigation.value || []),
...page.value?.aside})
and in the console, I see that the value from navKeyFromPath overwrites the ...aside return value, so the local collapsed state becomes the global config collapsed state.
So, if I click on a page for which navKeyFromPath returns collapsed: false (for example because the _dir.yml of the enclosing folder says so), all the asideTree nodes expand.
It's only an observation and I don't know how to fix this. There might be other overwriting issues from this observation.
I tried modifying the order of the spreading lines :
aside: {
...navKeyFromPath(route.path, 'aside', navigation.value || []),
...aside,
...page.value?.aside
} as typeof aside,
And it might work as expected, but I'm not experienced enough to be sure of what I'm doing.
PS : the value of config returned by useDocus() is used here for the collapsed state :
const isCollapsed = (link: any) => {
if (link.children) {
// Directory has been toggled manually, use its state
if (typeof collapsedMap.value[link._path] !== 'undefined') {
return collapsedMap.value[link._path]
}
// Check if aside.collapsed has been set in YML
if ([true, false].includes(link?.aside?.collapsed)) { return link.aside.collapsed }
// Return value grabbed from the link
if (link?.collapsed) { return link?.collapsed }
if (config?.value?.aside?.collapsed) { return config.value.aside?.collapsed }
}
return false
}
I updated to the latest version of Docus and Nuxt and it appears the problem is fixed !
Actually I still have the problem. If the global docus.aside.collapsed: true and aside.collapsed: false in the YML header of a MD file, all the folders expand in the asideTree component.
{
"name": "docus-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"generate": "nuxi generate",
"preview": "nuxi preview",
"lint": "eslint ."
},
"devDependencies": {
"@nuxt-themes/docus": "^1.10.1",
"nuxt": "^3.4.1",
"rehype-katex": "^6.0.2",
"remark-math": "^5.1.1"
},
"dependencies": {
"follow-redirects": "^1.15.2",
"nuxt-content-assets": "^1.3.2"
}
}
@Tahul do you think there might be a global overwrite of the collapsed state by a local collapsed in the way useDocus() is written ?