search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
7.16k stars 2.51k forks source link

Relative alias redirects fail when using SPA and navigating up directories #1241

Open joequincy opened 4 months ago

joequincy commented 4 months ago

Describe the bug I am authoring long-form content that does not use an index.md. Instead, the entrypoint .md for a given dir has frontmatter like

...
aliases:
  - index

This allows me to have a content/ file structure like

content/
  chapters/
    chapter-1-name.md <--(this is aliased to index)
    chapter-2-name.md
    ...
  main-title-of-content.md <--(this is aliased to index)
  other-arbitrary.md
  metadata-pages.md

However when using enableSPA: true, links such as the breadcrumbs that point up one or more directories behave incorrectly. In the example above, the "Home" breadcrumb on /chapters/chapter-n-name will result in the browser navigating to /chapters/main-title-of-content instead of /main-title-of-content.

This appears to be because the content of the redirect is fetch'd and then patched into the current page using minimorph without rewriting the url in the meta tag, causing the redirect to be applied relative to the current path instead of the path the alias resides at.

To Reproduce Steps to reproduce the behavior:

  1. Ensure quartz.config.ts has enableSPA: true
  2. Have a content/ root without index.md
  3. Add a file (e.g. faux-index.md) with frontmatter containing aliases: [index] (or multiline version)
  4. Add a file to a subdirectory (e.g. demo/child-page.md)
  5. Start local server with npx quartz build --serve
  6. Visit the child page in your browser, then click the "Home" breadcrumb

Expected behavior Quartz navigates to the aliased content at the unnested path.

Screenshots and Source I have created a minimal reproduction https://github.com/joequincy/quartz-spa-repro/commit/b64659214988e52f35ebcbb46de7e3a314569569 with two pages. Just run npx quartz build --serve on the repro branch.

Desktop (please complete the following information):

Additional context I have also found what appears to be the source of the issue, and produced a potential fix on my reproduction. https://github.com/joequincy/quartz-spa-repro/commit/36703feb9e2c121945281a4d6b9d3dafa5af8a87 is on a separate potential-fix branch for local testing.

jackyzha0 commented 3 months ago

index is a special file and can't normally be used as an alias target like you are trying to do

aliasing just creates a file with that name that redirects the browser to the original page so in your case the browser fetches and redirects to /demo/main as you saw in your reproduction

this is working as intended albeit could be warned better