Quarto website navigation issue

[aelmokadem]

Hi,

First of all, great work on quarto. It is amazing with incredible features so credit goes to everyone working on it.

I am having an issue and wasn't sure if it is something I am doing wrong or a bug so decided to not tag this as the latter. I have a website (structure below) and I can switch between the home page and other pages just fine but I cannot navigate between those other pages without having to go to the home page. Please, let me know if I need to provide any more info?

Appreciate the help.

Here is the navigation bar: (I can move from Home to Blog and vice versa, for example, but I cannot navigate from Blogs to Papers or Books or vice versa and I get a warning message below)

The warning message

WARN: connection closed before message completed

Here are _quarto.yml file

project:
  type: website

website:
  title: "Ahmed Elmokadem"
  site-url: https://github.com/aelmokadem/aelmokadem
  navbar:
    left:
      - href: index.qmd
        text: Home
      #- about.qmd
      - href: papers
        text: Papers
      - href: posts
        text: Blogs
      - href: books
        text: Books

format:
  html:
    theme:
      #- cosmo
      #- cerulean
      - flatly
      #- minty
      #- sketchy
      #- spacelab
      #- morph
      - brand
    css: styles.css
    toc: true

This is the preamble in the index.qmd file in the root directory

---
title: "Ahmed Elmokadem"
about:
    template: trestles
    links:
        - icon: linkedin
          url: https://www.linkedin.com/in/ahmed-elmokadem-87b01875/
        - icon: github
          url: https://github.com/aelmokadem 
        - text: "{{< ai orcid >}}"
          url: https://orcid.org/0000-0002-2412-4986   
        - text: "{{< ai google-scholar >}}"
          url: https://scholar.google.com/citations?user=1tqhtzMAAAAJ&hl=en 
        - text: "{{< fa envelope >}}"
          url: mailto:[email protected]
image: img/my-photo.png
image-shape: round
---

This is the index.qmd in the posts directory:

---
title: "Blogs"
listing:
  categories: true
  contents:
  - '*.qmd'
  feed: true
  filter-ui: false
  sort: date desc
  sort-ui: false
  type: default
page-layout: full
---

quarto check

Quarto 1.6.40
[✓] Checking environment information...
      Quarto cache location: /Users/ahmede/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.6.40
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /opt/homebrew/bin
      Version: undefined

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.0
      Path: /Users/ahmede/.pyenv/versions/3.12.0/bin/python3
      Jupyter: 5.7.2
      Kernels: julia-1.11, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.4.2
      Path: /opt/homebrew/Cellar/r/4.4.2_2/lib/R
      LibPaths:
        - /opt/homebrew/lib/R/4.4/site-library
        - /opt/homebrew/Cellar/r/4.4.2_2/lib/R/library
      knitr: (None)
      rmarkdown: (None)

      The knitr package is not available in this R installation.
      Install with install.packages("knitr")
      The rmarkdown package is not available in this R installation.
      Install with install.packages("rmarkdown")

My website structure

└── 📁my-website
    └── 📁books
        └── cover-dreamers.png
        └── cover-numbers.png
        └── index.qmd
    └── 📁img
        └── my-photo.png
    └── 📁papers
        └── bibliography.bib
        └── index.qmd
    └── 📁posts
        └── _metadata.yml
        └── .DS_Store
        └── index.qmd
        └── 📁tes2
            └── index.qmd
            └── thumbsup-pill3.jpeg
        └── 📁test
            └── index.qmd
            └── thumbsup-pill2.jpeg
    └── _quarto.yml
    └── .DS_Store
    └── .gitignore
    └── about.qmd
    └── index.qmd
    └── styles.css

[mcanouil]

In the future, please prefer the discussion board rather than using the blank issue template. Thank you for your understanding.

Note that we can't use your "structure" as it would require a lot of time to try to replicate it without any guarantee to end up with the same thing.

Please provide something small and reproducible.
You can use the default project to try to reproduce your issue, then share a Git repository with that small example.

Meanwhile I'm converting this as a discussion.

[aelmokadem]

Thanks for the response. I have attached here a zipped folder with a minimal example that reproduces the issue (if you are in Posts you can't switch to Papers and vice versa). Please, let me know if I can do anything else to help.

test.zip

[mcanouil]

site-url: https://github.com/aelmokadem/aelmokadem

site-url is the base site/domain where the site is served, not the GitHub repository in which you host the code.

[aelmokadem]

yeah that's a good point. I will try to preview it on a different computer and see if the issue persists.

Again, thanks a lot for your help and looking into this.

[bradfordjohnson]

I'm having a similar issue that started just about a day or two ago.

I can navigate from / to /data/ but the initial navigation fails and throws WARN: connection closed before message completed. It then reloads /. After this initial warning I'm able to navigate and load /data/. The same thing happens when I try to load /about/ for the first time below.

Preparing to preview

Watching files for changes
Browse at http://localhost:6050/
GET: /
GET: /data/
WARN: connection closed before message completed
GET: /
GET: /data/
GET: /data/projects/tidytuesday/
GET: /photography/
GET: /about/
WARN: connection closed before message completed
GET: /photography/
GET: /about/

Obviously this is only when previewing the site, no issues when I fully render and view where it is served (I use GitHub pages and it's working as intended). Appears that quarto it trying to re-render my page when previewing and the output is not quite ready for the browser.

I come to this conclusion since I can see the temporary index_files dir get created where /data.qmd is located when I navigate to the /data/ page initially, and the render popup where it seems to not render in time.

[bradfordjohnson]

I deleted the following directories and ran quarto preview - did not have any issues loading pages on when previewing my site.

• _freeze/
• .quarto/
• docs/ (output dir)

It recreates these directories and after interrupting the preview I got the WARN: connection closed before message completed on the next preview.

Edit: copying my project and trying R Studio instead of VS code I do notice that when building / rendering the site it uses quarto preview --render all --no-watch-inputs --no-browse. Had no issues at all even with multiple sessions, back in VS Code using just quarto preview --render all --no-watch-inputs appears to be working.

[xx02al]

Hmm, I have the feeling that this is a tricky issue. For a few days now, I've been observing similar behavior as described above when previewing a Quarto website project I created some time ago locally. Basically we are locked in a navigation item and the message WARN: connection closed before message completed is displayed in the terminal.

I've now spent about three hours trying to force this behavior on a new Quarto website project. Without having found a solution, and with no other ideas at the moment, I am writing this comment. I started with the very initial Quarto Create Project Website template and added elements to it step by step. I did so both as a GitHub repository and without. In the end, I had copied and pasted all my original website files and documents into the new project as well as in the original project deleted and recreated things like .quarto/ or _site. While everything worked as expected in the new project, i.e. without the errors we are talking about here, the original project remains to error.

I may not have tried everything possible, but what came to mind. What I haven't done - and what I won't do for the time being - is to delete the original repo and recreate it.

Edit: Still confused I came back to it a few hours later, again created a new project, then copied and pasted everything (what at the end of the previous attempts worked fine) - and now the error is there too. quarto preview and inspecting the resulting website in a browser (most of the times) works, looking at the website in Positron Viewer or RStudio Viewer always locks with message WARN: connection closed before message completed. But I don't know why.

For the records a few version notes: during my exploration I was using quarto version 1.7.23, R version 4.5.0, Positron version 2025.04.0, RStudio version 2024.12.1

[cameronraysmith]

@xx02al you're probably experiencing an instance of something that is essentially equivalent to what is reported in #9933 and elsewhere.

As noted in #9933 (comment) , the workaround, problematic for large sites, is to completely rerender the html each time you make a change with

quarto preview --render html

See also #2795, #11475, #10382, #10392, #12144 (thanks to @benkeks for collating these). It seems from the thread in #11475 (comment) that the developers are very well aware of the issue.

we are fixing it. But it really does require pretty fundamental changes to the code base. The fundamental problem is that we need to collect centralized, accurate information about which files in the file system will affect the final page, when each page is ultimately composed by a large, complex process that involves at least two separate subsystems

#2795 (comment)
#2795 (comment)

Another workaround is to try to resist the temptation to frequently preview your site ;).