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]

using my work computer. it has a vpn set up.

[mcanouil]

it has a vpn set up.

Maybe this is it with some specific rules in your network.

[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.