docus icon indicating copy to clipboard operation
docus copied to clipboard

Possible issue with useDocus()

Open arkhaiel opened this issue 2 years ago • 2 comments

Hello there,

The situation :

  • in app.config.ts, I have docus.aside.collapsed: true because I want all my asideTree nodes collapsed
  • in some _dir.yml I have aside.collapsed = false so 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
}

arkhaiel avatar Mar 25 '23 11:03 arkhaiel

I updated to the latest version of Docus and Nuxt and it appears the problem is fixed !

arkhaiel avatar Apr 06 '23 12:04 arkhaiel

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 ?

arkhaiel avatar May 03 '23 21:05 arkhaiel