🔀 Faulty routing of supporting documents when multiple projects are present - article theme

[agahkarakuzu]

The following section ignores the project slug when the served content includes multiple projects, which leads to wrong hyperlinks to respective supporting documents.

You can see https://curve.neurolibre.org/mriscope as an example https://curve.neurolibre.org/literature-overview#main should be https://curve.neurolibre.org/mriscope/literature-overview#main.

myst-theme/packages/site/src/components/DocumentOutline.tsx

Lines 279 to 309 in 2cb619f

	<>
	<div className="my-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
	Supporting Documents
	</div>
	<ul className="flex flex-col gap-2 pl-0 text-sm leading-6 list-none text-slate-700 dark:text-slate-300">
	{pages
	.filter((p) => 'slug' in p)
	.map((p) => {
	return (
	<li key={p.slug}>
	<NavLink
	to={withBaseurl(`/${p.slug}#main`, baseurl)}
	prefetch="intent"
	className={({ isActive }) =>
	classNames('no-underline flex self-center hover:text-blue-700', {
	'text-blue-600': isActive,
	})
	}
	>
	<DocumentChartBarIcon
	width="1.25rem"
	height="1.25rem"
	className="inline mr-2 shrink-0"
	/>
	<span>{p.short_title || p.title}</span>
	</NavLink>
	</li>
	);
	})}
	</ul>
	</>

I fixed it by mapping projects into the context and creating links conditionally. I tested it with both single and multiple projects, works fine. But I am not sure if it is of interest as "projects" will be deprecated, so not sending the PR yet.

    <>
      <div className="my-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
        Supporting Documents
      </div>
      {projects?.map((project) => (
        <div key={project.slug}>
          <ul className="flex flex-col gap-2 pl-0 text-sm leading-6 list-none text-slate-700 dark:text-slate-300">
            {project.pages?.filter((p) => 'slug' in p).map((p) => (
              <li key={p.slug}>
                <NavLink
                  to={withBaseurl(
                    projects.length > 1 ? `/${project.slug}/${p.slug}/#main` : `/${p.slug}/#main`,
                    baseurl
                  )}
                  prefetch="intent"
                  className={({ isActive }) =>
                    classNames('no-underline flex self-center hover:text-blue-700', {
                      'text-blue-600': isActive,
                    })
                  }
                >
                  <DocumentChartBarIcon
                    width="1.25rem"
                    height="1.25rem"
                    className="inline mr-2 shrink-0"
                  />
                  <span>{p.short_title || p.title}</span>
                </NavLink>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </>

[rowanc1]

The article theme was built after the decision to simplify to a single project:site mapping, and is not taking into account projects as you note — it is designed for a single project, an article.

I don't think that we want to introduce that complication to the theme given that we are moving in a simplified direction. Hope that make sense!

[agahkarakuzu]

It totally makes sense, thank you!